/* ================================================
   ÇEVRE YÖNETİM SİSTEMİ — Modern & Mobile Custom CSS
   ================================================ */

/* ---- CSS Variables ---- */
:root {
  --c-primary:      #4f46e5;
  --c-primary-rgb:  79,70,229;
  --c-success:      #22c55e;
  --c-warning:      #f59e0b;
  --c-danger:       #ef4444;
  --c-info:         #3b82f6;
  --c-border:       #e5e7eb;
  --c-bg-soft:      #f9fafb;
  --c-text:         #1f2937;
  --c-muted:        #6b7280;
  --shadow-xs:      0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:      0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-md:      0 4px 16px rgba(0,0,0,.1);
  --radius-sm:      .35rem;
  --radius:         .5rem;
  --radius-lg:      .75rem;
  --transition:     .18s ease;
}

/* ================================================
   MOBILE SIDEBAR OVERLAY
   ================================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  cursor: pointer;
}
@media (max-width: 1024px) {
  .wrapper.toggled .sidebar-overlay { display: block; }
}
@media (min-width: 1025px) {
  .sidebar-overlay { display: none !important; }
}

/* ================================================
   TYPOGRAPHY & BODY
   ================================================ */
body { -webkit-font-smoothing: antialiased; color: var(--c-text); }
a { transition: color var(--transition); }
h1,h2,h3,h4,h5,h6 { font-weight: 600; color: var(--c-text); }

/* ================================================
   SCROLLBAR
   ================================================ */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: #f3f4f6; }
::-webkit-scrollbar-thumb    { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ================================================
   CARDS
   ================================================ */
.card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

/* Override legacy "bg-secondary text-white" card headers to modern style */
.card .card-header.bg-secondary,
.card .card-header.bg-primary,
.card .card-header.bg-success,
.card .card-header.bg-info,
.card .card-header.bg-dark {
  background: #fff !important;
  color: var(--c-text) !important;
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-muted) !important;
  padding: .65rem 1.1rem;
}
.card .card-header {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: .85rem 1.1rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-weight: 600;
  font-size: .9rem;
}
.card .card-body { padding: 1rem 1.1rem; }

/* ================================================
   FORM CONTROLS
   ================================================ */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: #d1d5db;
  font-size: .875rem;
  padding: .45rem .75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),.12);
  outline: none;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--c-danger); }
.form-control.is-valid,   .form-select.is-valid   { border-color: var(--c-success); }

.form-label {
  font-weight: 500;
  font-size: .82rem;
  color: #374151;
  margin-bottom: .3rem;
}

/* Float labels on required */
.form-label.required::after {
  content: ' *';
  color: var(--c-danger);
}

.input-group .input-group-text {
  border-color: #d1d5db;
  background: var(--c-bg-soft);
  font-size: .875rem;
}
.input-group .form-control:not(:first-child) { border-left: 0; }
.input-group .form-control:not(:last-child)  { border-right: 0; }

/* Better switch */
.form-switch .form-check-input {
  width: 2.4em;
  height: 1.25em;
  border-radius: 1.5em;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.form-switch .form-check-input:checked {
  background-color: var(--c-success);
  border-color: var(--c-success);
}

/* Textarea */
textarea.form-control { min-height: 90px; resize: vertical; }

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  padding: .42rem .9rem;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; border-radius: .3rem; }
.btn-lg { padding: .6rem 1.4rem; font-size: 1rem; }

/* Primary gradient */
.btn-primary {
  background: linear-gradient(135deg,#6366f1,var(--c-primary));
  border-color: var(--c-primary);
}
.btn-primary:hover { background: linear-gradient(135deg,var(--c-primary),#4338ca); }

/* Success */
.btn-success { background: linear-gradient(135deg,#4ade80,#16a34a); border-color: #16a34a; }
.btn-success:hover { background: linear-gradient(135deg,#22c55e,#15803d); }

/* ================================================
   TABLES
   ================================================ */
.table > thead > tr > th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted);
  background: var(--c-bg-soft);
  border-bottom: 2px solid var(--c-border);
  padding: .6rem .75rem;
  white-space: nowrap;
}
.table > tbody > tr > td {
  font-size: .875rem;
  vertical-align: middle;
  padding: .5rem .75rem;
  border-color: #f3f4f6;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(var(--c-primary-rgb),.02);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--c-primary-rgb),.04);
  transition: background-color var(--transition);
}

/* ================================================
   DATATABLES
   ================================================ */
.dataTables_wrapper {
  padding: 0;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: .85rem;
  color: var(--c-muted);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--radius-sm);
  border: 1px solid #d1d5db;
  padding: .3rem .6rem;
  font-size: .85rem;
  outline: none;
  transition: border-color var(--transition);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--c-primary); }
.dataTables_wrapper .dataTables_info { font-size: .8rem; color: var(--c-muted); }
.dataTables_wrapper .dataTables_paginate { margin-top: .5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  padding: .3rem .65rem !important;
  font-size: .82rem !important;
  margin: 0 1px !important;
  transition: all var(--transition) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--c-bg-soft) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
  border-color: var(--c-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: .4 !important;
  cursor: not-allowed !important;
}
.dataTables_processing {
  background: rgba(255,255,255,.95) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  padding: .75rem 1.5rem !important;
  box-shadow: var(--shadow-md) !important;
  font-size: .875rem !important;
  color: #374151 !important;
  z-index: 10 !important;
}
/* DT Export Buttons */
.dt-buttons .btn, .dt-button {
  border-radius: var(--radius-sm) !important;
  font-size: .8rem !important;
  padding: .3rem .7rem !important;
  margin-right: .25rem !important;
  border: 1px solid var(--c-border) !important;
  background: #fff !important;
  color: var(--c-text) !important;
  transition: all var(--transition) !important;
}
.dt-buttons .btn:hover, .dt-button:hover {
  background: var(--c-bg-soft) !important;
  border-color: #9ca3af !important;
}

/* ================================================
   BADGES
   ================================================ */
.badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .28em .6em;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
}

/* ================================================
   ALERTS
   ================================================ */
.alert {
  border-radius: var(--radius);
  font-size: .875rem;
  border-left-width: 4px;
  border-left-style: solid;
}
.alert-danger  { border-left-color: var(--c-danger);  }
.alert-success { border-left-color: var(--c-success); }
.alert-warning { border-left-color: var(--c-warning); }
.alert-info    { border-left-color: var(--c-info);    }

/* ================================================
   MODALS
   ================================================ */
.modal-content {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-header {
  border-bottom: 1px solid var(--c-border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header .modal-title { font-size: .95rem; font-weight: 600; }
.modal-footer { border-top: 1px solid var(--c-border); padding: .75rem 1.25rem; }
.modal-body   { padding: 1.1rem 1.25rem; }
.modal-backdrop.show { opacity: .35; backdrop-filter: blur(2px); }

/* ================================================
   NAV TABS
   ================================================ */
.nav-tabs {
  border-bottom: 2px solid var(--c-border);
  gap: .15rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { height: 3px; }
.nav-tabs::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
.nav-tabs .nav-link {
  font-size: .84rem;
  font-weight: 500;
  color: var(--c-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: .5rem 1rem;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-tabs .nav-link:hover { color: var(--c-primary); background: rgba(var(--c-primary-rgb),.05); }
.nav-tabs .nav-link.active {
  color: var(--c-primary);
  font-weight: 600;
  background: #fff;
  border-color: var(--c-border) var(--c-border) #fff;
  border-bottom-color: #fff;
  margin-bottom: -2px;
}

/* ================================================
   SELECT2
   ================================================ */
.select2-container--bootstrap4 .select2-selection {
  border-radius: var(--radius-sm) !important;
  border-color: #d1d5db !important;
  min-height: 36px !important;
}
.select2-container--bootstrap4 .select2-selection:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb),.12) !important;
}
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--c-primary) !important;
}

/* ================================================
   SIDEBAR — Modern Touches
   ================================================ */
.sidebar-wrapper {
  transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}
.metismenu li a {
  transition: background var(--transition), color var(--transition);
  border-radius: var(--radius-sm);
  margin: 1px 8px;
  padding: 8px 12px;
}
.metismenu li > a:hover, .metismenu li > a.active {
  color: var(--c-primary) !important;
  background: rgba(var(--c-primary-rgb),.08);
}
.metismenu .parent-icon { min-width: 28px; }

/* ================================================
   HEADER / TOPBAR
   ================================================ */
.topbar { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.user-box .user-img { border-radius: 50%; border: 2px solid var(--c-border); }

/* ================================================
   HEADER DROPDOWNS (bildirim / mesaj listeleri)
   Şablon bu listeleri perfect-scrollbar ile kaydırılabilir yapıyordu.
   Eklenti kaldırıldığı için app.css'teki sabit "height: 360px"
   içeriğin menünün dışına taşmasına yol açıyor; kaydırmayı CSS ile veriyoruz.
   ================================================ */
.header-notifications-list,
.header-message-list {
  height: auto;
  max-height: min(360px, calc(100vh - 210px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.header-notifications-list::-webkit-scrollbar,
.header-message-list::-webkit-scrollbar { width: 6px; }
.header-notifications-list::-webkit-scrollbar-thumb,
.header-message-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Son satırın çizgisi alt bağlantıyla üst üste binmesin */
.header-notifications-list .dropdown-item:last-child,
.header-message-list .dropdown-item:last-child { border-bottom: 0; }

/* Notifications footer'ı <a> olduğu için text-center tek başına yetmiyor */
.dropdown-large .msg-footer { display: block; background: #fff; }

/* Dar ekranlarda 360px sabit genişlik yatay taşma yapıyor */
.dropdown-large .dropdown-menu { max-width: calc(100vw - 1.5rem); }

/* ================================================
   PAGE HEADER (breadcrumb-like)
   ================================================ */
.page-header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--c-border);
}
.page-header-box h5 { margin: 0; font-size: 1rem; font-weight: 700; }

/* ================================================
   FACILITY TABS — Better show.blade.php
   ================================================ */
.facility-flat .nav-tabs { margin-bottom: 1rem; }
.facility-flat .tab-pane .card { margin-top: 0; }

/* ================================================
   FORM PAGES (create/update)
   ================================================ */
.form-section-title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  margin-bottom: .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--c-border);
}

/* ================================================
   CLICKABLE CARDS
   ================================================ */
.clickable-card {
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.clickable-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ================================================
   TOASTR / SWAL fixes
   ================================================ */
.toast-top-right { top: 70px !important; }
.swal2-popup { border-radius: var(--radius-lg) !important; font-size: .9rem !important; }
.swal2-confirm { border-radius: var(--radius-sm) !important; }
.swal2-cancel  { border-radius: var(--radius-sm) !important; }

/* ================================================
   MOBILE — RESPONSIVE IMPROVEMENTS
   ================================================ */
@media (max-width: 1024px) {
  /* Page content full width */
  .page-content { padding: .6rem .5rem .5rem !important; }

  /* KPI cards scrollable row on mobile */
  .kpi-row {
    display: flex;
    overflow-x: auto;
    gap: .5rem;
    padding-bottom: .5rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .kpi-row > .col { flex: 0 0 260px; max-width: 260px; }
}

@media (max-width: 768px) {
  /* Reduce global card padding */
  .card-body { padding: .75rem !important; }

  /* Stack row cols on mobile */
  .row.g-3 > [class*="col-md-"],
  .row.g-3 > [class*="col-lg-"] { margin-bottom: .25rem; }

  /* Make modals full-width */
  .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem) !important; }
  .modal-lg, .modal-xl { max-width: calc(100% - 1rem) !important; }

  /* Nav tabs horizontal scroll */
  .nav-tabs { margin-bottom: .75rem; }

  /* Form buttons stack */
  .btn-group-mobile { display: flex; flex-direction: column; gap: .4rem; }
  .btn-group-mobile .btn { width: 100%; }

  /* DataTables: info and pagination below each other */
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate { text-align: center !important; }

  /* Table action buttons compact */
  .table .btn-sm { padding: .2rem .45rem !important; font-size: .75rem !important; }

  /* Topbar logo smaller */
  .logo-text { font-size: 1rem !important; }

  /* Card with overflowing table */
  .table-responsive { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

  /* Hide less important table columns on mobile via JS-controlled class */
  .hidden-mobile { display: none !important; }
}

@media (max-width: 576px) {
  .card-body { padding: .6rem !important; }
  .modal-dialog { margin: .25rem; max-width: calc(100% - .5rem) !important; }
  .page-content { padding: .4rem .3rem .4rem !important; }

  /* DT buttons compact */
  .dt-buttons .btn { padding: .25rem .5rem !important; font-size: .75rem !important; }

  /* Action buttons in card header */
  .card-header .btn-sm { padding: .2rem .5rem !important; font-size: .78rem !important; }
}

/* ================================================
   PRINT
   ================================================ */
@media print {
  .sidebar-wrapper, .topbar, .page-footer,
  .btn:not(.btn-print), .dt-buttons, .sidebar-overlay { display: none !important; }
  .page-wrapper { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ================================================
   ACCESSIBILITY
   ================================================ */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-primary); }

/* ================================================
   ANIMATIONS / SKELETON LOADER
   ================================================ */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ================================================
   LOGIN PAGE
   ================================================ */
.bg-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 70%, #6366f1 100%);
  display: flex;
  align-items: center;
}
.login-card {
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0,0,0,.3);
  border: none;
  background: #fff;
  overflow: hidden;
}
.login-card .card-body { padding: 2rem; }
.login-brand-text {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  margin-top: .5rem;
}
.login-subtitle { color: rgba(255,255,255,.7); font-size: .875rem; }

/* ================================================
   MISC UTILITIES
   ================================================ */
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gap-xs { gap: .25rem !important; }
.radius-10 { border-radius: var(--radius-lg) !important; }
.shadow-xs  { box-shadow: var(--shadow-xs) !important; }
.bg-light-transparent { background: rgba(255,255,255,.12) !important; }