/* ==========================================================================
   vega-theme.css — Vega Master Panel Design System
   Replaces custom.css + modern-theme.css
   Requires: bootstrap.css, font-awesome, plugin CSS files
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Doygun koyu mavi palet */
  --primary:         #0D4D9A;
  --primary-dark:    #083971;
  --primary-light:   #D7E7FB;

  --sidebar-bg:      #07152B;
  --sidebar-text:    #D5E2F3;
  --sidebar-hover:   rgba(255, 255, 255, 0.08);
  --sidebar-active:  rgba(13, 77, 154, 0.40);
  --sidebar-width:   270px;
  --sidebar-sm:      64px;

  --topnav-bg:       #FFFFFF;
  --topnav-height:   58px;

  --body-bg:         #EDF3FB;
  --card-bg:         #FFFFFF;
  --border:          #C6D6EA;
  --radius:          10px;
  --radius-sm:       8px;

  --text:            #14253B;
  --text-muted:      #4C607A;
  --text-light:      #8EA4C2;

  --success:         #059669;
  --success-dark:    #047857;
  --success-glow:    rgba(5, 150, 105, 0.25);

  --warning:         #d97706;
  --warning-dark:    #b45309;
  --warning-glow:    rgba(217, 119, 6, 0.25);

  --danger:          #dc2626;
  --danger-dark:     #b91c1c;
  --danger-glow:     rgba(220, 38, 38, 0.25);

  --info:            #0284c7;
  --info-dark:       #0369a1;
  --info-glow:       rgba(2, 132, 199, 0.25);

  --shadow-sm:       0 1px 3px rgba(0, 0, 0, .06);
  --shadow:          0 2px 6px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
  --shadow-button:   0 4px 10px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-button-hover: 0 12px 24px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .08);

  --transition:      0.2s ease;
  --transition-emphasis: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text) !important;
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* --------------------------------------------------------------------------
   3. Layout Structure
   -------------------------------------------------------------------------- */

/* Bootstrap .container'ın max-width + auto-margin davranışını sıfırla */
.container.body {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-height: 100vh;
  overflow-x: hidden;
}

.main_container {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
.col-md-3.left_col {
  width: var(--sidebar-width);
  min-height: 100vh;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--sidebar-bg);
  z-index: 1000;
  transition: width var(--transition);
  overflow: hidden;
}

.left_col .scroll-view {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

@media (min-width: 992px) {
  .left_col .scroll-view {
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }
}

.left_col .scroll-view::-webkit-scrollbar {
  width: 4px;
}
.left_col .scroll-view::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* Logo / Site Title */
.navbar.nav_title {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  margin: 0;
  min-height: auto;
}

.site_title {
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.site_title img.left-menu-logo2 {
  width: 130px;
  height: auto;
  opacity: 0.95;
  transition: opacity var(--transition);
  flex-shrink: 0;
}

.site_title:hover img {
  opacity: 1;
}

/* Sidebar spacer */
.left_col .clearfix + br {
  display: none;
}

/* Sidebar Menu */
#sidebar-menu {
  margin-top: 8px;
  padding-bottom: 40px;
}

.menu_section {
  padding: 0;
}

.menu_section h3 {
  display: none;
}

/* Main menu items */
.nav.side-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav.side-menu > li {
  margin: 2px 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.nav.side-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.nav.side-menu > li > a i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--text-light);
  transition: color var(--transition);
}

.nav.side-menu > li > a .fa-chevron-down {
  margin-left: auto;
  font-size: 11px;
  transition: transform var(--transition);
  flex-shrink: 0;
}

.nav.side-menu > li > a:hover,
.nav.side-menu > li > a:focus {
  background: var(--sidebar-hover);
  color: #fff;
}


.nav.side-menu > li > a:hover i,
.nav.side-menu > li > a:focus i {
  color: #fff;
}

.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a {
  background: var(--sidebar-active);
  color: #fff;
  box-shadow: inset 3px 0 0 #5B9CF6;
  position: relative;
}

.nav.side-menu > li.active > a i {
  color: #5B9CF6;
}

/* Active item subtle glow */
.nav.side-menu > li.active > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background: #5B9CF6;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(91, 156, 246, 0.5);
}

/* Open state chevron rotation */
.nav.side-menu > li.active > a .fa-chevron-down {
  transform: rotate(180deg);
}

/* Child menu (dropdown) — JS (custom.js slideDown/slideUp) yönetiyor */
.nav.child_menu {
  display: none;
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.nav.child_menu li {
  margin: 0;
}

.nav.child_menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 42px;
  color: #7B93B4;
  font-size: 13px;
  font-weight: 400;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

.nav.child_menu li a i {
  font-size: 13px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.nav.child_menu li a:hover,
.nav.child_menu li a:focus {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.nav.child_menu li.active a,
.nav.child_menu li.current-page a {
  color: #fff;
  background: rgba(13, 77, 154, 0.25);
  box-shadow: inset 3px 0 0 #5B9CF6;
}

/* --------------------------------------------------------------------------
   5. Sidebar Collapsed State (nav-sm)
   -------------------------------------------------------------------------- */

/* Daralt — overflow: visible bırakıyoruz ki child_menu flyout çalışsın */
.nav-sm .col-md-3.left_col {
  width: var(--sidebar-sm);
  overflow: visible;
}

/* Scroll-view de visible — flyout'un dışarı taşmasına izin ver */
.nav-sm .left_col .scroll-view {
  overflow: visible;
}

/* ---- Menü öğeleri: font-size:0 ile text node'ları gizle ---- */
/* (Text node'lar span içinde değil, bu yüzden font-size:0 en güvenilir yöntem) */
.nav-sm .nav.side-menu > li {
  position: relative;
  margin: 2px 4px;
}

.nav-sm .nav.side-menu > li > a {
  font-size: 0;           /* text node'ları gizler */
  padding: 0;
  height: 44px;
  justify-content: center;
  gap: 0;
  border-radius: var(--radius-sm);
}

/* İkon boyutunu geri yükle */
.nav-sm .nav.side-menu > li > a i {
  font-size: 17px;
  width: auto;
  color: var(--text-light);
}

.nav-sm .nav.side-menu > li > a:hover i,
.nav-sm .nav.side-menu > li > a:focus i,
.nav-sm .nav.side-menu > li.active > a i {
  color: #fff;
}

/* Chevron tamamen gizle */
.nav-sm .nav.side-menu > li > a .fa-chevron-down {
  display: none !important;
}

/* ---- Logo: inline style="width:130px" yi !important ile ez ---- */
.nav-sm .site_title {
  padding: 0;
  justify-content: center;
  height: 58px;
}

.nav-sm .site_title img.left-menu-logo2 {
  width: 36px !important;
  max-width: 36px !important;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}

/* ---- Child menu flyout — hover'da sağda göster ---- */
.nav-sm .nav.child_menu {
  position: absolute;
  left: var(--sidebar-sm);
  top: 0;
  min-width: 190px;
  background: #1e293b;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-md);
  z-index: 2000;
  display: none !important;
}

.nav-sm .nav.side-menu > li:hover > .nav.child_menu {
  display: block !important;
}

/* Child menu içindeki linklerde font-size'ı geri yükle */
.nav-sm .nav.child_menu li a {
  font-size: 13px;
  padding: 10px 16px 10px 16px;
}

/* --------------------------------------------------------------------------
   6. Top Navigation
   -------------------------------------------------------------------------- */
.top_nav {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topnav-height);
  background: var(--topnav-bg);
  border-bottom: 1px solid var(--border);
  z-index: 999;
  box-shadow: var(--shadow-sm);
  transition: left var(--transition);
}

.nav-sm .top_nav {
  left: var(--sidebar-sm);
}

.nav_menu {
  height: 100%;
  display: flex;
  align-items: center;
}

.nav_menu nav {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

/* Hamburger toggle */
.nav.toggle {
  display: flex;
  align-items: center;
}

#menu_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-size: 16px;
}

#menu_toggle:hover {
  background: var(--body-bg);
  color: var(--text);
}

/* Right-side nav items */
.nav.navbar-nav.navbar-right {
  margin-left: auto;
  display: flex !important;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

.nav.navbar-nav.navbar-right > li {
  display: flex;
  align-items: center;
}

/* Top nav action area */
.topnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logout button */
#UserLogout,
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background-color: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.76) 100%), linear-gradient(120deg, rgba(254, 226, 226, 0.82) 0%, rgba(254, 202, 202, 0) 62%);
  color: var(--danger);
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), var(--shadow-button);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, 0% 50%;
  transition: transform var(--transition-emphasis), box-shadow var(--transition-emphasis), background-color var(--transition), border-color var(--transition), color var(--transition), background-position .55s cubic-bezier(0.22, 1, 0.36, 1);
}

#UserLogout:hover,
.btn-logout:hover {
  background-color: #fef2f2;
  border-color: var(--danger);
  color: var(--danger);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--shadow-button-hover);
  background-position: 0 0, 100% 50%;
}

/* User button */
.btn-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background-color: var(--body-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.48) 100%), linear-gradient(120deg, rgba(215, 231, 251, 0.64) 0%, rgba(255, 255, 255, 0) 62%);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), var(--shadow-button);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, 0% 50%;
  transition: transform var(--transition-emphasis), box-shadow var(--transition-emphasis), background-position .55s cubic-bezier(0.22, 1, 0.36, 1), border-color var(--transition), color var(--transition);
}

/* Şefim Panel button */
.top_nav .btn-success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  background-color: var(--success);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 62%);
  color: #fff;
  border: 1px solid var(--success);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-button);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, 0% 50%;
  transition: transform var(--transition-emphasis), box-shadow var(--transition-emphasis), background-color var(--transition), border-color var(--transition), color var(--transition), background-position .55s cubic-bezier(0.22, 1, 0.36, 1);
}

.top_nav .btn-success:hover {
  background-color: var(--success-dark);
  border-color: var(--success-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--shadow-button-hover);
  background-position: 0 0, 100% 50%;
}

/* --------------------------------------------------------------------------
   7. Content Area
   -------------------------------------------------------------------------- */
.right_col {
  margin-left: var(--sidebar-width);
  margin-top: var(--topnav-height);
  min-height: calc(100vh - var(--topnav-height));
  width: calc(100% - var(--sidebar-width));
  padding: 24px;
  transition: margin-left var(--transition), width var(--transition);
  box-sizing: border-box;
}

.nav-sm .right_col {
  margin-left: var(--sidebar-sm);
  width: calc(100% - var(--sidebar-sm));
}

.dashboard_graph {
  /* inner content wrapper */
}

/* --------------------------------------------------------------------------
   8. Cards & Panels
   -------------------------------------------------------------------------- */
.x_panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: box-shadow var(--transition);
}

.x_panel:hover {
  box-shadow: var(--shadow);
}

.x_title {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius: var(--radius) var(--radius) 0 0;
}

.x_title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.x_title h2 small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 6px;
  font-weight: 400;
}

.x_content {
  padding: 18px;
}

/* panel_toolbox — x_title içinde sağa hizalı aksiyon alanı */
.panel_toolbox {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* x_title içindeki clearfix flex'te gereksiz — gizle */
.x_title > .clearfix {
  display: none;
}

/* Collapse / expand link inside panel */
.collapse-link {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background var(--transition);
}

.collapse-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: #fff;
  --btn-border: var(--border);
  --btn-text: var(--text);
  --btn-highlight: rgba(255, 255, 255, 0.88);
  --btn-glow: rgba(13, 77, 154, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  cursor: pointer;
  background-color: var(--btn-bg);
  background-image: linear-gradient(180deg, var(--btn-highlight) 0%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0) 100%), linear-gradient(120deg, var(--btn-glow) 0%, rgba(255, 255, 255, 0) 62%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, 0% 50%;
  color: var(--btn-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-button);
  transition: transform var(--transition-emphasis), box-shadow var(--transition-emphasis), background-color var(--transition), background-position .55s cubic-bezier(0.22, 1, 0.36, 1), border-color var(--transition), color var(--transition), filter var(--transition);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), var(--shadow-button-hover);
  background-position: 0 0, 100% 50%;
  filter: saturate(1.03);
}

.btn:active {
  transform: translateY(0) scale(0.985);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(15, 23, 42, 0.12);
  filter: none;
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 3px rgba(13, 77, 154, 0.16), var(--shadow-button);
}

.btn-default {
  --btn-bg: #fff;
  --btn-border: var(--border);
  --btn-text: var(--text);
  --btn-highlight: rgba(255, 255, 255, 0.9);
  --btn-glow: rgba(13, 77, 154, 0.08);
}
.btn-default:hover {
  --btn-bg: #f8fbff;
  --btn-border: #b8cce5;
  --btn-text: var(--text);
}

.btn-primary {
  --btn-bg: var(--primary);
  --btn-border: var(--primary);
  --btn-text: #fff;
  --btn-highlight: rgba(255, 255, 255, 0.22);
  --btn-glow: rgba(255, 255, 255, 0.12);
}
.btn-primary:hover,
.btn-primary:focus {
  --btn-bg: var(--primary-dark);
  --btn-border: var(--primary-dark);
  --btn-text: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px rgba(13, 77, 154, 0.3), 0 2px 6px rgba(13, 77, 154, 0.15);
}

.btn-success {
  --btn-bg: var(--success);
  --btn-border: var(--success);
  --btn-text: #fff;
  --btn-highlight: rgba(255, 255, 255, 0.22);
  --btn-glow: rgba(255, 255, 255, 0.1);
}
.btn-success:hover,
.btn-success:focus {
  --btn-bg: var(--success-dark);
  --btn-border: var(--success-dark);
  --btn-text: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px var(--success-glow), 0 2px 6px rgba(5, 150, 105, 0.15);
}

.btn-danger {
  --btn-bg: var(--danger);
  --btn-border: var(--danger);
  --btn-text: #fff;
  --btn-highlight: rgba(255, 255, 255, 0.2);
  --btn-glow: rgba(255, 255, 255, 0.08);
}
.btn-danger:hover,
.btn-danger:focus {
  --btn-bg: var(--danger-dark);
  --btn-border: var(--danger-dark);
  --btn-text: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px var(--danger-glow), 0 2px 6px rgba(220, 38, 38, 0.15);
}

.btn-warning {
  --btn-bg: var(--warning);
  --btn-border: var(--warning);
  --btn-text: #fff;
  --btn-highlight: rgba(255, 255, 255, 0.22);
  --btn-glow: rgba(255, 255, 255, 0.1);
}
.btn-warning:hover,
.btn-warning:focus {
  --btn-bg: var(--warning-dark);
  --btn-border: var(--warning-dark);
  --btn-text: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px var(--warning-glow), 0 2px 6px rgba(217, 119, 6, 0.15);
}

.btn-info {
  --btn-bg: var(--info);
  --btn-border: var(--info);
  --btn-text: #fff;
  --btn-highlight: rgba(255, 255, 255, 0.2);
  --btn-glow: rgba(255, 255, 255, 0.08);
}
.btn-info:hover,
.btn-info:focus {
  --btn-bg: var(--info-dark);
  --btn-border: var(--info-dark);
  --btn-text: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px var(--info-glow), 0 2px 6px rgba(2, 132, 199, 0.15);
}

.btn-sm {
  min-height: 32px;
  padding: 6px 13px;
  font-size: 12px;
  border-radius: 8px;
}

.btn-lg {
  min-height: 44px;
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 12px;
}

.btn-xs {
  min-height: 26px;
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 6px;
}

.btn[disabled],
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
  background-position: 0 0, 0% 50%;
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 77, 154, 0.12);
}

.form-control[disabled],
.form-control[readonly] {
  background: #f8fafc;
  color: var(--text-muted);
}

textarea.form-control {
  height: auto;
  resize: vertical;
  min-height: 80px;
}

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: inline-block;
}

/* Input groups */
.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  vertical-align: middle;
}

.input-group .form-control:not(:first-child) {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group .form-control:not(:last-child) {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group-addon:first-child {
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group-addon:last-child {
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ==============================================
   Select2 — Tam Modern Override
   ============================================== */

.select2-container--default {
  font-size: 13.5px;
}

/* ---- Tek seçim (single) ---- */
.select2-container--default .select2-selection--single {
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(13, 77, 154, 0.12) !important;
  outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  padding-left: 12px !important;
  color: var(--text) !important;
  font-size: 13.5px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
}

/* allowClear: temizleme (×) ile ok çakışmasın */
.select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--danger, #dc3545);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 44px !important;
}

/* ---- Çoklu seçim (multiple) — container ---- */
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  min-height: 36px !important;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  padding: 2px 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(13, 77, 154, 0.12) !important;
  outline: none;
}

/* ---- Seçili tag'lar (choice) ---- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary) !important;
  border: 1px solid var(--primary-dark) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 2px 8px 2px 6px !important;
  margin: 2px 3px !important;
  font-size: 12.5px !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  color: #fff !important;
}

/* ---- Tag kaldır (×) butonu ---- */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.75) !important;
  border: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1;
  margin-right: 2px !important;
  padding: 0 !important;
  cursor: pointer;
  order: -1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff !important;
  background: transparent !important;
}

/* ---- Arama kutusu (multiple içi) ---- */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  color: var(--text) !important;
  font-size: 13px;
  margin-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: var(--text-muted);
}

/* ---- Dropdown kutusu ---- */
.select2-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  background: #fff;
  overflow: hidden;
}

/* Dropdown üst arama kutusu */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(13, 77, 154, 0.1) !important;
}

/* ---- Dropdown seçenekleri ---- */
.select2-results__option {
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}

/* Hover / highlighted */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Seçili öğe dropdown'da */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: 500;
}

/* Seçili + hover */
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background-color: var(--primary-dark) !important;
  color: #fff !important;
}

/* Grup başlığı */
.select2-results__group {
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

/* "Sonuç yok" mesajı */
.select2-results__message,
.select2-container--default .select2-results__option--disabled {
  color: var(--text-muted) !important;
  font-style: italic;
  font-size: 13px !important;
}

/* Yükleniyor */
.select2-container--default .select2-results__option.loading-results {
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   11. Tables & DataTables
   -------------------------------------------------------------------------- */
.table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--text);
}

.table th,
.table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-top: 1px solid var(--border);
}

.table thead th {
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--primary);
  border-bottom: 1px solid var(--primary-dark);
  white-space: nowrap;
  vertical-align: middle;
}

.table-bordered {
  border: none;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.table-bordered th,
.table-bordered td {
  border-top: none;
  border-left: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.table-bordered th:first-child,
.table-bordered td:first-child {
  border-left: 1px solid var(--border);
}

.table-bordered thead tr:first-child th,
.table-bordered thead tr:first-child td,
.table-bordered tbody tr:first-child th,
.table-bordered tbody tr:first-child td {
  border-top: 1px solid var(--border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #f8fafc;
}

.table > tbody > tr {
  transition: background var(--transition), box-shadow var(--transition);
}

.table > tbody > tr:hover {
  background: linear-gradient(90deg, rgba(13, 77, 154, 0.07) 0%, rgba(13, 77, 154, 0.03) 100%);
  box-shadow: inset 3px 0 0 var(--primary);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.table-responsive > .table {
  margin-bottom: 0;
}

.vega-branch-table-scroll {
  max-height: 480px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* Bootstrap 3 @media max-width:767px sets overflow-y:hidden on .table-responsive
   which breaks sticky headers — override it explicitly */
@media screen and (max-width: 767px) {
  .vega-branch-table-scroll {
    overflow-y: auto;
  }
}

.vega-branch-table-scroll .table-responsive {
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.vega-branch-table-scroll .table {
  margin-bottom: 0;
}

.vega-branch-table-scroll .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--border);
}

.selfout-parameters-table-scroll {
  max-height: min(62vh, 720px);
  overflow-y: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* overflow:hidden üzerindeki table-bordered sticky'yi kırıyor — override et */
.selfout-parameters-table-scroll .table-bordered {
  overflow: visible;
  border-radius: 0;
  border: none;
}

.selfout-parameters-table-scroll .table {
  margin-bottom: 0;
}

.selfout-parameters-table-scroll .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary-dark);
}

/* DataTables styling */
.dataTables_wrapper {
  font-size: 13.5px;
  color: var(--text);
  padding-top: 14px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  background: #fff;
  transition: border-color var(--transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 77, 154, 0.1);
}

.dataTables_wrapper .dataTables_info {
  font-size: 12.5px;
  color: var(--text-muted);
  padding-top: 8px;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 4px 10px !important;
  margin: 0 2px;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  font-size: 13px;
  color: var(--text) !important;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-light) !important;
  cursor: default;
  border-color: var(--border) !important;
  background: #f8fafc !important;
}

/* DataTables buttons */
.dt-buttons .dt-button {
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: opacity var(--transition);
  margin-right: 4px;
}

.dt-buttons .dt-button:hover {
  opacity: 0.88 !important;
}

/* DataTables scroll container — border-radius & shadow */
.dataTables_scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dataTables_scrollHead {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden !important;
  background: var(--primary);
}

.dataTables_scrollBody {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* scrollX için oluşan wrapper — kendi border'ı olmasın */
.dataTables_scrollBody .table-bordered {
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   12. Modals
   -------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.modal-header .modal-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.modal-header .close {
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-header .close:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
  font-size: 14px;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Panel modals — bildirim modalları (Hata / Uyarı / Başarılı) */
.modal-content.panel-danger,
.modal-content.panel-warning,
.modal-content.panel-success {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  border: none;
}

/* Ortak header düzeni: başlık sol, X sağ */
.modal-content.panel-danger .modal-header,
.modal-content.panel-danger > .panel-heading,
.modal-content.panel-warning .modal-header,
.modal-content.panel-warning > .panel-heading,
.modal-content.panel-success .modal-header,
.modal-content.panel-success > .panel-heading {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: none;
}

/* Bootstrap 3: DOM'da close önce gelir → flex order ile sağa taşı */
.modal-content.panel-danger .modal-header .close,
.modal-content.panel-warning .modal-header .close,
.modal-content.panel-success .modal-header .close {
  order: 2;
  float: none;
  margin-left: auto;
  color: #fff;
  opacity: .85;
  font-size: 22px;
  line-height: 1;
  text-shadow: none;
}
.modal-content.panel-danger .modal-header .close:hover,
.modal-content.panel-warning .modal-header .close:hover,
.modal-content.panel-success .modal-header .close:hover {
  opacity: 1;
}
/* style.bundle.css (Metronic) adds a LineAwesome ::before icon on .close —
   suppress it so only our × text renders (avoids double ×× ) */
.modal-content.panel-danger .modal-header .close::before,
.modal-content.panel-warning .modal-header .close::before,
.modal-content.panel-success .modal-header .close::before {
  content: none;
}

.modal-content.panel-danger .modal-header .modal-title,
.modal-content.panel-warning .modal-header .modal-title,
.modal-content.panel-success .modal-header .modal-title {
  order: 1;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

/* Modal body */
.modal-content.panel-danger .modal-body,
.modal-content.panel-warning .modal-body,
.modal-content.panel-success .modal-body {
  padding: 20px 24px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}

/* Renk: Hata — kırmızı */
.modal-content.panel-danger .modal-header,
.modal-content.panel-danger > .panel-heading {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
}

/* Renk: Uyarı — amber */
.modal-content.panel-warning .modal-header,
.modal-content.panel-warning > .panel-heading {
  background: linear-gradient(135deg, #D97706, #B45309);
}

/* Renk: Başarılı — yeşil */
.modal-content.panel-success .modal-header,
.modal-content.panel-success > .panel-heading {
  background: linear-gradient(135deg, #059669, #047857);
}

.modal-header-primary {
  background: #1E3A5F;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.modal-header-primary .modal-title {
  color: #fff;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.modal-header-primary .modal-title i {
  margin-right: 8px;
}
.modal-header-primary .close {
  color: #fff;
  opacity: .8;
  font-size: 20px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  line-height: 1;
  float: none;
}
.modal-header-primary .close:hover {
  color: #fff;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   29. Change Password Modal
   -------------------------------------------------------------------------- */
#modalChangePassword .modal-content {
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
#modalChangePassword .modal-body {
  padding: 24px 24px 8px;
}
#modalChangePassword .modal-body label {
  font-weight: 500;
  font-size: 13px;
  color: #475569;
}
#modalChangePassword .modal-footer {
  padding: 12px 24px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (min-width: 992px) {
  #modalAdd .modal-dialog.modal-add-wide {
    width: 1020px;
    max-width: calc(100% - 30px);
  }
}

#modalAdd .modal-content {
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

#modalAdd .modal-body.modal-add-body {
  overflow-y: auto;
  padding-bottom: 12px;
}

#modalAdd .modal-footer.modal-add-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--card-bg);
  box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
}

#modalAdd #Sube + .select2-container {
  width: 100% !important;
  display: block;
}

@media (min-width: 992px) {
  #modalMenu .modal-dialog.modal-menu-wide {
    width: 980px;
    max-width: calc(100% - 30px);
  }
}

#modalMenu .modal-content {
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

#modalMenu .modal-body.modal-menu-body {
  overflow-y: auto;
  padding-bottom: 12px;
}

#modalMenu .modal-footer.modal-menu-footer {
  flex-shrink: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
}

#modalMenu .menu-product-table-wrap {
  max-height: calc(100vh - 420px);
  overflow-y: auto;
}

#modalMenu .menu-status-group {
  display: flex;
  flex-direction: column;
}

#modalMenu .menu-status-group .vega-toggle-check {
  min-height: 36px;
  width: fit-content;
}

#modalMenu .vega-filter-label {
  color: var(--text-muted);
}

#modalMenu #branchsForAddMenu + .select2-container,
#modalMenu #urunSec + .select2-container {
  width: 100% !important;
  display: block;
}

@media (max-width: 767px) {
#modalMenu .menu-product-table-wrap {
    max-height: calc(100vh - 350px);
  }
}

/* MenuList - filter panel */
.menu-filter-card {
  width: 50%;
  max-width: 860px;
  min-width: 420px;
  margin-bottom: 16px;
}

.menu-filter-card-body {
  padding: 14px;
}

.menu-filter-card .menu-filter-bar {
  margin-bottom: 0;
  padding: 14px;
  gap: 10px;
  border: 1px solid #d5e3f7;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
  box-shadow: 0 8px 18px rgba(23, 61, 109, 0.08);
}

.menu-filter-card .menu-filter-bar .vega-filter-label {
  color: #305175;
}

.menu-filter-item {
  min-width: 220px;
}

.menu-filter-submit {
  min-width: 0;
  flex: 0 0 auto;
}

.menu-filter-submit .btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.menu-filter-btn {
  min-width: 142px;
  height: 34px;
  padding: 0 12px;
  justify-content: center;
  text-align: center;
}

.menu-filter-card .menu-filter-bar .form-control {
  border-color: #bfd0e9;
  background: #fff;
}

.menu-filter-card .menu-filter-bar .form-control:focus {
  border-color: #3a72b2;
  box-shadow: 0 0 0 3px rgba(58, 114, 178, 0.16);
}

@media (max-width: 1200px) {
  .menu-filter-card {
    width: 70%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .menu-filter-card {
    width: 100%;
  }

  .menu-filter-card .menu-filter-bar {
    padding: 12px;
  }

  /* filter item'ların min-width: 180px'i mobilde sıfırla */
  .menu-filter-card .vega-filter-item {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .menu-filter-submit {
    min-width: 0;
    width: 100%;
  }

  /* Tek buton: tam genişlik */
  .menu-filter-submit > .btn {
    width: 100%;
    justify-content: center;
  }

  /* Çoklu buton satırı: container tam genişlik, butonlar eşit bölünür */
  .menu-filter-submit .vega-btn-row {
    width: 100%;
    box-sizing: border-box;
  }

  .menu-filter-submit .vega-btn-row .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}

#modalKopyalaProduct .modal-dialog {
  max-height: calc(100vh - 60px);
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
#modalKopyalaProduct .modal-content {
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#modalKopyalaProduct .modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
#modalKopyalaProduct .modal-kopyala-product-list {
  max-height: min(28vh, 220px);
  overflow-y: auto;
}

/* R/S kolonlarındaki MUI SVG boolean ikonları — MUI CSS yüklü olmadığından
   boyutlandırma yapılmazsa satır yüksekliğini büyütüyor */
#tableUrun .MuiSvgIcon-root {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* Modal içi filtre kutusu — açık mavi gradient arka plan */
.vega-modal-filter {
  background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
  border: 1px solid #d5e3f7;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.vega-modal-filter .vega-filter-label {
  color: #305175;
}
.vega-modal-filter .vega-toggle-check {
  color: #4a6080;
}

.vega-modal-filter .select2-selection--multiple .select2-selection__rendered,
.modal-add-sube-group .select2-selection--multiple .select2-selection__rendered {
  max-height: 90px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   13. Alerts
   -------------------------------------------------------------------------- */
.alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* --------------------------------------------------------------------------
   14. SweetAlert2 — Vega Theme Override
   -------------------------------------------------------------------------- */

/* Backdrop */
.swal2-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.swal2-backdrop-show {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(2px);
}

/* Popup kutusu */
.swal2-popup {
  border-radius: 12px !important;
  padding: 28px 28px 22px !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #E2E8F0;
  font-family: inherit;
  background: #fff !important;
}

/* Başlık */
.swal2-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

/* İçerik metni */
.swal2-html-container {
  font-size: 13.5px !important;
  color: #64748B !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Buton alanı */
.swal2-actions {
  margin-top: 18px !important;
  gap: 8px !important;
}

/* Ortak buton stili */
.swal2-styled {
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: background 0.15s, opacity 0.15s !important;
}
.swal2-styled:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Onayla butonu */
.swal2-confirm {
  background-color: #2563EB !important;
}
.swal2-confirm:hover {
  background-color: #1D4ED8 !important;
  opacity: 1 !important;
}

/* İptal butonu */
.swal2-cancel {
  background-color: #F1F5F9 !important;
  color: #475569 !important;
}
.swal2-cancel:hover {
  background-color: #E2E8F0 !important;
  color: #1E293B !important;
  opacity: 1 !important;
}

/* Reddet butonu (deny) */
.swal2-deny {
  background-color: #DC2626 !important;
}
.swal2-deny:hover {
  background-color: #B91C1C !important;
  opacity: 1 !important;
}

/* Timer progress bar */
.swal2-timer-progress-bar {
  background: #2563EB !important;
  height: 3px !important;
  border-radius: 0 0 12px 12px !important;
}

/* Input / Select / Textarea (swal içi formlar) */
.swal2-input,
.swal2-select,
.swal2-textarea {
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1E293B !important;
  box-shadow: none !important;
  font-family: inherit !important;
}
.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Üstten çıkan bildirimler (position: "top" ile açılanlar) */
.swal2-top > .swal2-popup,
.swal2-top-start > .swal2-popup,
.swal2-top-end > .swal2-popup {
  border-radius: 10px !important;
  padding: 16px 20px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14) !important;
}
.swal2-top > .swal2-popup .swal2-title,
.swal2-top-start > .swal2-popup .swal2-title,
.swal2-top-end > .swal2-popup .swal2-title {
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   15. Badges & Labels
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  min-width: 20px;
  line-height: 1;
}

.label {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.badge-default,  .label-default  { background: #e2e8f0; color: var(--text); }
.badge-primary,  .label-primary  { background: var(--primary); color: #fff; }
.badge-success,  .label-success  { background: var(--success); color: #fff; }
.badge-warning,  .label-warning  { background: var(--warning); color: #fff; }
.badge-danger,   .label-danger   { background: var(--danger);  color: #fff; }
.badge-info,     .label-info     { background: var(--info);    color: #fff; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.vega-footer {
  position: relative;
  margin-left: var(--sidebar-width);
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 12.5px;
  color: var(--text-muted);
  transition: margin-left var(--transition);
}

.nav-sm .vega-footer {
  margin-left: var(--sidebar-sm);
}

.vega-footer a {
  color: var(--primary);
  font-weight: 500;
}

.vega-footer a:hover {
  color: var(--primary-dark);
}

/* Fallback for old footer markup */
.m-grid__item.m-footer {
  margin-left: var(--sidebar-width);
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 12.5px;
  color: var(--text-muted);
  transition: margin-left var(--transition);
}

.nav-sm .m-grid__item.m-footer {
  margin-left: var(--sidebar-sm);
}

.m-grid__item.m-footer .footer-content {
  color: var(--text-muted);
}

.m-grid__item.m-footer a {
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   16. Loading Overlay (#loading)
   -------------------------------------------------------------------------- */
.myloading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.myloading-active {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
}

.myloading-active img {
  width: 140px;
  height: 140px;
  border-radius: 24px;
  background: #fff;
  padding: 20px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: vegaLoadFloat 2s ease-in-out infinite;
  z-index: 10000;
}

@keyframes vegaLoadFloat {
  0%   { transform: translateY(0px) scale(1);    box-shadow: 0 32px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
  50%  { transform: translateY(-8px) scale(1.02); box-shadow: 0 44px 80px rgba(0,0,0,.4),  0 0 0 1px rgba(255,255,255,.08); }
  100% { transform: translateY(0px) scale(1);    box-shadow: 0 32px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
}

/* --------------------------------------------------------------------------
   17. Fieldset
   -------------------------------------------------------------------------- */
.the-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--card-bg);
}

.the-legend {
  display: inline-block;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card-bg);
  margin-left: 12px;
}

/* --------------------------------------------------------------------------
   18. Wells
   -------------------------------------------------------------------------- */
.well {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   19. Progress bars
   -------------------------------------------------------------------------- */
.progress {
  height: 8px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.progress-bar-success { background: var(--success); }
.progress-bar-warning { background: var(--warning); }
.progress-bar-danger  { background: var(--danger);  }
.progress-bar-info    { background: var(--info);    }

/* --------------------------------------------------------------------------
   20. iCheck compatibility
   -------------------------------------------------------------------------- */
.icheckbox_flat-red,
.iradio_flat-red {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* --------------------------------------------------------------------------
   21. Utility & Misc
   -------------------------------------------------------------------------- */
/* Hide page load time output */
.page-load-time {
  display: none;
}

/* NProgress override */
#nprogress .bar {
  background: var(--primary) !important;
  height: 3px;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary);
}

/* Clearfix */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Hidden print utility */
@media print {
  .hidden-print { display: none !important; }
  .left_col, .top_nav { display: none !important; }
  .right_col {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .col-md-3.left_col {
    width: var(--sidebar-sm);
  }

  .top_nav {
    left: var(--sidebar-sm);
  }

  .right_col {
    margin-left: var(--sidebar-sm);
    width: calc(100% - var(--sidebar-sm));
  }

  .vega-footer,
  .m-grid__item.m-footer {
    margin-left: var(--sidebar-sm);
  }

  /* Mobilde toggle: sidebar tamamen kapanır, içerik full genişlik */
  body.nav-sm .col-md-3.left_col {
    width: 0;
    overflow: hidden;
  }

  body.nav-sm .top_nav {
    left: 0;
  }

  body.nav-sm .right_col {
    margin-left: 0;
    width: 100%;
  }

  /* İkon-only: scroll-view — child flyout için taşmaya izin ver */
  .left_col .scroll-view { overflow: visible; }

  /* Menü metin gizleme + ikon ortalama */
  #sidebar-menu .nav.side-menu > li { position: relative; margin: 2px 4px; }

  #sidebar-menu .nav.side-menu > li > a {
    font-size: 0; padding: 0;
    height: 44px; width: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  #sidebar-menu .nav.side-menu > li > a i { font-size: 17px; width: auto; color: var(--text-light); }
  #sidebar-menu .nav.side-menu > li > a .fa-chevron-down { display: none !important; }

  /* Logo küçültme */
  .site_title { padding: 0; justify-content: center; }
  .site_title img.left-menu-logo2 {
    width: 36px !important; max-width: 36px !important;
    height: 36px; object-fit: contain; object-position: left center;
  }

  /* Child menu flyout — !important YOK: overlay modda jQuery inline style override edebilsin */
  #sidebar-menu .nav.child_menu {
    position: absolute; left: var(--sidebar-sm); top: 0;
    min-width: 180px; background: var(--card-bg);
    box-shadow: var(--shadow-sm); border-radius: var(--radius-sm);
    z-index: 1100; display: none;
  }
  /* Hover flyout: !important ile jQuery'nin inline none'ını geçer */
  body:not(.mobile-sidebar-open) #sidebar-menu .nav.side-menu > li:hover > .nav.child_menu { display: block !important; }
  #sidebar-menu .nav.child_menu li a { font-size: 13px; padding: 10px 16px; }

  /* ── Overlay: sidebar tam genişlik overlay, content kaymaz ── */
  body.mobile-sidebar-open .col-md-3.left_col {
    position: fixed; left: 0; top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }

  /* Overlay'de scroll-view normal overflow'a dön */
  body.mobile-sidebar-open .left_col .scroll-view {
    overflow: visible;
    height: auto;
  }

  /* Overlay'de child_menu flyout'u iptal et — jQuery slideDown/Up çalışsın */
  body.mobile-sidebar-open #sidebar-menu .nav.child_menu {
    position: static; left: auto; top: auto;
    min-width: unset; background: transparent;
    box-shadow: none; border-radius: 0; z-index: auto;
    /* display kontrolünü jQuery'ye bırak (inline style > CSS) */
  }
  /* Overlay'de hover flyout yok */
  body.mobile-sidebar-open #sidebar-menu .nav.side-menu > li:hover > .nav.child_menu {
    display: none;
  }

  /* Overlay'de menü metnini geri aç */
  body.mobile-sidebar-open #sidebar-menu .nav.side-menu > li > a {
    font-size: 13.5px; padding: 11px 20px;
    height: auto; width: auto; justify-content: flex-start;
  }
  body.mobile-sidebar-open #sidebar-menu .nav.side-menu > li > a i { width: 24px; margin-right: 10px; }
  body.mobile-sidebar-open #sidebar-menu .nav.side-menu > li > a .fa-chevron-down {
    display: inline-block !important; margin-left: auto; font-size: 11px;
  }
  body.mobile-sidebar-open .site_title { padding: 0 20px; justify-content: flex-start; }
  body.mobile-sidebar-open .site_title img.left-menu-logo2 {
    width: 130px !important; max-width: 130px !important; height: auto;
  }

  /* Backdrop */
  .mobile-sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 1045;
  }
  body.mobile-sidebar-open .mobile-sidebar-backdrop { display: block; }
}

@media (max-width: 767px) {
.right_col {
    padding: 4px;
  }

  .x_content {
    padding: 8px;
  }

  .x_title {
    padding: 8px 10px;
  }

  .x_panel {
    margin-bottom: 8px;
  }

  /* Bootstrap kolon ve row'ların fazla padding'lerini kırp */
  .right_col .row {
    margin-left: 0;
    margin-right: 0;
  }
  .right_col [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Mobilde iki kolonlu layout tek kolona iner */
  .vega-two-col {
    grid-template-columns: 1fr;
  }

  /* Mobilde toolbar — flex-wrap, satır başına 2 buton düzeni.
     basis ~50% verilir; metin sığmazsa kesilir, butonlar iç içe geçmez. */
  .vega-toolbar {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .vega-toolbar > .btn,
  .vega-toolbar > a.btn,
  .vega-toolbar > button {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Arama input'u ve toggle label gibi ayrılmış öğeler tam satır */
  .vega-toolbar-search-right,
  .vega-toolbar > .vega-toggle-check {
    flex: 1 1 100%;
    margin-left: 0 !important;
    max-width: none;
  }

  /* Şube grubu toolbar'ı (Güncellenecek Şubeler) — 5 buton 2+3 düzeni
     Row 1: Hazırlanan Ürünlere Git | Şimdi Gönder
     Row 2: Planla | Planlananlar | Sil */
  .vega-sube-grup > .vega-toolbar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
  .vega-sube-grup > .vega-toolbar > *:nth-child(1),
  .vega-sube-grup > .vega-toolbar > *:nth-child(2) {
    grid-column: span 3;
  }
  .vega-sube-grup > .vega-toolbar > *:nth-child(3),
  .vega-sube-grup > .vega-toolbar > *:nth-child(4),
  .vega-sube-grup > .vega-toolbar > *:nth-child(5) {
    grid-column: span 2;
  }
  .vega-sube-grup > .vega-toolbar > * {
    width: 100%;
  }

  .vega-page-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .table-responsive-xs {
    overflow-x: auto;
  }

  /* Top nav butonları ikon-only */
  .topnav-actions { gap: 4px; }

  .topnav-actions .btn-success,
  .topnav-actions .btn-primary,
  .topnav-actions .btn-user,
  .topnav-actions #UserLogout {
    font-size: 0; padding: 8px 10px; gap: 0;
    min-width: 36px; justify-content: center;
  }
  .topnav-actions .btn-success i,
  .topnav-actions .btn-primary i,
  .topnav-actions .btn-user i,
  .topnav-actions #UserLogout i { font-size: 14px; }

  .topnav-actions .btn-user span { display: none; }

  /* ── Şube Ciro Oranları: canvas + tablo dikey istiflenir ────── */
  .dash-chart-flex {
    flex-direction: column;
    align-items: center;
  }
  .dash-chart-flex > canvas {
    width: 140px !important;
    height: 140px !important;
  }
  .dash-chart-flex > table {
    width: 100%;
  }

  /* ── Panel toolbox'lı x_title — refresh butonu başlık sağında, diğer
     toolbox elemanları aşağı satıra sığar.
     `display:contents` ile panel_toolbox çocukları .x_title'in doğrudan
     flex çocuğu olur → refresh h2 ile aynı satırda, btn-group ve E-Posta
     kendi satırlarına wrap olur. */
  .x_title {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
  }
  .x_title h2 {
    flex: 1 1 auto;
    min-width: 0;
  }
  .x_title h2 small {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
  .panel_toolbox {
    display: contents;
  }
  /* İkon-only butonlar (refresh vb.) — h2 yanında sağda kalır */
  .x_title > .panel_toolbox > .btn:has(> i:only-child),
  .x_title > .btn:has(> i:only-child) {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 6px 10px;
    font-size: 12px;
    margin: 0 !important;
    order: 0;
  }
  /* Etiketli tek butonlar (E-Posta vb.) — yeni satırda tam genişlik */
  .x_title > .panel_toolbox > .btn:not(:has(> i:only-child)) {
    flex: 1 1 100%;
    margin: 0 !important;
    padding: 7px 10px;
    font-size: 12px;
    text-align: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: 2;
  }
  /* Tarih btn-group — kendi satırında 4 eşit kolon, metin ortalı */
  .x_title > .panel_toolbox > .btn-group {
    display: flex;
    flex: 1 1 100%;
    margin: 0 !important;
    gap: 0;
    order: 1;
  }
  .x_title > .panel_toolbox > .btn-group > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 4px;
    font-size: 11.5px;
    text-align: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── modal-xl mobilde tam genişlik ──────────────────────────── */
  .modal-xl {
    width: 96%;
    margin: 8px auto;
  }

  /* ── Planlanan Gönderimler: bulk bar dikey istiflenir ───────── */
  .dash-bulk-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .dash-bulk-bar-item {
    min-width: 0;
    width: 100%;
  }
  .dash-bulk-bar > .btn {
    width: 100%;
    text-align: center;
  }

  /* ── Genel buton ölçüleri mobilde daha kompakt ───────────────── */
  .btn {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 8px;
  }
  .btn-sm {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 11.5px;
    border-radius: 7px;
  }
  .btn-lg {
    min-height: 40px;
    padding: 9px 18px;
    font-size: 13.5px;
    border-radius: 10px;
  }

  /* ── DataTables butonları (Kopyala/Excel/PDF/Yazdır/Kolonlar) ─ */
  .dt-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    float: none !important;
    width: 100%;
  }
  .dt-buttons .dt-button {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 0;
    margin: 0 !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: var(--shadow-sm);
  }

  /* DataTables search/length — tam genişlik */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: calc(100% - 60px);
    max-width: 100%;
  }

  /* ── Tarih bar — 4 sütunlu grid sistemi ───────────────────────────
     Modifier sınıfları yerleşim varyantlarını seçer:
       (yok)                          → 4 tarih butonu (OzetRaporlar)
       .dash-date-bar--standard       → 6 buton + E-Posta (CiroRaporlar vb.)
       .dash-date-bar--recipe-cost    → standard + Stok Tipi + Excel
       .dash-date-bar--product-groups → standard + Excel + Arama
       .dash-date-bar--branch-products→ standard + 2 Excel + Platform + Arama */
  .dash-date-bar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 6px;
    padding: 10px 12px;
  }
  .dash-date-bar > .btn-group {
    display: contents !important;
  }
  .dash-date-bar .btn {
    width: 100%;
    margin: 0 !important;
    float: none !important;
    padding: 7px 6px;
    font-size: 11.5px;
    min-height: 36px;
    border-radius: 8px !important;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-date-bar .btn i {
    font-size: 11px;
    margin-right: 3px;
  }
  .dash-date-bar .dash-action-btn {
    min-height: 38px;
    font-size: 13px;
    border-radius: 9px;
  }

  /* Tüm 6-buton btn-group varyantları için ortak yerleşim ──────────
     Row 1: Bugün(2) Dün(3) Bu Ay(4) Tarih(5) — 4 tarih butonu
     Row 2 kenarları:  <(1) ... >(6) — prev / next */
  .dash-date-bar--standard > .btn-group > .btn:nth-child(2),
  .dash-date-bar--recipe-cost > .btn-group > .btn:nth-child(2),
  .dash-date-bar--product-groups > .btn-group > .btn:nth-child(2),
  .dash-date-bar--branch-products > .btn-group > .btn:nth-child(2) { grid-column: 1; grid-row: 1; }
  .dash-date-bar--standard > .btn-group > .btn:nth-child(3),
  .dash-date-bar--recipe-cost > .btn-group > .btn:nth-child(3),
  .dash-date-bar--product-groups > .btn-group > .btn:nth-child(3),
  .dash-date-bar--branch-products > .btn-group > .btn:nth-child(3) { grid-column: 2; grid-row: 1; }
  .dash-date-bar--standard > .btn-group > .btn:nth-child(4),
  .dash-date-bar--recipe-cost > .btn-group > .btn:nth-child(4),
  .dash-date-bar--product-groups > .btn-group > .btn:nth-child(4),
  .dash-date-bar--branch-products > .btn-group > .btn:nth-child(4) { grid-column: 3; grid-row: 1; }
  .dash-date-bar--standard > .btn-group > .btn:nth-child(5),
  .dash-date-bar--recipe-cost > .btn-group > .btn:nth-child(5),
  .dash-date-bar--product-groups > .btn-group > .btn:nth-child(5),
  .dash-date-bar--branch-products > .btn-group > .btn:nth-child(5) { grid-column: 4; grid-row: 1; }
  .dash-date-bar--standard > .btn-group > .btn:first-child,
  .dash-date-bar--recipe-cost > .btn-group > .btn:first-child,
  .dash-date-bar--product-groups > .btn-group > .btn:first-child,
  .dash-date-bar--branch-products > .btn-group > .btn:first-child { grid-column: 1; grid-row: 2; }
  .dash-date-bar--standard > .btn-group > .btn:last-child,
  .dash-date-bar--recipe-cost > .btn-group > .btn:last-child,
  .dash-date-bar--product-groups > .btn-group > .btn:last-child,
  .dash-date-bar--branch-products > .btn-group > .btn:last-child { grid-column: 4; grid-row: 2; }
  .dash-date-bar--standard > .btn-group > .btn:first-child i,
  .dash-date-bar--standard > .btn-group > .btn:last-child i,
  .dash-date-bar--recipe-cost > .btn-group > .btn:first-child i,
  .dash-date-bar--recipe-cost > .btn-group > .btn:last-child i,
  .dash-date-bar--product-groups > .btn-group > .btn:first-child i,
  .dash-date-bar--product-groups > .btn-group > .btn:last-child i,
  .dash-date-bar--branch-products > .btn-group > .btn:first-child i,
  .dash-date-bar--branch-products > .btn-group > .btn:last-child i {
    margin-right: 0;
  }

  /* Standard: row 2 ortasında E-Posta */
  .dash-date-bar--standard > .dash-action-btn {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  /* Recipe Cost: row 2 ortasında Stok Tipi, row 3 Excel, row 4 E-Posta */
  .dash-date-bar--recipe-cost > span {
    grid-column: 2 / span 2;
    grid-row: 2;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
  }
  .dash-date-bar--recipe-cost > span > label { margin: 0; font-size: 12px; }
  .dash-date-bar--recipe-cost > span > .form-control {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 36px;
  }
  .dash-date-bar--recipe-cost > #btnExcelExportDetail { grid-column: 1 / -1; grid-row: 3; }
  .dash-date-bar--recipe-cost > .dash-action-btn:not(#btnExcelExportDetail) {
    grid-column: 1 / -1; grid-row: 4;
  }

  /* Product Groups (UrunGrubu): row 2 E-Posta, row 3 Excel, row 4 arama */
  .dash-date-bar--product-groups > .dash-action-btn:first-of-type {
    grid-column: 2 / span 2;
    grid-row: 2;
  }
  .dash-date-bar--product-groups > #btnExcelExportDetail {
    grid-column: 1 / -1; grid-row: 3;
  }
  .dash-date-bar--product-groups > div:not(.btn-group) {
    grid-column: 1 / -1; grid-row: 4;
    display: flex !important;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  .dash-date-bar--product-groups > div:not(.btn-group) > .form-control {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 36px;
  }
  .dash-date-bar--product-groups > div:not(.btn-group) > .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 80px;
  }

  /* Branch Products (SubeUrunler): tek wrapper div'i grid'e aç ──────
     wrapper'a display:contents verilir; çocukları grid item olur. */
  .dash-date-bar--branch-products > div:not(.btn-group) {
    display: contents !important;
  }
  .dash-date-bar--branch-products > div:not(.btn-group) > .dash-action-btn {
    grid-column: 2 / span 2; grid-row: 2;
  }
  .dash-date-bar--branch-products > div:not(.btn-group) > #btnExcelExportDetail,
  .dash-date-bar--branch-products > div:not(.btn-group) > #btnExcelExportDetailByPlatforms {
    grid-column: 1 / span 2; grid-row: 3;
  }
  .dash-date-bar--branch-products > div:not(.btn-group) > #btnByPlatforms {
    grid-column: 3 / span 2; grid-row: 3;
  }
  /* İçteki arama wrapper'ı (input + Ara butonu) — row 4 tam genişlik */
  .dash-date-bar--branch-products > div:not(.btn-group) > div {
    grid-column: 1 / -1; grid-row: 4;
    display: flex !important;
    gap: 6px;
    width: 100%;
  }
  .dash-date-bar--branch-products > div:not(.btn-group) > div > .form-control {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 36px;
  }
  .dash-date-bar--branch-products > div:not(.btn-group) > div > .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 80px;
  }

  /* Panel başlığında yenile butonu gibi tekil aksiyonlar */
  .panel_toolbox > .btn,
  .x_title .btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   23. Form Validation States
   -------------------------------------------------------------------------- */
.has-error .form-control {
  border-color: var(--danger);
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.has-success .form-control {
  border-color: var(--success);
}

.has-success .form-control:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.has-warning .form-control {
  border-color: var(--warning);
}

.help-block {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

.has-error .help-block {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   23b. Form Footer Actions
   -------------------------------------------------------------------------- */

/* Divider — x_content içinde form/tablo bitişinde ayraç */
.vega-form-divider {
  margin: 20px 0 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* Action bar — butonların oturduğu alan */
.vega-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 14px 4px;
}

/* --------------------------------------------------------------------------
   24. Panels (Bootstrap panel compat for modals)
   -------------------------------------------------------------------------- */
.panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.panel-heading {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.panel-body {
  padding: 16px;
}

.panel-danger > .panel-heading {
  background: linear-gradient(135deg, #a84040, #b85454);
  color: #fff;
  border-color: transparent;
}

.panel-warning > .panel-heading {
  background: linear-gradient(135deg, #9e7228, #b88a35);
  color: #fff;
  border-color: transparent;
}

.panel-success > .panel-heading {
  background: linear-gradient(135deg, #3d7a5a, #52916e);
  color: #fff;
  border-color: transparent;
}

.panel-info > .panel-heading {
  background: linear-gradient(135deg, #3d6e85, #4e86a0);
  color: #fff;
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   25. Nav tabs
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}

.nav-tabs > li > a {
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition), border-color var(--transition);
}

.nav-tabs > li > a:hover {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--border);
  color: var(--text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   26. Glyphicons (minimal compat)
   -------------------------------------------------------------------------- */
.glyphicon {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   27. Row & column gutters
   -------------------------------------------------------------------------- */

/* right_col içindeki Bootstrap row'un negatif margin'lerini sıfırla */
.right_col > .row {
  margin-left: 0;
  margin-right: 0;
}

.dashboard_graph {
  width: 100%;
  min-width: 0;
}

/* İçerik kolonlarında standart padding */
.right_col [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* SPosPart layout: sidebar yok, right_col margin sıfırlanır */
body.spos-part .right_col {
  margin-left: 0;
  margin-top: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Validation Summary — AddModelError inline mesajları
   -------------------------------------------------------------------------- */
.validation-summary-errors {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-left: 4px solid #D97706;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #92400E;
  font-size: 13px;
}

.validation-summary-errors ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.validation-summary-errors ul li {
  margin-bottom: 4px;
  line-height: 1.5;
}

.validation-summary-errors ul li:last-child {
  margin-bottom: 0;
}

/* Tek hata (li olmadan doğrudan metin) */
.validation-summary-errors span {
  display: block;
}

/* --------------------------------------------------------------------------
   28. Page Layout Helpers
   -------------------------------------------------------------------------- */

/* ---- Filter Bar (arama / filtreleme satırı) ---- */
.vega-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border: 1px solid var(--primary-dark);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.vega-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.vega-filter-grow {
  flex: 1;
}

.vega-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
}

.vega-filter-label--stack {
  display: block;
  margin-bottom: 6px;
}

.vega-template-create-card {
  width: calc(50% - 10px);
  max-width: none;
  min-width: 0;
  margin-bottom: 16px;
}

.vega-template-create-card .vega-card-body {
  padding: 14px;
}

.vega-template-create-card .vega-filter-bar {
  margin-bottom: 0;
  padding: 14px;
  gap: 10px;
  border: 1px solid #d5e3f7;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
  box-shadow: 0 8px 18px rgba(23, 61, 109, 0.08);
}

.vega-template-create-card .vega-filter-label {
  color: #305175;
}

.vega-template-create-card .vega-filter-item {
  min-width: 220px;
}

.vega-template-create-card .vega-filter-actions {
  margin-left: auto;
}

.vega-template-create-card .vega-filter-head {
  min-height: 30px;
}

.vega-template-create-card .form-control {
  border-color: #bfd0e9;
  background: #fff;
}

.vega-template-create-card .form-control:focus {
  border-color: #3a72b2;
  box-shadow: 0 0 0 3px rgba(58, 114, 178, 0.16);
}

.vega-template-create-card .vega-toggle-check {
  border-color: #bfd0e9;
  color: #305175;
  background: #fff;
}

.vega-template-create-card .vega-toggle-check:hover {
  border-color: #3a72b2;
  background: #f5f9ff;
}

.vega-template-create-card .select2-selection--multiple .select2-selection__rendered {
  max-height: 68px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .vega-template-create-card {
    width: 100%;
  }
}

.vega-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.vega-toggle-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #c8d8ec;
  border-radius: 999px;
  background: #fff;
  color: #2a4a70;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.vega-toggle-check:hover {
  border-color: var(--primary);
  background: #f8fbff;
}

.vega-toggle-check input[type="checkbox"] {
  margin: 0;
  position: relative;
  top: 0;
}

.vega-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- Operations Bar (toplu işlem satırı) ---- */
.vega-ops-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.vega-ops-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vega-ops-group-end {
  margin-left: auto;
}

.vega-ops-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.vega-ops-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}


.vega-ops-controls .form-control {
  width: 96px;
  height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}

.vega-ops-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  flex-shrink: 0;
}

@media (max-width: 767px) {
.vega-template-create-card {
    width: 100%;
    min-width: 0;
  }

  .vega-template-create-card .vega-filter-bar {
    padding: 12px;
  }

  .vega-template-create-card .vega-filter-actions {
    margin-left: 0;
  }

  /* min-width: 220px override — mobilde taşmayı önler */
  .vega-template-create-card .vega-filter-item {
    min-width: 0;
    width: 100%;
  }
  .vega-template-create-card .vega-filter-actions {
    width: 100%;
  }
  .vega-template-create-card .vega-filter-actions .btn {
    width: 100%;
  }

  .vega-filter-bar { flex-direction: column; align-items: stretch; }
  .vega-filter-head { flex-wrap: wrap; }
  .vega-filter-actions { justify-content: flex-start; }
  .vega-ops-row { flex-direction: column; }
  .vega-ops-group-end { margin-left: 0; }
  .vega-ops-divider { display: none; }
  .tarihce-product-filter-actions-col { display: block; }
  .tarihce-product-filter-actions { margin-top: 8px; flex-wrap: wrap; }
}

/* Two-column responsive grid */
.vega-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .vega-two-col {
    grid-template-columns: 1fr;
  }
}

/* Lightweight card (no collapse, clean border) */
.vega-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.vega-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid #C8D8EC;
  background: #E4EDF7;
  font-size: 13.5px;
  font-weight: 600;
  color: #2A4A70;
}

.vega-card-header i {
  font-size: 14px;
  color: var(--primary);
  flex-shrink: 0;
  opacity: 0.85;
}

.vega-card-body {
  padding: 16px;
}

.vega-edit-products-table {
  width: 100%;
}

.vega-product-row {
  font-weight: 600;
}

.vega-manual-row {
  background-color: #F4BFBF;
  font-weight: 600;
}

/* Toolbar — action button row */
.vega-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.vega-toolbar-search-right {
  margin-left: auto;
  width: 100%;
  max-width: 320px;
}

.vega-toolbar-search-right .form-control {
  width: 100%;
}

/* Kart içi toolbar — border/margin kaldır */
.vega-toolbar--inner {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
.vega-toolbar-search-right {
    margin-left: 0;
    max-width: none;
  }
}

/* Bottom page actions row */
.vega-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Checkbox + label inside table header */
.vega-check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 0;
  user-select: none;
  line-height: 1;
  vertical-align: middle;
}

.vega-check-label input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
  position: relative;
  top: 0;
}

/* Separator between multiple groups in a card */
.vega-sube-grup + .vega-sube-grup {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

/* Empty state placeholder */
.vega-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
  gap: 10px;
}

.vega-empty-state i {
  font-size: 36px;
  color: #cbd5e1;
}

.vega-empty-state p {
  margin: 0;
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   28. İcmal Sayfası Bileşenleri
   -------------------------------------------------------------------------- */
.icmal-sub-panel {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.icmal-sub-panel-header {
  padding: 10px 15px;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.icmal-sub-panel-body {
  padding: 15px;
  min-height: 80px;
}

.icmal-empty-state {
  text-align: center;
  color: #94a3b8;
  padding: 20px;
  font-size: 13px;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
}

.icmal-info-text {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: #f8fafc;
  border-left: 3px solid var(--primary);
  border-radius: 0 4px 4px 0;
}

/* --------------------------------------------------------------------------
   29. Şube Seçici (sube-selector) Bileşeni
   -------------------------------------------------------------------------- */
.sube-selector {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.sube-selector-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.sube-selector-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.sube-select-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  font-weight: 400;
}

.sube-selector-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sube-selector-search {
  height: 32px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  width: 180px !important;
}

.sube-selector-sort {
  height: 32px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  width: 80px !important;
}

.sube-count-badge {
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.sube-selector-body {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.userslist-sube-selector-body {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start;
}

.sube-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  min-width: 150px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background var(--transition), border-color var(--transition);
  user-select: none;
  margin: 0;
}

.sube-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.sube-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.sube-item--hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   30. Vega Toggle Switch
   -------------------------------------------------------------------------- */
.vega-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #cbd5e1;
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
  vertical-align: middle;
  flex-shrink: 0;
  border: none;
  outline: none;
}

.vega-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left var(--transition);
}

.vega-toggle:checked {
  background: var(--primary);
}

.vega-toggle:checked::after {
  left: 23px;
}

.vega-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.vega-toggle-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   31. Form Utilities
   -------------------------------------------------------------------------- */
.required {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   32. Tooltip
   -------------------------------------------------------------------------- */
.tooltip {
    font-size: 12px !important;
}

.tooltip-inner {
    background: #1e3a5f !important;
    color: #e8f0fb !important;
    border-radius: 6px !important;
    padding: 6px 11px !important;
    max-width: 220px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.10) !important;
    letter-spacing: 0.01em !important;
}

/* Oklar — her yön için */
.tooltip.top    .tooltip-arrow { border-top-color:    #1e3a5f !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #1e3a5f !important; }
.tooltip.left   .tooltip-arrow { border-left-color:   #1e3a5f !important; }
.tooltip.right  .tooltip-arrow { border-right-color:  #1e3a5f !important; }

/* --------------------------------------------------------------------------
   33. Dashboard — Şube Listesi
   -------------------------------------------------------------------------- */

/* Metrik bar (panel_toolbox içi) */
.dash-metric-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Yenile butonu */
.dash-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.dash-refresh-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}

/* Ayırıcı */
.dash-metric-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

/* Metrik chip — varsayılan: Toplam (primary arka plan, beyaz metin) */
.dash-metric-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid rgba(255, 255, 255, 0.50);
  border-radius: 6px;
  background: var(--primary);
  min-width: 68px;
}

.dash-metric-chip.is-online {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.dash-metric-chip.is-offline {
  border-color: #fecaca;
  background: #fef2f2;
}

.dash-metric-chip .chip-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

.dash-metric-chip.is-online .chip-label { color: #16a34a; }
.dash-metric-chip.is-offline .chip-label { color: #dc2626; }

.dash-metric-chip .chip-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.dash-metric-chip.is-online .chip-value  { color: #16a34a; }
.dash-metric-chip.is-offline .chip-value { color: #dc2626; }

/* Tablo — şube hücresi */
.dash-branch-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-branch-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* Tablo — son kontrol hücresi */
.dash-check-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-check-cell .check-label {
  font-size: 11px;
  color: var(--text-muted);
}

.dash-check-cell .check-value {
  font-size: 13px;
  font-weight: 700;
}

/* Tablo — durum badge (arka plan rengi inline kalır) */
.dash-status-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* Tablo — hücre hizalaması */
.dash-table td {
  vertical-align: middle;
}

.dash-table .dash-status-col {
  text-align: center;
  width: 180px;
}

/* --------------------------------------------------------------------------
   34. Dashboard — Özet Raporlar (Index)
   -------------------------------------------------------------------------- */

/* Tarih filtresi bar */
.dash-date-bar {
  padding-top: 10px;
  padding-bottom: 10px;
}
.dash-date-bar .btn-group {
  display: inline-flex;
  vertical-align: middle;
}
.dash-date-bar .btn-group > .btn {
  float: none;
  flex-shrink: 0;
}
.dash-date-bar > span {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  margin-left: 8px;
}
.dash-date-bar .form-control {
  height: 34px;
  padding-top: 1px;
  padding-bottom: 5px;
}

/* Aktif tarih butonu — btn-default üzerinde mavi, btn-primary üzerinde yeşil */
.LimitButtonBack {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary-dark) !important;
}

.btn-primary.LimitButtonBack {
  background-color: #3bab10 !important;
  border-color: #2d8a0c !important;
}

.LimitGroupBack {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Stat kartı */
.dash-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.dash-stat-card:hover {
  box-shadow: var(--shadow);
}

.dash-stat-icon {
  font-size: 26px;
  color: var(--primary);
  opacity: 0.65;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.dash-stat-body {
  min-width: 0;
}

.dash-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

.dash-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  display: block;
  text-decoration: none !important;
}

.dash-stat-value:hover {
  color: var(--primary);
}

/* Grafik panel başlık satırı */
.dash-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.dash-chart-head-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dash-chart-head-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Grafik tablo: ciro listesi */
.dash-chart-table td {
  padding: 5px 6px;
  vertical-align: middle;
  border-top: 1px solid var(--border);
}

.dash-chart-table tr:first-child td {
  border-top: none;
}

.dash-chart-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-rank {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 18px;
  display: inline-block;
  text-align: right;
}

.dash-dot {
  font-size: 10px;
}

.dash-amount {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.dash-amount-muted {
  text-align: right;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Doughnut canvas + tablo yan yana */
.dash-chart-flex {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.dash-chart-flex > canvas {
  flex-shrink: 0;
  margin-top: 6px;
}

.dash-chart-flex > table {
  flex: 1;
  min-width: 0;
}

/* Highcharts render konteyneri */
.dash-highchart-container {
  min-width: 80px;
  height: 500px;
  width: 100%;
}

/* Eşit yükseklikli panel çifti */
.dash-equal-panels {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  clear: both;
}
.dash-equal-panels > [class*="col-"] {
  display: flex;
  flex-direction: column;
  float: none;
}

/* ===== 35. Rapor Tabloları ===== */

/* Rapor tablosu — zebra striping, kompakt satırlar */
.table-report {
  font-size: 13px;
}

.table-report > tbody > tr > td {
  padding: 8px 12px;
  border-bottom: 1px solid #e8eef6;
  color: var(--text);
  font-weight: 600;
}

.table-report > tbody > tr:nth-child(even) > td {
  background-color: #f6f9fd;
}

.table-report > tbody > tr {
  transition: background var(--transition), box-shadow var(--transition);
}

.table-report > tbody > tr:hover > td {
  background-color: rgba(13, 77, 154, 0.06);
}

.table-report > tbody > tr:hover {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Sayısal hücre — sağ hizalı, tabular rakamlar */
.cell-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sıra numarası hücresi */
.cell-seq {
  text-align: center !important;
  color: var(--text-muted);
  font-weight: 500;
  width: 40px;
}

/* Toplam satırı (tfoot) — modern gradient */
.dash-table-total td {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 12px;
  border-bottom: none !important;
}

/* Alt satır (child row) detay tablosu başlığı */
.dash-detail-head th {
  background-color: #edf3fb;
  color: var(--primary-dark);
  padding-right: 20px !important;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Detay satırı (expand) geçiş */
.table-report > tbody > tr.shown > td {
  background-color: #edf3fb;
  border-bottom-color: var(--primary-light);
}

/* Expand/collapse butonu — parent td tek satır kalmalı */
td:has(.btn-expand) {
  white-space: nowrap;
}

.btn-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  margin-right: 6px;
  vertical-align: middle;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.btn-expand:hover {
  background: var(--primary);
  color: #fff;
}

.btn-expand .fa {
  transition: transform var(--transition);
}

tr.shown .btn-expand {
  background: var(--primary);
  color: #fff;
}

tr.shown .btn-expand .fa {
  transform: rotate(90deg);
}

/* E-Posta butonu - tarih grubu yanında boşluk */
.dash-action-btn {
  margin-left: 8px;
}

/* Toplu zamanlama çubuğu (Planlanan Gönderimler modalı) */
.dash-bulk-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
  border: 1px solid #d5e3f7;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.dash-bulk-bar-item {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

/* Modal geniş boyut (Bootstrap 3'te modal-xl yok, custom) */
.modal-xl {
  width: 92%;
  max-width: 1300px;
}

/* Planlanan gönderimler — dikey ortalama */
#scheduledListTable td,
#scheduledListTable th {
  vertical-align: middle !important;
}

/* Planlanan gönderimler — işlemler kolonu sarma engeli */
#scheduledListTable td:last-child,
#scheduledListTable th:last-child {
  white-space: nowrap;
}

/* Planlanan gönderimler — işlemler butonlarını normal btn boyutuna çıkar */
#scheduledListTable .btn-group-sm > .btn {
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.42857;
}

/* Satır genişlet/daralt toggle butonu */
.dash-row-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--primary, #2563EB);
  border-radius: 5px;
  background: var(--primary, #2563EB);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dash-row-toggle.open {
  background: #DBEAFE;
  border-color: #93C5FD;
  color: #1D4ED8;
}
.dash-row-toggle:hover {
  opacity: 0.82;
}
.dash-row-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}


/* Branch home page */
.sefim-home {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
}

.sefim-home__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 20px;
    padding: 28px 30px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 56%, #2c76c9 100%);
    box-shadow: 0 12px 28px rgba(8, 57, 113, 0.18);
    overflow: hidden;
    color: #fff;
}

.sefim-home__hero::before,
.sefim-home__hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.sefim-home__hero::before {
    top: -100px;
    right: -40px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 72%);
}

.sefim-home__hero::after {
    bottom: -120px;
    left: -20px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(160, 205, 255, 0.16) 0%, rgba(160, 205, 255, 0) 72%);
}

.sefim-home__hero-copy,
.sefim-home__hero-side {
    position: relative;
    z-index: 1;
}

.sefim-home__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sefim-home__hero h2 {
    margin: 14px 0 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sefim-home__hero p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.6;
}

.sefim-home__hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.sefim-home__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(7, 35, 73, 0.14);
    transition: all 0.2s ease;
    cursor: pointer;
}

.sefim-home__refresh:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(7, 35, 73, 0.18);
    color: var(--primary);
}

.sefim-home__refresh:active {
    transform: translateY(0);
}

.sefim-home__last-update {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11.5px;
    font-weight: 500;
}

.sefim-home__hero-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-self: center;
}

.sefim-home__hero-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(255, 255, 255, 0.35);
    border-left-color: rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.sefim-home__hero-stat:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.10) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.sefim-home__hero-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 16px;
    flex-shrink: 0;
}

.sefim-home__hero-stat-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sefim-home__hero-stat-data strong {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.sefim-home__hero-stat-data span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sefim-home__hero-stat.is-online {
    background: linear-gradient(135deg, rgba(27, 154, 99, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(52, 211, 153, 0.25);
    border-top-color: rgba(52, 211, 153, 0.35);
    box-shadow: 0 4px 24px rgba(16, 185, 129, 0.10),
                inset 0 1px 0 rgba(52, 211, 153, 0.20),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.sefim-home__hero-stat.is-online .sefim-home__hero-stat-icon {
    background: rgba(52, 211, 153, 0.22);
    border-color: rgba(52, 211, 153, 0.18);
}

.sefim-home__hero-stat.is-offline {
    background: linear-gradient(135deg, rgba(169, 57, 57, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(248, 113, 113, 0.25);
    border-top-color: rgba(248, 113, 113, 0.35);
    box-shadow: 0 4px 24px rgba(239, 68, 68, 0.10),
                inset 0 1px 0 rgba(248, 113, 113, 0.20),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.sefim-home__hero-stat.is-offline .sefim-home__hero-stat-icon {
    background: rgba(248, 113, 113, 0.22);
    border-color: rgba(248, 113, 113, 0.18);
}

/* Progress bar kartı */
.sefim-home__progress-card {
    padding: 16px 20px;
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sefim-home__progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sefim-home__progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sefim-home__progress-value {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
}

.sefim-home__progress-track {
    height: 8px;
    border-radius: 99px;
    background: var(--border);
    overflow: hidden;
}

.sefim-home__progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 2px;
}

/* toolbar + list kartları projenin standart vega-card köşeleriyle uyumlu */
.sefim-home__toolbar-card,
.sefim-home__list-card {
    border-radius: var(--radius);
}

.sefim-home__toolbar-body {
    padding: 14px 18px;
}

.sefim-home__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

/* Arama kutusu */
.sefim-home__search {
    position: relative;
    display: block;
    margin: 0;
}

.sefim-home__search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.sefim-home__search:focus-within i {
    color: var(--primary);
}

.sefim-home__search .form-control {
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    font-size: 13px;
    transition: all 0.2s ease;
}

.sefim-home__search .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    outline: none;
}

/* Durum filtre butonları */
.sefim-home__filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sefim-home__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sefim-home__filter-btn i {
    font-size: 11px;
    opacity: 0.6;
}

.sefim-home__filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: var(--primary-light);
}

.sefim-home__filter-btn.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.sefim-home__filter-btn.is-active i {
    opacity: 1;
}

.sefim-home__filter-btn .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.10);
    color: inherit;
    font-size: 10px;
    font-weight: 700;
}

.sefim-home__filter-btn.is-active .count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Liste kartı */
.sefim-home__list-card {
    overflow: hidden;
}

.sefim-home__list-head,
.sefim-branch-row {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.85fr) 160px;
    gap: 12px;
    align-items: center;
}

.sefim-home__list-head {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface, #F8FAFC);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sefim-home__list {
    display: flex;
    flex-direction: column;
    max-height: min(60vh, 750px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Scrollbar stili */
.sefim-home__list::-webkit-scrollbar {
    width: 6px;
}

.sefim-home__list::-webkit-scrollbar-track {
    background: transparent;
}

.sefim-home__list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 99px;
}

.sefim-home__list::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Satır giriş animasyonu */
@keyframes sefim-row-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sefim-branch-row {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    transition: all 0.2s ease;
    animation: sefim-row-enter 0.35s ease both;
}

.sefim-branch-row:last-child {
    border-bottom: none;
}

.sefim-branch-row:hover {
    background: var(--primary-light);
}

.sefim-branch-row__mobile-label {
    display: none;
    margin-bottom: 4px;
    color: var(--text-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sefim-branch-row__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sefim-branch-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.sefim-branch-row__avatar.is-online {
    background: rgba(22, 163, 74, 0.10);
    color: #15803d;
}

.sefim-branch-row__avatar.is-offline {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

.sefim-branch-row:hover .sefim-branch-row__avatar {
    transform: scale(1.06);
}

.sefim-branch-row__name-wrap {
    min-width: 0;
}

.sefim-branch-row__name-wrap strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.sefim-branch-row__check strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.sefim-branch-row__time {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.sefim-branch-row__time i {
    font-size: 12px;
    opacity: 0.5;
}

.sefim-branch-row__time span {
    color: var(--text);
    font-weight: 500;
}

.sefim-branch-row__status {
    display: flex;
    align-items: center;
}

/* Durum etiketi */
.sefim-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sefim-status-pill__dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sefim-status-pill.is-online {
    background: rgba(22, 163, 74, 0.10);
    color: #15803d;
}

.sefim-status-pill.is-online .sefim-status-pill__dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.20);
    animation: sefim-pulse-online 2s ease-in-out infinite;
}

@keyframes sefim-pulse-online {
    0%, 100% { box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.20); }
    50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08); }
}

.sefim-status-pill.is-offline {
    background: rgba(220, 38, 38, 0.07);
    color: #b91c1c;
}

.sefim-status-pill.is-offline .sefim-status-pill__dot {
    background: #dc2626;
    opacity: 0.7;
}

.sefim-branch-row.is-hidden {
    display: none;
}

/* Filtre sonucu boş durumu */
.sefim-home__filtered-empty {
    display: none;
    padding: 48px 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.sefim-home__filtered-empty.is-visible {
    display: block;
}

.sefim-home__filtered-empty i {
    font-size: 32px;
    color: var(--border);
    margin-bottom: 14px;
    display: block;
}

.sefim-home__filtered-empty strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.sefim-home__filtered-empty span {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
}

.sefim-home__empty-state {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
}

.sefim-home__empty-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 4px;
}

.sefim-home__empty-state strong {
    font-size: 15px;
    color: var(--text);
}

.sefim-home__empty-state p {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 0;
}

@media (max-width: 1200px) {
    .sefim-home__hero,
    .sefim-home__toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .sefim-home__hero {
        padding: 22px;
    }

    .sefim-home__hero h2 {
        font-size: 22px;
    }

    .sefim-home__hero-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sefim-home__list-head,
    .sefim-branch-row {
        grid-template-columns: minmax(0, 1fr) minmax(160px, 0.85fr) 140px;
    }
}

@media (max-width: 767px) {
    .sefim-home {
        gap: 12px;
    }

    .sefim-home__hero {
        padding: 20px;
        border-radius: 18px;
    }

    .sefim-home__hero-side {
        grid-template-columns: 1fr;
    }

    .sefim-home__hero-stat {
        min-height: auto;
    }

    .sefim-home__toolbar-body {
        padding: 12px;
    }

    .sefim-home__filters {
        width: 100%;
    }

    .sefim-home__filter-btn {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }

    .sefim-home__list-head {
        display: none;
    }

    .sefim-branch-row {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: flex-start;
        padding: 14px;
    }

    .sefim-branch-row__mobile-label {
        display: block;
    }

    .sefim-branch-row__status {
        display: block;
    }

    .sefim-home__progress-card {
        padding: 14px 16px;
    }
}

/* ====================================
   §28 — Hero Animated Backgrounds
   ==================================== */

/* --- Keyframes --- */

/* (eski nokta keyframe — dash-hero-panel ile geriye uyumluluk için bırakıldı) */
@keyframes vega-hero-dots {
    0%   { background-position: 0     0,    0%   50%; }
    50%  { background-position: 36px  36px, 100% 50%; }
    100% { background-position: 72px  72px, 0%   50%; }
}

/* Parıltı: soldan sağa — her 15 saniyede bir, ~3.3s yavaş geçiş */
@keyframes vega-hero-shimmer {
    0%    { left: -65%; opacity: 0; }
    3%    { opacity: 1; }
    22%   { left: 120%; opacity: 0; }
    22.5% { left: -65%; opacity: 0; }
    100%  { left: -65%; opacity: 0; }
}

/* Arka plan: diyagonal çizgi dokusu + gradient birlikte kayar */
@keyframes vega-hero-bg {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* dash-hero-panel için ayrı — sadece background-position (no !important) */
@keyframes vega-hero-dots-dash {
    0%   { background-position: 0     0,    0%   50%; }
    50%  { background-position: 36px  36px, 100% 50%; }
    100% { background-position: 72px  72px, 0%   50%; }
}

@keyframes vega-hero-orb-a {
    0%   { transform: translate(0,    0)   scale(1);    opacity: .18; }
    33%  { transform: translate(8%,  -6%)  scale(1.10); opacity: .26; }
    66%  { transform: translate(-5%,  8%)  scale(.92);  opacity: .13; }
    100% { transform: translate(0,    0)   scale(1);    opacity: .18; }
}

@keyframes vega-hero-orb-b {
    0%   { transform: translate(0,    0)  scale(1);    opacity: .13; }
    50%  { transform: translate(-7%,  5%) scale(1.08); opacity: .22; }
    100% { transform: translate(0,    0)  scale(1);    opacity: .13; }
}

/* ---- sefim-home__hero ---- */
/* Düz koyu gradient arka plan — çizgi ve shimmer kaldırıldı */
.sefim-home__hero {
    background-image:    linear-gradient(-45deg, #061840 0%, #0b2660 30%, #143a8a 55%, #0a1f52 75%, #061840 100%);
    background-size:     320% 320%;
    background-position: 0% 50%;
    animation: vega-hero-bg 60s ease-in-out infinite;
}

/* Shimmer efekti: hero içindeki parıltı katmanı */
.sefim-home__hero-shimmer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}

.sefim-home__hero-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -65%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,0.03) 25%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.03) 75%,
        transparent 100%
    );
    transform: skewX(-12deg);
    animation: vega-hero-shimmer 15s ease-in-out infinite;
}

.sefim-home__hero::before {
    top: -90px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 68%);
    animation: vega-hero-orb-a 9s ease-in-out infinite;
}

.sefim-home__hero::after {
    bottom: -100px;
    left: -40px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(160,205,255,.20) 0%, rgba(160,205,255,0) 68%);
    animation: vega-hero-orb-b 11s ease-in-out infinite;
}

/* ---- dash-hero-panel (Dashboard/Index) ---- */
.dash-hero-panel {
    position: relative !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(-45deg, #061840 0%, #0b2660 30%, #143a8a 55%, #0a1f52 75%, #061840 100%) !important;
    background-size:     320% 320% !important;
    background-position: 0%   50%;
    animation: vega-hero-bg 30s linear infinite;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(14, 63, 160, .24) !important;
}

.dash-hero-panel .x_title,
.dash-hero-panel .x_content {
    position: relative;
    z-index: 1;
}

.dash-hero-panel .x_title {
    border-bottom-color: rgba(255,255,255,.15) !important;
}

.dash-hero-panel .x_title h2,
.dash-hero-panel .x_title h2 i {
    color: #fff !important;
}

.dash-hero-panel::before,
.dash-hero-panel::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.dash-hero-panel::before {
    top: -80px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
    animation: vega-hero-orb-a 9s ease-in-out infinite;
}

.dash-hero-panel::after {
    bottom: -80px;
    left: -30px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(160,205,255,.20) 0%, rgba(160,205,255,0) 70%);
    animation: vega-hero-orb-b 11s ease-in-out infinite;
}

/* Tarih filtre butonları */
.dash-hero-panel .btn.btn-default {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.30) !important;
    transition: background .2s, border-color .2s;
}

.dash-hero-panel .btn.btn-default:hover,
.dash-hero-panel .btn.btn-default.LimitButtonBack {
    background: rgba(255,255,255,.26) !important;
    border-color: rgba(255,255,255,.55) !important;
}

/* Refresh butonu */
.dash-hero-panel #RefreshPage {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.30) !important;
}

.dash-hero-panel #RefreshPage:hover {
    background: rgba(255,255,255,.26) !important;
}

/* --------------------------------------------------------------------------
   28. LOGIN PAGE - Glassmorphism + Standalone btn-login
   -------------------------------------------------------------------------- */

/* Standalone login buttons (LisansCreate, SelectSefimFaster) */
.btn-login {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    padding: 12px 28px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37,99,235,.35);
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,99,235,.5);
    color: #fff;
}
.btn-login:active { transform: translateY(0); }

.btn-login2 {
    background-color: #843434;
    border-color: #710f0f;
    color: #fff !important;
    border-radius: 10px;
}
.btn-login2:hover {
    background-color: #ac0d0d;
    border-color: #710f0f;
}

/* Keyframes */
@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(-40px, 40px) scale(1.1); }
}
@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%       { transform: translate(30px, -30px) scale(1.05); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Login page background */
.modern-login-page {
    font-family: 'Inter', sans-serif !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 60%, #1e293b 100%) !important;
    min-height: 100vh !important;
    overflow: hidden;
    position: relative;
}

.modern-login-page::before {
    content: '';
    position: fixed;
    top: -120px; right: -120px;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(37,99,235,.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatOrb1 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.modern-login-page::after {
    content: '';
    position: fixed;
    bottom: -100px; left: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(14,165,233,.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatOrb2 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Glassmorphism card */
.modern-login-card {
    background: rgba(255,255,255,.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
    animation: fadeInUp 0.6s ease both;
    position: relative;
    z-index: 1;
}

.modern-login-card .m-login__title,
.modern-login-card h2 {
    color: #f1f5f9 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: -0.5px !important;
}

.modern-login-card .label,
.modern-login-card label {
    color: rgba(255,255,255,.7) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.modern-login-card .form-control {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    color: #f1f5f9 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
    height: auto !important;
}

.modern-login-card .form-control:focus {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(37,99,235,.6) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
    outline: none !important;
}

.modern-login-card .form-control::placeholder {
    color: rgba(255,255,255,.35) !important;
}

.modern-login-card .form-control.form-control-sm.form-control-solid {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

.modern-login-card .btn-login,
.modern-login-card .m-login__btn {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 14px 32px !important;
    width: 100% !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(37,99,235,.35) !important;
    margin-top: 12px !important;
}

.modern-login-card .btn-login:hover,
.modern-login-card .m-login__btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37,99,235,.5) !important;
}

.modern-login-card .btn-login:active,
.modern-login-card .m-login__btn:active {
    transform: translateY(0) !important;
}

.modern-login-card .m-login__logo {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.modern-login-card .m-login__logo img {
    filter: brightness(1.1) !important;
    max-width: 200px !important;
}

.modern-login-card .m-login__form-action {
    margin-top: 8px !important;
}

.modern-login-card .m-login__head label {
    font-size: 11px !important;
    opacity: 0.5 !important;
    margin-bottom: 4px !important;
}

.modern-login-card .form-group.m-form__group {
    margin-bottom: 4px !important;
}

/* ── Login mobile ────────────────────────────────────────────── */
@media (max-width: 576px) {
    /* Wrapper: kendi padding'iyle kart genişliğini kontrol eder */
    .modern-login-page .m-login__wrapper {
        padding: 20px !important;
        align-items: flex-start !important;
        padding-top: 36px !important;
        box-sizing: border-box !important;
    }

    /* Kart: wrapper padding'i yeterli, margin sıfır */
    .modern-login-card {
        margin: 0 !important;
        padding: 24px 20px !important;
        width: 100% !important;
        max-width: none !important;
        border-radius: 14px !important;
    }

    /* Üst logo: margin'i küçült */
    .modern-login-card .m-login__logo img {
        margin-top: 0 !important;
        width: 65% !important;
        height: auto !important;
    }

    /* Giriş butonu tam genişlik */
    .modern-login-card .m-login__btn,
    .modern-login-card .btn-login {
        width: 100% !important;
        padding: 12px !important;
    }

    /* Versiyon ve başlık boşluklarını sık */
    .modern-login-card .m-login__head {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 400px) {
    .modern-login-page .m-login__wrapper {
        padding: 12px !important;
        padding-top: 24px !important;
    }

    .modern-login-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    .modern-login-card .m-login__logo img {
        width: 55% !important;
    }
}

/* --------------------------------------------------------------------------
   30. İcmal Compare Table
   -------------------------------------------------------------------------- */
.icmal-compare-head th {
  background: #e8edf4;
  color: #1e293b;
  font-weight: 600;
  font-size: 13px;
}
.icmal-row-branch td {
  color: #1e293b;
  font-weight: 600;
}
.icmal-row-kasiyer td {
  color: #1e293b;
  font-weight: 600;
  background-color: #ecf8ee;
}
.icmal-row-fark td {
  background-color: #c0392b;
  color: #fff;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   ProductList — Toolbar buton çiftleri
   -------------------------------------------------------------------------- */

/* Sağa yaslanmış buton (desktop) */
.menu-btn-add {
  margin-left: auto;
}

/* Buton çifti: ana buton + icon buton yan yana */
.pl-btn-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pl-btn-pair .pl-btn-main {
  flex: 1 1 auto;
}

.pl-btn-pair .pl-btn-icon {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  /* Toolbar'ı mobilde wrap moduna al, column yerine */
  .pl-toolbar.vega-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Çiftler mobilde tam genişlik satır kaplar */
  .pl-btn-pair {
    width: 100%;
    overflow: hidden;
  }

  .pl-btn-pair .pl-btn-main {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pl-btn-pair .pl-btn-icon {
    flex-shrink: 0;
  }

  /* Tekli butonlar da tam genişlik */
  .pl-toolbar.vega-toolbar > .btn {
    width: 100%;
    text-align: center;
  }

  /* Yeni Menü / sağa yaslanmış butonlar mobilde margin-left:auto kaldır */
  .pl-toolbar.vega-toolbar .menu-btn-add {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   UsersList — Araç çubuğu & tablo responsive
   -------------------------------------------------------------------------- */
.ul-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ul-count {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ul-count i { margin-right: 4px; }

.ul-search {
  flex: 0 1 400px;
  display: table;
}

.ul-search .form-control { height: 34px; }

.ul-add-btn { white-space: nowrap; margin-left: auto; }

@media (max-width: 767px) {
  .ul-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ul-count   { flex: 0 0 auto; text-align: center; }
  .ul-search  { flex: 0 0 auto; width: 100%; max-width: 100%; }
  .ul-add-btn { width: 100%; text-align: center; margin-left: 0; }
}

/* ── 28. Boolean Badge ────────────────────────────── */
.vega-badge-bool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 11px;
  border-radius: 50%;
  line-height: 1;
}
.vega-badge-bool--yes {
  background: var(--success);
  color: #fff;
}
.vega-badge-bool--no {
  background: var(--gray-200, #e2e8f0);
  color: var(--gray-500, #94a3b8);
}

/* ── 29. Actions Dropdown (Tablo satır içi işlem menüsü) ── */
.dropdown-menu-actions {
  min-width: 180px;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  border-radius: 6px;
  z-index: 1050;
}
.dropdown-menu-actions > li > a {
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12.5px;
  color: #333;
  display: block;
}
.dropdown-menu-actions > li > a:hover {
  background-color: #f0f4ff;
  color: #1a1a1a;
  text-decoration: none;
}
.dropdown-menu-actions > li > a > i {
  width: 18px;
  text-align: center;
  margin-right: 4px;
}
.dropdown-menu-actions > .divider {
  margin: 4px 0;
}

/* --------------------------------------------------------------------------
   35. Branch Picker — DailyTotals vb. raporlarda şube seçim paneli
   -------------------------------------------------------------------------- */
.vega-branch-picker-panel > .x_content {
  padding: 0;
}

.vega-branch-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #F5F9FF 0%, #E9F1FB 100%);
  border-radius: var(--radius);
}

.vega-branch-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.vega-branch-picker-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.vega-branch-picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  font-size: 19px;
  box-shadow: 0 6px 14px rgba(13, 77, 154, 0.22);
  flex-shrink: 0;
}

.vega-branch-picker-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.vega-branch-picker-title p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Tümünü Seç — pill toggle */
.vega-branch-picker-toggle {
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
}

.vega-branch-picker-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vega-branch-picker-toggle-ui {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  user-select: none;
}

.vega-branch-picker-toggle-ui i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: transparent;
  font-size: 10px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.vega-branch-picker-toggle:hover .vega-branch-picker-toggle-ui {
  border-color: var(--primary);
  box-shadow: 0 4px 10px rgba(13, 77, 154, 0.12);
}

.vega-branch-picker-toggle input:checked + .vega-branch-picker-toggle-ui {
  background: var(--primary);
  border-color: var(--primary-dark);
  color: #fff;
}

.vega-branch-picker-toggle input:checked + .vega-branch-picker-toggle-ui i {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}

.vega-branch-picker-toggle input:focus-visible + .vega-branch-picker-toggle-ui {
  box-shadow: 0 0 0 3px rgba(13, 77, 154, 0.18);
}

/* Body — Select2 (tekli ve çoklu) */
.vega-branch-picker-body .select2-container {
  width: 100% !important;
}

.vega-branch-picker-body .select2-selection--single {
  height: 44px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  border-color: #cddbee !important;
}

.vega-branch-picker-body .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  padding-left: 14px !important;
  font-size: 14px;
}

.vega-branch-picker-body .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 10px;
}

.vega-branch-picker-body .select2-selection--multiple {
  min-height: 44px !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border-color: #cddbee !important;
}

.vega-branch-picker-body .select2-selection--multiple .select2-selection__rendered {
  max-height: 160px;
  overflow-y: auto;
  padding: 0;
}

/* Boşken placeholder gibi davransın */
.vega-branch-picker-body .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin-top: 6px;
}

/* Actions */
.vega-branch-picker-actions {
  display: flex;
  justify-content: flex-end;
}

.vega-branch-picker-submit {
  min-width: 160px;
  justify-content: center;
}

@media (max-width: 767px) {
  .vega-branch-picker {
    padding: 14px;
    gap: 12px;
  }

  .vega-branch-picker-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .vega-branch-picker-toggle {
    width: 100%;
  }

  .vega-branch-picker-toggle-ui {
    width: 100%;
    justify-content: center;
  }

  .vega-branch-picker-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 10px;
  }

  .vega-branch-picker-title h3 {
    font-size: 14px;
  }

  .vega-branch-picker-title p {
    font-size: 12px;
  }

  .vega-branch-picker-actions {
    justify-content: stretch;
  }

  .vega-branch-picker-submit {
    width: 100%;
    min-width: 0;
  }
}