/* root.css */
:root {
	--bs-white: #fff;
	--bs-black: #000;
	--dark: #b73c00;
	--light: #ffd5bf;
	--white: #fff;
	--red: #e74c3c;
	--yellow: #ffff00;
	--blue: #3498db;
	--green: #27ae60;
	--grey: #c4c4c4;
	--green-white: #b7ffdb;
	--badge-color: #c4c4c4;
	--badge-bg: #efefef;
	--badge-border: #808080;
	--icon-border: #333;
	--sidebar-w: 300px;
	--gap: 30px;
	--white: #fff;
	--accent: #2563eb;
	--muted: #6b7280;
	--card-bg: #ffd7ae;
	--navbar-body-back: transparent;
	--navbar-body-color: var(--dark);
	--navbar-drop-back: var(--light);
	--navbar-drop-back-hover: var(--dark);
	--navbar-drop-back-hover-color: #fff;
	--navbar-color: var(--dark);
	--divider-drop: #e3b08a;
	--divider-down: #a3a3a3;
	--contact: var(--dark);
	--sub-contact: #a3a3a3;
	--sub-modal-c: #fff;
	--sub-modal-bg: #3040cf;
	--admin-modal-bg: #fff5ec;
	--child-modal-bg: var(--bs-success);
}

:root[data-theme="light"] {
	--body-color: #111;
	--body-bg-image: var(--image-bg);
	--main-bg: var(--dark);
	--main-text: var(--light);
	--page-text: var(--dark);
	--page-bg: var(--white);
	--wrap-page-text: var(--dark);
	--wrap-page-bg: var(--white);
	--main-bg-hover: #c9e8c8;
	--main-back-bg: var(--light);
	--main-back-bg-hover: #347632;
	--sub-back-bg:  #5f5f5f;
	--sub-back-bg-hover: #c5c5c5;
	--th-bg: #fd5200;
	--th-text: var(--light);
	--td-border: var(--light);
}

:root[data-theme="dark"] {
	--body-color: var(--white);
	--body-bg-image: var(--image-bg);
	--main-bg: var(--light);
	--main-text: var(--dark);
	--page-text: var(--dark);
	--page-bg: var(--white);
	--wrap-page-text: var(--dark);
	--wrap-page-bg: var(--white);
	--main-bg-hover: var(--dark);
	--main-back-bg: var(--dark);
	--main-back-bg-hover: #c9e8c8;
	--sub-back-bg: #5f5f5f;
	--sub-back-bg-hover: #5f5f5f;
	--th-bg: #fd5200;
	--th-text: var(--light);
	--td-border: var(--light);
}

.btn-black {
	--bs-btn-bg: var(--bs-black);
	--bs-btn-border-color: var(--bs-black);
	--bs-btn-hover-bg: #414141;
	--bs-btn-hover-border-color: #414141;
	--bs-btn-active-bg: #414141;
	--bs-btn-active-border-color: #414141;
	--bs-btn-color: #fff;
}

.btn-white {
	--bs-btn-bg: var(--green-white);
	--bs-btn-border-color: var(--green-white);
	--bs-btn-hover-bg: #414141;
	--bs-btn-hover-border-color: #414141;
	--bs-btn-active-bg: #414141;
	--bs-btn-active-border-color: #414141;
	--bs-btn-color: var(--bs-success);
}

/* global.css */
html, body {
	height: 100%;
	margin: 0;	
	font-family: 'Montserrat', 'Inter', sans-serif;
	background: var(--white);
	color: var(--black);
}

h1, h2, h3, p, a, li, label, option, select, div {
	font-family: 'Montserrat', sans-serif;
}

a {
	text-decoration: none;
}

.staff-form {
	display: flex;
	gap: 10px;
}

.staff-form .start, .staff-form .end, .staff-form .btn {
	flex: 1;
}

.staff-form .status {
	flex: 4;
}

.staff.container {
	display: flex;
	gap: 10px;
}

.list-wrapper {
	position: relative;
	border: 1px solid #ccc;
	padding: 4px;
	border-radius: 6px;
}

.list-wrapper .label {
	position: absolute;
	top: -9px; /* 🔥 border üstüne çıkar */
	left: 10px;
	background: #fff; /* 🔥 border çizgisini keser */
	padding: 0 6px;
	font-size: 13px;
	color: var(--contact);
	font-weight: bold;
}

/* Ortak liste ayarları */
.staff.container .list {
	border: 1px solid #ccc;
	height: 400px; /* SABİT YÜKSEKLİK */
	overflow-y: auto; /* SCROLL */
	padding: 10px;
	box-sizing: border-box;
	margin: 0px;
	border-radius: 6px;
}

/* Sol taraf: 2/3 */
.staff.container .left {
	flex: 2;
}

/* Sağ taraf: 1/3 */
.staff.container .right {
	flex: 1;
}

/* Solda 2 kolon */
.staff.container .left .list-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	grid-auto-rows: 30px;
	align-content: start; /* 🔥 en üstten başlatır */
	justify-content: stretch;
	height: 400px;
	overflow-y: auto;
	padding: 4px;
}

/* Sağda 1 kolon */
.staff.container .right .list-inner {
	display: grid;
	grid-template-columns: 1fr; /* tek kolon */
	grid-auto-rows: 30px; /* row yüksekliği */
	gap: 8px;
	align-content: start; /* 🔥 en üstten başlatır */
	justify-content: stretch;
	height: 400px;
	overflow-y: auto;
	padding: 4px;
}

/* Item görünüm */
.staff.container .item {
	padding: 8px;
	border: 1px solid #f5f5f5;
	cursor: pointer;
	background: var(--admin-modal-bg);
	transition: 0.2s;
	height: 30px; /* SABİT YÜKSEKLİK */
	display: flex;
	align-items: center;
	overflow: hidden; /* taşanı gizle */
	white-space: nowrap; /* tek satır */
	text-overflow: ellipsis; /* ... koy */
	border-radius: 5px;
	color: var(--bs-black);
}

.staff.container .item.inactive {
	background: #f7f7f7;
	color: #888;
	cursor: not-allowed;
	opacity: 0.7;
	pointer-events: none; /* 🔥 tıklamayı kesin kilitler */
}

.staff.container .item:hover {
	background: var(--contact);
	color: var(--admin-modal-bg);
}

.staff.container .list-inner::-webkit-scrollbar {
	width: 6px;
}

.staff.container .list-inner::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 3px;
}

iframe {border:1px solid #ccc; overflow-x:none}

.yellow {
	color: var(--card-bg);
  font-size:10px;	
}

.yellows {
  color: var(--red);
  font-size:10px; 
}

/* menu-bar.css */
/* -----------------------------
   DESIGN TOKENS
----------------------------- */
:root {
  --brand-primary: #b73c00;
  --brand-soft: #cd5a05;
  --brand-secondary: #ffd5bf;
  --white: #ffffff;
  --black: #000000;

  --ui-transition: all 0.35s ease;

  /* Buttons */
  --btn-bg: var(--brand-primary);
  --btn-text: var(--brand-secondary);
  --btn-hover-bg: var(--brand-secondary);
  --btn-hover-text: var(--brand-primary);

  /* Transparent */
  --transparent: transparent;
}

/* LIGHT THEME */
:root[data-theme="light"] {
  --navbar-bg: var(--brand-secondary);
  --navbar-text: var(--brand-primary);
  --navbar-hover-bg: var(--brand-soft);
  --navbar-hover-text: var(--brand-secondary);

  --dropdown-bg: var(--brand-soft);
  --dropdown-text: var(--brand-secondary);
  --dropdown-hover-bg: var(--brand-secondary);
  --dropdown-hover-text: var(--brand-soft);
  
  --dropdown-sub-bg: var(--brand-secondary);
  --dropdown-sub-text: var(--brand-primary);
  --dropdown-sub-hover-bg: var(--brand-primary);
  --dropdown-sub-hover-text: var(--brand-secondary);

  --image-bg:  url('/assets/background/menu-light.png');
  
}

/* DARK THEME */
:root[data-theme="dark"] {
  --navbar-bg: var(--brand-primary);
  --navbar-text: var(--brand-secondary);
  --navbar-hover-bg: var(--brand-secondary);
  --navbar-hover-text: var(--brand-primary);

  --dropdown-bg: var(--brand-secondary);
  --dropdown-text: var(--brand-primary);
  --dropdown-hover-bg: var(--brand-primary);
  --dropdown-hover-text: var(--brand-secondary);
  
  --dropdown-sub-bg: var(--brand-primary);
  --dropdown-sub-text: var(--brand-secondary);
  --dropdown-sub-hover-bg: var(--brand-secondary);
  --dropdown-sub-hover-text: var(--brand-primary);
   
  /* Buttons */
  --btn-bg: var(--navbar-text);
  --btn-text: var(--navbar-bg);
  --btn-hover-bg: var(--navbar-bg);
  --btn-hover-text: var(--navbar-text);
  
  --image-bg:  url('/assets/background/menu-dark.png');
}

/* -----------------------------
   GLOBAL ANIMATION
----------------------------- */
html {
  transition: background-color 0.35s ease, color 0.35s ease;
}
html.theme-animating * {
  transition-duration: 0.35s !important;
}
@media (prefers-reduced-motion: reduce) {
  html, * { transition: none !important; }
}

/* -----------------------------
   NAVBAR BASE
----------------------------- */
#mainNavbar {
  position: relative;
  width: 100%;
  z-index: 10;
  padding: 5px 0;
  background: var(--image-bg);
}

.navbar {
	border-radius:none;
}
#mainNavbar .navbar-inner {
  width: 1200px;
  max-width: 95%;
  margin: 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background-color: var(--transparent);
  color: var(--navbar-text);
  transition: var(--ui-transition);
  flex-wrap: nowrap;  
}

/* =========================
   RESET & ORTAK
========================= */

.admin-navbar,
.admin-sidebar,
.admin-navbar ul,
.admin-navbar li,
.admin-sidebar ul,
.admin-sidebar li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-navbar a,
.admin-sidebar a {
    text-decoration: none;
    color: var(--navbar-text);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.admin-navbar i,
.admin-sidebar i {
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

/* =========================
   NAVBAR BASE
========================= */

.navbar-nav {
    margin-right: auto;
}

.admin-navbar { 
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    align-items: left;
    margin: 0;
    padding: 0 16px;
    list-style: none;
}

.admin-navbar > li {
    position: relative;
    margin-right: 12px;
}

.admin-navbar > li > a {
    padding: 8px 12px;
    border-radius: 6px;
}

/* hover arkaplan */
.admin-navbar > li:hover > a,
.admin-navbar > li:focus-within > a {
    background: var(--navbar-hover-bg);
    color: var(--navbar-hover-text);
}

/* alt menü varsa hover’da alt radius sıfır */
.admin-navbar > li:has(> ul):hover > a,
.admin-navbar > li:has(> ul):focus-within > a {
	
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

}

/* =========================
   NAVBAR DROPDOWN GENEL
========================= */

.admin-navbar ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--dropdown-bg);    
    padding: 6px;
    border-radius: 0 6px 6px 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    transform: translateY(-6px);
}

/* 1. seviye */
.admin-navbar > li:hover > ul,
.admin-navbar > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.admin-navbar ul li {
    position: relative;
}

.admin-navbar ul li a {
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--dropdown-text);
}

.admin-navbar ul li a:hover {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}

/* =====================================================
    DROPDOWN Divider
===================================================== */

/* Varsayılan */
li.navbar-horizontal-divider {
    height: 1px;
    width: 100%;
    opacity: 0.3;
    margin: 6px 0;
    pointer-events: none;
    align-self: stretch;
    background: var(--divider-color);
}

/* 1. seviye */
.admin-navbar ul {
    --divider-color: var(--dropdown-text);
}

/* 2. seviye */
.admin-navbar ul ul {
    --divider-color: var(--dropdown-sub-text);
}

/* =========================
   2. + 3. SEVIYE
========================= */

.admin-navbar ul ul {
    top: 0;
    left: 100%;
    transform: translateX(-6px);
    background: var(--dropdown-sub-bg);
}

/* kritik kısım */
.admin-navbar ul li:hover > ul,
.admin-navbar ul li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* sağdan taşanlar */
.admin-navbar ul li.edge > ul {
    left: auto;
    right: 100%;
}

.admin-navbar ul ul li a {
    color: var(--dropdown-sub-text);
}

.admin-navbar ul ul li a:hover {
	  background: var(--dropdown-sub-hover-bg);
    color: var(--dropdown-sub-hover-text);
}

/* alt menü varsa hover’da alt radius sıfır */
.admin-navbar ul li:has(> ul):hover > a,
.admin-navbar ul li:has(> ul):focus-within > a {
  
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--dropdown-sub-bg);
  color: var(--dropdown-sub-text);

}

/* =========================
   LINK STABILIZER
========================= */

.admin-navbar ul li {
    position: relative;
}

.admin-navbar ul li > a {
    position: relative;
    z-index: 2;
}

/* =========================
   OK İŞARETLERİ
========================= */

.admin-navbar ul li:has(> ul) > a {
    padding-right: 32px;
    position: relative;
}

.admin-navbar ul li:has(> ul) > a::after {
    content: "▶";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.6;    
}

.admin-navbar ul li:has(> ul).edge > a::after {
    content: "◀";
}

/* =========================
   SIDEBAR NORMAL
========================= */

.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100vh;
    background: var(--navbar-bg);
    padding: 12px 8px;
    overflow: hidden;
    transition: width 0.2s ease;
    z-index: 100;
}

.admin-sidebar > li > a {
    padding: 10px 12px;
    border-radius: 6px;
}

.admin-sidebar > li > a:hover {
    background: rgba(255,255,255,0.08);
}

/* sub */
.admin-sidebar ul {
    margin-left: 26px;
    margin-top: 4px;
}

.admin-sidebar ul li a {
    padding: 8px 10px;
    font-size: 14px;
    opacity: 0.85;
}

.admin-sidebar ul li a:hover {
    opacity: 1;
}

/* =========================
   SIDEBAR MINI
========================= */

.admin-sidebar.mini {
    width: 64px;
    padding: 12px 6px;
}

.admin-sidebar.mini > li > a {
    justify-content: center;
    padding: 12px 0;
}

.admin-sidebar.mini a span,
.admin-sidebar.mini ul {
    display: none;
}

/* hover expand */
.admin-sidebar.mini:hover {
    width: 240px;
    box-shadow: 8px 0 20px rgba(0,0,0,0.4);
}

.admin-sidebar.mini:hover a span,
.admin-sidebar.mini:hover ul {
    display: block;
}

/* tooltip */
.admin-sidebar.mini li {
    position: relative;
}

.admin-sidebar.mini li:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* =========================
   ACTIVE
========================= */

.admin-sidebar a.active,
.admin-navbar a.active {
    background: rgba(255,255,255,0.15);
    font-weight: 500;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 1024px) {
    .admin-sidebar {
        transform: translateX(-100%);
        width: 240px !important;
    }

    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }
}

/* -----------------------------
   BUTTONS
----------------------------- */
.btn-outline-light {
  border: 1px solid var(--btn-text);
  background-color: var(--btn-bg);
  color: var(--btn-text);
  transition: var(--ui-transition);
}

.btn-outline-light:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  border-color: var(--btn-hover-text);
}

/* =====================================================
   ACTIONS
===================================================== */
#mainNavbar .navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.no-click {
    pointer-events: none;
    cursor: default;
}

/* page.css */
.wrap-section {
  width: 100%;
  background: var(--main-bg);
}

.wrap-section-container {
  width: 1100px;
  padding: 10px 20px;
  max-width: 95%;
  margin: 0 auto; /* ortalama */
  font-size:  20px;
  font-weight: bold;
  color: var(--main-text);;
  border-left: 1px solid var(--main-text);;
  border-right: 1px solid var(--main-text);;
}

.wrap-container {
  width: 1100px;
  padding: 20px;
  max-width: 95%;
  margin: 0px auto; /* ortalama */
  font-size:  18px;
  color: var(--wrap-page-text);
  background: var(--wrap-page-bg);
}

.wrap {
  display: flex;
  gap: var(--gap);
  padding: 12px;
  box-sizing: border-box;
  min-height: 100vh
}

/* Admin title bar */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: top; /* DİKEY ORTALAMA */
  padding:  4px 15px 4px 5px;
  margin:5px;
}

.header-row .title {
  padding-top: 7px;
  font-size: 20px;
  font-weight: bold;
  opacity: 0;
  transform: translateX(-40px);
  animation: slideRight .7s ease forwards;
}

.header-row .right-group {
  display: flex;
  align-items: center; /* DİKEY ORTALAMA */
  gap:  12px;
}

.header-row .search-box {
  position: relative;
  display: flex;
  margin-right: 10px;
  justify-content:  center;
  align-items: center; /* DİKEY ORTALAMA */
  transition: .3s;
}

.header-row .search-box:focus-within {
  border-color: var(--main-back-bg);
}

.header-row .search-box input {
  width: 180px;
  height: 30px; /* DAHA İNCE */
  padding: 4px 32px 4px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 50px !important; /* YARIM DAİRE */
  outline: none;
  transition: 0.2s ease;
}

.header-row .search-box.rbnone{
  margin-right: 0px !important;
}

.header-row .search-box.rbnone input{
	border-right:none;
	border-radius: 50px 0px 0px 50px !important; /* YARIM DAİRE */
}

.header-row .search-box input:focus {
  border-color: var(--main-back-bg);
  box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.2);
}

.header-row .search-box .search-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}

.header-row select {
	padding: 4px 40px 5px 14px;
  border: 1px solid #ccc;
  border-left:none;
  font-size:13px;
  outline: none;
  background: var(--light);
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--dark);
  background-image:
    url('data:image/svg+xml;utf8,<svg fill="%23b73" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.header-row .search-box .loader {
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  position: absolute;
  right: -22px;
  display: none;
}

.header-row .icons {
  display: flex;
  align-items: center; /* DİKEY ORTALAMA */
  gap: 10px;
}

.header-row .icon {
  font-size: 28px;
  opacity: 0;
  transform: translateY(-20px);
  animation: fallDown .6s ease forwards;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: .2s ease; /* hover ve active için yumuşak animasyon */
  cursor: pointer;
}

/* her ikona gecikme veriyoruz */
.header-row .icon:nth-child(1) {
  animation-delay: .2s;
}

.header-row .icon:nth-child(2) {
  animation-delay: .4s;
}

/* 🔵 HOVER — Ikon 1.15x büyüsün ve gölge çıksın */
.header-row .icon:hover {
  transform: translateY(0) scale(1.15);
  font-size: 24px;
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.75);
}

/* 🔵 AKTIF (tıklama anı) — Hafif daha büyük + güçlü gölge */
.header-row .icon:active {
  transform: translateY(0) scale(1.25);
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px
}

/*------------------------------------
  LOADING 
  ----------------------------------*/
.loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading.hidden {
  display: none;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #ddd;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/*------------------------------------
  TABLE 
  ----------------------------------*/
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size:12px;
}

.info-table tr th {
  text-align: center; /* Sütun başlıklarını ortaya alır */
  padding: 10px;
  font-weight: 600;
  background: var(--th-bg); /* Arka plan rengi */
  color: var(--th-text);
  border: 1px solid var(--white);
}

.info-table tr th.left {
  text-align: left;
}

.info-table td {
  padding: 8px;
  border-bottom: 1px solid var(--td-border);
  color:#696969;  
}

.f12 {
	font-size:11px;
}

.info-table tr:hover {
  background: #fafafa; /* Hover efekti istersen */
}

/* Tablonun tamamına uygulanacak */
table.custom-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Çok önemli: kolon genişliği sabitlenir */
  font-size:12px;
}

/* Tablonun hücreleri */
table.custom-table th {
  padding: 8px 12px;
}

table.custom-table td {
  padding: 4px 8px;
}

table.custom-table td.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kolonlara özel genişlikler (yüzde veya px) */
table.custom-table th:nth-child(1),
table.custom-table td:nth-child(1) { width: 8%; }
table.custom-table th:nth-child(2),
table.custom-table td:nth-child(2) { width: 9%; }
table.custom-table th:nth-child(3),
table.custom-table td:nth-child(3) { width: 10%; }
table.custom-table th:nth-child(4),
table.custom-table td:nth-child(4) { width: 13%; }
table.custom-table th:nth-child(5),
table.custom-table td:nth-child(5) { width: 25%; }
table.custom-table th:nth-child(6),
table.custom-table td:nth-child(6) { width: 25%; }
table.custom-table th:nth-child(7),
table.custom-table td:nth-child(7) { width: 10%; }

/* Tablonun tamamına uygulanacak */
table.expense {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Çok önemli: kolon genişliği sabitlenir */
  font-size:13px;
}

/* Tablonun hücreleri */
table.expense th {
  padding: 8px 12px;
}

table.expense td {
  padding: 4px 8px;
}

table.expense td.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kolonlara özel genişlikler (yüzde veya px) */
table.expense th:nth-child(1),
table.expense td:nth-child(1) { width: 7%; }
table.expense th:nth-child(2),
table.expense td:nth-child(2) { width: 72%; }
table.expense th:nth-child(3),
table.expense td:nth-child(3) { width: 8%; }
table.expense th:nth-child(4),
table.expense td:nth-child(4) { width: 13%; }

.row-two {
  display: flex;
  align-items: center; /* dikey hizalama */
  gap: 10px;
  padding: 4px;
}

/* Sol taraf geniş — kalan alanı kaplar */
.row-two .left {
  flex: 1; /* tüm boş alanı kapla */
}

/* Sağ taraf dar (örnek: 120px) */
.row-two .right {
  text-align:  right;
}

/* medya.css */
/* photo -------*/
.photo-container {
  width: 100%;
  background: #fff;
  padding: 0px;
}

.row-two {
  display: flex;
  align-items: center; /* dikey hizalama */
  gap: 10px;
  padding: 4px;
}

.row-title {
  margin-bottom: 10px;
  color: #1d3557;
  border-left: 4px solid #457b9d;
  padding-left: 10px;
  font-size: 20px;
}

/* Sol taraf geniş — kalan alanı kaplar */
.row-two .left {
  flex: 1; /* tüm boş alanı kapla */
}

/* Sağ taraf dar (örnek: 120px) */
.row-two .right {
  text-align:  right;
}

.row-two .button-container {
  justify-content: top;
}

.photo-container .drop-zone {
  margin-bottom: 20px;
}

/* Zone */
.drop-zone {
  border: 2px dashed #cfcfcf;
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  color: #666;
  background: #fafafa;
  transition: border-color .15s, background .15s;
}

.drop-zone p {
  font-size: 14px;
  text-align: center;
}

.drop-zone.dragover {
  border-color: #4a90e2;
  background: #f0f8ff;
}

.link-btn {
  background: none;
  border: none;
  color: #0b5ed7;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  padding: 0;
}

.file-list {
  list-style: none;
  margin-top: 12px;
  padding: 0;
  display: none;
}

.file-item.main-image {
  background-color: #00bb00;
  color: #fff;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 4px;
  background: #fff;
  font-size: 12px;
}

.file-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.file-name {
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-file {
  background: none;
  border: none;
  color: #d9534f;
  cursor: pointer;
  font-weight: 600;
}

/* progress */
.progress-wrapper {
  width: 100%;
  display: block;
  border: 2px dashed #d70000;
  border-radius: 10px;
  padding: 20px;
  margin-bottom:20px;
  
}

.progress-bar-bg {
  width: 100%;
  height: 13px;
  background: #ffd2d2;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  line-height: 0;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4caf50, #2e8b57);
  transition: width .2s linear;
  display:  block;
}

/* small screens */
@media ( max-width :560px) {
  .progress-bar-bg {
    width: 180px;
  }
  .file-name {
    max-width:  200px;
  }
}

.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.left {
  flex: 1
}

.right {
  align-self: flex-end;
  padding-bottom: 10px;
}

.btn-small {
  display: none;
  padding: 8px 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
  padding: 8px 12px !important;
}

.btn i {
  margin-left: 5px;
}

.form-group select {
  padding-right: 20px;
}

/* Temel icon-only buton */
.icon-circle.icon-btn, .icon-circle.icon-badge {
  background: var(--white) !important;
  border: 1px dotted #333;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  cursor: pointer;
  font-size: 20px; /* ikon boyutunu buradan kontrol edersin */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.icon-circle.icon-icon {
  background: none;
  color: var(--main-bg);
  border-radius: 15px;
  height: 30px;
  width: 30px;
  cursor: pointer;
  font-size: 14px; /* ikon boyutunu buradan kontrol edersin */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--main-back-bg);
  transform: translateY(-20px);
  animation: fallDown .6s ease forwards;
}

.icon-circle.icon-icon:hover {
  transform: translateY(0) scale(1.15);
  font-size: 12px;
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.75);
}

.icon-circle.icon-icon:active {
  transform: translateY(0) scale(1.25);
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.icon-circle.icon-icon i {
  font-size: 14px;
}

.icon-circle.icon-badge {
  border-radius: 10px;
  height: 26px;
  font-size: 9px;
  width: 100%;
  margin: 0px;
  padding: 0px 10px;
}

.icon-circle.icon-btn.red {
  border-color: #e74c3c;
}

.icon-circle.icon-btn.blue {
  border-color: #3498db !important;
}

.icon-circle.icon-btn.green {
  border-color: #27ae60;
}

.icon-circle.icon-btn.grey {
  border-color: #c4c4c4;
}

.icon-circle.icon-badge.green {
  background: #b7ffdb;
  border: 2px dotted #27ae60;
}

.icon-circle.icon-badge.grey {
  border-color: #c4c4c4;
  background: #efefef;
  border: 2px dotted #808080;
}

/* Aktifken renkler */
.icon-circle.icon-btn.red .icon {
  color: #e74c3c !important;
} /* örnek: kırmızı */
.icon-circle.icon-btn.blue .icon {
  color: #3498db !important;
} /* örnek: mavi */
.icon-circle.icon-btn.green .icon {
  color: #27ae60 !important;
} /* örnek: yeşil */

/* Disabled görünüm — TEK RENK */
.icon-circle.icon-btn:disabled {
  border-color: #666 !important;
  background: var(--white) !important;
}

.icon-circle.icon-btn:disabled .icon {
  color: #666 !important; /* tek gri renk */
  opacity: 0.7;
}

/* Disabled davranışı iptal */
.icon-circle.icon-btn:disabled {
  cursor:  not-allowed;
}

/* Image Upload ----------------------------------------*/
/* Sol Panel */
.image-container {
  display: flex;
  max-width: 1100px;
  margin: 0;
  padding: 0;
}

.image-container .button-container {
  margin-top: 20px;
}

/* Sol ana içerik */
.image-main {
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Blog Grid grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 90px);
  gap: 20px;
  justify-content: center;
}

/* Kart */
.image-card {
  flex: 1;
  height: 90px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.active {
  border: 2px dotted #007d00 !important;
  border-radius: 20px;
  transition: 0.2s;
  padding: 10px;
  background: #eee;
}

.active img {
  width: 95%;
  height: 95%;
  border-radius: 15px;
}

.image-card:hover {
  border-radius: 50px;
  transform: scale(1.05);
  border-color: #777;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-card.main-image {
  border: 2px dotted #c415b3 !important;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  align-items: center;
  justify-content: center;
}

/* cssanimkey.css */

@keyframes fadeInUp { 
  0% {
   opacity: 0; transform: translateY(30px);
  }
  100% {
    opacity:1;transform: translateY(0);
  }
}

@keyframes fadeIn { 
  0% {
   opacity: 0;
  }
  100% {
    opacity:1;
  }
}

@keyframes fadeInScale { 
  0% {
   opacity: 0; transform: scale(0.7);
  }
  100% {
    opacity: 1; transform: scale(1);
  }
}

@keyframes titleFadeIn {
	to { 
	 opacity:1;
	 transform: translateY(0);
  }
}

@keyframes slideRight {
	to { 
	 opacity:1;
	 transform: translateX(0);
  }
}

@keyframes spin {
	to { 
	 transform:rotate(360deg);	
  }
}

@keyframes fallDown {
	to { 
	 opacity:1;
	 transform: translateY(0);
  }
}

/* custom.css */
.dropdown-item {
	color: var(--sub-back-bg-hover);
	font-size: 14px !important;
}

.btn-dropdown:hover i {
	color: var(--white)
}

.dropdown-menu, .dropdown-menu * {
	pointer-events: auto;
}

.dropdown-item i {
	color: var(--sub-back-bg);
	width: 20px;
}

.dropdown-menus.back {
	background: var(--main-back-bg-hover);
	transition: all 0.3s ease;
	border: none;
	position: absolute;
	left: 0.5px !important;
	top: -10px !important;
	border-radius: 0px 12px 12px 12px;
	margin-left: 85px;
	margin-top: 5px;
	padding: 10px 2px;
	z-index: 999;
}

.dropdown-menu.back {
	position: absolute;
	right: 0px;
	top: 30%;
	transform: translateY(-30%);
	background: var(--main-back-bg-hover);
	border-radius: 0px 12px;
	border: 2px solid var(--white);
	z-index: 999;
	padding: 6px;
	width: fit-content;
}

.dropdown-menu.back li:hover .dropdown-item {
    border-radius: 5px !important;
    color: var(--main-back-bg-hover);
}

.dropdown-menu.back li:hover .icon {
    fill: currentColor;
}

.dropdown-menu.back li {
    display:inline-block;
}

.btn-dropdown {
	background-color: var(--sub-back-bg) !important;
	color: var(--white);
	border-color: var(--sub-back-bg) !important;
	border-radius: 0px 5px 5px 0px !important;
}

.dropdown-menu .btn {
	font-size: 12px;
}

.btn-dropdown[aria-expanded="true"], .btn-dropdown:focus, .btn-dropdown:hover,
	.btn-dropdown[aria-expanded="true"]:hover {
	color: var(--white);
}

.back .nav-divider {
	height: 1px;
	width: 100%;
	opacity: 0.3;
	margin: 6px 0;
	pointer-events: none;
	align-self: stretch;
	background: var(--white) !important;
}

.btn.show {
	display: block;
}

.btn.hide {
	display: none;
}

.show {
	display: block;
}

.hide {
	display: none;
}

.icon-square {
	width: 28px;
	height: 28px;
	padding: 2px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:  6px;
	font-size: 12px;
}

/*-------------------------------------------
  İcon Badge
-------------------------------------------*/
.icon-badge {
	background: none;
	border: 1px dotted var(--icon-border);
	cursor: pointer;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	height: 26px;
	font-size: 9px;
	width: 100%;
	margin: 0px;
	padding: 0px 10px;
}

.icon-btn {
	background-color: var(--dark) !important;
	border-color: var(--white) !important;
	color: var(--white) !important;
}

.icon-btn.red {
	border-color: var(--red) !important;
}

.icon-btn.blue {
	border-color: var(--blue) !important;
}

.icon-btn.green {
	border-color: var(--green) !important;
}

.icon-btn.grey {
	border-color: var(--grey) !important;
}

.icon-badge.green {
	background: var(--green-white);
	border: 2px dotted var(--green);
}

.icon-badge.grey {
	border-color: var(--badge-color);
	background: var(--badge--bg);
	border: 2px dotted var(--badge-border);
}

/*------------------------------------------------------
  USER PHOTO
------------------------------------------------------*/
.user-photo, .user-photo.single {
	position: absolute;
	border: 2px dashed #999;
	border-bottom-color: #fafafa;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 160px;
	height: 185px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	background: #fafafa;
	transition: border-color .15s, background .15s;
}

.user-photo, .user-photo.single {
	border: 2px dashed #999;
	border-radius: 10px;
	padding:10px;
}

.user-photo img {
	width: 80%;
}

.border-top {
	border-top:1px solid #999;
	padding-top:10px;
}
/*Row controler --------------------------*/
.row-controls {
	display: flex;
	gap: 20px;
	/* Sol taraf geniş olsun */
	grid-template-columns: 1fr auto;
}

.row-controls .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	justify-content: center;
}

.left-controls, .right-controls {
	display: flex;
	flex-direction: column;
}

/* Sol daha geniş, sağ dar */
.left-controls {
	flex: 1; /* geniş */
}

.right-controls {
	width: 180px;
	margin-right: 10px;
}

/* Switch */
.switch {
	position: relative;
	display: inline-block;
	width: 55px;
	height: 28px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch-slider {
	position: absolute;
	cursor: pointer;
	pointer-events: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #a3a3a3; /* Pasif */
	transition: .4s;
	border-radius: 28px;
}

.switch-slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked+.switch-slider {
	background-color: #28a745; /* Aktif */
}

input:checked+.switch-slider:before {
	transform: translateX(26px);
}

.readonly-select {
	pointer-events: none; /* tıklamayı engeller */
	background-color: #e9ecef !important; /* Bootstrap gri arka plan */
	color:   #bbbbbb !important;
}

.error-message {
	font-size: 12px;
	display: none;
}

/* radio-checkbox.css */
:root {
  --color-primary: #28a745;
  --color-border: #ccc;
  --color-text: #555;
  --color-disabled: #ddd;
  --color-focus: rgba(40, 167, 69, 0.35);
  --color-title: #000;
  --bg-color: #fff;
}

.input-group-box, .input-group-boxs {
  position: relative;
  border: 1px solid var(--color-border);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 12px 16px 8px;
  background-color: var(--bg-color);
  margin-bottom: 18px;
  margin-right: 5px;
}

.input-group-box:has(.group-title.success),
.input-group-box:has(input[type="radio"]:checked) {
  border-color: var(--main-bg) !important;
}

.input-group-box:has(input[type="radio"]:checked) .group-title {
  color: var(--main-bg) !important;
  font-weight: bold !important;
}

.option-group.grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.option-group.grid-two-row {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 10px;
}

.option-group.vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0px;
}

.option-label.checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.option-label input {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.option-circle {
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

.option-label input:checked + .option-circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.option-label input:checked + .option-circle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-color);
}

.group-title input {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  top: -10px;
  left: 12px;
  background: var(--bg-color);
  padding: 0 4px;
  position: absolute;
  font-size: 0.8rem;
  color: var(--color-title);
  font-weight: normal !important;
  cursor: pointer;  
}

.group-title.success {
  font-weight: bold !important;
}

.option-group {
  display: flex;
  gap: 14px;
  margin-left: 6px;   
}

.option-group.horizontal {
  flex-direction: row;
}

.option-group.horizontals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding:10px 5px;
}

.option-group.vertical {
  flex-direction: column; 
}

.option-group.horizontal3s {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding:20px 10px;
}

.option-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  color: var(--color-title);
  user-select: none; 
  min-width: 0;
}

.option-group.grid-two-row > label {
  min-width: 0;
  max-width: 100%;
}

.option-text {
  flex: 1;
  min-width: 0;
  max-width: 100%;     /* bunu ekle */
  /*white-space: nowrap; /* wrap kapalı olacak */
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid .small {
  white-space: nowrap;
  width: max-content;
}

.option-label.permission {
  color: var(--color-text);
}

.option-label input {
  display: none;
}

.option-circle {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.option-label.radio .option-circle {
  border-radius: 50%;
}

.option-label.checkbox .option-circle {
  border-radius: 4px;
}

.option-circle::after {
  content: "";
  width: 7px;
  height: 7px;
  background: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.option-label.radio .option-circle::after {
  border-radius: 50%;
}

.option-label.checkbox .option-circle::after {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.option-label input:checked + .option-circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.option-label input:checked + .option-circle::after {
  opacity: 1;
  transform: scale(1);
}

.option-label:hover .option-circle {
  border-color: var(--color-primary);
}

.option-label input:focus-visible + .option-circle {
  box-shadow: 0 0 0 3px var(--color-focus);
}

.option-label input:disabled + .option-circle {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  cursor: not-allowed;
}

.option-label:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

.option-label.checked .option-circle {
  background: #3b82f6;
}

.option-label.indeterminate .option-circle {
  background: #3b82f6;
  opacity: 0.5;
}

.option-label.readonly {
  opacity: 0.6;
  cursor: not-allowed;
}

.option-label.readonly * {
  pointer-events: none;
}

.input-group-boxs {
  grid-column: span 3;
}

.input-group-boxs .option-group {
  flex-wrap: nowrap;
}

/* quill-editor.css */
/* ================================
   QUILL + BOOTSTRAP FINAL
   ================================ */

.quill-wrapper {
    margin-bottom: 1rem;
    width: 100%;
}

/* LABEL */
.quill-wrapper label {
    display: block;
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.4rem;
}

/* BOX */
.quill-box {
    border-radius: 0.375rem;
}

/* Toolbar */
.quill-box .ql-toolbar {
    border: 1px solid #ced4da;
    border-bottom: 0;
    border-radius: 0.375rem 0.375rem 0 0;
    background: #f8f9fa;
    padding: 6px;
}

/* Container (SCROLL YOK) */
.quill-box .ql-container {
    border: 1px solid #ced4da;
    border-radius: 0 0 0.375rem 0.375rem;
    overflow: hidden; /* 🔥 kritik */
}

/* Editor (SCROLL BURADA) */
.quill-editor {
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Focus */
.quill-wrapper:focus-within .ql-toolbar,
.quill-wrapper:focus-within .ql-container {
    border-color: #86b7fe;
}

.quill-wrapper:focus-within .quill-box {
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    border-radius: 0.375rem;
}

/* Validation */
.quill-wrapper.is-invalid .ql-container {
    border-color: #dc3545;
}

.quill-wrapper.is-valid .ql-container {
    border-color: #198754;
}

/* Toolbar fix */
.ql-toolbar button {
    width: 28px;
    height: 28px;
    line-height: 1;
}

.ql-toolbar .ql-picker {
    font-size: 13px;
}

/* Placeholder */
.ql-editor.ql-blank::before {
    font-style: normal;
    color: #6c757d;
}

/* Content düzen */
.ql-editor p {
    margin-bottom: 10px;
}

.ql-editor h1 {
    font-size: 1.25rem;
}

.ql-editor img {
    max-width: 100%;
}

/* Modal fix */
.modal .ql-container {
    overflow: hidden;
}

.modal .ql-editor {
    min-height: 400px;
    max-height: 400px;
}

/* Mobile */
@media (max-width: 768px) {
    .ql-toolbar {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Scrollbar genel */
.ql-editor::-webkit-scrollbar {
    width: 6px;
}

/* Thumb */
.ql-editor::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Track */
.ql-editor::-webkit-scrollbar-track {
    background: transparent;
}

/* 🔥 OKLARI KALDIR */
.ql-editor::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

.ql-editor {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
/* ================================
   DARK MODE (optional)
   ================================ */

.dark .quill-wrapper label {
    color: #ddd;
}

.dark .ql-toolbar {
    background: #2b2b2b;
    border-color: #444;
}

.dark .ql-container {
    background: #1e1e1e;
    color: #fff;
    border-color: #444;
}

/* contact-form.css */
/* =========================================
   CONTACT FORM – TEMİZ VE STABİL
========================================= */
.contactForm {
	margin: 20px;
	font-size: 12px;
}

.contactForm h5 {
	margin-bottom: 30px;
	font-size: 14px;
}

.contactForm .row-line {
	margin-bottom: 10px;
}

.contactForm .row-line.users {
	padding:20px 2px 10px 10px;
  margin-bottom: 10px;
  max-height:400px;
  overflow:hidden;
  overflow-y:scroll;
  border:1px solid var(--grey);
  border-radius:12px 0px 0px 12px;
}

/* =========================================
   INPUT GROUP
========================================= */
.contactForm .input-group {
	position: relative;
	margin-bottom: 12px;
}

/* Input / Select / Textarea */
.contactForm .input-group input, .contactForm .input-group select,
	.contactForm .input-group textarea {
	width: 100%;
	padding: 10px 14px 8px 14px;
	border: 1px solid #ccc;
	border-radius: 8px;
	outline: none;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* Textarea */
.contactForm .input-group textarea {
	min-height: 100px;
	resize: vertical;
}

/* Focus */
.contactForm .input-group input:focus, .contactForm .input-group select:focus,
	.contactForm .input-group textarea:focus {
	border-color: var(--contact);
	box-shadow: 0 0 0 3px rgba(74, 144, 226, .15);
}

/* =========================================
   FLOATING LABEL – GENEL
========================================= */
.contactForm .input-group label {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #999;
	background: #fff;
	padding: 0 6px;
	pointer-events: none;
	transition: .2s ease;
	z-index: 3; /* KRİTİK */
}

/* Yukarı çıkma */
.contactForm .input-group input:focus+label, .contactForm .input-group input:not(:placeholder-shown)+label,
	.contactForm .input-group textarea:focus+label, .contactForm .input-group textarea:not(:placeholder-shown)+label
	{
	top: 0;
	font-size: 12px;
	color: var(--contact) !important;
}

/* =========================================
   DATE INPUT – FLOATING YOK
========================================= */
.contactForm .input-group input[type="date"] {
	position: relative;
	z-index: 1;
	padding: 10px 14px 8px 14px;
}

.contactForm .input-group input[type="date"]+label {
	top: 0;
	font-size: 12px;
	background: #fff;
	color: var(--sub-contact);
	z-index: 2;
}

.contactForm .error-message {
	color: var(--dark);
	padding-left: 14px;
}
/* =========================================
   SELECT – LABEL HER ZAMAN ÜSTTE
========================================= */
.contactForm .input-group select {
	padding: 10px 40px 8px 14px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: #fff;
	background-image:
		url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}

.contactForm .input-group select+label {
	top: 0;
	font-size: 12px;
	color: var(--sub-contact);
}

/* =========================================
   FILE INPUT
========================================= */
.contactForm .input-group input[type="file"] {
	padding: 14px 14px 10px 14px;
}

.contactForm .input-group input[type="file"]+label {
	top: 0;
	font-size: 12px;
	color: var(--sub-contact);
	background: #fff;
	z-index: 3;
}

/* =========================================
   ERROR / SUCCESS
========================================= */
.contactForm .error-message {
	font-size: 12px;
	display: none;
}

.form-floating .error-message {
	color: red !important;
}
.contactForm .error-message.active {
	display: block;
}

.contactForm input.error, .contactForm select.error, .contactForm textarea.error
	{
	border-color: red !important;
}

.contactForm label.error {
	color: red !important;
}

.contactForm input.success, .contactForm select.success, .contactForm textarea.success
	{
	border-color: var(--contact) !important;
}

.contactForm label.success {
	color: var(--contact) !important;
	font-weight: bold;
}

/* =========================================
   GRID
========================================= */
.contactForm .grids {
	display: grid;
	grid-template-columns: 67% calc(33% - 10px);
	gap: 10px;
	margin-right: 5px;
}

.contactForm .gridL {
	display: grid;
	grid-template-columns: 33% calc(67% - 5px);
	gap: 10px;
	margin-right: 5px;
}

.contactForm .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

/* =========================================
   DİĞER ÖZELLİKLER
========================================= */
.form-floating>label {
	padding-left: 12px;
}

.section-title {
	margin-bottom: 10px;
	color: #1d3557;
	border-left: 4px solid #457b9d;
	padding-left: 10px;
	font-size: 18px;
	background: #f5f5f5;
	padding: 8px;
}

/* =========================================
   READONLY GÖRÜNÜMÜ
========================================= */
.input-group input[readonly] {
	background-color: var(--transparent);
	color: #6c757d;
	border-color: #dee2e6 !important;
	cursor: not-allowed;
}

/* hover olunca da aynı kalsın */
.input-group input[readonly]:hover {
	background-color: var(--transparent);
}

/* focus olmasın */
.input-group input[readonly]:focus {
	outline: none;
	box-shadow: none;
}

/* label da soluk olsun */
.input-group input[readonly]+label {
	font-weight: normal;
	color: #6c757d !important;
}

.input-group input[required]+label {
	font-weight: bold;
}

/* error mesajı tetiklenmesin */
.input-group input[readonly] ~ .error-message {
	display: none;
}

.input-group.gelir input[readonly] {
  color: #1a602f !important; 
  border-color: #1a602f !important;
  background: #fcfefd !important;
  cursor: not-allowed;
}
.input-group.gelir input[readonly]+label {
  color: #1a602f !important;
}

.input-group.gider input[readonly] {
  color: #ff9b9b !important; 
  border-color: #ff9b9b !important;
  background: #fffbfb !important;
  cursor: not-allowed;
}
.input-group.gider input[readonly]+label {
  color: #ff3333 !important;
}

.input-group.gelir.net input[readonly] {
  font-weight:bold;
}
.input-group.gelir.net input[readonly]+label {
  font-weight:bold;
}
/* =========================================
   PREFIX / SUFFIX
========================================= */

/* ortak */
.contactForm .input-group.prefix input, .contactForm .input-group.suffix input
	{
	position: relative;
}

/* PREFIX boşluk */
.contactForm .input-group.prefix input {
	padding-left: 35px;
}

/* SUFFIX boşluk */
.contactForm .input-group.suffix input {
	padding-right: 50px;
}

/* PREFIX yazı */
.contactForm .prefix-top {
	outline: none;
	color: var(--white);
	background: var(--transparant);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.contactForm .prefix-top .prefix-txt {
	width: 100%;
	padding: 7px 14px 5px;
	background: var(--divider-drop);
}

.contactForm .prefix-top .prefix-txt.start {
	border-radius: 5px 0px 0px 5px;
}

.contactForm .prefix-top select {
	border-color: #fff !important;
	padding: 4px 8px;
}

.contactForm .input-group .prefix-text {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #777;
	pointer-events: none;
	z-index: 2;
}

/* SUFFIX yazı */
.contactForm .input-group .suffix-text, .contactForm .input-group .suffix-btn
	{
	position: absolute;
	color: var(--dark);
	right: 0;
	top: 0;
	width: 40px;
	height: calc(100% - 2px);
	margin: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	border: 0px solid var(--dark);
	border-left: 1px solid #ddd;
	font-weight: 500;
	z-index: 2;
}

.contactForm .input-group .suffix-text {
	pointer-events: none;
}

/* readonly ise suffix/prefix de soluk */
.contactForm .input-group input[readonly] ~ .suffix-text, .contactForm .input-group input[readonly] 
	 ~ .prefix-text {
	color: #adb5bd;
}

/* label her zaman yukarıda */
.contactForm .input-group.suffix label, .contactForm .input-group.prefix label,
	.contactForm .input-group label {
	top: 0;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--sub-contact);
}

#lawyerList .input-group {
	position: relative;
	margin-bottom: 8px;
}

/* Input / Select / Textarea */
#lawyerList .input-group select {
	width: 100%;
	padding: 10px 14px 8px 14px;
	border: 1px solid #ccc;
	border-radius: 8px;
	outline: none;
	background: var(--accent);
	color: var(--white);
	font-size: 12px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#lawyerList .input-group select {
	padding: 10px 40px 8px 14px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--accent);
	background-image:
		url('data:image/svg+xml;utf8,<svg fill="%23fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}

.pdfRow {
	display: grid;
	grid-template-columns: 1fr 1fr 5fr 1fr;
	gap: 10px;
	height: 40px;
}

.import {
	display: grid;
	grid-template-columns: 5fr 1fr;
	gap: 10px;
	padding: 10px 10px 5px 10px;
	border-radius: 8px;
}

.import label {
	font-size: 12px;
}

.import.brown {
	background-color: var(--card-bg);
}

.import.green {
	background-color: var(--green-white);
}

.import .icon-btn {
	height: 25px;
	width: 25px;
}

.import .icon-circle .icon {
	width: 0.6em;
	height: 0.6em;
}

.import .option-circle {
	background-color: var(--white);
}

.imports .option-group.vertical {
	gap: 1px;
}

.importBtn {
	display: grid;
	width: 100%;
	grid-template-columns: 1.5fr 10fr 0.5fr 0.5fr;
}

.input-group .importBtn input {
	border-radius: 0px !important;
}

.importBtn .prefix-txt {
	padding: 9px 14px 5px;
	background: var(--divider-drop);
	border-radius: 5px 0px 0px 5px;
}

#hakimlik .grid {
  display: grid;
  grid-template-columns: 3fr 6fr;
  gap: 10px;
  padding: 10px 0px 5px 0px;
}

.prefix-top.staffCard {
	display: grid;
  grid-template-columns: 1.5fr 2fr 1fr 0.25fr;
  gap: 0px;	
}
.prefix-top.staffCardExtra {
  display: grid;
  grid-template-columns: 1.25fr 1.5fr 1.25fr 0.25fr;
  gap: 0px; 
}

#gridBody.staffCard input {
	padding-top:5px;
	padding-bottom:5px;
}
.prefix-top.staffCard .prefix-txt, .prefix-top.staffCardExtra .prefix-txt {
  padding: 8px;
}
.prefix-top.staffCard select, .prefix-top.staffCardExtra select {
  padding: 4px 2px 4px 8px;
}

.contactForm .backup {
  display: grid;
  grid-template-columns: 11fr 1fr;
  gap: 10px; 
}


/* modal.css */
/* =========================================
   MODAL
========================================= */
#adminModal .modal-body, 
#childModal .modal-body,
#photoModal .modal-body {
	padding: 0px;
	min-height:300px;
}

#adminModal .header,
#photoModal .header {
	background: var(--main-back-bg);
	overflow: hidden;
	padding: 4px;
}

#childModal .header {
  background: var(--child-modal-bg);
  overflow: hidden;
  padding: 4px;
  color: var(--white);
}

#subModal .header {
  background: var(--sub-modal-bg);
  overflow: hidden;
  padding-left: 14px;
}

#adminModal .header-logo, 
#childModal .header-logo,
#photoModal .header-logo {
	margin-right: 10px;
}

#adminModal .header-company, 
#childModal .header-company,
#subModal .header-company,
#photoModal .header-company {
	font-size: 18px;
	font-weight: 600;
	color: var(--main-bg);
}

#subModal .header-company {
  color:var(--sub-modal-c) !important;
}

#subModal .byz {
	color: var(--white);
}
#subModal .header-company .border-bottom {
	border-bottom:1px solid var(--sub-contact);
}

#errorModalBody {
	margin-top: 10px;
}

#errorModalBody p {
	line-height: 18px;
	font-size:14px;
	margin-bottom:0px;
}

.modal-error {
	max-width: 550px;
}

.modal-success {
	max-width: 600px;
}

.modal-delete {
	max-width: 450px;
}

/* Modal */
.modal-sm-custom {
	max-width: 400px;
}

.modal-md-custom {
	max-width: 600px;
}

.modal-lg-sm {
  max-width: 800px;
}

.modal-lg-custom {
	max-width: 900px;
}

.modal-lg-xs {
  max-width: 1000px;
}
.modal-xl-custom {
	max-width: 1200px;
}

/* Custom Full Modal Css -----------------------------------------------------------*/
.modal-fullscreen-custom .modal-dialog {
	max-width: 100% !important;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.modal-fullscreen-custom .login-header {
	color: var(--main-bg); /* Hover text rengi */
	background-color: var(--main-back-bg);
}

.modal.modal-fullscreen-custom .modal-dialog, .modal.modal-fullscreen-custom .modal-content
	{
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	height:  100vh;
}

/* loginModal CSS ------------------------------------------------------------------------------------------------------------*/

/* Genel Tasarım */
#globalModal .modal-content {
	border-radius: 0;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

#globalModal .row-line {
	padding: 15px 20px;
}

#globalModal .row-line img {
	margin-right: 20px;
}

#globalModal a {
	text-decoration: none; /* İsteğe bağlı */
}

#globalModal p, #errorModal p {
	line-height: 1.8;
}

.modal-close-white {
	color: fff;
}

.modal-success-width {
	max-width: 700px; /* veya width: 600px; */
}

#successModalBody {
	margin-top: 10px;
}

.modal-success-width p {
	margin: 0 40px 0 20px;
	line-height: 1.4;
	font-size: 14px;
	text-align: justify;
}

/* -----------------------------------------
  Modal List+Form 
  ------------------------------------------*/
.modal-bodys {
	min-height: 400px;
}

.modal-main-page {
	margin: 20px;
}

.modal-form-page {
	display: none;
}

.scrollables {
	min-height: 30vh;
	max-height: 70vh;
	overflow-y: auto;
}

.table-scroll-wrapper {
	  margin:20px;
    max-height: 400px;
    overflow-y: auto;
}

.scroll-hidden {
	overflow-y: auto;
	/* Firefox */
	scrollbar-width: none;
	/* IE 10+ (ölü ama olsun) */
	-ms-overflow-style: none;
}

/* Chrome, Edge, Safari */
.scroll-hidden::-webkit-scrollbar {
	display: block;
}

.modal-scroll-lock {
	overflow-x: hidden !important;
}

/* Özelleştirilmiş scrollbar */
.scroll-custom::-webkit-scrollbar {
    width: 6px;
}

.scroll-custom::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.scroll-custom::-webkit-scrollbar-thumb {
    background-color: var(--main-bg);
    border-radius: 10px;
    border: 1px solid var(--main-back-bg);
}

.scroll-custom::-webkit-scrollbar-thumb:hover {
    background-color: var(--main-back-bg);
}

/* Firefox (border desteklemiyor, renk ile simüle) */
.scroll-custom {
    scrollbar-width: thin;
    scrollbar-color: var(--main-bg) #f1f1f1;
}

/* Fullscreen modal ama marginli */
.modal-fullscreen-custom {
    width: 100%;
    max-width: 1200px;  /* isteğe göre genişlik limiti */
    margin: 1.5rem auto; /* üst-alt ve yan margin */
    height: 90vh;        /* viewport yüksekliğinin %90’ı */
    top: 0;
    bottom: 0;
}

.modal-fullscreen-custom .modal-dialog {
    margin: 0 auto;
    max-height: 90vh;
}

.modal-fullscreen-custom .modal-content {
    border-radius: 0.5rem; /* yuvarlatılmış köşe */
}

/* svg.css */
/* Temel button */
.icon-btn {
	background: none;
	border: none;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .2s, transform .2s;
}

/* Icon boyutu ve renk */
.icon-btn .icon {
	width: 24px;
	height: 24px;
	color:currentColor;
}

.icon-btn.xs .icon {
  width: 20px;
  height: 20px;
  padding: 2px;
}

.btn.icon-square .icon {
	width: 14px;
	height: 14px;
}

/* Hover / focus-visible */
.icon-btn:hover .icon, .icon-btn:focus-visible .icon {
	color: #dc3545;
	transform: rotate(20deg);
}

.icon-btn:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
	border-radius: 6px;
}

/* Disabled state */
.icon-btn:disabled, .icon-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.icon-btn:disabled .icon, .icon-btn[disabled] .icon {
	color: #6c757d;
	transform: none;
}

/* Variant: küçük / büyük / renk */
.icon-btn-sm .icon {
	width: 16px;
	height: 16px;
}

.icon-btn-lg .icon {
	width: 28px;
	height: 28px;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* icon - text arası boşluk */
	padding: 8px 12px;
	cursor: pointer;
}

.btn .icon {
	width: 18px;
	height: 18px;
}

.icon {
	width: 1em;
	height: 1em;
}

.icon--solid {
	fill: currentColor;
}

.icon--outline {
	stroke: currentColor;
	fill: none;
}

/* ICON CIRCLE */
.icon-circle {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* size */
  width: 30px;
  height: 30px;

  /* shape */
  border-radius: 50%;

  /* colors */
  background-color: currentColor;

  /* border */
  border: none;

  /* interaction */
  cursor: pointer;
  transition: 
    background-color .2s ease,
    color .2s ease,
    transform .15s ease,
    box-shadow .15s ease;

  /* reset */
  padding: 0;
}

.icon-circle.btn {
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
}

.icon-circle .icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.icon-circle:hover {
  filter: brightness(0.9);
  transform: scale(1.05);
}

.icon-circle:active {
  transform: scale(0.95);
}

.icon-circle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-circle.xs { width: 26px; height: 26px; }
.icon-circle.sm { width: 32px; height: 32px; }
.icon-circle.md { width: 40px; height: 40px; }
.icon-circle.lg { width: 48px; height: 48px; }

.icon-circle.xs .icon { width: 16px; height: 16px; }