/* custom.css
   --------------------------------------------------------------------------
   3D Bileşen Stilleri (kompakt, zarif)
   -------------------------------------------------------------------------- */

/* Genel */
body { background-color: var(--background-color); }

/* --------------------------------------------------------------------------
     Dark Mode Ek Ayarlamalar
     -------------------------------------------------------------------------- */

/* Bootstrap dark theme desteği */
[data-bs-theme="dark"] {
  --bs-body-color: var(--primary-text-color);
  --bs-body-bg: var(--background-color);
}

@media (prefers-color-scheme: dark) {
  /* HTML elementine dark theme attribute'u ekle */
  html {
    color-scheme: dark;
  }
  
  /* Genel metin renkleri için güçlü kurallar */
  *:not(.badge):not(.badge *) {
    color: var(--primary-text-color) !important;
  }
  
  /* Özel durumlar için istisna kuralları */
  .btn, .btn *, .nav-link, .nav-link * {
    color: inherit !important;
  }
  
  /* Breadcrumb dark mode */
  .breadcrumb-item { color: var(--muted-text-color) !important; }
  .breadcrumb-item.active { color: var(--primary-text-color) !important; }
  .breadcrumb-item + .breadcrumb-item::before { color: var(--ddp-neutral-600) !important; }

  /* Navbar kullanıcı bilgileri dark mode */
  .user-details .user-name { color: var(--primary-text-color) !important; }
  .user-details .company-name { color: var(--muted-text-color) !important; }
  .logout-icon { color: var(--muted-text-color) !important; }
  .logout-icon:hover { color: var(--primary-text-color) !important; }

  /* Form etiketleri dark mode */
  .form-label { color: var(--primary-text-color) !important; }
  .form-text { color: var(--muted-text-color) !important; }
  .form-check-label { color: var(--primary-text-color) !important; }

  /* Sekmeler dark mode */
  .tab-link { color: var(--muted-text-color) !important; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important; }
  .tab-link:hover { color: var(--primary-text-color) !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; }
  .tab-link.active { color: var(--link-color) !important; }

  /* İstatistik kartları dark mode */
  .stat-title { color: var(--primary-text-color) !important; }
  .stat-value { color: var(--secondary-text-color) !important; }

  /* Filtre kartları dark mode */
  .filter-card { background: var(--surface-grad) !important; border-color: var(--ddp-neutral-300) !important; }
  .filter-card .form-label { color: var(--primary-text-color) !important; }
  .filter-card * { color: var(--primary-text-color) !important; }

  /* Status grupları dark mode */
  .status-group .btn-group .btn { color: var(--primary-text-color) !important; }

  /* Advanced filters dark mode */
  .advanced-filter-toggle { color: var(--link-color) !important; }
  .advanced-filter-toggle:hover { color: var(--link-color) !important; }

  /* Sayfalama dark mode */
  .pagination .page-item .page-link {
    color: var(--primary-text-color);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border-color: var(--ddp-neutral-300);
  }
  .pagination .page-item .page-link:hover {
    color: var(--primary-text-color);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  }
  .pagination .page-item.disabled .page-link {
    color: var(--muted-text-color);
    background: var(--ddp-neutral-200);
  }
  .pagination .page-item.active .page-link {
    color: #ffffff;
    background: linear-gradient(180deg, #1a4a7a, var(--ddp-dark-blue));
  }

  /* Card başlıkları dark mode */
  .card-header { background: var(--ddp-neutral-200) !important; color: var(--primary-text-color) !important; }
  .card-body { color: var(--primary-text-color) !important; }
  .card-title { color: var(--primary-text-color) !important; }
  .card-text { color: var(--primary-text-color) !important; }

  /* CKEditor dark mode */
  .ck-editor__editable_inline {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }
  .ck-editor__editable_inline p { color: var(--primary-text-color) !important; }

  /* Note alert panel dark mode */
  .note-alert-panel { background: var(--surface-grad) !important; border-color: var(--ddp-neutral-300) !important; }
  .note-alert-panel .card-header { background: var(--ddp-neutral-200) !important; }
  .note-alert-panel * { color: var(--primary-text-color) !important; }

  /* Toast mesajları için daha iyi görünürlük */
  .toast {
    border-color: var(--ddp-neutral-300) !important;
    background: var(--surface-grad) !important;
  }
  .toast .toast-body {
    color: var(--primary-text-color) !important;
    background: var(--ddp-neutral-100) !important;
  }
  .toast .toast-header {
    background: var(--ddp-neutral-200) !important;
    border-bottom-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }
  .toast .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
  .toast .text-success { color: #28a745 !important; }
  .toast .text-danger { color: #dc3545 !important; }
  .toast .text-warning { color: #ffc107 !important; }
  .toast * { color: var(--primary-text-color) !important; }
}

/* Sidebar */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)),
    linear-gradient(180deg, var(--ddp-dark-blue), #082a4b);
  padding: 0;
  position: fixed;
  height: 100%;
  width: var(--sidebar-w);
  box-shadow: var(--elev-3);
}
.page-wrapper.is-mini .sidebar { width: var(--sidebar-w-mini); }
/* Tamamen gizli durumda sidebar hiç yer kaplamasın */
.page-wrapper.is-sidebar-hidden .sidebar { display: none; }

.sidebar-header {
  background: var(--surface-grad);
  border-bottom: 2px solid var(--ddp-light-blue);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}
.sidebar-header .logo { max-width: 200px; }

/* Sidebar linklerine yumuşak parıltı izi (daha gerçekçi) */
.sidebar .nav-link { position: relative; overflow: hidden; }
.sidebar .nav-link {
    border-radius: 1px !important;
}
.sidebar .nav-link::before {
  content: '';
  position: absolute; inset: 0; left: -100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .6s ease;
}
.sidebar .nav-link:hover::before { left: 100%; }

/* İçerik alanı */
.main-content { margin-left: .5rem; padding: var(--gap-3); }
/* Gizliyken sola margin vermeyelim */
.page-wrapper.is-sidebar-hidden .main-content { margin-left: 0; }

/* ----------------------------- Login ----------------------------- */
.login-container {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
  background:
    radial-gradient(1000px 400px at 10% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(120deg, var(--ddp-dark-blue), var(--ddp-light-blue));
}
.login-card {
  width: 360px; max-width: 92vw;
  padding: 28px;
  background: var(--surface-grad);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  text-align: center;
}
.login-card .logo { max-width: 180px; margin-bottom: 20px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
.login-card .form-control {
  padding: .6rem .75rem; border-radius: var(--radius-sm); margin-bottom: .6rem;
}

/* ----------------------------- Kartlar --------------------------- */
.content-header { margin-bottom: var(--gap-3); }

.card {
  background: var(--surface-grad);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  /* padding: .9rem; */ /* Taşan layout sorunlarını çözmek için padding card-body'ye taşındı */
  transition: transform .15s ease, box-shadow .2s ease;
  overflow: hidden; /* Kart içindeki elemanların taşmasını önler */
}

.card-body {
    padding: .9rem;
    position: relative;
    z-index: 2;

}

/* Kart içindeki tablolar için özel card-body padding ayarları 
.card .card-body {
    padding-left: 0;
    padding-right: 0;
}
*/
/* Kart başlığı için padding'i koru */
.card .card-header {
    padding-left: .9rem;
    padding-right: .9rem;
}

.card-header {
    background: var(--ddp-neutral-200) !important;
    color: var(--primary-text-color) !important;
    position: relative;
    z-index: 2;
    padding: .9rem;
}


/* ----------------------------- Butonlar -------------------------- */
.btn {
  position: relative; overflow: hidden;
  padding: .35rem .7rem;            /* kompakt */
  font-size: var(--fs-xs);
  line-height: 1.1;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.04);
  color: var(--ddp-white);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12));
  box-shadow:
    var(--bevel-top),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 18px rgba(13,61,110,.16),
    0 2px 6px rgba(13,61,110,.12);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}
.btn::before {
  content: '';
  position: absolute; inset: 0; left: -100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s ease;
}
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--elev-3); }
.btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.25),
    inset 0 -1px 0 rgba(255,255,255,.2);
  filter: saturate(1.05);
}

/* Boyut varyantları */
.btn-sm { padding: .28rem .56rem; font-size: var(--fs-xxs); border-radius: 10px; }
.btn-xs { padding: .22rem .45rem; font-size: .7rem; border-radius: 8px; }
.btn-icon { width: 28px; height: 28px; padding: 0; border-radius: 8px; }

/* Dolgulu butonlar (3D gradyan) */
.btn-primary   { background: linear-gradient(180deg, #1e5c9c, var(--ddp-dark-blue)); }
.btn-secondary { background: linear-gradient(180deg, #34a8e6, var(--ddp-light-blue)); }
.btn-success   { background: linear-gradient(180deg, #1e8b58, var(--success)); }
.btn-warning   { background: linear-gradient(180deg, #ffc94d, #e6a700); color: #1a1a1a; }
.btn-danger,
.btn-error     { background: linear-gradient(180deg, #d35656, var(--danger)); }
.btn-info { background: linear-gradient(180deg, var(--ddp-light-blue), var(--info)); color: var(--ddp-white);}

/* Outline (3D çerçeve) */
.btn-outline { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.04)); }
.btn-outline-primary   { border-color: rgba(0,58,112,.35); color: var(--ddp-dark-blue); }
.btn-outline-secondary { border-color: rgba(0,154,222,.35); color: var(--ddp-light-blue); }
.btn-outline-success   { border-color: rgba(33,163,102,.35); color: var(--success); }
.btn-outline-warning   { border-color: rgba(230,167,0,.45);  color: var(--warning); }
.btn-outline-danger,
.btn-outline-error     { border-color: rgba(201,60,60,.45);  color: var(--danger); }
.btn-outline:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 6px 14px rgba(13,61,110,.16);
}

/* ----------------------------- Formlar -------------------------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid #cfd6de;
  padding: .35rem .6rem;
  font-size: var(--fs-xs);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 2px 6px rgba(13,61,110,.08);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out;
}
.form-control:focus, .form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 0 .2rem rgba(13,110,253,.25);
}

/* CKEditor */
.ck-editor__editable_inline {
  min-height: 220px;
  border: 1px solid #cfd6de;
  border-radius: var(--radius-sm);
  padding: .8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 2px 6px rgba(13,61,110,.08);
}

/* ----------------------------- Navbar --------------------------- */
.navbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 .9rem; width: 100%; height: var(--navbar-h);
  background: var(--surface-grad);
  border-bottom: var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 6px 14px rgba(13,61,110,.12);
}
.navbar-left .breadcrumb { font-size: var(--fs-xs); color: #6c757d; }

.breadcrumb { margin-bottom: 0; background: transparent; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-item { font-size: var(--fs-xs); }
.breadcrumb-item a { color: var(--link-color); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: #495057; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: #6c757d; }

@media (max-width: 768px) {
  .navbar-left .breadcrumb,
  .navbar-left .breadcrumb .breadcrumb-item {
    font-size: 0.75rem;
  }
}

@media (max-width: 576px) {
  .navbar-left .breadcrumb,
  .navbar-left .breadcrumb .breadcrumb-item {
    font-size: 0.7rem;
  }
}

.navbar-right { display: flex; align-items: center; gap: .8rem; }
.user-info { display: flex; align-items: center; gap: .8rem; margin-right: .6rem; }
.company-logo { height: 28px; max-width: 90px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.user-avatar, .avatar-placeholder { height: 30px; width: 30px; border-radius: 50%; object-fit: cover; }
.avatar-placeholder { background: #e9ecef; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.avatar-placeholder .fa-user { color: #495057; font-size: .95rem; }
.user-details { display: flex; flex-direction: column; line-height: 1.1; }
.user-details .user-name { font-weight: 600; color: #343a40; font-size: var(--fs-xs); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.user-details .company-name { font-size: .75rem; color: #6c757d; }
.logout-icon { font-size: 1.2rem; color: #6c757d; }
.logout-icon:hover { color: #343a40; }

/* ----------------------------- Tablolar ------------------------- */
/* Responsive tablo wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: .9rem;
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
}

/* Kart içindeki tabloları tam genişlikte göster */
.card .table-responsive {
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  width: 100%;
  position: relative;
  z-index: 1;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Kart içindeki table elementini tam genişlikte göster */
.card .table.table-responsive {
  min-width: 100%;
  width: 100%;
  margin: 0;
  display: table;
}

/* Kart içindeki tablolar için özel genişlik ayarları */
.card table.table-responsive {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed;
}

.table {
  width: 100%;
  min-width: 600px; /* Minimum genişlik - responsive için */
  margin: 0;
  color: #212529;
  background: var(--surface-grad);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #dbe3eb;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
  table-layout: auto; /* İçerik genişliğine göre sütun genişlikleri */
}
.table th, .table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .35rem .6rem;
  border-top: none;
  background-clip: padding-box;
  max-width: 200px; /* Maksimum hücre genişliği */
}

/* Kart içindeki tablolar için özel sütun genişlikleri */
.card .table th,
.card .table td {
  flex: 1;
  min-width: 0;
}

/* Operasyon tabloları için sütun genişlikleri */
.card .table th:first-child,
.card .table td:first-child {
  width: 5%;
}

.card .table th:last-child,
.card .table td:last-child {
  width: 25%;
  min-width: 60px;
}

/* Küçük ekranlarda hücre genişliklerini optimize et */
@media (max-width: 768px) {
  .table th, .table td {
    padding: .25rem .4rem;
    font-size: .7rem;
    max-width: none; /* Mobil'de genişlik sınırlaması kaldır */
  }

  /* Mobil cihazlarda kart içindeki tablolar için sütun genişlikleri */
  .card .table th,
  .card .table td {
    flex: 1;
    min-width: 60px;
    width: auto;
  }

  /* Mobil'de operasyon tabloları için sütun genişlikleri */
  .card .table th:first-child,
  .card .table td:first-child {
    width: 35%;
    min-width: 70px;
  }

  .card .table th:last-child,
  .card .table td:last-child {
    width: 30%;
    min-width: 50px;
  }

  .table thead th {
    font-size: .7rem;
    padding: .3rem .4rem;
  }

  /* Mobil cihazlarda kart içindeki tabloları tam genişlikte göster */
  .card .table-responsive {
    margin: 0;
    width: 100%;
  }

  /* Mobil cihazlarda table elementindeki table-responsive sınıfı için */
  .card .table.table-responsive {
    min-width: 100%;
    width: 100%;
    display: table;
  }

  /* Mobil cihazlarda kart içindeki tablolar için özel genişlik ayarları */
  .card table.table-responsive {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed;
  }

  .card .card-body {
    padding: 0;
  }
}

/* Çok küçük ekranlarda kelime bölme aktif et */
@media (max-width: 480px) {
  .table th, .table td {
    white-space: normal;
    word-wrap: break-word;
    max-width: none;
    font-size: .65rem;
    padding: .2rem .3rem;
  }

  /* Çok küçük ekranlarda kart içindeki tablolar için sütun genişlikleri */
  .card .table th,
  .card .table td {
    flex: 1;
    min-width: 50px;
    width: auto;
  }

  /* Çok küçük ekranlarda operasyon tabloları için sütun genişlikleri */
  .card .table th:first-child,
  .card .table td:first-child {
    width: 40%;
    min-width: 60px;
  }

  .card .table th:last-child,
  .card .table td:last-child {
    width: 35%;
    min-width: 40px;
  }

  /* Çok küçük ekranlarda kart içindeki tabloları tam genişlikte göster */
  .card .table-responsive {
    margin: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Çok küçük ekranlarda table elementindeki table-responsive sınıfı için */
  .card .table.table-responsive {
    min-width: 100%;
    width: 100%;
    display: table;
  }

  /* Çok küçük ekranlarda kart içindeki tablolar için özel genişlik ayarları */
  .card table.table-responsive {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed;
  }

  .card .card-body {
    padding: 0;
  }

  .card {
    border-radius: var(--radius-sm);
  }
}
.table thead th {
  position: sticky; top: 0; z-index: 1;
  color: var(--ddp-white);
  background: linear-gradient(180deg, #1c4f8a, var(--ddp-dark-blue));
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.15);
  border-bottom: none;
}
.table-hover tbody tr:hover { background-color: rgba(0, 92, 191, .06); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.02); }
.table-sm th, .table-sm td { padding: .28rem .5rem; }

/* Tablolarda metin kaydırma için özel sınıf */
.table.table-wrap th,
.table.table-wrap td {
    white-space: normal;
    word-wrap: break-word;
}

/* Muhasebe fişi tablosunun konteynere sığması için min-width'i sıfırla */
.table.table-wrap {
    min-width: 100%;
    table-layout: fixed;
}

/* Yüksek listeler için */
.table-scroll {
  max-height: 62vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobil cihazlarda daha küçük max-height */
@media (max-width: 768px) {
  .table-scroll {
    max-height: 50vh;
  }
}

@media (max-width: 480px) {
  .table-scroll {
    max-height: 40vh;
  }
}

/* ----------------------------- Sekmeler ------------------------- */
.tabs {
  display: flex; border-bottom: 1px solid #dee2e6; margin-bottom: var(--gap-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.tab-link {
  padding: .55rem .9rem;
  border: 1px solid transparent; border-bottom: 0;
  cursor: pointer; font-weight: 600; color: #495057; background: linear-gradient(180deg, #fff, #f2f4f8);
  margin-bottom: -1px; font-size: var(--fs-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.tab-link:hover { background: linear-gradient(180deg, #fdfdfd, #e9eef4); border-color: #e9eef4 #e9eef4 #dee2e6; }
.tab-link.active {
  color: #0d6efd; border-color: #dee2e6 #dee2e6 #fff; border-bottom: 2px solid #0d6efd;
  box-shadow: 0 6px 14px rgba(13,61,110,.12);
}
.tab-content { display: none; min-height: 400px; }
.tab-content.active { display: block; }
#chat.tab-content { min-height: 70vh; max-height: 800px; display: flex; flex-direction: column; }
#chat.tab-content.active { display: flex; }
.note-card { border-left: 3px solid #0d6efd; padding-left: .7rem; margin-bottom: .8rem; background: var(--surface-grad); box-shadow: var(--elev-1); border-radius: var(--radius-sm); }

/* ----------------------------- Global Note Alert FAB ------------- */
.note-alert-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1050; cursor: grab; user-select: none; touch-action: none; }
.note-alert-fab.dragging { cursor: grabbing; opacity: 0.9; }
.note-alert-panel { position: fixed; right: 22px; bottom: 86px; width: 380px; max-height: 62vh; overflow: auto; z-index: 1050; display:none; }
.note-bell-btn { width: 48px; height: 48px; border-radius: 14px; font-size: 1.15rem; box-shadow: 0 8px 18px rgba(13,61,110,.25); }
.note-bell-btn i { font-size: 1.25rem; }

.chat-alert-fab { position: fixed; right: 86px; bottom: 22px; z-index: 1050; display: none; }
.chat-alert-panel { position: fixed; right: 86px; bottom: 86px; width: 340px; max-height: 58vh; overflow: auto; z-index: 1050; display:none; }
.chat-alert-btn { width: 48px; height: 48px; border-radius: 14px; font-size: 1.1rem; box-shadow: 0 8px 18px rgba(13,61,110,.25); }
.chat-notification-item { cursor: pointer; }
.chat-notification-item:hover { background: rgba(13,61,110,.05); }
.chat-notification-item .badge { min-width: 42px; }

@keyframes bell-ring {
  0% { transform: rotate(0); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(9deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  70% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
.note-bell-animate i { animation: bell-ring 1s ease-in-out infinite; transform-origin: top center; display: inline-block; }

/* ----------------------- Filtre & Sayfalama --------------------- */
.filter-card {
  background: var(--surface-grad);
  border-radius: var(--radius-sm);
  padding: .75rem;
  border: 1px solid #dbe3eb;
  box-shadow: var(--elev-2);
  margin-bottom: 1rem;
}
.filter-card .form-label { font-weight: 600; margin-bottom: .25rem; font-size: .78rem; color: #495057; }
.filter-card .form-control, .filter-card .btn { box-shadow: none; font-size: var(--fs-xs); padding: .3rem .6rem; }

.status-group { margin-bottom: .6rem; }
.status-group .btn-group { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.status-group .btn-group .btn { padding: .26rem .5rem; font-size: .75rem; }
.status-group .btn-group .btn:first-of-type { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.status-group .btn-group .btn:last-of-type  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active { border-color: #0d6efd; z-index: 1; }

.advanced-filters { margin-top: .6rem; border-top: 1px solid #e9ecef; padding-top: .6rem; }
.advanced-filter-toggle {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: none; padding: 0; font-weight: 700; color: var(--ddp-dark-blue);
  text-decoration: none; font-size: .9rem; transition: color .2s;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.advanced-filter-toggle:hover { color: var(--ddp-light-blue); }
.advanced-filter-toggle .fa-chevron-down { transition: transform .25s ease; font-size: .8rem; }
.advanced-filter-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.advanced-filters-body { padding-top: .7rem; display: grid; grid-template-columns: 1fr 1.4fr; gap: .8rem; align-items: end; }
.date-group .date-inputs { display: flex; align-items: center; gap: .45rem; }
.date-group .date-inputs span { font-weight: 600; font-size: .82rem; }

.filter-group { position: relative; }
.filter-group .input-group .form-control { padding-right: 2rem; }
#clear-search {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  z-index: 10; background-size: .8em; padding: .35rem; background: transparent; border: none;
}
.btn-close { width: .8em; height: .8em; }

.pagination {
  display: flex; align-items: center; justify-content: center;
  margin-top: 1rem; padding-left: 0; list-style: none; gap: .3rem;
  filter: drop-shadow(0 4px 10px rgba(13,61,110,.12));
}
.pagination .page-item .page-link {
  padding: .45rem .8rem; border: 1px solid #dee2e6; border-radius: 8px;
  color: var(--ddp-dark-blue); background: linear-gradient(180deg, #fff, #f3f6fa); font-weight: 600;
  transition: all .2s ease; text-decoration: none; display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.pagination .page-item .page-link:hover {
  background: linear-gradient(180deg, #eaf4ff, #cfe6ff);
  color: #003a70; border-color: #cfe6ff;
}
.pagination .page-item.disabled .page-link { color: #6c757d; pointer-events: none; background: #e9ecef; border-color: #dee2e6; }
.pagination .page-item.active .page-link {
  color: #fff;
  background: linear-gradient(180deg, #1c4f8a, var(--ddp-dark-blue));
  border-color: var(--ddp-dark-blue);
  box-shadow: 0 6px 14px rgba(13,61,110,.22);
}

/* ----------------------------- İstatistik ------------------------ */
.stat-card {
  background: var(--surface-grad);
  border-radius: 1rem;
  border: 1px solid #dbe3eb;
  box-shadow: var(--elev-2);
  transition: box-shadow .15s, transform .12s;
  min-height: 64px;
  display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem;
}
.stat-card:hover { box-shadow: var(--elev-3); transform: translateY(-1px); }
.icon-wrapper {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; font-size: 1.1rem;
  background: linear-gradient(180deg, #f9fbff, #eef3f8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 10px rgba(13,61,110,.12);
}
.stat-title { font-size: .75rem; font-weight: 700; color: #444; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.6); margin-bottom: .15rem; }
.stat-value { font-size: 1.3rem; font-weight: 700; color: #222; line-height: 1.1; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

/* Stat Button Group */
.stat-btn-group {
    display: flex;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--elev-2);
}

.stat-btn {
    flex: 1;
    padding: .5rem;
    text-align: center;
    background: var(--surface-grad);
    border-right: 1px solid var(--ddp-neutral-200);
    text-decoration: none;
    transition: background .2s ease;
}

.stat-btn:last-child {
    border-right: none;
}

.stat-btn:hover {
    background: linear-gradient(180deg, #eaf4ff, #cfe6ff);
}

.stat-btn .stat-title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted-text-color);
    margin-bottom: .15rem;
}

.stat-btn .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-text-color);
    line-height: 1.1;
}

/* Arama butonu konumu */
#clear-search { right: 10px; }

/* ----------------------------- Fullscreen Loader --------------------- */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
}

.loader-spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Dark mode'da buton metinleri için ek iyileştirmeler */
@media (prefers-color-scheme: dark) {
  /* Buton içi metinler için özel kurallar */
  .btn-primary, .btn-primary * { color: var(--ddp-white) !important; }
  .btn-secondary, .btn-secondary * { color: var(--ddp-white) !important; }
  .btn-success, .btn-success * { color: var(--ddp-white) !important; }
  .btn-danger, .btn-danger * { color: var(--ddp-white) !important; }
  .btn-warning, .btn-warning * { color: #1a1a1a !important; }
  .btn-info, .btn-info * { color: var(--ddp-white) !important; }
  .btn-light, .btn-light * { color: var(--primary-text-color) !important; }
  
  /* Dropdown menü iyileştirmeleri */
  .dropdown-menu { 
    background: var(--ddp-neutral-100) !important; 
    border-color: var(--ddp-neutral-300) !important;
  }
  .dropdown-item { color: var(--primary-text-color) !important; }
  .dropdown-item:hover { 
    background: var(--ddp-neutral-200) !important; 
    color: var(--primary-text-color) !important; 
  }
  
  /* Alert bileşenleri */
  .alert { color: var(--primary-text-color) !important; }
  .alert-success { background: rgba(33, 163, 102, 0.2) !important; border-color: var(--success) !important; }
  .alert-danger { background: rgba(201, 60, 60, 0.2) !important; border-color: var(--danger) !important; }
  .alert-warning { background: rgba(230, 167, 0, 0.2) !important; border-color: var(--warning) !important; }
  .alert-info { background: rgba(47, 128, 237, 0.2) !important; border-color: var(--info) !important; }
  
  /* Modal iyileştirmeleri */
  .modal-content { 
    background: var(--ddp-neutral-100) !important; 
    border-color: var(--ddp-neutral-300) !important; 
  }
  .modal-header { 
    background: var(--ddp-neutral-200) !important; 
    border-bottom-color: var(--ddp-neutral-300) !important; 
  }
  .modal-title { color: var(--primary-text-color) !important; }
  .modal-body { color: var(--primary-text-color) !important; }
  .modal-footer { 
    background: var(--ddp-neutral-200) !important; 
    border-top-color: var(--ddp-neutral-300) !important; 
  }
  
  /* Nav iyileştirmeleri */
  .nav-tabs .nav-link { color: var(--muted-text-color) !important; }
  .nav-tabs .nav-link.active { color: var(--link-color) !important; }
  .nav-pills .nav-link { color: var(--muted-text-color) !important; }
  .nav-pills .nav-link.active { color: var(--ddp-white) !important; }
  
  /* List group iyileştirmeleri */
  .list-group-item {
    background: var(--ddp-neutral-100) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }
  .list-group-item:hover { background: var(--ddp-neutral-200) !important; }

  /* Select ve option iyileştirmeleri */
  select, select option {
    background: var(--ddp-neutral-100) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  /* Select elementinin odaklanma durumu */
  select:focus {
    background: var(--ddp-neutral-200) !important;
    border-color: var(--link-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(95, 200, 242, 0.25) !important;
  }

  /* Option elementleri için özel kurallar */
  option {
    background: var(--ddp-neutral-100) !important;
    color: var(--primary-text-color) !important;
    padding: 8px 12px !important;
  }

  /* Hover durumu için option */
  option:hover, option:focus {
    background: var(--ddp-neutral-200) !important;
    color: var(--primary-text-color) !important;
  }

  /* Seçili option için */
  option:checked {
    background: var(--ddp-light-blue) !important;
    color: var(--ddp-white) !important;
  }

  /* Select'in açılır menüsü için */
  select::-webkit-listbox {
    background: var(--ddp-neutral-100) !important;
    color: var(--primary-text-color) !important;
  }

  /* Firefox için select stilleri */
  select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 var(--primary-text-color) !important;
  }

  /* Select içindeki placeholder metni */
  select::placeholder {
    color: var(--muted-text-color) !important;
  }

  /* Icon wrapper iyileştirmeleri */
  .icon-wrapper {
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9) !important,
      0 4px 10px rgba(13,61,110,.15) !important;
  }

  /* Bootstrap icon sınıfları için dark mode */
  .bg-primary {
    background-color: rgba(0, 58, 112, 0.3) !important;
  }

  .bg-opacity-10 {
    --bs-bg-opacity: 0.3 !important;
  }

  .text-primary {
    color: var(--ddp-light-blue) !important;
  }

  /* Icon elementleri için özel kurallar */
  .icon-wrapper i, .icon-wrapper svg, .icon-wrapper .fa {
    color: var(--ddp-light-blue) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
  }

  /* İstatistik kartlarındaki icon wrapper */
  .stat-card .icon-wrapper {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.12)) !important;
    border: 1px solid rgba(0, 154, 222, 0.2) !important;
  }

  /* Kart başlıkları ve içerikleri için */
  .card .card-title, .card .card-text {
    color: var(--primary-text-color) !important;
  }

  /* Pagination butonları iyileştirmeleri */
  .paginate_button, .paginate_button a {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    text-decoration: none !important;
  }

  .paginate_button:hover, .paginate_button a:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  .paginate_button.current, .paginate_button.active, .paginate_button.current a {
    background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
    color: var(--ddp-white) !important;
    border-color: var(--ddp-light-blue) !important;
    box-shadow: 0 4px 12px rgba(0, 154, 222, 0.3) !important;
  }

  .paginate_button.disabled, .paginate_button.disabled a,
  .paginate_button:disabled, .paginate_button:disabled a {
    background: var(--ddp-neutral-200) !important;
    color: var(--muted-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
  }

  /* DataTables spesifik pagination */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .25rem .5rem !important;
    margin: 0 .05rem !important;
    border-radius: 4px !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    min-width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* Sayfa numarası gösterimi */
  .dataTables_info {
    color: var(--primary-text-color) !important;
    font-size: .85rem !important;
  }

  /* Sayfa uzunluğu seçici */
  .dataTables_length select {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    padding: .3rem .6rem !important;
  }

  .dataTables_length label {
    color: var(--primary-text-color) !important;
  }

  /* Genel pagination iyileştirmeleri */
  .pagination {
    background: transparent !important;
    padding: .25rem 0 !important;
  }

  .pagination li {
    margin: 0 .05rem !important;
  }

  /* Genel pagination link iyileştirmeleri */
  .pagination .page-link {
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-width: 28px !important;
    height: 28px !important;
  }

  /* Previous/Next butonları */
  .paginate_button.previous, .paginate_button.next,
  .paginate_button.previous a, .paginate_button.next a {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    font-weight: 600 !important;
  }

  .paginate_button.previous:hover, .paginate_button.next:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
  }

  /* Sayfa arama kutusu */
  .dataTables_filter input {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    padding: .3rem .6rem !important;
  }

  .dataTables_filter label {
    color: var(--primary-text-color) !important;
  }

  /* DataTables wrapper */
  .dataTables_wrapper {
    color: var(--primary-text-color) !important;
  }

  /* Tablo başlıkları için */
  .dataTables_wrapper th {
    color: var(--primary-text-color) !important;
    background: linear-gradient(180deg, var(--ddp-neutral-200), var(--ddp-neutral-300)) !important;
  }

  /* CKEditor dark mode iyileştirmeleri */
  .ck-editor__editable_inline {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }

  .ck-editor__editable_inline.ck-focused {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    border-color: var(--link-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(95, 200, 242, 0.25) !important;
  }

  /* CKEditor toolbar */
  .ck-toolbar {
    background: linear-gradient(180deg, var(--ddp-neutral-200), var(--ddp-neutral-300)) !important;
    border-color: var(--ddp-neutral-300) !important;
    border-radius: var(--radius-sm) !important;
  }

  .ck-toolbar .ck-button {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    border-radius: 4px !important;
  }

  .ck-toolbar .ck-button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  .ck-toolbar .ck-button.ck-on {
    background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
    color: var(--ddp-white) !important;
    border-color: var(--ddp-light-blue) !important;
    box-shadow: 0 2px 8px rgba(0, 154, 222, 0.3) !important;
  }

  .ck-toolbar .ck-button.ck-disabled {
    background: var(--ddp-neutral-200) !important;
    color: var(--muted-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
    opacity: 0.6 !important;
  }

  /* CKEditor dropdown menüleri */
  .ck-dropdown .ck-dropdown__panel {
    background: var(--ddp-neutral-100) !important;
    border-color: var(--ddp-neutral-300) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
  }

  .ck-dropdown .ck-button {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  .ck-dropdown .ck-button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
  }

  /* CKEditor list items */
  .ck-list .ck-list__item {
    color: var(--primary-text-color) !important;
  }

  .ck-list .ck-list__item:hover {
    background: var(--ddp-neutral-200) !important;
  }

  .ck-list .ck-list__item.ck-on {
    background: var(--ddp-light-blue) !important;
    color: var(--ddp-white) !important;
  }

  /* CKEditor input fields */
  .ck-input {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  .ck-input:focus {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    border-color: var(--link-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(95, 200, 242, 0.25) !important;
  }

  /* CKEditor textarea */
  .ck-textarea {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  /* CKEditor content area */
  .ck-content {
    color: var(--primary-text-color) !important;
  }

  .ck-content * {
    color: var(--primary-text-color) !important;
  }

  /* CKEditor balloon panel */
  .ck-balloon-panel {
    background: var(--ddp-neutral-100) !important;
    border-color: var(--ddp-neutral-300) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
  }

  .ck-balloon-panel * {
    color: var(--primary-text-color) !important;
  }

  /* Gümrük Raporu sayfası dark mode iyileştirmeleri */
  /* Özel kart stilleri - bg-white text-dark sınıflarını override eder */
  .card.bg-white.text-dark, .summary-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
    box-shadow: var(--elev-2) !important;
  }

  .card.bg-white.text-dark .card-title,
  .card.bg-white.text-dark .card-text,
  .summary-card .card-title,
  .summary-card .card-text {
    color: var(--primary-text-color) !important;
  }

  /* Summary kartları için özel hover efekti */
  .summary-card:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    transform: translateY(-2px);
    box-shadow: var(--elev-3) !important;
    transition: all 0.2s ease;
  }

  /* Renkli kartlar için dark mode */
  .card.bg-success {
    background: linear-gradient(180deg, rgba(33, 163, 102, 0.2), rgba(33, 163, 102, 0.1)) !important;
    border-color: rgba(33, 163, 102, 0.3) !important;
    color: var(--primary-text-color) !important;
  }

  .card.bg-danger {
    background: linear-gradient(180deg, rgba(201, 60, 60, 0.2), rgba(201, 60, 60, 0.1)) !important;
    border-color: rgba(201, 60, 60, 0.3) !important;
    color: var(--primary-text-color) !important;
  }

  .card.bg-warning {
    background: linear-gradient(180deg, rgba(230, 167, 0, 0.2), rgba(230, 167, 0, 0.1)) !important;
    border-color: rgba(230, 167, 0, 0.3) !important;
    color: var(--primary-text-color) !important;
  }

  /* Kart başlıkları */
  .card.bg-success .card-title,
  .card.bg-danger .card-title,
  .card.bg-warning .card-title {
    color: var(--primary-text-color) !important;
  }

  /* Ana tablo için dark mode */
  #gumruk-table, .gumruk-main-table {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }

  #gumruk-table thead th {
    background: linear-gradient(180deg, var(--ddp-neutral-200), var(--ddp-neutral-300)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }

  #gumruk-table tbody tr {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  #gumruk-table tbody tr:nth-child(even) {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  }

  #gumruk-table tbody tr:hover {
    background: linear-gradient(180deg, rgba(79, 195, 247, 0.1), rgba(79, 195, 247, 0.05)) !important;
  }

  #gumruk-table tbody td {
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  /* Aylık detay modal için dark mode */
  #aylikDetayModal .modal-content, .gumruk-modal .modal-content {
    background: var(--ddp-neutral-100) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }

  #aylikDetayModal .modal-header {
    background: var(--ddp-neutral-200) !important;
    border-bottom-color: var(--ddp-neutral-300) !important;
  }

  #aylikDetayModal .modal-title {
    color: var(--primary-text-color) !important;
  }

  #aylikDetayModal .modal-body {
    color: var(--primary-text-color) !important;
  }

  /* Aylık tablo için dark mode */
  #aylikTable {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }

  #aylikTable thead th {
    background: linear-gradient(180deg, var(--ddp-neutral-200), var(--ddp-neutral-300)) !important;
    border-color: var(--ddp-neutral-300) !important;
    color: var(--primary-text-color) !important;
  }

  #aylikTable tbody tr {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  #aylikTable tbody td {
    color: var(--primary-text-color) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  #aylikTable tbody tr:hover {
    background: linear-gradient(180deg, rgba(79, 195, 247, 0.1), rgba(79, 195, 247, 0.05)) !important;
  }

  /* Loading spinner için dark mode */
  .text-center i.fa-spinner {
    color: var(--ddp-light-blue) !important;
  }

  /* Detay butonları için dark mode */
  .detay-btn {
    background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
    color: var(--ddp-white) !important;
    border-color: var(--ddp-light-blue) !important;
  }

  .detay-btn:hover {
    background: linear-gradient(180deg, var(--ddp-dark-blue), var(--ddp-light-blue)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 154, 222, 0.3) !important;
  }

  /* Form check input'ları için dark mode */
  .form-check-input {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
    border-color: var(--ddp-neutral-300) !important;
  }

  .form-check-input:checked {
    background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
    border-color: var(--ddp-light-blue) !important;
  }

  .form-check-label {
    color: var(--primary-text-color) !important;
  }
}

/* Timeline Styles */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -45px;
    top: 0;
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-line {
    width: 2px;
    background: #e9ecef;
    flex: 1;
    margin-top: 5px;
    position: relative;
}

.timeline-content {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border-left: 4px solid var(--ddp-light-blue);
}

.timeline-content:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.timeline-header {
    margin-bottom: 15px;
}

.timeline-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.timeline-badges .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 4px;
}

.status-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.status-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.status-date {
    text-align: center;
    margin-top: 2px;
}

.duration-info {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 4px 10px;
    border-radius: 16px;
    border: 1px solid #90caf9;
    margin-bottom: 8px;
    font-size: .75rem;
}

.notes-section {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-left: 4px solid #6c757d;
    border-radius: 4px;
}

.notes-content {
    font-style: italic;
    line-height: 1.5;
}

.current-status-info {
    padding: 8px 12px;
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border: 1px solid #bee5eb;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.card-body > .tab-content {
    padding: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-body > .tab-content {
        padding: 15px;
    }

    .timeline {
        padding-left: 20px;
    }

    .timeline-marker {
        left: -35px;
    }

    .timeline-marker,
    .timeline-dot {
        width: 24px;
        height: 24px;
    }

    .timeline-content {
        padding: 12px;
        margin-right: 6px;
    }

    .timeline-badges {
        margin-top: 10px;
    }

    .timeline-badges .badge {
        font-size: 0.7rem;
    }

    .status-container {
        flex-direction: column;
        gap: 8px;
    }

    .status-item {
        min-width: 100px;
    }

    .status-arrow {
        min-width: auto;
    }
}

@media (max-width: 576px) {
    .card-body > .tab-content {
        padding: 12px;
    }

    .timeline {
        padding-left: 15px;
    }

    .timeline-marker {
        left: -30px;
    }

    .timeline-content {
        padding: 10px;
        margin-right: 4px;
    }

    .status-container {
        flex-direction: column;
        gap: 6px;
    }

    .status-item {
        min-width: 80px;
    }

    .timeline-badges .badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.375rem;
    }
}

[data-bs-theme="dark"] .timeline-content {
    background: var(--ddp-neutral-200);
    border-color: var(--ddp-neutral-300);
    border-left-color: var(--ddp-light-blue);
}

[data-bs-theme="dark"] .timeline-line {
    background: var(--ddp-neutral-400);
}

[data-bs-theme="dark"] .duration-info {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1), rgba(var(--bs-primary-rgb), 0.15));
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

[data-bs-theme="dark"] .notes-section {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: var(--ddp-neutral-500);
}

[data-bs-theme="dark"] .status-arrow i {
    color: var(--ddp-neutral-500);
}

/* ----------------------------- FilteredSelectMultiple Widget (High Specificity) -------------------------- */
.card .selector {
    display: flex;
    flex-wrap: wrap; /* Mobil için */
    gap: 1rem;
    align-items: flex-start;
}

.card .selector .selector-available,
.card .selector .selector-chosen {
    width: 100%; /* Mobil'de tam genişlik */
    min-width: 200px;
    box-sizing: border-box;
}

.card .selector .selector-chooser {
    width: 100%; /* Mobil'de tam genişlik */
    text-align: center;
    align-self: center;
    padding: 0;
}

.card .selector h2 {
    font-size: 0.9rem;
    padding: 0.5rem;
    margin: 0;
    color: var(--ddp-white);
    background: var(--ddp-dark-blue);
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.card .selector .selector-filter {
    padding: 0.5rem;
    background: var(--ddp-neutral-100);
    border: 1px solid var(--ddp-neutral-200);
    border-bottom: none;
}

.card .selector .selector-filter input {
    width: 100%;
    padding: .3rem .5rem;
    border: 1px solid var(--ddp-neutral-300);
    border-radius: var(--radius-xs);
}

.card .selector select {
    width: 100%;
    height: 200px;
    border: 1px solid var(--ddp-neutral-200);
    border-top: none;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.card .selector .selector-chooser ul {
    padding: 0;
    margin: .5rem 0;
    display: flex; /* Butonları yan yana getir */
    justify-content: center;
    gap: .5rem;
}

.card .selector .selector-chooser li {
    list-style-type: none;
}

.card .selector .selector-chooser a {
    display: block;
    padding: 0.3rem 0.6rem;
    background: var(--ddp-neutral-100);
    border: var(--border);
    border-radius: var(--radius-xs);
    color: var(--ddp-dark-blue);
    text-decoration: none;
    box-shadow: var(--elev-1);
}

.card .selector .selector-chooser a:hover {
    background: var(--ddp-neutral-200);
    border-color: var(--ddp-neutral-300);
    box-shadow: var(--elev-2);
}

/* Orta ve büyük ekranlar için */
@media (min-width: 768px) {
    .card .selector .selector-available,
    .card .selector .selector-chosen {
        flex: 1 1 45%; /* Flex-grow, flex-shrink, flex-basis */
        width: auto; /* width'i sıfırla */
    }
    .card .selector .selector-chooser {
        flex: 0 0 auto; /* Büyümesin, küçülmesin, otomatik genişlik */
        width: auto;
        min-width: 40px;
        padding: 1.5rem 0;
    }
    .card .selector .selector-chooser ul {
        display: block; /* Butonları alt alta getir */
    }
    .card .selector .selector-chooser li {
        margin: 0.5rem 0;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .card .selector .selector-filter {
        background: var(--ddp-neutral-200);
        border-color: var(--ddp-neutral-300);
    }

    .card .selector select {
        background: var(--ddp-neutral-100) !important;
        border-color: var(--ddp-neutral-300) !important;
    }

    .card .selector .selector-chooser a {
        background: var(--ddp-neutral-200);
        color: var(--primary-text-color) !important;
        border-color: var(--ddp-neutral-300);
    }

    .card .selector .selector-chooser a:hover {
        background: var(--ddp-neutral-300);
    }
}

/* Overdue Work Order Animation */
@keyframes blink-danger {
    0% { background-color: rgba(100, 0, 0, 0.3); }
    50% { background-color: rgba(200, 0, 0, 0.7); }
    100% { background-color: rgba(255, 0, 0, 0.3); }
}

.overdue-blinking > td {
    animation: blink-danger 1.5s infinite;
}

.overdue-blinking-card {
    animation: blink-danger 1.5s infinite;
}

/* ----------------------------- Tahsilat Takip Tablosu ------------------------- */
#tahsilatTable thead th {
    color: #ffffff; /* Default text color for headers */
    vertical-align: middle;
}

#tahsilatTable th:nth-child(1),
#tahsilatTable td:nth-child(1) {
    width: 25%; /* Firma Adı */
}

#tahsilatTable th:nth-child(6), #tahsilatTable td:nth-child(6),
#tahsilatTable th:nth-child(7), #tahsilatTable td:nth-child(7),
#tahsilatTable th:nth-child(8), #tahsilatTable td:nth-child(8),
#tahsilatTable th:nth-child(9), #tahsilatTable td:nth-child(9),
#tahsilatTable th:nth-child(10), #tahsilatTable td:nth-child(10),
#tahsilatTable th:nth-child(11), #tahsilatTable td:nth-child(11) {
    width: 7%; /* Tutar kolonları */
}

#tahsilatTable .th-main {
    background: #f8f9fa !important; /* A very light grey, almost white */
    color: #212529 !important; /* Black text */
    border-color: #dee2e6 !important;
}

#tahsilatTable .th-ltd-main,
#tahsilatTable .th-ltd {
    background: #5dade2 !important; /* Açık Mavi */
    color: #ffffff !important;
    border-color: #4da3d9 !important;
}

#tahsilatTable .th-global-main,
#tahsilatTable .th-global {
    background: #2e86c1 !important; /* Koyu Mavi */
    color: #ffffff !important;
    border-color: #2977ac !important;
}

/* Style for links in table headers */
#tahsilatTable thead th a {
    color: inherit !important;
    text-decoration: none !important;
}

#tahsilatTable thead th a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* Dark mode overrides for Tahsilat table */
@media (prefers-color-scheme: dark) {
    #tahsilatTable .th-main {
        background: #343a40 !important; /* Darker grey for dark mode */
        color: #f8f9fa !important; /* Light text for dark mode */
        border-color: #454d55 !important;
    }

    #tahsilatTable .th-ltd-main,
    #tahsilatTable .th-ltd {
        background: #3498db !important; /* A slightly brighter light blue for dark mode */
        border-color: #2980b9 !important;
    }

    #tahsilatTable .th-global-main,
    #tahsilatTable .th-global {
        background: #2980b9 !important; /* A slightly brighter dark blue */
        border-color: #2471a3 !important;
    }
}

/* ----------------------------- Müşavir Tarife Kontrol Tablosu ------------------------- */
.tariff-control-table th:first-child,
.tariff-control-table td:first-child {
  width: 10%;
  text-align: center;
    vertical-align: middle;
}

.tariff-control-table th:nth-child(3),
.tariff-control-table td:nth-child(3) {
    width: 50%;
}

/* Status Button Container */
.status-btn-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.status-btn {
    flex: 0 1 140px;
    padding: 0.4rem 0.5rem;
    text-align: center;
    background: var(--surface-grad);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
    text-decoration: none;
    transition: all .2s ease;
    border-left: 4px solid transparent;
}

.status-btn:hover {
    box-shadow: var(--elev-2);
    transform: translateY(-2px);
}

.status-btn .stat-title {
    font-size: 0.7rem;
    margin-bottom: 2px;
}

.status-btn .stat-value {
    font-size: 1.1rem;
    line-height: 1;
}

/* Arama butonu konumu */
#clear-search { right: 10px; }

/* ----------------------------- Fullscreen Loader --------------------- */
.stat-btn .stat-value {
    color: var(--primary-text-color) !important;
}

/* Status button dark mode */
.status-btn {
    background: var(--surface-grad);
    box-shadow: var(--elev-1);
}
.status-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
}

.stat-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
}

/* Bootstrap icon sınıfları için dark mode */
.bg-primary {
  background-color: rgba(0, 58, 112, 0.3) !important;
}

/* ----------------------------- Dashboard Work Orders Table Specific Styles -------------------------- */
#dashboard-work-orders-table {
    width: auto; /* Let content determine the width */
    min-width: 100%; /* Ensure it's at least as wide as its container */
    table-layout: auto; /* Let browser decide column widths based on content */
}

#dashboard-work-orders-table th,
#dashboard-work-orders-table td {
    white-space: nowrap; /* Prevent content from wrapping to a new line */
    overflow: visible; /* Allow content to overflow the cell bounds */
    text-overflow: clip; /* Remove the ellipsis (...) */
    max-width: none; /* Remove any max-width constraints on cells */
}

#dashboard-work-orders-table .col-firma,
#dashboard-work-orders-table .col-durum {
    overflow: hidden;
    text-overflow: ellipsis;
}

#dashboard-work-orders-table .col-firma {
    width: 200px;
    max-width: 200px;
}

#dashboard-work-orders-table .col-durum {
    width: 120px;
    max-width: 120px;
}

/* Evrim Geçmişi Tablosu Hafta Sonu Stili */
.weekend-row > td {
    background-color: #f8f9fa !important;
}

/* Evrim Geçmişi Tablosu Hafta Sonu Stili (Dark Mode) */
.weekend-row > td {
    background-color: var(--ddp-neutral-200) !important;
}

/* Custom Multiselect Dropdown */
.multiselect-dropdown {
    position: relative;
    width: 100%;
}
.multiselect-dropdown .dropdown-toggle-btn {
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 2.5rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
.multiselect-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--bs-body-bg);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1050;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
}
.multiselect-dropdown .dropdown-menu.show {
    display: block;
}
.multiselect-dropdown .search-box {
    margin-bottom: 10px;
}
.multiselect-dropdown .form-check-label {
    width: 100%;
    font-size: 0.85rem;
}
.multiselect-dropdown .select-all-container .form-check-label {
    font-weight: bold;
}

.table thead th a {pyt
    color: inherit;
}

/* ----------------------------- Sohbet Alanı ----------------------------- */
.workorder-chat-root {
    height: 70vh;
    min-height: 500px;
    max-height: 800px;
    display: flex;
    flex-direction: column;
}

.chat-layout {
    display: flex;
    gap: 1rem;
    border: 1px solid var(--chat-border-color);
    border-radius: var(--radius-md);
    background: var(--chat-main-bg);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1;
}

.chat-sidebar {
    width: 320px;
    background: var(--chat-sidebar-bg);
    border-right: 1px solid var(--chat-border-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-session-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.chat-session-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .65rem .75rem;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.chat-session-item:hover {
    border-color: var(--chat-border-color);
    box-shadow: var(--elev-1);
}

.chat-session-item.active {
    border-color: var(--ddp-light-blue);
    box-shadow: 0 0 0 1px rgba(0,154,222,.15);
}

.chat-session-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ddp-dark-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
    flex-shrink: 0;
}

.chat-session-avatar.online::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--chat-sidebar-bg);
    bottom: 2px;
    right: 2px;
}

.chat-session-body {
    flex: 1;
}

.chat-session-preview {
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted-text-color);
    font-size: var(--fs-xxs);
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--chat-main-bg);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-main-header {
    padding: 1rem;
    border-bottom: 1px solid var(--chat-border-color);
    background: var(--chat-sidebar-bg);
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
}

.chat-message-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.2rem;
    background: #fefefe;
    min-height: 0;
    max-height: 100%;
}

.chat-message-scroll::-webkit-scrollbar,
.chat-session-list::-webkit-scrollbar {
    width: 6px;
}
.chat-message-scroll::-webkit-scrollbar-track,
.chat-session-list::-webkit-scrollbar-track {
    background: transparent;
}
.chat-message-scroll::-webkit-scrollbar-thumb,
.chat-session-list::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 3px;
}
.chat-message-scroll::-webkit-scrollbar-thumb:hover,
.chat-session-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.25);
}

.chat-message-list {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.chat-message {
    display: flex;
}

.chat-message.mine {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 75%;
    padding: .65rem .85rem;
    border-radius: 1rem;
    background: var(--chat-bubble-out);
    box-shadow: var(--elev-1);
}

.chat-message.mine .chat-bubble {
    background: var(--chat-bubble-in);
    border-bottom-right-radius: .3rem;
}

.chat-message:not(.mine) .chat-bubble {
    border-bottom-left-radius: .3rem;
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    justify-content: flex-end;
    font-size: var(--fs-xxs);
    color: var(--muted-text-color);
}

.chat-tick i {
    font-size: .85rem;
}

.chat-message-form {
    padding: 1rem;
    border-top: 1px solid var(--chat-border-color);
    background: var(--chat-main-bg);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.03);
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    flex-grow: 0;
    min-height: fit-content;
}

.chat-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.chat-input {
    padding-right: 50px !important; /* Buton için yer aç */
    resize: none;
    border-radius: 24px !important;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 48px;
    max-height: 120px;
    overflow-y: auto;
}

.chat-attach-btn {
    color: var(--muted-text-color);
    padding: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.chat-attach-btn:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--primary-text-color);
}

.chat-file-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--ddp-neutral-100);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.chat-file-preview .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.chat-send-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.chat-send-btn:hover {
    transform: scale(1.05);
}

/* Mesaj Animasyonları */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message {
    display: flex;
    animation: messageSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Yeni Mesaj Bildirim Animasyonu */
@keyframes chat-pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

.chat-alert-animate {
    animation: chat-pulse-ring 2s infinite;
}

.chat-user-list .chat-user-item {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-user-list .badge {
    min-width: 90px;
}

.chat-message-focus .chat-bubble {
    box-shadow: 0 0 0 3px rgba(0,154,222,.35), var(--elev-2);
}

/* Dark mode için sohbet alanı */
@media (prefers-color-scheme: dark) {
    .chat-layout {
        background: var(--ddp-neutral-100) !important;
        border-color: var(--ddp-neutral-300) !important;
    }
    
    .chat-sidebar {
        background: var(--ddp-neutral-200) !important;
        border-right-color: var(--ddp-neutral-300) !important;
    }
    
    .chat-main {
        background: var(--ddp-neutral-100) !important;
    }
    
    .chat-main-header {
        background: var(--ddp-neutral-200) !important;
        border-bottom-color: var(--ddp-neutral-300) !important;
    }
    
    .chat-message-scroll {
        background: var(--ddp-neutral-100) !important;
    }
    
    .chat-message-form {
        background: var(--ddp-neutral-100) !important;
        border-top-color: var(--ddp-neutral-300) !important;
    }
    
    .chat-session-item {
        background: var(--ddp-neutral-100) !important;
        color: var(--primary-text-color) !important;
    }
    
    .chat-session-item:hover {
        border-color: var(--ddp-neutral-400) !important;
    }
    
    .chat-bubble {
        background: var(--ddp-neutral-200) !important;
        color: var(--primary-text-color) !important;
    }
    
    .chat-message.mine .chat-bubble {
        background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
        color: var(--ddp-white) !important;
    }
}

@media (max-width: 992px) {
    .workorder-chat-root {
        height: 80vh;
        min-height: 600px;
    }
    .chat-layout {
        flex-direction: column;
    }
    .chat-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--chat-border-color);
        flex: 0 0 200px;
        min-height: 0;
    }
    .chat-main-header {
        flex-direction: column;
        gap: .5rem;
    }
    #chat.tab-content {
        min-height: 80vh;
    }
}

@media (max-width: 576px) {
    .workorder-chat-root {
        height: 85vh;
        min-height: 500px;
    }
    #chat.tab-content {
        min-height: 85vh;
    }
    .chat-sidebar {
        flex: 0 0 150px;
        padding: 0.75rem;
    }
    .chat-message-scroll {
        padding: 0.8rem;
    }
    .chat-message-form {
        padding: 0.75rem;
    }
    .chat-bubble {
        max-width: 85%;
        padding: 0.5rem 0.7rem;
    }
}

/* ========================================================================
   PERSONAL REMINDER FAB & PANEL STYLES
   ======================================================================== */

.reminder-alert-fab {
    position: fixed;
    bottom: 180px;
    right: 20px;
    z-index: 1040;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.reminder-alert-fab.dragging {
    cursor: grabbing;
    opacity: 0.9;
    transform: scale(1.05);
}

.reminder-bell-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, #ff6b6b, #dc3545, #c82333);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    position: relative;
    overflow: visible;
}

.reminder-bell-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc107, #ff9800, #ffc107);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.reminder-bell-animate::before {
    opacity: 1;
    animation: reminderGlow 1.5s ease-in-out infinite;
}

@keyframes reminderGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.reminder-bell-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
    color: white !important;
}

.reminder-bell-animate {
    animation: reminderBellRing 1s ease-in-out infinite;
}

.reminder-bell-animate i {
    animation: reminderIconShake 0.4s ease-in-out infinite;
    display: inline-block;
    transform-origin: top center;
}

@keyframes reminderBellRing {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5), 0 0 30px rgba(255, 193, 7, 0.3);
    }
}

@keyframes reminderIconShake {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(20deg); }
    30% { transform: rotate(-18deg); }
    45% { transform: rotate(14deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(6deg); }
    90% { transform: rotate(-2deg); }
}

.reminder-alert-panel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 380px;
    max-height: 500px;
    display: none;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.reminder-alert-panel .card-header {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border-bottom: none;
}

.reminder-alert-panel .list-group-item {
    border-left: none;
    border-right: none;
    padding: 0.5rem 1rem;
}

.reminder-alert-panel .list-group-item:first-child {
    border-top: none;
}

.bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* Dark mode için hatırlatma paneli */
@media (prefers-color-scheme: dark) {
    .reminder-alert-panel {
        background: var(--ddp-neutral-100);
        border: 1px solid var(--ddp-neutral-300);
    }
    
    .reminder-alert-panel .list-group-item {
        background: var(--ddp-neutral-100);
        border-color: var(--ddp-neutral-300);
    }
    
    .bg-warning-subtle {
        background-color: rgba(255, 193, 7, 0.2) !important;
    }
}

/* Responsive */
@media (max-width: 576px) {
    .reminder-alert-fab {
        bottom: 160px;
        right: 15px;
    }
    
    .reminder-bell-btn {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
    
    .reminder-alert-panel {
        width: calc(100vw - 30px);
        right: 0;
    }
}

/* Personal notes card styles */
.personal-note-card {
    transition: box-shadow 0.2s, border-color 0.2s;
}

.personal-note-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reminder-card {
    transition: box-shadow 0.2s, border-color 0.2s;
}

.reminder-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reminder-card.border-warning {
    border-width: 2px;
    animation: reminderPulse 2s ease-in-out infinite;
}

@keyframes reminderPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
}