/* ========================================================================
   DDLA Maritime Dashboard — Command Center Theme
   Dark glass-morphic aesthetic with sea-blue accents
   ======================================================================== */

:root,
[data-theme="dark"] {
  --bg-base:    #070b14;
  --bg-panel:   rgba(18, 24, 38, 0.72);
  --bg-panel-solid: #121826;
  --bg-elev:    #0f1524;
  --border:     rgba(126, 200, 227, 0.12);
  --border-strong: rgba(126, 200, 227, 0.28);
  --text:       #e5ecf5;
  --muted:      #8a99ae;
  --accent:     #7ec8e3;
  --accent-2:   #4ea7f7;
  --accent-3:   #2563eb;
  --green:      #34d399;
  --amber:      #fbbf24;
  --red:        #f87171;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.22);
  --shadow-md:  0 4px 18px rgba(0,0,0,.28);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.40);
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  16px;
  --ease:       cubic-bezier(.4, 0, .2, 1);
}

[data-theme="light"] {
  --bg-base:    #f1f5f9;
  --bg-panel:   rgba(255, 255, 255, 0.86);
  --bg-panel-solid: #ffffff;
  --bg-elev:    #ffffff;
  --border:     rgba(37, 99, 235, 0.16);
  --border-strong: rgba(37, 99, 235, 0.32);
  --text:       #0f172a;
  --muted:      #64748b;
  --accent:     #2563eb;
  --accent-2:   #4ea7f7;
  --accent-3:   #1d4ed8;
  --green:      #059669;
  --amber:      #d97706;
  --red:        #dc2626;
  --shadow-sm:  0 2px 8px rgba(15,23,42,.06);
  --shadow-md:  0 4px 18px rgba(15,23,42,.08);
  --shadow-lg:  0 10px 40px rgba(15,23,42,.12);
}

/* Light theme input backgrounds */
[data-theme="light"] .form-control,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
[data-theme="light"] .dataTables_wrapper .dataTables_length select,
[data-theme="light"] .input-group-text,
[data-theme="light"] .select2-container--default .select2-selection--single,
[data-theme="light"] .select2-container--default .select2-selection--multiple {
  background: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .form-control::placeholder { color: #94a3b8; }
[data-theme="light"] .form-control:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* Light theme table text legibility */
[data-theme="light"] .table,
[data-theme="light"] table.dataTable,
[data-theme="light"] .table tbody td,
[data-theme="light"] table.dataTable tbody td,
[data-theme="light"] .table tbody th,
[data-theme="light"] table.dataTable tbody th {
  color: #0f172a !important;
}
[data-theme="light"] .table tbody tr:hover > *,
[data-theme="light"] table.dataTable tbody tr:hover > * {
  background: rgba(37,99,235,0.05) !important;
}
[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(37,99,235,0.02) !important;
}

/* Light theme pagination */
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(37,99,235,0.08) !important;
}

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(37,99,235,0.22);
  background-clip: content-box;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(37,99,235,0.40);
  background-clip: content-box;
}

/* Light theme sidebar text — force readable */
[data-theme="light"] .vertical-menu {
  background: rgba(255,255,255,0.92) !important;
  border-right: 1px solid var(--border) !important;
}
[data-theme="light"] #sidebar-menu ul li a,
[data-theme="light"] .metismenu a {
  color: #475569 !important;
}
[data-theme="light"] #sidebar-menu ul li a i,
[data-theme="light"] .metismenu a i {
  color: #64748b !important;
}
[data-theme="light"] #sidebar-menu ul li a span,
[data-theme="light"] .metismenu a span {
  color: inherit !important;
}
[data-theme="light"] .menu-title {
  color: #64748b !important;
}
[data-theme="light"] .vertical-menu .user-wid a {
  color: #0f172a !important;
}

/* Light theme topbar */
[data-theme="light"] #page-topbar {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-theme="light"] #page-topbar .header-item { color: #0f172a !important; }
[data-theme="light"] #page-topbar .header-item:hover {
  background: rgba(37,99,235,0.06) !important;
  color: var(--accent-3) !important;
}
[data-theme="light"] .ddla-metadata { color: #64748b !important; }

/* Light theme cards */
[data-theme="light"] .card {
  background: rgba(255,255,255,0.95) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .card-header {
  border-bottom-color: var(--border) !important;
  color: #0f172a !important;
}

/* ------------------------------------------------------------------------
   Base / body
   ------------------------------------------------------------------------ */
body.dashboard-body,
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  background-color: var(--bg-base) !important;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(78,167,247,0.15), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(126,200,227,0.12), transparent 55%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  letter-spacing: normal !important;
}

[data-theme="light"] body {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(78,167,247,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(37,99,235,0.06), transparent 55%) !important;
}

#layout-wrapper {
  background: transparent !important;
}

.main-content,
.page-content {
  background: transparent !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: normal;
}

.text-muted, .text-body, small, .small {
  color: var(--muted) !important;
}

.page-title-box h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text) !important;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--muted) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.breadcrumb-item.active { color: var(--accent) !important; }

/* ------------------------------------------------------------------------
   Glass panel — .panel, .card
   ------------------------------------------------------------------------ */
.card,
.panel {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md) !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  color: var(--text);
}

.card:hover,
.panel:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(126,200,227,0.15), var(--shadow-md) !important;
}

.card-body {
  color: var(--text);
  padding: 18px 20px !important;
}

.card-header,
.panel-head {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

/* Card interior spacing */
.card > .card-body > :first-child { margin-top: 0; }
.card > .card-body > :last-child { margin-bottom: 0; }

/* Tighten tables within cards */
.card .table-responsive,
.card .dataTables_wrapper {
  margin: 0 -8px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text) !important;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------------
   KPI card
   ------------------------------------------------------------------------ */
.kpi-card {
  position: relative;
  padding: 18px 20px 16px;
  border-left: 3px solid var(--accent-2);
}
.kpi-card.kpi-green  { border-left-color: var(--green); }
.kpi-card.kpi-amber  { border-left-color: var(--amber); }
.kpi-card.kpi-red    { border-left-color: var(--red); }
.kpi-card.kpi-accent { border-left-color: var(--accent); }

.kpi-card .kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi-card .kpi-value {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 10px 0 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.kpi-card .kpi-change {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi-card .kpi-change.up   { color: var(--green); }
.kpi-card .kpi-change.down { color: var(--red); }
.kpi-card .kpi-change.flat { color: var(--muted); }

/* Legacy .mini-stat support */
.mini-stat, .mini-stats-wid {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent-2) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md) !important;
  color: var(--text) !important;
}
.mini-stat-label,
.mini-stats-wid h5 {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted) !important;
  font-weight: 600;
}
.mini-stat-primary h4,
.mini-stats-wid h4 {
  font-size: 28px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------------
   Sidebar + main layout — standard dashboard (sidebar left-rail from top:0)
   ------------------------------------------------------------------------ */
html body .vertical-menu,
html body[data-layout="detached"] .vertical-menu,
html body[data-layout="vertical"] .vertical-menu,
html body[data-sidebar-size] .vertical-menu,
html body.vertical-collpsed .vertical-menu {
  background: var(--bg-panel) !important;
  border-right: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 1030 !important;
  box-shadow: var(--shadow-md);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform .25s var(--ease) !important;
}
html body .vertical-menu .h-100 { width: 240px !important; }

/* Header sits RIGHT of sidebar on desktop */
html body #page-topbar {
  left: 240px !important;
  width: calc(100% - 240px) !important;
  z-index: 1029 !important;
}

/* Main content respects sidebar width */
html body .main-content,
html body[data-layout="detached"] .main-content,
html body[data-sidebar-size] .main-content,
html body.vertical-collpsed .main-content {
  margin-left: 240px !important;
  transition: margin-left .25s var(--ease) !important;
}

/* Collapsed state (via hamburger toggle on desktop) */
html body.sidebar-hidden .vertical-menu {
  transform: translateX(-100%) !important;
  box-shadow: none !important;
}
html body.sidebar-hidden #page-topbar {
  left: 0 !important;
  width: 100% !important;
}
html body.sidebar-hidden .main-content {
  margin-left: 0 !important;
}

/* ---------- MOBILE (< 992px) ---------- */
@media (max-width: 991.98px) {
  /* Sidebar — hidden by default, visible only when body.sidebar-open */
  html body .vertical-menu,
  html body[data-layout] .vertical-menu,
  html body[data-sidebar-size] .vertical-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    transform: translateX(-105%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1055 !important;
    display: block !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.4) !important;
  }
  html body.sidebar-open .vertical-menu,
  html body.sidebar-open[data-layout] .vertical-menu,
  html body.sidebar-open[data-sidebar-size] .vertical-menu,
  html body.sidebar-enable .vertical-menu {
    transform: translateX(0) !important;
  }
  /* Ensure collapsed state doesn't hide sidebar when user opens on mobile */
  html body.sidebar-hidden.sidebar-open .vertical-menu {
    transform: translateX(0) !important;
  }
  html body #page-topbar {
    left: 0 !important;
    width: 100% !important;
  }
  html body .main-content,
  html body[data-layout="detached"] .main-content {
    margin-left: 0 !important;
  }
  /* Backdrop dim when sidebar open on mobile */
  html body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1050;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: sbFade .2s ease-out;
  }
  @keyframes sbFade { from { opacity: 0; } to { opacity: 1; } }
}

/* Prevent horizontal overflow caused by wide menu labels */
#sidebar-menu { width: 100% !important; }
#sidebar-menu ul li a { white-space: normal; word-break: break-word; }

.vertical-menu .user-wid {
  padding: 18px 16px !important;
  border-bottom: 1px solid var(--border);
}

.vertical-menu .user-wid a {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 14px;
}
.vertical-menu .user-wid p {
  color: var(--muted) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vertical-menu .user-img img {
  border: 2px solid var(--border-strong);
  box-shadow: 0 0 0 4px rgba(126,200,227,0.08);
}

#sidebar-menu ul li a,
.metismenu a {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  border-left: 3px solid transparent;
  transition: all .18s var(--ease);
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-height: 42px;
}

/* Icon inside link */
#sidebar-menu ul li a i,
.metismenu a i,
#sidebar-menu ul li a svg,
.metismenu a svg {
  color: var(--muted) !important;
  font-size: 18px !important;
  min-width: 22px !important;
  flex-shrink: 0;
  transition: color .18s var(--ease);
  display: inline-block !important;
}

/* Label span inside link — FORCE visible */
#sidebar-menu ul li a span,
.metismenu a span,
#sidebar-menu ul li a > *:not(i):not(svg) {
  color: inherit !important;
  font-size: 13px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  flex: 1 1 auto;
  line-height: 1.35;
}

/* Override collapsed/condensed variants that hide text */
html body.vertical-collpsed #sidebar-menu ul li a span,
html body[data-sidebar-size="sm"] #sidebar-menu ul li a span,
html body[data-sidebar-size="condensed"] #sidebar-menu ul li a span {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  overflow: visible !important;
}

#sidebar-menu ul li a:hover,
.metismenu a:hover {
  background: rgba(126,200,227,0.08) !important;
  color: var(--text) !important;
}
[data-theme="light"] #sidebar-menu ul li a:hover,
[data-theme="light"] .metismenu a:hover {
  background: rgba(37,99,235,0.06) !important;
  color: var(--accent-3) !important;
}
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover span { color: var(--accent) !important; }

#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active,
.metismenu .mm-active > a {
  background: linear-gradient(90deg, rgba(126,200,227,0.16) 0%, transparent 100%) !important;
  border-left-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
[data-theme="light"] #sidebar-menu ul li.mm-active > a,
[data-theme="light"] #sidebar-menu ul li a.active,
[data-theme="light"] .metismenu .mm-active > a {
  background: linear-gradient(90deg, rgba(37,99,235,0.10) 0%, transparent 100%) !important;
  border-left-color: var(--accent) !important;
  color: var(--accent-3) !important;
}
#sidebar-menu ul li.mm-active > a i,
.metismenu .mm-active > a i,
#sidebar-menu ul li.mm-active > a span,
.metismenu .mm-active > a span { color: inherit !important; }

.menu-title {
  color: var(--muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 14px 18px 6px !important;
}

/* ------------------------------------------------------------------------
   Topbar / header
   ------------------------------------------------------------------------ */
#page-topbar,
.navbar-header {
  background: var(--bg-panel) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  height: 56px !important;
}
.navbar-header {
  padding: 0 18px !important;
  height: 56px !important;
}

.navbar-brand-box {
  background: transparent !important;
  border-right: 1px solid var(--border);
}

.logo {
  color: var(--text) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-item {
  color: var(--text) !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 12px !important;
  border-radius: 0;
  transition: background .18s var(--ease);
}
.header-item:hover {
  background: rgba(126,200,227,0.06) !important;
  color: var(--accent) !important;
}

.header-profile-user {
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--border-strong) !important;
  padding: 0 !important;
}

.noti-icon .badge,
.badge-soft-danger {
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--bg-base);
}

/* ------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.btn {
  border-radius: var(--radius-md) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px;
  transition: all .18s var(--ease) !important;
  letter-spacing: normal;
}

.btn-primary,
.btn-info {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(78,167,247,0.28) !important;
}
.btn-primary:hover,
.btn-info:hover {
  box-shadow: 0 6px 20px rgba(78,167,247,0.40) !important;
  filter: brightness(1.1);
}

/* Center button utility — used for large primary buttons inside panels */
.centerButton {
  display: block !important;
  margin: 12px auto !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  min-width: 220px;
}
.centerButton:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 26px rgba(78,167,247,0.42) !important;
}

.btn-success {
  background: linear-gradient(135deg, var(--green) 0%, #0f9f72 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(52,211,153,0.28) !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--amber) 0%, #b45309 100%) !important;
  border: 0 !important;
  color: #fff !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--red) 0%, #b91c1c 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(248,113,113,0.28) !important;
}

.btn-secondary,
.btn-light,
.btn-outline-light {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-secondary:hover,
.btn-light:hover {
  background: rgba(126,200,227,0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.btn-sm {
  padding: 5px 12px !important;
  font-size: 12px;
  border-radius: var(--radius-sm) !important;
}

.btn-group .btn { margin-right: 4px; }

/* ------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
textarea,
select {
  background: rgba(18,24,38,0.50) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  font-size: 13px;
  padding: 8px 12px !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #fff !important;
  color: var(--text) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(126,200,227,0.15) !important;
  background: rgba(18,24,38,0.65) !important;
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background: #fff !important;
}

.form-control::placeholder { color: var(--muted); }

.form-label,
label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------------
   Tables / DataTables — strong overrides (app-dark/app.min can set white bg)
   ------------------------------------------------------------------------ */
.table,
table.table,
.dataTables_wrapper .table,
.dataTables_wrapper table.dataTable,
.table-responsive .table,
table.dataTable {
  color: var(--text) !important;
  border-color: var(--border) !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  width: 100% !important;
}

.table > :not(caption) > * > *,
table.table > :not(caption) > * > *,
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th,
table.dataTable > thead > tr > th,
.dataTables_wrapper table.dataTable tbody td,
.dataTables_wrapper table.dataTable tbody th,
.dataTables_wrapper table.dataTable thead th {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
  border-top-color: var(--border) !important;
  padding: 14px 12px !important;
  vertical-align: middle;
  box-shadow: none !important;
}

/* ================================================================
   NUCLEAR THEAD OVERRIDE — kills legacy app.min.css dark-blue headers
   ================================================================ */
html body .table thead,
html body .table thead *,
html body table.table thead,
html body table.table thead *,
html body table.dataTable thead,
html body table.dataTable thead *,
html body .dataTables_wrapper thead,
html body .dataTables_wrapper thead *,
html body .thead-light,
html body .thead-light *,
html body .thead-dark,
html body .thead-dark *,
html body thead.table-light,
html body thead.table-light *,
html body thead.table-dark,
html body thead.table-dark *,
html body .card .table thead,
html body .card .table thead * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: rgba(126,200,227,0.20) !important;
}

html body .table thead th,
html body table.table thead th,
html body table.dataTable thead th,
html body .thead-light th,
html body .thead-dark th {
  color: var(--muted) !important;
}

/* Light theme: different border tint */
html body[data-theme="light"] .table thead *,
html body[data-theme="light"] table.dataTable thead * {
  border-color: rgba(37,99,235,0.18) !important;
}
.table thead th,
.table > thead > tr > th,
table.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  color: var(--muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(126,200,227,0.20) !important;
  border-top: 0 !important;
}

/* Kill any solid fill on rows that legacy css might apply */
.table tr, .table td, .table th,
table.table tr, table.table td, table.table th,
table.dataTable tr, table.dataTable td, table.dataTable th {
  background-color: transparent !important;
  background-image: none !important;
}

.table tbody tr,
table.dataTable tbody tr {
  background: transparent !important;
  transition: background .15s var(--ease);
}
.table tbody tr:hover > *,
table.dataTable tbody tr:hover > *,
table.dataTable.no-footer tbody tr:hover > * {
  background: rgba(126,200,227,0.04) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable.stripe tbody tr.odd > *,
table.dataTable.display tbody tr.odd > * {
  background: rgba(126,200,227,0.02) !important;
  color: var(--text) !important;
}
.table-hover > tbody > tr:hover > * {
  background: rgba(126,200,227,0.06) !important;
  color: var(--text) !important;
}

/* "No data" row */
.dataTables_empty,
table.dataTable tbody td.dataTables_empty {
  color: var(--muted) !important;
  font-style: italic;
  text-align: center !important;
  padding: 32px !important;
}

/* Sort icons */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  color: var(--muted) !important;
  opacity: 0.5 !important;
}
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  color: var(--accent) !important;
  opacity: 1 !important;
}

.dataTables_wrapper {
  color: var(--text);
  padding: 8px 0 !important;
}
.dataTables_wrapper .row {
  margin: 0 !important;
  align-items: center;
}
.dataTables_wrapper .row > [class^="col-"] {
  padding: 8px !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}
.dataTables_wrapper .dataTables_filter {
  text-align: right;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  color: var(--muted) !important;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(18,24,38,0.50) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 12px !important;
  margin-left: 8px !important;
  font-size: 13px;
  min-width: 60px;
}
.dataTables_wrapper .dataTables_filter input {
  min-width: 220px;
}
[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
[data-theme="light"] .dataTables_wrapper .dataTables_length select {
  background: #fff !important;
  color: var(--text) !important;
}

/* Panel title above tables (h2/h3 centered like "Yeni Sorğular") */
.panel-title-center,
.card h2, .card h3, .card h4 {
  color: var(--text) !important;
  font-weight: 600;
}
/* ================================================================
   Pagination — covers BOTH:
     - DataTables classic: <a class="paginate_button current">1</a>
     - DataTables Bootstrap4: <ul class="pagination"><li class="page-item active"><a class="page-link">1</a></li></ul>
   ================================================================ */

/* Reset the Bootstrap <ul class="pagination"> wrapper */
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate ul.pagination {
  padding: 10px 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* Each <li> is just a flex item with no size/padding — the <a.page-link> carries the box */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate li.page-item,
.dataTables_wrapper .dataTables_paginate .page-item {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  box-shadow: none !important;
}

/* The actual button box — <a.page-link> in Bootstrap mode OR <a.paginate_button> in classic */
.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dataTables_wrapper .dataTables_paginate .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button > a,
.dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
.dataTables_wrapper .dataTables_paginate span.ellipsis {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  min-width: 34px !important;
  width: auto !important;
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all .15s var(--ease);
  outline: 0 !important;
}

/* Ellipsis has no border */
.dataTables_wrapper .dataTables_paginate span.ellipsis,
.dataTables_wrapper .dataTables_paginate .ellipsis {
  border: 0 !important;
  color: var(--muted) !important;
  min-width: 20px !important;
  padding: 0 4px !important;
}

/* Prev / Next / First / Last */
.dataTables_wrapper .dataTables_paginate .previous .page-link,
.dataTables_wrapper .dataTables_paginate .next .page-link,
.dataTables_wrapper .dataTables_paginate .first .page-link,
.dataTables_wrapper .dataTables_paginate .last .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous,
.dataTables_wrapper .dataTables_paginate a.paginate_button.next,
.dataTables_wrapper .dataTables_paginate a.paginate_button.first,
.dataTables_wrapper .dataTables_paginate a.paginate_button.last {
  padding: 0 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  min-width: auto !important;
}

/* Disabled state */
.dataTables_wrapper .dataTables_paginate .disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Active / current state — SAME height, just different color */
.dataTables_wrapper .dataTables_paginate .active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:focus {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(78,167,247,0.24) !important;
  font-weight: 600 !important;
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 10px !important;
  min-width: 34px !important;
  transform: none !important;
}

/* Hover (non-active, non-disabled) */
.dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover:not(.current):not(.disabled) {
  background: rgba(126,200,227,0.10) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate a.paginate_button:hover:not(.current):not(.disabled) {
  background: rgba(37,99,235,0.08) !important;
  color: var(--accent-3) !important;
  border-color: var(--accent) !important;
}

/* Kill any stray DataTables default styling on focus */
.dataTables_wrapper .dataTables_paginate .page-link:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

/* Remove stray bottom line / box-shadow under pagination */
.dataTables_wrapper .row:last-child,
.dataTables_wrapper > .row:last-of-type {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------------
   Badges / chips
   ------------------------------------------------------------------------ */
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

.badge-soft-success,
.bg-success,
.chip-success {
  background: rgba(52,211,153,0.15) !important;
  color: var(--green) !important;
  border: 1px solid rgba(52,211,153,0.35);
}
.badge-soft-warning,
.bg-warning,
.chip-warning {
  background: rgba(251,191,36,0.15) !important;
  color: var(--amber) !important;
  border: 1px solid rgba(251,191,36,0.35);
}
.badge-soft-danger,
.bg-danger,
.chip-danger {
  background: rgba(248,113,113,0.15) !important;
  color: var(--red) !important;
  border: 1px solid rgba(248,113,113,0.35);
}
.badge-soft-info,
.bg-info,
.chip-info {
  background: rgba(78,167,247,0.15) !important;
  color: var(--accent-2) !important;
  border: 1px solid rgba(78,167,247,0.35);
}
.badge-soft-primary,
.bg-primary {
  background: rgba(126,200,227,0.15) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(126,200,227,0.35);
}

/* Pulsing dot */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulseDot 2s var(--ease) infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ------------------------------------------------------------------------
   Dropdowns
   ------------------------------------------------------------------------ */
.dropdown-menu {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(10px);
  padding: 6px !important;
}
.dropdown-item {
  color: var(--text) !important;
  font-size: 13px;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(126,200,227,0.10) !important;
  color: var(--accent) !important;
}

/* ------------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------------ */
.modal-content {
  background: var(--bg-panel-solid) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text);
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px;
}
.modal-title {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 14px 20px;
}
.modal-body { padding: 20px; }
.btn-close {
  filter: invert(0.85);
  opacity: 0.7;
}
.btn-close:hover { opacity: 1; }

/* ------------------------------------------------------------------------
   Alerts / toasts / sweetalert
   ------------------------------------------------------------------------ */
.alert {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 13px;
}
.alert-success { background: rgba(52,211,153,0.08) !important; color: var(--green) !important; border-color: rgba(52,211,153,0.30) !important; }
.alert-warning { background: rgba(251,191,36,0.08) !important; color: var(--amber) !important; border-color: rgba(251,191,36,0.30) !important; }
.alert-danger  { background: rgba(248,113,113,0.08) !important; color: var(--red)   !important; border-color: rgba(248,113,113,0.30) !important; }
.alert-info    { background: rgba(78,167,247,0.08) !important; color: var(--accent-2) !important; border-color: rgba(78,167,247,0.30) !important; }

/* ------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------ */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important;
}
.nav-tabs .nav-link {
  color: var(--muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.nav-tabs .nav-link:hover { color: var(--text) !important; }
.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: transparent !important;
}
.nav-pills .nav-link {
  color: var(--muted) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 14px !important;
  font-size: 13px;
  font-weight: 600;
}
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------------
   Preloader override
   ------------------------------------------------------------------------ */
#preloader {
  background: var(--bg-base) !important;
}
.chase-dot::before {
  background: var(--accent) !important;
}

/* ------------------------------------------------------------------------
   Apex Charts surface
   ------------------------------------------------------------------------ */
.apexcharts-canvas,
.apexcharts-svg {
  background: transparent !important;
}
.apexcharts-text tspan,
.apexcharts-legend-text {
  fill: var(--muted) !important;
  color: var(--muted) !important;
}
.apexcharts-gridline {
  stroke: rgba(126,200,227,0.12) !important;
}
.apexcharts-tooltip {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}
.apexcharts-tooltip-title {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* ------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
footer.footer,
.footer {
  background: transparent !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
  font-size: 12px;
}

/* ------------------------------------------------------------------------
   Ticker (news band)
   ------------------------------------------------------------------------ */
.ddla-ticker {
  height: 42px;
  overflow: hidden;
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ddla-ticker-track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  padding: 12px 24px;
  animation: scrollRTL 60s linear infinite;
  color: var(--muted);
  font-size: 13px;
}
.ddla-ticker:hover .ddla-ticker-track { animation-play-state: paused; }
.ddla-ticker-track span strong { color: var(--accent); margin-right: 6px; }
@keyframes scrollRTL {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ------------------------------------------------------------------------
   Skeleton loader
   ------------------------------------------------------------------------ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(126,200,227,0.06);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(126,200,227,0.10) 50%, transparent 100%);
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------------------
   Leaflet map dark wrapper
   ------------------------------------------------------------------------ */
.leaflet-container {
  border-radius: var(--radius-lg);
  background: var(--bg-elev) !important;
}
.leaflet-control-zoom a,
.leaflet-bar a {
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.leaflet-control-zoom a:hover { background: rgba(126,200,227,0.10) !important; color: var(--accent) !important; }

/* ------------------------------------------------------------------------
   Pages — login / no-access
   ------------------------------------------------------------------------ */
.auth-page,
.account-pages,
.authentication-bg {
  background: var(--bg-base) !important;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(78,167,247,0.15), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(126,200,227,0.12), transparent 55%) !important;
  min-height: 100vh;
}

/* ------------------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(126,200,227,0.18);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(126,200,227,0.32);
  background-clip: content-box;
}

/* ------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------ */
.ddla-metadata {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}

.ddla-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.ddla-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Theme toggle button */
.ddla-theme-toggle-btn {
  background: transparent !important;
  color: var(--text) !important;
  padding: 0 14px !important;
  height: 56px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.ddla-theme-toggle-btn:hover {
  background: rgba(126,200,227,0.08) !important;
  color: var(--accent) !important;
}
.ddla-theme-toggle-btn i { font-size: 17px; }
[data-theme="dark"] .ddla-theme-toggle-btn [data-theme-icon="light"],
[data-theme="light"] .ddla-theme-toggle-btn [data-theme-icon="dark"] { display: none !important; }

/* Ensure topbar is fixed with correct height */
#page-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1002 !important;
  height: 70px !important;
}
#page-topbar .navbar-header {
  height: 70px !important;
  padding: 0 18px !important;
}
#page-topbar .header-item {
  height: 70px !important;
  padding: 0 10px !important;
}
#page-topbar .navbar-brand-box,
.navbar-brand-box {
  width: auto !important;
  min-width: auto !important;
  padding: 0 14px 0 0 !important;
  margin-right: 4px;
  background: transparent !important;
  border-right: 1px solid var(--border);
  height: 70px;
  display: flex;
  align-items: center;
}
#page-topbar .logo {
  line-height: 70px;
  display: flex !important;
  align-items: center;
}
body .main-content { padding-top: 70px; }
body[data-layout="detached"] .main-content { padding-top: 70px; }

/* Page content wrapper */
.page-content {
  padding: calc(70px + 8px) 18px 20px !important;
}
body[data-layout="detached"] .page-content {
  padding: 18px !important;
}
body .page-content { padding: 18px !important; }

/* Animation */
.ddla-fadein { animation: ddlaFadein .35s var(--ease); }
@keyframes ddlaFadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------------
   Typography — force Inter on text elements only, never on icon fonts
   ------------------------------------------------------------------------ */
body, p, span, a, button, input, select, textarea, label,
h1, h2, h3, h4, h5, h6, div, td, th, li {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
code, pre, .font-mono { font-family: "JetBrains Mono", "Fira Code", Consolas, monospace !important; }

/* Icon fonts — preserve each library's native font-family, never override */
.bi, [class^="bi-"], [class*=" bi-"],
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
  font-family: "bootstrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
/* Do NOT set font-family on .fa/.bx/.mdi/.dripicons — their own CSS sets it.
   Just ensure text-rendering is correct. */

/* ------------------------------------------------------------------------
   Accordion
   ------------------------------------------------------------------------ */
.accordion-item {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.accordion-button {
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 16px 20px !important;
  border: 0 !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(126,200,227,0.06) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(126,200,227,0.15) !important;
  border-color: var(--accent) !important;
}
.accordion-button::after {
  filter: invert(1) grayscale(1) brightness(1.5);
}
.accordion-body {
  background: transparent !important;
  color: var(--text) !important;
  padding: 18px 20px !important;
  border-top: 1px solid var(--border) !important;
}

/* ------------------------------------------------------------------------
   Generic background overrides — covers elements app.min.css paints white
   ------------------------------------------------------------------------ */
.bg-white,
.bg-light,
.card-body,
.card-header,
.card-footer {
  background-color: transparent !important;
}
body[data-theme="light"] .bg-white,
body[data-theme="light"] .bg-light {
  background-color: var(--bg-panel-solid) !important;
}

/* Right sidebar panel (settings drawer) */
.right-bar {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
}
.right-bar .right-bar-toggle {
  background: var(--bg-panel) !important;
  color: var(--text) !important;
}

/* Progress bar wrapper */
.progress {
  background: rgba(126,200,227,0.08) !important;
  border-radius: 100px !important;
  height: 6px !important;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--accent-2), var(--accent)) !important;
  border-radius: 100px !important;
}

/* Pagination (bootstrap style) */
.pagination .page-link {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  font-size: 12px;
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.pagination .page-link:hover {
  background: rgba(126,200,227,0.10) !important;
  color: var(--accent) !important;
}

/* Input group */
.input-group-text {
  background: rgba(18,24,38,0.50) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* ================================================================
   Select2 — comprehensive dark theme
   ================================================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection,
.select2-selection {
  background: rgba(18,24,38,0.50) !important;
  background-color: rgba(18,24,38,0.50) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  min-height: 40px !important;
  padding: 4px 8px !important;
}
[data-theme="light"] .select2-container--default .select2-selection--single,
[data-theme="light"] .select2-container--default .select2-selection--multiple,
[data-theme="light"] .select2-selection {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.select2-container--default .select2-selection__rendered,
.select2-selection__rendered {
  color: var(--text) !important;
  line-height: 30px !important;
  padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  padding: 0 8px !important;
}

/* Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  top: 0 !important;
  right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent transparent !important;
}

/* Placeholder */
.select2-container--default .select2-selection__placeholder,
.select2-selection__placeholder {
  color: var(--muted) !important;
}

/* Multi-select SELECTED CHIPS */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-selection__choice {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3)) !important;
  background-color: var(--accent-2) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 4px 10px 4px 28px !important;
  margin: 4px 4px 0 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 8px rgba(78,167,247,0.28);
  position: relative;
  display: inline-flex !important;
  align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  color: #ffffff !important;
  padding: 0 !important;
}

/* Multi-select CHIP REMOVE BUTTON (×) */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-selection__choice__remove {
  color: #ffffff !important;
  background: rgba(255,255,255,0.18) !important;
  border: 0 !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 16px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 0 !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-selection__choice__remove:hover {
  background: rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
}

/* Search field inside multi-select */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 4px !important;
}
.select2-container--default .select2-search--inline .select2-search__field,
.select2-search__field {
  color: var(--text) !important;
  background: transparent !important;
  margin: 4px 0 !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 13px !important;
}

/* Focused selection */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(126,200,227,0.15) !important;
}

/* Dropdown panel */
.select2-dropdown {
  background: var(--bg-elev) !important;
  background-color: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
[data-theme="light"] .select2-dropdown {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Search inside dropdown */
.select2-search--dropdown .select2-search__field,
.select2-dropdown .select2-search__field {
  background: rgba(18,24,38,0.50) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important;
}
[data-theme="light"] .select2-search--dropdown .select2-search__field,
[data-theme="light"] .select2-dropdown .select2-search__field {
  background: #ffffff !important;
}

/* Results list */
.select2-results__options {
  background: transparent !important;
  padding: 4px !important;
}
.select2-results__option {
  color: var(--text) !important;
  background: transparent !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  margin: 2px 0;
}
.select2-results__option[aria-selected="true"],
.select2-results__option[aria-selected="true"]:hover,
.select2-results__option.select2-results__option--selected {
  background: rgba(78,167,247,0.16) !important;
  color: var(--accent-2) !important;
  font-weight: 600 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-results__option--highlighted {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3)) !important;
  color: #ffffff !important;
}
[data-theme="light"] .select2-results__option {
  color: #0f172a !important;
}
[data-theme="light"] .select2-results__option[aria-selected="true"],
[data-theme="light"] .select2-results__option.select2-results__option--selected {
  background: rgba(37,99,235,0.10) !important;
  color: var(--accent-3) !important;
}

/* Disabled option */
.select2-results__option[aria-disabled="true"] {
  color: var(--muted) !important;
  opacity: 0.5;
}

/* ================================================================
   Native <select> dropdown text visibility
   ================================================================ */
select option {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  padding: 8px 12px;
}
[data-theme="light"] select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* ================================================================
   Bootstrap-select (if used)
   ================================================================ */
.bootstrap-select .btn,
.bootstrap-select > .dropdown-toggle {
  background: rgba(18,24,38,0.50) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-md) !important;
}
[data-theme="light"] .bootstrap-select .btn,
[data-theme="light"] .bootstrap-select > .dropdown-toggle {
  background: #ffffff !important;
}
.bootstrap-select .dropdown-menu {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  z-index: 1060 !important;
  max-height: 320px;
  overflow-y: auto;
}
.bootstrap-select .dropdown-menu li a {
  color: var(--text) !important;
  padding: 8px 14px !important;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
  background: rgba(126,200,227,0.10) !important;
  color: var(--accent) !important;
}
.bootstrap-select .dropdown-menu li.selected a {
  background: rgba(78,167,247,0.16) !important;
  color: var(--accent-2) !important;
}

/* Modal inside — force dropdown menu to appear ABOVE modal z-index */
.modal .dropdown-menu,
.modal .bootstrap-select .dropdown-menu,
.modal-dialog .dropdown-menu,
.modal-open .dropdown-menu.show {
  z-index: 1060 !important;
}

/* Bootstrap-select open state — ensure dropdown is visible */
.bootstrap-select.show > .dropdown-menu,
.bootstrap-select.open > .dropdown-menu,
.bootstrap-select .dropdown-menu.show,
.bootstrap-select .dropdown-menu.inner.show {
  display: block !important;
}

/* Search input inside selectpicker dropdown */
.bootstrap-select .bs-searchbox .form-control {
  background: rgba(18,24,38,0.55) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .bootstrap-select .bs-searchbox .form-control {
  background: #fff !important;
}

/* "No results" text in selectpicker */
.bootstrap-select .no-results {
  color: var(--muted) !important;
  background: transparent !important;
  padding: 10px;
}

/* ================================================================
   PortShipInfo nav-pills — per-tab gradient colors
   ================================================================ */
.nav-pills {
  gap: 8px !important;
  padding: 6px !important;
  background: rgba(126,200,227,0.04);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.nav-pills .nav-item { flex: 1; min-width: 0; }
.nav-pills .nav-link {
  --tab-color: 126, 200, 227;
  color: var(--text) !important;
  padding: 12px 10px !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all .22s var(--ease);
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.3;
  min-width: 0;
}
.nav-pills .nav-link img {
  margin-bottom: 4px;
  height: 24px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transition: filter .2s var(--ease);
}
.nav-pills .nav-link span {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Mobile — tabs scroll horizontally, icons smaller */
@media (max-width: 767.98px) {
  .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px !important;
    gap: 4px !important;
  }
  .nav-pills::-webkit-scrollbar { height: 4px; }
  .nav-pills::-webkit-scrollbar-thumb { background: rgba(126,200,227,0.3); border-radius: 4px; }

  .nav-pills .nav-item { flex: 0 0 auto; }
  .nav-pills .nav-link {
    padding: 8px 10px !important;
    font-size: 10.5px !important;
    min-width: 72px;
    max-width: 90px;
  }
  .nav-pills .nav-link img {
    height: 18px !important;
    margin-bottom: 3px;
  }
  .nav-pills .nav-link span {
    gap: 3px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    font-size: 10.5px;
  }
  /* Hide the visual hover lift on touch */
  .nav-pills .nav-link.active {
    transform: none !important;
  }
}

/* Even smaller phones */
@media (max-width: 400px) {
  .nav-pills .nav-link {
    min-width: 64px;
    max-width: 80px;
    padding: 7px 6px !important;
    font-size: 10px !important;
  }
  .nav-pills .nav-link img { height: 16px !important; }
}

/* Per-tab colors: Səfərlər/Detallar/DPG/Kargo/Stores/Crew/Pax/Security/Confirm */
.nav-pills .nav-link[href="#sayahat"]   { --tab-color: 167, 139, 250; }  /* purple */
.nav-pills .nav-link[href="#prtdetail"] { --tab-color: 78, 167, 247;  }  /* blue   */
.nav-pills .nav-link[href="#dpg"]       { --tab-color: 248, 113, 113; }  /* red    */
.nav-pills .nav-link[href="#cargo"]     { --tab-color: 52, 211, 153;  }  /* green  */
.nav-pills .nav-link[href="#alcohol"]   { --tab-color: 251, 191, 36;  }  /* amber  */
.nav-pills .nav-link[href="#crew"]      { --tab-color: 34, 211, 238;  }  /* cyan   */
.nav-pills .nav-link[href="#pax"]       { --tab-color: 236, 72, 153;  }  /* pink   */
.nav-pills .nav-link[href="#security"]  { --tab-color: 126, 200, 227; }  /* accent */
.nav-pills .nav-link[href="#confirm"]   { --tab-color: 132, 204, 22;  }  /* lime   */

/* Hover (inactive) */
.nav-pills .nav-link:hover:not(.active) {
  background: rgba(var(--tab-color), 0.08) !important;
  border-color: rgba(var(--tab-color), 0.35) !important;
  color: rgb(var(--tab-color)) !important;
}

/* Active — full gradient + glow */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: linear-gradient(135deg, rgba(var(--tab-color), 1), rgba(var(--tab-color), 0.72)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(var(--tab-color), 0.32), 0 0 0 1px rgba(var(--tab-color), 0.16);
  transform: translateY(-1px);
}
.nav-pills .nav-link.active img { filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

/* Tab content — subtle tint of the active tab's color */
.tab-content {
  position: relative;
  padding: 24px 18px !important;
  border-radius: var(--radius-lg);
  margin-top: 18px;
  overflow: hidden;
  transition: background .4s var(--ease);
}
.tab-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: background .4s var(--ease);
}
.tab-content > * { position: relative; z-index: 1; }

/* When a pane is active, tint the whole tab-content area with that color */
body:has(.tab-pane#sayahat.active) .tab-content::before   { background: radial-gradient(900px 400px at 50% 0, rgba(167,139,250,.10), transparent 60%); }
body:has(.tab-pane#prtdetail.active) .tab-content::before { background: radial-gradient(900px 400px at 50% 0, rgba(78,167,247,.10), transparent 60%); }
body:has(.tab-pane#dpg.active) .tab-content::before       { background: radial-gradient(900px 400px at 50% 0, rgba(248,113,113,.10), transparent 60%); }
body:has(.tab-pane#cargo.active) .tab-content::before     { background: radial-gradient(900px 400px at 50% 0, rgba(52,211,153,.10), transparent 60%); }
body:has(.tab-pane#alcohol.active) .tab-content::before   { background: radial-gradient(900px 400px at 50% 0, rgba(251,191,36,.10), transparent 60%); }
body:has(.tab-pane#crew.active) .tab-content::before      { background: radial-gradient(900px 400px at 50% 0, rgba(34,211,238,.10), transparent 60%); }
body:has(.tab-pane#pax.active) .tab-content::before       { background: radial-gradient(900px 400px at 50% 0, rgba(236,72,153,.10), transparent 60%); }
body:has(.tab-pane#security.active) .tab-content::before  { background: radial-gradient(900px 400px at 50% 0, rgba(126,200,227,.10), transparent 60%); }
body:has(.tab-pane#confirm.active) .tab-content::before   { background: radial-gradient(900px 400px at 50% 0, rgba(132,204,22,.10), transparent 60%); }

/* ================================================================
   Hesabat checkboxes → modern chip toggles
   ================================================================ */
input[name="hesabat[]"],
input[name="meqsed[]"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
input[name="hesabat[]"] + label,
input[name="meqsed[]"] + label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  margin: 6px 8px 6px 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  background: rgba(126,200,227,0.05) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all .2s var(--ease) !important;
  user-select: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
input[name="hesabat[]"] + label:hover,
input[name="meqsed[]"] + label:hover {
  background: rgba(126,200,227,0.14) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}
input[name="hesabat[]"] + label img,
input[name="meqsed[]"] + label img {
  height: 18px !important;
  width: auto !important;
  transition: filter .2s var(--ease);
}
input[name="hesabat[]"]:checked + label,
input[name="meqsed[]"]:checked + label {
  background: linear-gradient(135deg, var(--green), #0f9f72) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(52,211,153,0.32) !important;
}
input[name="hesabat[]"]:checked + label img,
input[name="meqsed[]"]:checked + label img {
  filter: brightness(0) invert(1);
}
input[name="hesabat[]"]:focus-visible + label,
input[name="meqsed[]"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Card titles with icons — modernize */
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--border);
}
.card-title img {
  height: 24px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

/* Modern number input with +/- touchspin */
.bootstrap-touchspin {
  display: flex !important;
  align-items: stretch;
  background: rgba(18,24,38,0.40);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bootstrap-touchspin input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  flex: 1;
}
.bootstrap-touchspin .btn,
.bootstrap-touchspin .input-group-btn > .btn,
.bootstrap-touchspin-up,
.bootstrap-touchspin-down {
  background: rgba(78,167,247,0.10) !important;
  border: 0 !important;
  color: var(--accent) !important;
  width: 40px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: background .15s var(--ease);
}
.bootstrap-touchspin .btn:hover { background: rgba(78,167,247,0.22) !important; }

/* ================================================================
   MODERN FORM ELEMENTS — applies to all portcallnote tab pages
   ================================================================ */

/* Label above every input — covers card + tab-pane + modal.
   EXCLUDES DataTable controls (length/filter) which are inline. */
.card-body label:not(.dt-length):not(.dt-filter):not(.dataTables_length label):not(.dataTables_filter label),
.card-body .form-label,
.tab-pane label:not(.dt-length):not(.dt-filter),
.tab-pane .form-label,
.modal-body label:not(.transport-radio-card):not(.hs-selected-chip):not(.dt-length):not(.dt-filter),
.modal-body .form-label {
  display: block;
  width: 100%;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px !important;
  margin-top: 2px;
}

/* DataTables length + filter — length on LEFT, buttons middle, filter on RIGHT */
.dataTables_wrapper {
  display: block !important;
}
.dataTables_wrapper .row:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 8px 0 14px !important;
}
.dataTables_wrapper .dataTables_length {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  order: 1;
}
.dataTables_wrapper .dt-buttons {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  order: 2;
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_filter {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  text-align: right !important;
  padding: 0 !important;
  order: 3;
}
html body .dataTables_wrapper .dataTables_length label,
html body .dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin: 0 0 0 6px !important;           /* small left margin so S isn't clipped */
  white-space: nowrap !important;
  overflow: visible !important;
  padding: 0 4px !important;              /* inner padding */
  text-indent: 0 !important;
  line-height: 1.2;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Extra safety — kill any text-indent from parent */
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_filter {
  text-indent: 0 !important;
  padding-left: 0 !important;
}
.dataTables_wrapper .dataTables_length select {
  width: 70px !important;
  min-width: 70px !important;
  display: inline-block !important;
  padding: 6px 10px !important;
  min-height: 36px !important;
}
.dataTables_wrapper .dataTables_filter input {
  width: 260px !important;
  min-width: 200px !important;
  display: inline-block !important;
  padding: 6px 12px !important;
  min-height: 36px !important;
  margin-left: 8px !important;
}

/* DataTable export buttons (Kopyala, Excel, CSV, PDF, Çap Et) — compact */
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-button {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-height: 36px;
  border-radius: var(--radius-sm) !important;
  background: rgba(126,200,227,0.08) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-button:hover {
  background: rgba(126,200,227,0.16) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ================================================================
   Action column — force all children into one horizontal row
   ================================================================ */
table.dataTable td:last-child,
table.table td:last-child {
  white-space: nowrap;
}
table.dataTable td:last-child > *,
table.table td:last-child > * {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 2px 0 0 !important;
}
table.dataTable td form,
table.table td form {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}
table.dataTable .btn-group,
table.table .btn-group {
  display: inline-flex !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  margin: 0 2px 0 0 !important;
  vertical-align: middle;
}
table.dataTable .btn-sm,
table.table .btn-sm,
table.dataTable .btn-group > .btn,
table.table .btn-group > .btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-width: 64px !important;
  height: 32px !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

/* Larger action buttons (btn-success/danger/primary without btn-sm) */
table.dataTable td .btn:not(.btn-sm),
table.table td .btn:not(.btn-sm) {
  padding: 6px 14px !important;
  font-size: 12px !important;
  min-width: 72px !important;
  height: 34px !important;
  line-height: 1 !important;
}

/* Icon-only action buttons (just dripicons) — square */
table.dataTable td .btn > i:only-child,
table.table td .btn > i:only-child {
  line-height: 1;
}
table.dataTable td .btn.btn-icon,
table.dataTable td .btn[data-icon-only] {
  min-width: 34px !important;
  width: 34px !important;
  padding: 0 !important;
}

/* Modal body inputs — match tab-pane styling */
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="password"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="time"],
.modal-body input[type="datetime-local"],
.modal-body input[type="search"],
.modal-body input[type="tel"],
.modal-body textarea,
.modal-body select:not(.select2-hidden-accessible) {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: rgba(18,24,38,0.45) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  outline: 0 !important;
  box-shadow: none !important;
}
.modal-body textarea {
  min-height: 110px !important;
  resize: vertical;
  line-height: 1.5 !important;
  padding: 12px 14px !important;
}
.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(126,200,227,0.18) !important;
}
[data-theme="light"] .modal-body input,
[data-theme="light"] .modal-body textarea,
[data-theme="light"] .modal-body select {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Input + textarea + select — modern, large click area */
.card-body input[type="text"],
.card-body input[type="email"],
.card-body input[type="password"],
.card-body input[type="number"],
.card-body input[type="date"],
.card-body input[type="time"],
.card-body input[type="datetime-local"],
.card-body input[type="search"],
.card-body input[type="tel"],
.card-body input[type="url"],
.card-body textarea,
.card-body select:not(.select2-hidden-accessible),
.tab-pane input[type="text"],
.tab-pane input[type="email"],
.tab-pane input[type="password"],
.tab-pane input[type="number"],
.tab-pane input[type="date"],
.tab-pane input[type="time"],
.tab-pane input[type="datetime-local"],
.tab-pane input[type="search"],
.tab-pane textarea,
.tab-pane select:not(.select2-hidden-accessible) {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: rgba(18,24,38,0.45) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  outline: 0 !important;
  box-shadow: none !important;
}
[data-theme="light"] .card-body input[type="text"],
[data-theme="light"] .card-body input[type="email"],
[data-theme="light"] .card-body input[type="password"],
[data-theme="light"] .card-body input[type="number"],
[data-theme="light"] .card-body input[type="date"],
[data-theme="light"] .card-body textarea,
[data-theme="light"] .card-body select:not(.select2-hidden-accessible),
[data-theme="light"] .tab-pane input[type="text"],
[data-theme="light"] .tab-pane input[type="number"],
[data-theme="light"] .tab-pane input[type="date"],
[data-theme="light"] .tab-pane textarea,
[data-theme="light"] .tab-pane select:not(.select2-hidden-accessible) {
  background: #ffffff !important;
  color: #0f172a !important;
}

.card-body input:hover,
.card-body textarea:hover,
.card-body select:hover,
.tab-pane input:hover,
.tab-pane textarea:hover,
.tab-pane select:hover {
  border-color: rgba(126,200,227,0.45) !important;
  background: rgba(18,24,38,0.55) !important;
}
[data-theme="light"] .card-body input:hover,
[data-theme="light"] .tab-pane input:hover,
[data-theme="light"] .card-body textarea:hover,
[data-theme="light"] .tab-pane textarea:hover {
  background: #f8fafc !important;
  border-color: rgba(37,99,235,0.35) !important;
}

.card-body input:focus,
.card-body textarea:focus,
.card-body select:focus,
.tab-pane input:focus,
.tab-pane textarea:focus,
.tab-pane select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(126,200,227,0.18) !important;
  background: rgba(18,24,38,0.60) !important;
}
[data-theme="light"] .card-body input:focus,
[data-theme="light"] .tab-pane input:focus,
[data-theme="light"] .card-body textarea:focus,
[data-theme="light"] .tab-pane textarea:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.14) !important;
}

.card-body textarea,
.tab-pane textarea {
  min-height: 100px !important;
  resize: vertical;
  line-height: 1.5 !important;
  padding: 12px 14px !important;
}

/* Placeholder */
.card-body input::placeholder,
.tab-pane input::placeholder,
.card-body textarea::placeholder,
.tab-pane textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.6;
}

/* Date/time input native picker — make calendar icon blend */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s var(--ease);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.3);
}

/* ================================================================
   Generic checkboxes & radios — modern custom-styled
   ================================================================ */
.card-body input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]),
.tab-pane input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]) {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(18,24,38,0.45) !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 5px !important;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: all .18s var(--ease);
}
.card-body input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):hover,
.tab-pane input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):hover {
  border-color: var(--accent) !important;
  background: rgba(126,200,227,0.10) !important;
}
.card-body input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):checked,
.tab-pane input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):checked {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3)) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(78,167,247,0.35);
}
.card-body input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):checked::after,
.tab-pane input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.card-body input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):focus-visible,
.tab-pane input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-theme="light"] .card-body input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]),
[data-theme="light"] .tab-pane input[type="checkbox"]:not([name="hesabat[]"]):not([name="meqsed[]"]) {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* Radio buttons */
.card-body input[type="radio"],
.tab-pane input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 8px 0 0 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(18,24,38,0.45) !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 50% !important;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: all .18s var(--ease);
}
.card-body input[type="radio"]:hover,
.tab-pane input[type="radio"]:hover {
  border-color: var(--accent) !important;
}
.card-body input[type="radio"]:checked,
.tab-pane input[type="radio"]:checked {
  border-color: var(--accent-2) !important;
  background: rgba(18,24,38,0.45) !important;
}
.card-body input[type="radio"]:checked::after,
.tab-pane input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(78,167,247,0.25);
}

/* Label sitting next to checkbox/radio — clickable, hover highlight */
.card-body input[type="checkbox"] + label,
.card-body input[type="radio"] + label,
.tab-pane input[type="checkbox"] + label,
.tab-pane input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: none;
  letter-spacing: normal;
}

/* ================================================================
   File upload input — modern
   ================================================================ */
.card-body input[type="file"],
.tab-pane input[type="file"] {
  width: 100%;
  padding: 14px !important;
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(126,200,227,0.03) !important;
  color: var(--muted) !important;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.card-body input[type="file"]:hover,
.tab-pane input[type="file"]:hover {
  border-color: var(--accent) !important;
  background: rgba(126,200,227,0.08) !important;
  color: var(--text) !important;
}
.card-body input[type="file"]::file-selector-button,
.tab-pane input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 12px;
  cursor: pointer;
  transition: filter .15s var(--ease);
}
.card-body input[type="file"]::file-selector-button:hover {
  filter: brightness(1.12);
}

/* Dropzone */
.dropzone {
  background: rgba(126,200,227,0.04) !important;
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  min-height: 180px !important;
  padding: 24px !important;
  color: var(--muted) !important;
  transition: all .2s var(--ease);
}
.dropzone:hover {
  border-color: var(--accent) !important;
  background: rgba(126,200,227,0.08) !important;
}
.dropzone .dz-message {
  color: var(--muted) !important;
  font-size: 14px;
  font-weight: 500;
}
.dropzone .dz-message::before {
  content: '\F4C6';  /* bi-cloud-arrow-up */
  font-family: "bootstrap-icons";
  font-size: 48px;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
  font-style: normal;
}

/* ================================================================
   Grid gutters for form columns — breath between rows
   ================================================================ */
.card-body .row,
.tab-pane .row {
  row-gap: 16px;
}
.card-body .row > [class^="col-"],
.card-body .row > [class*=" col-"],
.tab-pane .row > [class^="col-"],
.tab-pane .row > [class*=" col-"] {
  margin-bottom: 0;
}

/* Remove legacy <br> padding inside forms */
.card-body form br,
.tab-pane form br { display: none; }

/* ================================================================
   Accordion modern — on tab pages
   ================================================================ */
.accordion-item {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  margin-bottom: 14px;
}
.accordion-button {
  padding: 18px 22px !important;
  gap: 12px;
}
.accordion-button img {
  height: 22px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.accordion-body {
  padding: 22px !important;
}

/* ================================================================
   Save / submit buttons at bottom of tab pages
   ================================================================ */
.tab-pane button[type="submit"],
.tab-pane .btn-success:not(.centerButton),
.card-body button[type="submit"] {
  min-width: 140px;
  padding: 10px 22px !important;
}
.tab-pane form > .text-end,
.tab-pane form > .d-flex.justify-content-end,
.card-body form > .text-end {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* Custom validation errors */
.parsley-error {
  border-color: var(--red) !important;
  background: rgba(248,113,113,0.06) !important;
}
.parsley-errors-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
}
.parsley-success {
  border-color: var(--green) !important;
}

/* ================================================================
   Cargo modal scroll fix — form wraps modal-body, breaking Bootstrap's
   default scrollable-modal flex layout. Force proper flex on dialog/form.
   ================================================================ */
#showaddCargoYuk .modal-dialog {
  max-height: calc(100vh - 3rem);
  height: calc(100vh - 3rem);
  margin: 1.5rem auto;
}
#showaddCargoYuk .modal-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#showaddCargoYuk .modal-header,
#showaddCargoYuk .modal-footer {
  flex-shrink: 0 !important;
}
#showaddCargoYuk form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
#showaddCargoYuk form > .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
}
#showaddCargoYuk form > .modal-footer {
  flex-shrink: 0 !important;
}

/* ================================================================
   Danger dot (ships carrying dangerous goods in Calls tables)
   ================================================================ */
.danger-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #f87171;
  margin-right: 6px;
  vertical-align: middle;
  animation: dangerBlink 1.4s ease-in-out infinite;
  cursor: help;
}
@keyframes dangerBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113, 0.75), 0 0 4px rgba(248,113,113,.8); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(248,113,113, 0),    0 0 8px rgba(248,113,113,1); transform: scale(1.12); }
}

/* ================================================================
   DataTable + button (expandable rows) — clear spacing from content
   ================================================================ */
table.dataTable > tbody > tr > td:first-child.dtr-control,
table.dataTable > tbody > tr > th:first-child.dtr-control,
table.dataTable > tbody > tr.parent > td:first-child.dtr-control {
  position: relative !important;
  padding-left: 46px !important;
  padding-right: 14px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  white-space: nowrap;
}

table.dataTable > tbody > tr > td:first-child.dtr-control::before,
table.dataTable tbody td.dtr-control::before {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 14px !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3)) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(78,167,247,.30) !important;
  border: 0 !important;
  cursor: pointer;
  transition: transform .15s var(--ease);
}
table.dataTable > tbody > tr.parent > td:first-child.dtr-control::before {
  transform: translateY(-50%) rotate(45deg) !important;
  background: linear-gradient(135deg, var(--red), #b91c1c) !important;
}

/* Hide debug toolbar remnants in prod */
#debug-bar { display: none !important; }