/* ============================================
   MODERN & CLEAN STAFF PLANNER DESIGN
   ============================================ */

html {
  font-size: 14px;
}

body {
  font-size: 14px;
  overflow-x: auto;
  overflow-y: auto;
}

:root {
  /* ============================================
     COLOR PALETTE SYSTEM
     ============================================ */

  /* Neutral Colors (Light Defaults) */
  --bg: #f3f6fc;
  --card: rgba(255, 255, 255, 0.95);
  --text: #1e293b;
  /* Slate 800 */
  --text-secondary: #64748b;
  /* Slate 500 */
  --muted: #94a3b8;
  /* Slate 400 */

  --line: #e2e8f0;
  /* Slate 200 */
  --line-light: #f1f5f9;
  /* Slate 100 */
  --border-glass: rgba(255, 255, 255, 0.5);

  /* Theme tokens (neutral system) */
  --text-strong: #0f172a;
  --text-subtle: #334155;
  --text-muted: #64748b;
  --text-on-strong: #ffffff;
  --surface: #ffffff;
  --surface-strong: #0f172a;
  --bg-soft: #f8fafc;
  --bg-soft-2: #f1f5f9;
  --border: #e2e8f0;

  /* Brand Colors */
  --primary: #3b82f6;
  /* Blue 500 */
  --primary-hover: #2563eb;
  --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  --secondary: #6366f1;
  /* Indigo 500 */
  --secondary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

  /* Status Colors */
  --success: #10b981;
  --success-bg: #ecfdf5;
  /* Emerald 50 */
  --success-text: #065f46;

  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  /* Amber 50 */
  --warning-text: #92400e;

  --danger: #ef4444;
  --danger-bg: #fef2f2;
  /* Red 50 */
  --danger-text: #b91c1c;

  /* Status Palette */
  --status-success: #16a34a;
  --status-success-bg: #dcfce7;
  --status-success-text: #14532d;
  --status-warning: #f59e0b;
  --status-warning-bg: #fffbeb;
  --status-warning-text: #92400e;
  --status-danger: #dc2626;
  --status-danger-bg: #fee2e2;
  --status-danger-text: #7f1d1d;
  --status-info: #3b82f6;
  --status-info-bg: #dbeafe;
  --status-info-text: #1e3a8a;
  --status-muted: #64748b;
  --status-muted-bg: #f1f5f9;
  --status-muted-text: #334155;
  --status-online: #22c55e;
  --status-offline: #cbd5e1;

  --info: #3b82f6;
  --info-bg: #eff6ff;
  --info-text: #1e40af;

  --orange: #f97316;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

  /* Effects */
  --blur: 16px;
  --radius: 12px;
  --radius-sm: 8px;

  /* Table Dimensions */
  --w1: 120px;
  --w2: 220px;
  --w3: 180px;
  --day: 200px;

  /* Table Colors */
  --table-header-bg: #f9e4cb;
  --table-border: #9ca3af;
  --cell-region-bg: #dcfce7;
  --cell-region-text: #0f172a;
  --cell-resp-bg: #fef3c7;
  --cell-resp-text: #92400e;
  --cell-filled-bg: #d1fae5;
  --cell-filled-personnel-bg: #86efac;
}

html.dark-mode {
  /* Neutral Colors (Dark Overrides) */
  --bg: #0f172a;
  /* Slate 900 */
  --card: #1e293b;
  /* Slate 800 */
  --text: #f1f5f9;
  /* Slate 100 */
  --text-secondary: #94a3b8;
  --muted: #64748b;

  --line: #334155;
  /* Slate 700 */
  --line-light: #1e293b;
  --border-glass: rgba(255, 255, 255, 0.1);

  /* Status Colors (Dark Overrides) */
  --success: #34d399;
  --success-bg: rgba(6, 95, 70, 0.3);
  --success-text: #d1fae5;

  --warning: #fbbf24;
  --warning-bg: rgba(146, 64, 14, 0.3);
  --warning-text: #fef3c7;

  --danger: #f87171;
  --danger-bg: rgba(185, 28, 28, 0.3);
  --danger-text: #fee2e2;

  --info: #60a5fa;
  --info-bg: rgba(30, 64, 175, 0.3);
  --info-text: #dbeafe;

  /* Shadows (Dark Optimized) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

  /* Table Colors (Dark) */
  --table-header-bg: #4a3820;
  --table-border: #4b5563;
  --cell-region-bg: rgba(6, 95, 70, 0.5);
  --cell-region-text: #d1fae5;
  --cell-resp-bg: rgba(146, 64, 14, 0.5);
  --cell-resp-text: #fef3c7;
  --cell-filled-bg: rgba(6, 95, 70, 0.3);
  --cell-filled-personnel-bg: rgba(22, 163, 74, 0.3);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.05) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

html.dark-mode body {
  background-image: none;
}

/* ============================================
   TEMA-SPESİFİK BODY ARKA PLANLARI
   ============================================ */

html[data-theme="light"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.05) 0px, transparent 50%);
}

html[data-theme="dark"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.03) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.03) 0px, transparent 50%);
}

html[data-theme="ocean"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(8, 145, 178, 0.08) 0px, transparent 50%);
}

html[data-theme="forest"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(22, 163, 74, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(34, 197, 94, 0.08) 0px, transparent 50%);
}

html[data-theme="sunset"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(234, 88, 12, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(249, 115, 22, 0.08) 0px, transparent 50%);
}

html[data-theme="purple"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(147, 51, 234, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.08) 0px, transparent 50%);
}

html[data-theme="pure-black"] body {
  background: var(--bg);
  background-image: none;
}

html[data-theme="pure-white"] body {
  background: var(--bg);
  background-image: radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.03) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.03) 0px, transparent 50%);
}

.container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto;
  overflow-y: visible;
  min-height: calc(100vh - 70px);
}

main.container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: calc(100vh - 70px);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible;
}

/* ============================================
   HEADER / TOPBAR
   ============================================ */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  background: var(--card);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--border-glass);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
  overflow: visible;
  height: 64px;
}

.brandLogo {
  height: 30px;
  width: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: logoPulse 4s ease-in-out infinite;
}

@keyframes logoPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.03);
    opacity: 0.9;
  }
}

.brandLogo:hover {
  animation: none;
  transform: scale(1.1) rotate(2deg);
  filter: brightness(1.2);
}

.topbar a:hover {
  opacity: 0.8;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  overflow: hidden;
}

.nav a:hover {
  background: var(--bg-soft);
  color: var(--primary);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  cursor: pointer;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 1001;
  margin-top: 4px;
  padding: 4px 0;
}

.nav-dropdown.active .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 0;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--line-light);
  color: var(--text);
}

/* Nested Dropdown (Submenu) */
.nav-dropdown-submenu {
  position: relative;
}

.nav-dropdown-submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.nav-dropdown-submenu-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 150px;
  z-index: 1001;
  margin-top: 4px;
}

.nav-dropdown-submenu.active .nav-dropdown-submenu-menu {
  display: block;
}

.nav-dropdown-submenu-menu a {
  display: block;
  padding: 10px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 0;
  border-bottom: 1px solid var(--bg-soft);
}

.nav-dropdown-submenu-menu a:last-child {
  border-bottom: none;
}

.nav-dropdown-submenu-menu a:hover {
  background: var(--bg-soft);
  color: var(--text);
}

/* Dark Mode for Nested Dropdown */
/* Handled by global variables, specific overrides removed or simplified */

/* ============================================
   CARD / CONTAINER
   ============================================ */

.card {
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-left: none;
  border-right: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* ============================================
   FIELD PORTAL (/me)
   ============================================ */

.presetChips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.presetChip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--line-light);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.presetChip:hover {
  background: var(--line);
  border-color: var(--muted);
}

.presetChip.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.jobCard {
  display: block;
  text-decoration: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 10px;
  background: var(--card);
  border-left: 6px solid var(--line);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.jobCard:hover {
  background: var(--line-light);
  border-color: var(--muted);
}

.jobCard.status-completed {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.jobCard.status-pending {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}

.jobCard.status-problem {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.jobCard.report-reported,
.jobCard.status-reported {
  border-left-color: var(--primary);
  background: var(--info-bg);
}

.jobCard.report-pending,
.jobCard.status-report-pending {
  border-left-color: var(--secondary);
  background: var(--line-light);
  /* Or a specific purple bg if defined */
}

/* ============================================
   CHAT
   ============================================ */

.chatLayout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: stretch;
}

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

.chatSidebar {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--card);
}

.chatSidebarTitle {
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
}

.chatTeamList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatTeamBtn {
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--line-light);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.chatTeamBtn.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.chatTeamBtn.unread {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}

.chatMain {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.chatMainHeader {
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.chatMessages {
  padding: 12px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--line-light);
}

.chatMsg {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 10px 10px;
}

.chatMsg.mine {
  border-color: var(--primary);
  background: var(--info-bg);
}

.chatMsgHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.chatMsgUser {
  font-weight: 900;
  color: var(--text);
  font-size: 13px;
}

.chatMsgTime {
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.chatMsgText {
  color: var(--text);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.chatComposer {
  padding: 10px 12px 12px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.chatComposer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

.muted {
  color: var(--muted);
}

.hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  background: var(--primary);
  background-image: none;
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(var(--primary-rgb, '59, 130, 246'), 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  height: 38px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, '59, 130, 246'), 0.35);
  filter: brightness(1.1);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(var(--primary-rgb, '59, 130, 246'), 0.2);
}

.btn.secondary {
  background: var(--card);
  background-image: none;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-shadow: none;
}

.btn.secondary:hover {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--primary);
  box-shadow: var(--shadow);
}

.btn.success {
  background: var(--status-success);
}

.btn.warning {
  background: var(--status-warning);
  color: var(--text-on-strong);
}

.btn.info {
  background: var(--status-info);
}

.btn.success:hover,
.btn.warning:hover,
.btn.info:hover {
  filter: brightness(1.05);
}

.btn.danger:hover {
  filter: brightness(1.05);
}

.badge {
  --badge-bg: var(--bg-soft-2);
  --badge-text: var(--text-subtle);
  --badge-border: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge--muted {
  --badge-bg: var(--status-muted-bg);
  --badge-text: var(--status-muted-text);
}

.badge--success {
  --badge-bg: var(--status-success-bg);
  --badge-text: var(--status-success-text);
  --badge-border: var(--status-success);
}

.badge--warning {
  --badge-bg: var(--status-warning-bg);
  --badge-text: var(--status-warning-text);
  --badge-border: var(--status-warning);
}

.badge--danger {
  --badge-bg: var(--status-danger-bg);
  --badge-text: var(--status-danger-text);
  --badge-border: var(--status-danger);
}

.badge--info {
  --badge-bg: var(--status-info-bg);
  --badge-text: var(--status-info-text);
  --badge-border: var(--status-info);
}

/* ============================================
   COLLAPSIBLE (Plan: Personnel Summary)
   ============================================ */
.collapsible {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.collapsibleHeader {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.collapsibleHeader:hover {
  background: var(--line-light);
}

.collapsibleHeader:active {
  background: var(--line);
}

.collapsibleIcon {
  width: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-weight: 900;
}

.collapsibleIconSvg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.15s ease;
}

.collapsible.is-collapsed .collapsibleIconSvg {
  transform: rotate(-90deg);
}

.collapsible #personnelSummaryBody {
  padding: 18px 24px;
  max-height: 5000px;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.4s ease;
  display: block !important;
  visibility: visible !important;
}

.collapsible.is-collapsed #personnelSummaryBody {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}

.cell-subproject {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 6px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

/* Merged Cell Badge */
.cell-merge-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-inverted);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 20;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

/* Merged Cell Visuals */
.cell.merge-run {
  border-right: none !important;
  border-left: none !important;
  position: relative;
}

.cell.merge-run.merge-start {
  border-left: 2px solid #94a3b8 !important;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  /* Mask content except badge */
}

.cell.merge-run.merge-end {
  border-right: 2px solid #94a3b8 !important;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.cell.merge-run .cell-time,
.cell.merge-run .cell-people,
.cell.merge-run .cell-note {
  opacity: 0.1;
  /* Fade out content in merged cells */
  transition: opacity 0.2s;
}

.cell.merge-run:hover .cell-time,
.cell.merge-run:hover .cell-people,
.cell.merge-run:hover .cell-note {
  opacity: 1;
  /* Show on hover */
}


.cell-subproject:empty {
  display: none;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn.ghost:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

.btn.danger {
  background: var(--danger);
}

.btn.danger:hover {
  background: #dc2626;
}

.btn.tiny {
  padding: 6px 12px;
  font-size: 12px;
}

/* ============================================
   FORMS
   ============================================ */

input,
select,
textarea {
  width: 100%;
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

#cellModal .mesai-satir {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

#cellModal .mesai-satir .mesai-personel {
  flex: 0 0 auto;
  max-width: 88px;
  min-width: 48px;
}

#cellModal .mesai-satir input {
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 28px !important;
  padding: 4px !important;
  font-size: 11px !important;
  box-sizing: border-box !important;
}

#cellModal .mesai-satir input.jd-mesai-harcirah,
#cellModal .mesai-satir input.person-harcirah-input {
  flex: 0 0 66px !important;
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
}

#cellModal .mesai-satir .mesai-remove-btn {
  flex: 0 0 22px;
}

input,
select {
  height: 36px;
  line-height: 20px;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

textarea {
  height: auto;
  min-height: 36px;
  resize: vertical;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Checkbox Styling - Küçük ve Estetik */
input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid var(--border);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--card);
  transition: all 0.2s ease;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
}

input[type="checkbox"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffffff' d='M8.5 2.5L4 7L1.5 4.5L2.5 3.5L4 5L7.5 1.5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

input[type="checkbox"]:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

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

/* ============================================
   LAYOUT HELPERS
   ============================================ */

.rowline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: 0 0 20px 0;
  padding: 16px;
  background: var(--bg);
  border-radius: 12px;
}

.filters label {
  min-width: 180px;
  margin-bottom: 0;
}

/* ============================================
   SELECTED JOB BAR
   ============================================ */

.nowbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 20px 0;
  font-weight: 500;
}

.nowbar strong {
  color: var(--text-light);
  font-weight: 600;
}

/* ============================================
   TABLE STYLES
   ============================================ */

.gridPlan {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  margin: 0;
}

.tablewrap {
  overflow-x: auto;
  overflow-y: auto;
  border: none;
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  background: var(--card);
  max-height: calc(100vh - 250px);
  width: 100%;
  min-width: fit-content;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none;
  position: relative;
}

/* Personel tablosu için özel scroll container */
#peopleTableWrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg-soft);
  max-height: 750px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  position: relative;
}

#peopleTableWrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#peopleTableWrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

#peopleTableWrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

#peopleTableWrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode scrollbar */
html.dark-mode #peopleTableWrapper {
  scrollbar-color: var(--border-light) var(--bg-secondary);
}

html.dark-mode #peopleTableWrapper::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

html.dark-mode #peopleTableWrapper::-webkit-scrollbar-thumb {
  background: var(--border-light);
}

html.dark-mode #peopleTableWrapper::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* İş Detayı Personel Tablosu Scroll */
#jobDetailPeopleTable {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border) var(--bg-soft) !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  display: block !important;
  position: relative !important;
}

#jobDetailPeopleTable::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

#jobDetailPeopleTable::-webkit-scrollbar-track {
  background: var(--bg-soft) !important;
  border-radius: 10px !important;
}

#jobDetailPeopleTable::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 10px !important;
}

#jobDetailPeopleTable::-webkit-scrollbar-thumb:hover {
  background: var(--muted) !important;
}

html.dark-mode #jobDetailPeopleTable {
  scrollbar-color: var(--border-light) var(--bg-secondary) !important;
}

html.dark-mode #jobDetailPeopleTable::-webkit-scrollbar-track {
  background: #1e293b !important;
}

html.dark-mode #jobDetailPeopleTable::-webkit-scrollbar-thumb {
  background: #475569 !important;
}

html.dark-mode #jobDetailPeopleTable::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* İş Detayı Personel Tablosu Sticky Header */
#jobDetailPeopleTable thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  display: table-header-group !important;
}

#jobDetailPeopleTable thead th {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 11 !important;
}

html.dark-mode #jobDetailPeopleTable thead th {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* İş Detayı Modal Body - scroll'u engelle */
#jobDetailBody {
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.tablewrap.table-scroll {
  /* Scroll kaldırıldı - tablo aşağı doğru uzayacak */
  max-height: none;
  overflow: visible;
}

.tablewrap.projects-table {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto;
}

/* Plan tablosu için özel - içeriğe göre genişlik */
.tablewrap table.plan {
  width: auto !important;
  min-width: 100%;
}

table.plan {
  width: auto !important;
  min-width: 100%;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Simple tables - içeriğe göre genişlik */
table.simple {
  table-layout: auto;
  width: auto;
  min-width: fit-content;
}

.tablewrap table.simple {
  width: auto;
  min-width: 100%;
}

.simple th,
.simple td {
  padding: 12px 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.simple th:first-child,
.simple td:first-child {
  padding-left: 20px;
}

.simple th:last-child,
.simple td:last-child {
  padding-right: 20px;
}

.simple thead th {
  background: var(--line-light) !important;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Dark mode için sticky header */
html.dark-mode .simple thead th {
  background: var(--card) !important;
  color: var(--text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Personel tablosu için özel scroll ve sticky header */
#peopleTableWrapper table.simple thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: var(--card) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

html.dark-mode #peopleTableWrapper table.simple thead th {
  background: var(--card) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.simple tbody tr {
  transition: background-color 0.15s ease;
}

.simple tbody tr:hover {
  background-color: transparent;
}

.simple tbody tr:hover>td {
  background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.03);
  box-shadow:
    inset 0 1px 0 rgba(var(--primary-rgb, 59, 130, 246), 0.26),
    inset 0 -1px 0 rgba(var(--primary-rgb, 59, 130, 246), 0.26);
}

.simple tbody tr:hover>td:first-child {
  box-shadow:
    inset 2px 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0.42),
    inset 0 1px 0 rgba(var(--primary-rgb, 59, 130, 246), 0.26),
    inset 0 -1px 0 rgba(var(--primary-rgb, 59, 130, 246), 0.26);
}

.simple tbody tr:hover>td:last-child {
  box-shadow:
    inset -2px 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0.42),
    inset 0 1px 0 rgba(var(--primary-rgb, 59, 130, 246), 0.26),
    inset 0 -1px 0 rgba(var(--primary-rgb, 59, 130, 246), 0.26);
}

.simple tbody td {
  color: var(--text);
  font-size: 14px;
}

html.dark-mode .simple tbody td {
  color: var(--text);
}

.plan th,
.plan td {
  border-right: 2px solid var(--table-border);
  border-bottom: 2px solid var(--table-border);
  padding: 8px 10px;
  vertical-align: top;
  font-size: 13px;
  text-align: right;
  background: var(--card);
  /* Ensure default bg */
  color: var(--text);
  position: relative;
}

.plan td.st {
  vertical-align: top;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.25;
  background-color: inherit;
}

.plan td.cell {
  text-align: left;
  vertical-align: top;
}

.plan th:last-child,
.plan td:last-child {
  border-right: none;
}

.plan tr:last-child td {
  border-bottom: none;
}

.plan thead th {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--table-header-bg) !important;
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--table-border);
  padding: 10px 12px;
  text-align: center;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Tüm header'lar için ARAÇ sütunu gibi arka plan */
.plan thead tr {
  background: var(--table-header-bg) !important;
}

.plan thead tr th {
  background: var(--table-header-bg) !important;
}

.plan thead th.st,
.plan thead th.daycol,
.plan thead th.vehcol {
  background: var(--table-header-bg) !important;
}

.plan thead th.st {
  text-align: left;
}

/* Sticky başlıklar için özel arka plan - ARAÇ sütunu gibi */
.plan thead th.st1,
.plan thead th.st2,
.plan thead th.st3 {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  will-change: auto;
  transform: translateZ(0);
}

.plan .st {
  position: sticky;
  z-index: 65;
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  will-change: auto;
  transform: translateZ(0);
}

.plan thead .st {
  background: var(--table-header-bg) !important;
  z-index: 80 !important;
  top: 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  isolation: isolate !important;
}

.plan tbody .st {
  position: sticky;
  z-index: 50;
}

.plan tbody tr .st {
  background-color: inherit;
}

/* Dark mode için sticky kolonlar */
html.dark-mode .plan tbody .st1,
html.dark-mode .plan tbody .st2,
html.dark-mode .plan tbody .st3 {
  background-color: inherit;
}

html.dark-mode .plan tbody tr .st {
  background-color: inherit;
}

/* Her sticky kolon için farklı z-index - üst üste binmeyi önlemek için */
.plan tbody .st1 {
  z-index: 51 !important;
  position: sticky !important;
  left: 0 !important;
}

.plan tbody .st2 {
  z-index: 52 !important;
  position: sticky !important;
}

.plan tbody .st3 {
  z-index: 53 !important;
  position: sticky !important;
}

.plan tbody tr.planRow {
  height: auto;
}

.plan tbody tr.planRow > td.st.region,
.plan tbody tr.planRow > td.st.proj,
.plan tbody tr.planRow > td.st.resp {
  height: auto;
  box-sizing: border-box;
}

/* Satır germesi yalnızca plan-table-stretch açıkken */
.plan-grid-shell.plan-table-stretch tbody tr.planRow {
  height: 1px;
}

.plan-grid-shell.plan-table-stretch tbody tr.planRow > td.st.region,
.plan-grid-shell.plan-table-stretch tbody tr.planRow > td.st.proj,
.plan-grid-shell.plan-table-stretch tbody tr.planRow > td.st.resp {
  height: 100%;
}

.plan tbody tr.planRow > td.st.region {
  text-align: center;
  vertical-align: middle;
  background-color: var(--project-color, #f9fafb);
}

.plan tbody tr.planRow > td.st.proj {
  vertical-align: top;
}

.plan tbody tr.planRow > td.st.resp {
  vertical-align: middle;
  text-align: center;
}

.plan tbody tr.planRow > td.st.proj {
  background-color: var(--project-color, #f9fafb);
}

.plan tbody tr.planRow > td.st.resp {
  background-color: var(--project-color, #f9fafb);
}

.plan tbody tr.planRow > td.st.region[rowspan] {
  vertical-align: middle;
  text-align: center;
  height: auto;
}

.plan thead .st1 {
  z-index: 81 !important;
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.plan thead .st2 {
  z-index: 82 !important;
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.plan thead .st3 {
  z-index: 83 !important;
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.plan .st1 {
  left: 0;
  min-width: var(--w1);
  width: var(--w1);
  max-width: var(--w1);
  box-sizing: border-box;
}

.plan .st2 {
  left: calc(var(--w1) + 2px);
  min-width: var(--w2);
  width: var(--w2);
  max-width: var(--w2);
  box-sizing: border-box;
}

.plan .st3 {
  left: calc(var(--w1) + var(--w2) + 4px);
  min-width: var(--w3);
  width: var(--w3);
  max-width: var(--w3);
  box-sizing: border-box;
}

.plan .daycol {
  min-width: var(--day);
}

.plan .vehcol {
  min-width: 160px;
  width: 160px;
  max-width: 160px;
}

/* Table Cell Colors */
.region {
  background: var(--project-color, #f9fafb);
  font-weight: 600;
  color: var(--cell-region-text);
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}

.resp {
  background: var(--project-color, #f9fafb);
  font-weight: 600;
  color: var(--cell-resp-text);
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}

.resp .respText {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
  text-align: center;
}

.pcode {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
}

.psubproject {
  margin: 2px 0 4px 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-subtle);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pname {
  margin-top: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resp .respText {
  font-size: 12.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plan td.st2 .pcode,
.plan td.st2 .pname,
.plan td.st3 .respText {
  max-width: 100%;
  overflow: hidden;
}

/* Cell Styles */
.plan td.cell {
  cursor: pointer;
  min-height: 160px;
  background: var(--card);
  transition: all 0.15s ease;
}

.plan td.cell:hover {
  background: var(--bg-soft);
  outline: 2px solid rgba(59, 130, 246, .2);
  outline-offset: -2px;
}

.plan td.cell.filled {
  background: var(--cell-filled-bg) !important;
  /* Açık yeşil - sadece vardiya/araç/not var, personel yok */
}

.plan td.cell.filled-personnel {
  background: var(--cell-filled-personnel-bg) !important;
  /* Koyu yeşil - personel atanmış */
}

.selectedCell {
  outline: 3px solid rgba(59, 130, 246, .5) !important;
  outline-offset: -3px;
  background: var(--info-bg) !important;
}

/* Multi-day merge (visual only) */
.plan td.cell.merge-run:not(.merge-end) {
  border-right: none !important;
}

.plan td.cell.merge-mid .cell-time,
.plan td.cell.merge-mid .cell-people,
.plan td.cell.merge-mid .cell-subproject,
.plan td.cell.merge-mid .cell-note,
.plan td.cell.merge-end .cell-time,
.plan td.cell.merge-end .cell-people,
.plan td.cell.merge-end .cell-subproject,
.plan td.cell.merge-end .cell-note {
  display: none !important;
}

/* Badge Design Refinement */
.plan td.cell .cell-merge-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: auto;
  left: auto;

  background-color: var(--primary);
  /* Blue for visibility */
  color: var(--text-inverted) !important;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;

  padding: 3px 8px;
  border-radius: 4px;

  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Fix overlap: Add space at bottom of personnel list for the note */
.plan td.cell .cell-people {
  margin-bottom: 20px;
  /* Reserve space for the note */
  padding-bottom: 4px;
}

.plan td.cell .cell-note {
  position: absolute;
  bottom: 4px;
  left: 6px;
  /* Remove right constraint to allow overflow into merged cells */
  /* right: 6px; */
  max-width: 500%;
  /* Allow it to span across multiple merged cells */
  width: max-content;

  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  white-space: nowrap;

  z-index: 5;
  /* Ensure it sits on top of merged empty cells */
  pointer-events: none;
}

/* Ensure darker note text on filled cells */
.plan td.cell.filled .cell-note,
.plan td.cell.filled-personnel .cell-note {
  color: var(--text) !important;
  font-weight: 600;
  opacity: 0.9;
}

/* Ensure content doesn't overlap with the badge (Right Padding Strategy) */
.plan td.cell.merge-start {
  padding-top: 8px !important;
  /* Reset to normal/slightly adjusted padding */
  padding-right: 48px !important;
  /* Reserve space for badge on the right */
}

.plan td.cell.filled,
.plan td.cell.filled-personnel {
  color: var(--text) !important;
  /* Ensure dark text */
}

.plan td.cell.filled .cell-time,
.plan td.cell.filled .cell-people,
.plan td.cell.filled-personnel .cell-time,
.plan td.cell.filled-personnel .cell-people,
.plan td.cell.filled *:not(.cell-status-badge):not(.cell-status-badges),
.plan td.cell.filled-personnel *:not(.cell-status-badge):not(.cell-status-badges) {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Today Column Highlight - layout bozmadan inset çizgi */
.todayHead {
  background-image: linear-gradient(90deg, rgba(234, 88, 12, 0.08), transparent 55%);
  border-left: none !important;
  border-right: none !important;
  box-shadow:
    inset 3px 0 0 #ea580c,
    inset -3px 0 0 #ea580c,
    inset 0 -3px 0 rgba(234, 88, 12, 0.8);
}

.todayCell {
  background-image: linear-gradient(90deg, rgba(234, 88, 12, 0.15), transparent 55%);
  border-left: none !important;
  border-right: none !important;
  box-shadow:
    inset 3px 0 0 #ea580c,
    inset -3px 0 0 #ea580c;
}

/* Merge runs should stay continuous even on today column */
.plan td.cell.todayCell.merge-run:not(.merge-start) {
  box-shadow: inset -3px 0 0 #ea580c;
}

.plan td.cell.todayCell.merge-run:not(.merge-end) {
  box-shadow: inset 3px 0 0 #ea580c;
}

.plan td.cell.todayCell.merge-run:not(.merge-start):not(.merge-end) {
  box-shadow: none;
}

.selectedDateColumn {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow:
    inset 3px 0 0 #ea580c,
    inset -3px 0 0 #ea580c;
}

.selectedDateColumn * {
  color: var(--text) !important;
}

.selectedDateColumn .muted {
  color: var(--muted) !important;
}

.plan thead th.selectedDateColumn {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow:
    inset 3px 0 0 #ea580c,
    inset -3px 0 0 #ea580c,
    inset 0 -3px 0 #ea580c;
}

.plan thead th.selectedDateColumn * {
  color: var(--text) !important;
}

.plan thead th.selectedDateColumn .muted {
  color: var(--muted) !important;
}

/* Cell Content */
.cell-time {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 3px;
}

.cell-people {
  margin-top: 2px;
  line-height: 1.4;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
}

/* Drag and Drop Styles */
.plan td.cell.drag-over {
  background-color: #dbeafe !important;
  border: 2px dashed #3b82f6 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.plan td.cell[draggable="true"] {
  cursor: move;
}

.plan td.cell[draggable="true"]:hover {
  cursor: grab;
}

.plan td.cell[draggable="true"]:active {
  cursor: grabbing;
}

/* Paste Mode Cursor */
body.paste-mode-active {
  cursor: copy !important;
}

body.paste-mode-active td.cell.daycol {
  cursor: copy !important;
}

/* Önemli Not İşareti */
.plan td.cell.has-important-note::before {
  content: "📌";
  position: absolute;
  top: 0;
  right: 1px;
  width: auto;
  height: auto;
  border: none;
  font-size: 15px;
  line-height: 1;
  z-index: 15;
  cursor: help;
  pointer-events: auto;
}

/* Önemli not artık tooltip içinde gösteriliyor, küçük siyah tooltip kaldırıldı */

/* Harita stilleri */
.map {
  width: 100%;
  height: 600px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 16px;
  background: var(--bg);
  position: relative;
  z-index: 1;
}

/* Leaflet harita kontrollerinin z-index'ini ayarla */
.leaflet-container {
  z-index: 1;
}

.leaflet-control-container {
  z-index: 100;
}

.leaflet-top,
.leaflet-bottom {
  z-index: 100;
}

.leaflet-control {
  z-index: 100;
}

.leaflet-popup {
  z-index: 1000;
}

.leaflet-pane {
  z-index: 1;
}

.plan td.cell.has-important-note::after {
  display: none;
}

/* ISDP + Tutanak durum rozetleri (sağ alt) */
.plan td.cell .cell-status-badges {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 14;
  pointer-events: none;
  line-height: 1;
}

.plan td.cell .cell-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  font-size: 12px;
  font-weight: 700;
}

.plan td.cell .cell-status-badge.cell-status-danger {
  color: #ef0000 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.85);
  /* ISDP/tutanak ünlemleri sabit kalsın; yanıp sönme sadece çalışma saati kenarlığında */
  animation: none !important;
  opacity: 1 !important;
}

/* Çalışma saati seçili değilse kutunun kenarı kırmızı yanıp söner */
.plan td.cell.cell-missing-shift {
  position: relative;
  z-index: 3;
  outline: 3px solid #ef0000;
  outline-offset: -3px;
  animation: cellMissingShiftBorderBlink 0.85s ease-in-out infinite;
}

.plan td.cell.cell-missing-shift.selectedCell {
  outline: 3px solid #ef0000;
  outline-offset: -3px;
  animation: cellMissingShiftBorderBlink 0.85s ease-in-out infinite;
}

@keyframes cellMissingShiftBorderBlink {
  0%,
  100% {
    outline-color: #ef0000;
    box-shadow: inset 0 0 0 2px rgba(239, 0, 0, 0.95);
  }

  50% {
    outline-color: rgba(239, 0, 0, 0.12);
    box-shadow: inset 0 0 0 2px rgba(239, 0, 0, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan td.cell.cell-missing-shift,
  .plan td.cell.cell-missing-shift.selectedCell {
    animation: none;
    outline: 3px solid #ef0000;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 2px #ef0000;
  }
}

.plan td.cell .cell-status-badge.cell-status-success {
  color: #16a34a !important;
  opacity: 1 !important;
}

.plan td.cell .cell-status-badge.cell-status-muted {
  color: #9ca3af !important;
  font-weight: 600;
  opacity: 1 !important;
}

.attach-indicator {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  font-size: 15px;
}

.plan td.cell[data-has-attach="1"]::after {
  content: "\01F4CE";
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.8;
}

.attach-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dropzone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--card);
}

.dropzone.dragover {
  border-color: var(--text);
  background: var(--bg-soft);
}

.dropzone input {
  width: 100%;
}

.dropzone-hint {
  font-size: 12px;
  color: var(--muted);
}

.attach-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.attach-list {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}

.attach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.attach-name {
  overflow-wrap: anywhere;
}

.attach-empty {
  color: var(--muted);
  font-style: italic;
}

.attach-btn {
  padding: 2px 8px;
  background: var(--bg-soft-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.cell-isdp {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.4;
}

.cell-po {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.4;
}

.cell-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ============================================
   ACTION BUTTONS BAR
   ============================================ */

.action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 12px;
}

/* ============================================
   MODALS
   ============================================ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 100100;
  padding: 20px;
  padding-top: calc(var(--nav-topbar-height, 64px) + 16px);
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.modal.open {
  display: flex;
}

.modal.show {
  display: flex;
}


.modalCard {
  width: min(1100px, 96vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  max-height: 95vh;
  overflow-y: auto;
}

.cellModalCard {
  padding: 12px;
  max-height: 98vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.modalCard h3 {
  font-size: 20px;
  margin-bottom: 16px;
}

.cellModalLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

.cellFormStack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cellModalCard .cellModalLayout {
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: start;
}

.cellModalCard .cellFormStack {
  gap: 6px;
  overflow: visible;
}

.cellModalCard .rowline {
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Modal içindeki personnelPanel - farklı davranış */
#cellModal .personnelPanel {
  position: static;
  max-height: none;
  height: auto;
  overflow-y: visible;
  flex: 1;
}

/* Modal içindeki peopleDropdown */
#cellModal #peopleDropdown {
  max-height: none;
  overflow-y: visible;
  flex: 1;
  min-height: 200px;
}

.personnelPanel {
  position: sticky;
  top: 0;
  align-self: stretch;
  min-height: 0;
  max-height: 25vh;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: #f8fafc;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .cellModalLayout {
    grid-template-columns: 1fr;
  }

  .personnelPanel {
    position: static;
    max-height: none;
    height: auto;
    align-self: auto;
  }

  .jobPanel {
    max-height: none;
    height: auto;
  }
}

/* Job Panel - İş Listesi Panel */
.jobPanel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  overflow: hidden;
}

.jobTableWrapper {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}

/* Tablo hücre padding optimizasyonu - daha kompakt görünüm */
.plan td {
  padding: 8px 6px !important;
}

.plan th {
  padding: 8px 6px !important;
}

.plan tbody tr:first-child td {
  border-top: none;
}

.plan tbody tr:last-child td {
  border-bottom: none;
}

/* Slightly shorter dropdown for side panel */
/* Personel Tablosu Scroll Wrapper */
#peopleTableScrollWrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg-soft);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* People Dropdown - Ana panel için scroll */
#peopleDropdown {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* People Dropdown - Ana panel için scroll */
#peopleDropdown {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

#peopleTableScrollWrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#peopleTableScrollWrapper::-webkit-scrollbar-track {
  background: var(--bg-soft);
  border-radius: 10px;
}

#peopleTableScrollWrapper::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

#peopleTableScrollWrapper::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

html.dark-mode #peopleTableScrollWrapper {
  scrollbar-color: var(--border-light) var(--bg-secondary);
}

html.dark-mode #peopleTableScrollWrapper::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

html.dark-mode #peopleTableScrollWrapper::-webkit-scrollbar-thumb {
  background: var(--border-light);
}

html.dark-mode #peopleTableScrollWrapper::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Personel Tablosu Sticky Header */
#peopleTableScrollWrapper thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

#peopleTableScrollWrapper thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 11 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html.dark-mode #peopleTableScrollWrapper thead th {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

#peopleDropdown {
  max-height: none;
  overflow: visible;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================
   PEOPLE LIST
   ============================================ */

.peopleList {
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  max-height: none;
  min-height: 0;
  flex: 1;
  overflow: visible;
  background: var(--card);
  color: var(--text);
}

.filterOption {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin: 0;
  height: 24px;
}

.filterInput {
  width: 14px;
  height: 14px;
}

.peopleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #f8fafc;
  opacity: 0.7;
}

.peopleRow:hover {
  background: #f1f5f9;
  opacity: 0.9;
}

.peopleRow.selected {
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, .3);
  opacity: 1;
}

.peopleName {
  font-weight: 500;
  font-size: 13px;
}

/* ============================================
   FLASH MESSAGES
   ============================================ */

.flash {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin: 8px 0;
  font-size: 13px;
}

.flash.success {
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .2);
  color: #065f46;
}

.flash.danger {
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .2);
  color: #991b1b;
}

/* ============================================
   EDITOR GRID
   ============================================ */

.etopGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.etopTitle {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--text);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
  .etopGrid {
    grid-template-columns: 1fr;
  }

  .gridPlan {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   UTILITIES
   ============================================ */

/* ============================================
   SIDEBAR COMPLETELY REMOVED - FORCE HIDE
   (EXCEPT: voiceHistoryPanel, pttTargetMenu, pttRecordingIndicator, voiceIncomingNotification)
   ============================================ */

.rightPanel,
#rightPanel,
.right-panel,
.side-panel:not(#pttTargetMenu):not(#pttRecordingIndicator):not(#voiceHistoryPanel):not(#voiceIncomingNotification),
[class*="sidebar"],
[id*="Sidebar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* Gerçek zamanlı paneller için özel izinler */
#voiceHistoryPanel,
#pttTargetMenu,
#pttRecordingIndicator,
#voiceIncomingNotification {
  display: none;
  /* JS ile kontrol edilecek */
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  position: fixed !important;
  left: auto !important;
  pointer-events: auto !important;
}

#voiceHistoryPanel[style*="display: block"],
#pttTargetMenu[style*="display: block"],
#pttRecordingIndicator[style*="display: block"],
#voiceIncomingNotification[style*="display: block"] {
  display: block !important;
}


#floatingPanelBtn,
#panelNotch,
#panelPinBtn,
button#floatingPanelBtn,
.floating-panel-btn,
.panel-btn,
.panel-notch,
[class*="floating"],
[id*="floating"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* Drag & Drop */
.plan td.cell.drag-over {
  outline: 3px dashed rgba(59, 130, 246, .5);
  background: rgba(59, 130, 246, .05);
}

/* Status Dots */
.stDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.st-leave {
  background: var(--status-danger);
}

.st-office {
  background: var(--status-warning);
}

.st-production {
  background: var(--status-success);
}

/* Toast */
#toastLayer {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toastMsg {
  background: var(--surface-strong, rgba(15, 23, 42, .95));
  color: var(--text-on-strong, #fff);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  max-width: min(420px, calc(100vw - 40px));
  box-shadow: var(--shadow-lg);
}

/* Fit Week Mode */
body.fit-week {
  --w1: 110px;
  --w2: 250px;
  --w3: 120px;
  --day: 140px;
}

body.fit-week .plan th,
body.fit-week .plan td {
  font-size: 12px;
  padding: 8px 10px;
}

body.fit-week .plan td.cell {
  min-height: 92px;
}

body.fit-week .cell-people {
  max-height: 60px;
}

body.fit-week .cell-note {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ============================================
   CELL TOOLTIP
   ============================================ */

.cell-tooltip {
  position: fixed;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  z-index: 1000;
  pointer-events: none;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.6;
  display: none;
}

.cell-tooltip.show {
  display: block;
}

.cell-tooltip-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.cell-tooltip-item {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cell-tooltip-item#tooltipImportantNoteContainer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid #fee2e2;
  background: #fef2f2;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 0;
}

/* Dark Mode - Cell Tooltip handled by variables */

.cell-tooltip-label {
  font-weight: 500;
  color: var(--text-light);
  min-width: 80px;
  flex-shrink: 0;
}

.cell-tooltip-value {
  color: var(--text);
  flex: 1;
}

.cell-tooltip-pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.cell-tooltip-people {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cell-tooltip-empty {
  color: var(--muted);
  font-style: italic;
}

/* Personnel summary tooltip - horizontal & compact */
#summaryTooltip.summary-tooltip {
  max-width: 600px;
  width: auto;
  padding: 16px 18px;
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

#summaryTooltip.summary-tooltip .cell-tooltip-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: flex-start;
  gap: 6px 10px;
  margin-bottom: 10px;
}

#summaryTooltip.summary-tooltip .cell-tooltip-label {
  min-width: 0;
  color: #0f172a;
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

#summaryTooltip.summary-tooltip .cell-tooltip-value {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 6px;
  max-height: 220px;
  overflow: auto;
}

#summaryTooltip.summary-tooltip .cell-tooltip-value>div {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.3;
  color: #0f172a;
}

#summaryTooltip.summary-tooltip .cell-tooltip-title {
  margin-bottom: 10px;
  padding-bottom: 6px;
}

#summaryTooltip .summary-count {
  font-weight: 700;
  color: #0f172a;
  margin-right: 8px;
  align-self: center;
}

#summaryTooltip .summary-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

#summaryTooltip .cell-tooltip-empty {
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  color: #94a3b8;
  font-style: normal;
}

/* Dark Mode - Summary Tooltip */
.dark-mode #summaryTooltip.summary-tooltip {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #summaryTooltip.summary-tooltip .cell-tooltip-label {
  color: var(--text-dark) !important;
}

.dark-mode #summaryTooltip.summary-tooltip .cell-tooltip-value>div {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #summaryTooltip .summary-count {
  color: var(--text-dark) !important;
}

.dark-mode #summaryTooltip .summary-pill {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #summaryTooltip .cell-tooltip-empty {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Team Tooltip */
.dark-mode .team-tooltip {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .team-tooltip-title {
  color: var(--text-dark) !important;
}

.dark-mode .team-tooltip-row {
  color: var(--text-dark) !important;
}

.dark-mode .team-tooltip-empty {
  color: var(--text-secondary-dark) !important;
}

/* Grey cell for consecutive same teams */
.plan td.cell.grey-cell {
  background: #a9a9a9 !important;
}

/* Team tooltip (Ekip ki?i listesini g?sterir) */
.team-tooltip {
  position: fixed;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  z-index: 1200;
  pointer-events: none;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
  display: none;
}

.team-tooltip.show {
  display: block;
}

.team-tooltip-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.team-tooltip-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-tooltip-row {
  color: var(--text);
}

.team-tooltip-empty {
  color: var(--muted);
  font-style: italic;
}

.board-compact #boardFilters {
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.board-compact #boardFilters>div {
  gap: 10px;
}

.board-compact #boardFilters input,
.board-compact #boardFilters select,
.board-compact #boardFilters button {
  border-radius: 8px;
  height: 32px !important;
  padding: 6px 10px !important;
  font-size: 13px;
}

.board-compact #boardFilters .btn.secondary {
  border-radius: 8px;
  height: 32px !important;
  padding: 0 14px !important;
}

.board-compact table.simple th,
.board-compact table.simple td {
  padding: 8px 10px !important;
  font-size: 13px;
  line-height: 1.3;
}

.board-compact table.simple th {
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.board-compact table.simple tbody tr {
  border-bottom: 1px solid var(--line);
}

.board-compact table.simple tbody tr:last-child {
  border-bottom: none;
}

.board-compact .tablewrap {
  border-radius: 8px;
}

.board-compact .card {
  border-radius: 10px;
}

.board-compact #boardFilters,
.board-compact .card {
  transition: all 0.2s ease;
}

/* ============================================
   DARK MODE
   ============================================ */

.dark-mode {
  color-scheme: dark;
}

.dark-mode body {
  background: var(--bg-dark);
  color: var(--text-dark);
}

.dark-mode .topbar {
  background: var(--card-dark);
  border-bottom-color: var(--border-dark);
}

.dark-mode .topbar a {
  color: var(--text-dark);
}

.dark-mode .topbar a:hover {
  background: var(--line-dark);
  color: var(--text-dark);
}

.dark-mode .nav a {
  color: var(--text-secondary-dark);
}

.dark-mode .nav a:hover {
  background: var(--line-dark);
  color: var(--text-dark);
}

.dark-mode .card {
  background: var(--card-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode .card h2,
.dark-mode .card h3 {
  color: var(--text-dark);
}

.dark-mode .btn {
  background: var(--card-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode .btn:hover {
  background: var(--line-dark);
  border-color: var(--line-dark);
}

.dark-mode .btn.secondary {
  background: var(--line-dark);
  color: var(--text-dark);
}

.dark-mode .tablewrap {
  background: var(--card-dark);
  border-color: var(--border-dark);
}

.dark-mode table.simple {
  color: var(--text-dark);
}

.dark-mode table.simple thead {
  background: var(--bg-dark);
  color: var(--text-dark);
}

.dark-mode table.simple th {
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode table.simple td {
  border-color: var(--border-dark);
  color: var(--text-secondary-dark);
}

.dark-mode table.simple tbody tr:hover {
  background: var(--bg-dark);
}

.dark-mode .modal {
  background: rgba(0, 0, 0, 0.7);
}

.dark-mode .modalCard {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

.dark-mode .modalCard h3 {
  color: var(--text);
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background: var(--card);
  border-color: var(--line);
  border-width: 1px;
  border-style: solid;
  color: var(--text);
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: var(--primary);
  border-width: 1px;
  border-style: solid;
  background: var(--card);
  outline: none;
}

/* Dark Mode - Modal Input Fields - More Visible Borders */
.dark-mode .modalCard input,
.dark-mode .modalCard select,
.dark-mode .modalCard textarea {
  background: var(--card) !important;
  border-color: #475569 !important;
  border-width: 1px !important;
  border-style: solid !important;
  color: var(--text) !important;
}

.dark-mode .modalCard input:focus,
.dark-mode .modalCard select:focus,
.dark-mode .modalCard textarea:focus {
  border-color: var(--primary) !important;
  border-width: 1px !important;
  border-style: solid !important;
  background: var(--card) !important;
  outline: 2px solid rgba(59, 130, 246, 0.2) !important;
  outline-offset: 0 !important;
}

/* Dark Mode - Modal Select Dropdown Options */
.dark-mode .modalCard select {
  background: var(--card) !important;
  border-color: #475569 !important;
  border-width: 1px !important;
  border-style: solid !important;
  color: var(--text) !important;
}

.dark-mode .modalCard select option {
  background: var(--card) !important;
  color: var(--text) !important;
}

.dark-mode .modalCard select:focus {
  background: var(--card) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}

/* Dark Mode - All Select Dropdowns */
html.dark-mode select {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html.dark-mode select option {
  background: var(--card) !important;
  color: var(--text) !important;
}

html.dark-mode select:focus {
  background: var(--card) !important;
  border-color: var(--primary) !important;
  color: var(--text) !important;
}

.dark-mode #notifDropdown,
.dark-mode .notif-dropdown,
.dark-mode #onlineDropdown {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #notifDropdown>div,
.dark-mode .notif-dropdown>div,
.dark-mode #onlineDropdown>div {
  border-bottom-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #notifList,
.dark-mode #onlineList {
  color: var(--text-dark) !important;
}

.dark-mode .notifItem {
  border-color: var(--border-dark) !important;
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .notifItem:hover {
  background: var(--bg-dark) !important;
}

.dark-mode .notifItem>div>div:first-child {
  color: var(--text-dark) !important;
}

.dark-mode .notifItem>div>div:last-child {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .notifItem>div:last-child {
  color: var(--text-secondary-dark) !important;
}

.dark-mode #notifMarkAllBtn {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #notifMarkAllBtn:hover {
  background: var(--line-dark) !important;
}

/* Dark Mode - Chat Notification Button */
.dark-mode #chatNotifBellBtn {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #chatNotifBellBtn svg path,
.dark-mode #chatNotifBellBtn svg {
  stroke: var(--text-dark) !important;
  fill: none !important;
}

.dark-mode #chatNotifBellBtn:hover {
  background: var(--border-dark) !important;
}

.dark-mode #darkModeToggle {
  background: var(--line-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode #darkModeToggle:hover {
  background: var(--border-dark);
}

/* Dark Mode - Genel stiller */
.dark-mode {
  background: var(--bg-dark);
}

.dark-mode * {
  border-color: var(--border-dark);
}

.dark-mode label {
  color: var(--text-dark);
}

.dark-mode span {
  color: var(--text-dark);
}

.dark-mode a {
  color: var(--text-secondary-dark);
}

.dark-mode a:hover {
  color: var(--text-dark);
}

/* Dark Mode - Butonlar */
.dark-mode .btn.tiny {
  background: var(--card-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode .btn.danger {
  background: var(--status-danger) !important;
  border-color: var(--status-danger) !important;
  color: var(--text-inverted) !important;
}

.dark-mode .btn.danger:hover {
  background: var(--status-danger-text) !important;
  border-color: var(--status-danger-text) !important;
  color: var(--text-inverted) !important;
}

/* Dark Mode - Sil butonu için özel override (inline style ile) */
.dark-mode button[style*="background-color: #ef4444"],
.dark-mode button[style*="background-color:#ef4444"],
.dark-mode button[style*="background: #ef4444"],
.dark-mode button[style*="background:#ef4444"] {
  background-color: #ef4444 !important;
  color: var(--text-inverted) !important;
  border-color: var(--status-danger) !important;
}

.dark-mode button[style*="background-color: #ef4444"]:hover,
.dark-mode button[style*="background-color:#ef4444"]:hover,
.dark-mode button[style*="background: #ef4444"]:hover,
.dark-mode button[style*="background:#ef4444"]:hover {
  background-color: #dc2626 !important;
  border-color: var(--status-danger-text) !important;
}

.dark-mode .btn.secondary {
  background: var(--line-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode .btn.secondary:hover {
  background: var(--border-dark);
}

/* Dark Mode - Form elemanları */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="date"],
.dark-mode input[type="number"],
.dark-mode input[type="search"],
.dark-mode textarea {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode textarea:focus {
  border-color: var(--primary);
  background: var(--card-dark);
  color: var(--text-dark);
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="email"]::placeholder,
.dark-mode input[type="password"]::placeholder,
.dark-mode input[type="search"]::placeholder,
.dark-mode textarea::placeholder {
  color: var(--text-secondary-dark);
}

.dark-mode select {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode select:focus {
  border-color: var(--primary);
  background: var(--card-dark);
}

/* Dark Mode - Checkbox Styling */
.dark-mode input[type="checkbox"],
html.dark-mode input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid #475569 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #1e293b !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
}

.dark-mode input[type="checkbox"]:checked,
html.dark-mode input[type="checkbox"]:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffffff' d='M8.5 2.5L4 7L1.5 4.5L2.5 3.5L4 5L7.5 1.5Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
}

.dark-mode input[type="checkbox"]:hover,
html.dark-mode input[type="checkbox"]:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode input[type="checkbox"]:focus,
html.dark-mode input[type="checkbox"]:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.dark-mode input[type="radio"] {
  accent-color: var(--primary);
}

/* Dark Mode - Flash mesajları */
.dark-mode .flash {
  background: var(--card-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.dark-mode .flash.success {
  background: #065f46;
  border-color: #10b981;
  color: #d1fae5;
}

.dark-mode .flash.danger {
  background: #7f1d1d;
  border-color: #dc2626;
  color: #fee2e2;
}

.dark-mode .flash.warning {
  background: #78350f;
  border-color: #f59e0b;
  color: #fef3c7;
}

/* Dark Mode - Dropdown menüler */
.dark-mode .nav-dropdown-menu {
  background: var(--card-dark);
  border-color: var(--border-dark);
}

.dark-mode .nav-dropdown-menu a {
  color: var(--text-dark);
  border-bottom-color: var(--border-dark);
}

.dark-mode .nav-dropdown-menu a:hover {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* Dark Mode - Tablo detayları */
.dark-mode table.simple tbody tr {
  border-bottom-color: var(--border-dark);
}

.dark-mode table.simple tbody tr:nth-child(even) {
  background: var(--bg-dark);
}

.dark-mode table.simple tbody tr:hover {
  background: var(--line-dark);
}

.dark-mode table.simple a {
  color: var(--text-secondary-dark);
}

.dark-mode table.simple a:hover {
  color: var(--text-dark);
}

/* Dark Mode - Status badge'leri */
.dark-mode span[style*="background: #10b981"],
.dark-mode span[style*="background:#10b981"] {
  background: #10b981 !important;
  color: var(--text-inverted) !important;
}

.dark-mode span[style*="background: #64748b"],
.dark-mode span[style*="background:#64748b"] {
  background: #64748b !important;
  color: var(--text-inverted) !important;
}

/* Dark Mode - Hint ve yardımcı metinler */
.dark-mode .hint {
  color: var(--text-secondary-dark);
}

/* Dark Mode - Filter options */
.dark-mode .filterOption {
  color: var(--text-dark);
}

.dark-mode .filterOption span {
  color: var(--text-dark);
}

.dark-mode .filterOption input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid #475569;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #1e293b;
  transition: all 0.2s ease;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
}

.dark-mode .filterOption input[type="checkbox"]:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffffff' d='M8.5 2.5L4 7L1.5 4.5L2.5 3.5L4 5L7.5 1.5Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
}

.dark-mode .filterOption input[type="checkbox"]:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode .filterOption input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Dark Mode - Özel checkbox class'ları */
.dark-mode input[type="checkbox"].teamChk,
.dark-mode input[type="checkbox"].jobChk,
.dark-mode input[type="checkbox"].jmExistingFile,
.dark-mode input[type="checkbox"].ot-check,
.dark-mode input[type="checkbox"].rowSel {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid #475569 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #1e293b !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
  vertical-align: middle;
  position: relative;
}

.dark-mode input[type="checkbox"].teamChk:checked,
.dark-mode input[type="checkbox"].jobChk:checked,
.dark-mode input[type="checkbox"].jmExistingFile:checked,
.dark-mode input[type="checkbox"].ot-check:checked,
.dark-mode input[type="checkbox"].rowSel:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffffff' d='M8.5 2.5L4 7L1.5 4.5L2.5 3.5L4 5L7.5 1.5Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 10px !important;
}

.dark-mode input[type="checkbox"].teamChk:hover,
.dark-mode input[type="checkbox"].jobChk:hover,
.dark-mode input[type="checkbox"].jmExistingFile:hover,
.dark-mode input[type="checkbox"].ot-check:hover,
.dark-mode input[type="checkbox"].rowSel:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-mode input[type="checkbox"].teamChk:focus,
.dark-mode input[type="checkbox"].jobChk:focus,
.dark-mode input[type="checkbox"].jmExistingFile:focus,
.dark-mode input[type="checkbox"].ot-check:focus,
.dark-mode input[type="checkbox"].rowSel:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Dark Mode - Proje sayıları container */
.dark-mode div[style*="background: #f8fafc"] {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode div[style*="background:#f8fafc"] {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Arama barı */
.dark-mode div[style*="background: #f8fafc"] input,
.dark-mode div[style*="background:#f8fafc"] input {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Alt proje kartları */
.dark-mode div[style*="background: white"],
.dark-mode div[style*="background:white"] {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode div[style*="background: white"] div,
.dark-mode div[style*="background:white"] div {
  color: var(--text-dark) !important;
}

/* Dark Mode - Subprojects row */
.dark-mode .subprojects-row {
  background: var(--bg-dark) !important;
}

.dark-mode .subprojects-row td {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Inline stiller için override */
.dark-mode [style*="color: #0f172a"],
.dark-mode [style*="color:#0f172a"] {
  color: var(--text-dark) !important;
}

.dark-mode [style*="color: #475569"],
.dark-mode [style*="color:#475569"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode [style*="color: #64748b"],
.dark-mode [style*="color:#64748b"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode [style*="background: #f8fafc"],
.dark-mode [style*="background:#f8fafc"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:#ffffff"] {
  background: var(--card-dark) !important;
}

.dark-mode [style*="border: 1px solid #e2e8f0"],
.dark-mode [style*="border:1px solid #e2e8f0"] {
  border-color: var(--border-dark) !important;
}

.dark-mode [style*="border: 1px solid #cbd5e1"],
.dark-mode [style*="border:1px solid #cbd5e1"] {
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Logo */
.dark-mode .brandLogo {
  filter: brightness(0) invert(1);
}

/* Dark Mode - Plan sayfası özel stilleri */
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:#ffffff"] {
  background: var(--card-dark) !important;
}

.dark-mode [style*="background: #f8fafc"],
.dark-mode [style*="background:#f8fafc"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #fef3c7"],
.dark-mode [style*="background:#fef3c7"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #f0fdf4"],
.dark-mode [style*="background:#f0fdf4"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #fffbeb"],
.dark-mode [style*="background:#fffbeb"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="color: #0f172a"],
.dark-mode [style*="color:#0f172a"] {
  color: var(--text-dark) !important;
}

.dark-mode [style*="color: #475569"],
.dark-mode [style*="color:#475569"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode [style*="color: #64748b"],
.dark-mode [style*="color:#64748b"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode [style*="color: #166534"],
.dark-mode [style*="color:#166534"] {
  color: var(--text-dark) !important;
}

.dark-mode [style*="color: #92400e"],
.dark-mode [style*="color:#92400e"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode [style*="color: #1e40af"],
.dark-mode [style*="color:#1e40af"] {
  color: var(--text-dark) !important;
}

.dark-mode [style*="color: #cbd5e1"],
.dark-mode [style*="color:#cbd5e1"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode [style*="color: #94a3b8"],
.dark-mode [style*="color:#94a3b8"] {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Plan grid borders */
.dark-mode table.plan th,
.dark-mode table.plan td {
  border-color: var(--border-dark) !important;
}

.dark-mode table.plan th[style*="border"],
.dark-mode table.plan td[style*="border"] {
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Plan cells */
.dark-mode .cell {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .cell.filled {
  background: var(--card-dark) !important;
}

.dark-mode .cell.filled-personnel {
  background: var(--line-dark) !important;
}

.dark-mode .cell-time {
  color: var(--text-dark) !important;
}

.dark-mode .cell-people {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .cell-note {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - People Dropdown */
.dark-mode .peopleList,
.dark-mode #peopleDropdown {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .peopleList table {
  color: var(--text-dark) !important;
}

.dark-mode .peopleList thead th {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .peopleList tbody td {
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .peopleList tbody tr {
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Online Dropdown */
.dark-mode .online-dropdown {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .online-user-item {
  background: transparent !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .online-user-item:hover {
  background: transparent !important;
}

.dark-mode .online-chat-link {
  background: var(--primary) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-inverted) !important;
}

/* Dark Mode - Plan row headers */
.dark-mode tr.planRow td.st.region,
.dark-mode tr.planRow td.st.proj,
.dark-mode tr.planRow td.st.resp {
  background-color: var(--project-color-dark, var(--bg-dark)) !important;
}

.dark-mode tr.planRow td.st.region {
  color: var(--text-dark) !important;
}

.dark-mode tr.planRow td.st.resp {
  color: var(--text-secondary-dark) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.dark-mode .pcode {
  color: var(--text-dark) !important;
}

.dark-mode .pname {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .psubproject {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Plan table headers */
.dark-mode table.plan thead th {
  background: var(--table-header-bg) !important;
  color: var(--text) !important;
}

.dark-mode table.plan thead th.daycol {
  background: var(--table-header-bg) !important;
  color: var(--text) !important;
}

/* Dark Mode - Personnel summary panel */
.dark-mode #personelOzetPanel {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .personnel-summary-card {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Subproject panel */
.dark-mode #subprojectPanel {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .subproject-row {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Bottom action bar */
.dark-mode .bottomActions {
  background: var(--card-dark) !important;
  border-top-color: var(--border-dark) !important;
}

.dark-mode .bottomActions .btn {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .bottomActions .btn:hover {
  background: var(--border-dark) !important;
}

/* Dark Mode - SVG icons in topbar buttons */
html.dark-mode #chatNotifBellBtn svg,
html.dark-mode #notifBellBtn svg,
html.dark-mode #onlineBtn svg,
html.dark-mode #darkModeToggle svg {
  color: var(--text) !important;
}

html.dark-mode #chatNotifBellBtn svg path,
html.dark-mode #chatNotifBellBtn svg circle,
html.dark-mode #chatNotifBellBtn svg line,
html.dark-mode #notifBellBtn svg path,
html.dark-mode #notifBellBtn svg circle,
html.dark-mode #notifBellBtn svg line {
  fill: var(--text) !important;
  stroke: var(--text) !important;
}

html.dark-mode #chatNotifBellBtn,
html.dark-mode #notifBellBtn,
html.dark-mode #onlineBtn,
html.dark-mode #darkModeToggle {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html.dark-mode #chatNotifBellBtn:hover,
html.dark-mode #notifBellBtn:hover,
html.dark-mode #onlineBtn:hover,
html.dark-mode #darkModeToggle:hover {
  background: var(--line) !important;
  border-color: var(--primary) !important;
}

/* Dark Mode - SVG icons in topbar */
.dark-mode .topbar svg path,
.dark-mode .topbar svg circle,
.dark-mode .topbar svg line {
  stroke: var(--text-dark) !important;
  fill: var(--text-dark) !important;
}

.dark-mode .topbar svg[fill="currentColor"] path {
  fill: var(--text-dark) !important;
}

/* Dark Mode - Kapsamlı inline style override'ları */
.dark-mode [style*="background: #f1f5f9"],
.dark-mode [style*="background:#f1f5f9"] {
  background: var(--line-dark) !important;
}

.dark-mode [style*="background: #e2e8f0"],
.dark-mode [style*="background:#e2e8f0"] {
  background: var(--border-dark) !important;
}

.dark-mode [style*="background: #cbd5e1"],
.dark-mode [style*="background:#cbd5e1"] {
  background: var(--border-dark) !important;
}

.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background:white"] {
  background: var(--card-dark) !important;
}

.dark-mode [style*="color: #000"],
.dark-mode [style*="color:#000"],
.dark-mode [style*="color: black"],
.dark-mode [style*="color:black"] {
  color: var(--text-dark) !important;
}

/* Dark Mode - Tüm hex renk kodları için genel override */
.dark-mode [style*="color: #"]:not([style*="color: #fff"]):not([style*="color: #ffffff"]):not([style*="color: #10b981"]):not([style*="color: #3b82f6"]):not([style*="color: #dc2626"]):not([style*="color: #16a34a"]):not([style*="color: #6366f1"]) {
  color: var(--text-dark) !important;
}

.dark-mode [style*="color: #64748b"],
.dark-mode [style*="color: #94a3b8"],
.dark-mode [style*="color: #cbd5e1"] {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Border renkleri */
.dark-mode [style*="border: 1px solid #"],
.dark-mode [style*="border:1px solid #"],
.dark-mode [style*="border-bottom: 1px solid #"],
.dark-mode [style*="border-bottom:1px solid #"],
.dark-mode [style*="border-top: 1px solid #"],
.dark-mode [style*="border-top:1px solid #"],
.dark-mode [style*="border-left: 1px solid #"],
.dark-mode [style*="border-left:1px solid #"],
.dark-mode [style*="border-right: 1px solid #"],
.dark-mode [style*="border-right:1px solid #"] {
  border-color: var(--border-dark) !important;
}

.dark-mode [style*="border: 2px solid #"],
.dark-mode [style*="border:2px solid #"] {
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Box shadow'ları dark mode'a uyarla */
.dark-mode [style*="box-shadow"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Dark Mode - Chat ve diğer sayfalar */
.dark-mode .chatSidebar {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .chatMain {
  background: var(--bg-dark) !important;
}

.dark-mode .chatMsg {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .chatMsg.mine {
  background: var(--line-dark) !important;
}

.dark-mode .chatComposer {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Input ve Textarea Placeholder */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.7 !important;
}

.dark-mode input,
.dark-mode textarea {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode input[type="text"],
.dark-mode input[type="search"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode input[type="month"],
.dark-mode textarea,
.dark-mode select {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="search"]::placeholder,
.dark-mode input[type="email"]::placeholder,
.dark-mode textarea::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.7 !important;
}

/* Dark Mode - Inline style override'ları (daha güçlü) */
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background:white"] {
  background: var(--card-dark) !important;
}

.dark-mode input[style*="background: #ffffff"],
.dark-mode input[style*="background:#ffffff"],
.dark-mode input[style*="background: white"],
.dark-mode input[style*="background:white"],
.dark-mode select[style*="background: #ffffff"],
.dark-mode select[style*="background:#ffffff"],
.dark-mode select[style*="background: white"],
.dark-mode select[style*="background:white"],
.dark-mode textarea[style*="background: #ffffff"],
.dark-mode textarea[style*="background:#ffffff"],
.dark-mode textarea[style*="background: white"],
.dark-mode textarea[style*="background:white"] {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode input[style*="background: #ffffff"]::placeholder,
.dark-mode input[style*="background:#ffffff"]::placeholder,
.dark-mode textarea[style*="background: #ffffff"]::placeholder,
.dark-mode textarea[style*="background:#ffffff"]::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.7 !important;
}

/* Dark Mode - Select option'ları */
.dark-mode select option {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode select[style*="background: #ffffff"] option,
.dark-mode select[style*="background:#ffffff"] option {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Tüm form elementleri için güçlü override (inline style'ları geçersiz kılmak için) */
.dark-mode input[style*="background"],
.dark-mode select[style*="background"],
.dark-mode textarea[style*="background"] {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Özellikle #ffffff veya white olanlar */
.dark-mode input[style*="#ffffff"],
.dark-mode input[style*="white"],
.dark-mode select[style*="#ffffff"],
.dark-mode select[style*="white"],
.dark-mode textarea[style*="#ffffff"],
.dark-mode textarea[style*="white"] {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .chatComposer textarea {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Job cards */
.dark-mode .jobCard {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .jobCard:hover {
  background: var(--line-dark) !important;
}

.dark-mode .presetChip {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .presetChip:hover {
  background: var(--line-dark) !important;
}

.dark-mode .presetChip.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-inverted) !important;
}

/* Dark Mode - Collapsible */
.dark-mode .collapsibleHeader {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .collapsibleHeader:hover {
  background: var(--line-dark) !important;
}

/* Dark Mode - Filters */
.dark-mode .filters {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .filters label {
  color: var(--text-dark) !important;
}

/* Dark Mode - Nowbar */
.dark-mode .nowbar {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .nowbar strong {
  color: var(--text-dark) !important;
}

/* Dark Mode - Modal backdrop */
.dark-mode .modal {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Dark Mode - Dropdown içerikleri */
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: #ffffff"] {
  background: var(--card-dark) !important;
}

.dark-mode [style*="background:#f8fafc"],
.dark-mode [style*="background: #f8fafc"] {
  background: var(--bg-dark) !important;
}

/* Dark Mode - Badge'ler (yeşil, mavi, kırmızı hariç) */
.dark-mode [style*="background: #10b981"],
.dark-mode [style*="background:#10b981"],
.dark-mode [style*="background: #3b82f6"],
.dark-mode [style*="background:#3b82f6"],
.dark-mode [style*="background: #dc2626"],
.dark-mode [style*="background:#dc2626"],
.dark-mode [style*="background: #16a34a"],
.dark-mode [style*="background:#16a34a"],
.dark-mode [style*="background: #6366f1"],
.dark-mode [style*="background:#6366f1"] {
  /* Bu renkler olduğu gibi kalabilir */
}

.dark-mode [style*="background: #64748b"],
.dark-mode [style*="background:#64748b"] {
  background: var(--line-dark) !important;
}

/* Dark Mode - Tüm sayfalar için genel body background */
.dark-mode body {
  background: var(--bg-dark) !important;
}

.dark-mode main,
.dark-mode .container {
  background: var(--bg-dark) !important;
}

/* Dark Mode - Link renkleri */
.dark-mode a:not(.btn):not(.presetChip) {
  color: var(--text-secondary-dark) !important;
}

.dark-mode a:not(.btn):not(.presetChip):hover {
  color: var(--text-dark) !important;
}

/* Dark Mode - Strong ve bold metinler */
.dark-mode strong,
.dark-mode b {
  color: var(--text-dark) !important;
}

/* Dark Mode - Placeholder text */
.dark-mode ::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.7;
}

/* Dark Mode - Selection */
.dark-mode ::selection {
  background: var(--primary) !important;
  color: var(--text-inverted) !important;
}

/* Dark Mode - Scrollbar (webkit) */
.dark-mode ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--line-dark);
  border-radius: 6px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark);
}

/* Dark Mode - Tablo satırları için özel kurallar */
.dark-mode table.simple tbody tr {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode table.simple tbody tr:nth-child(even) {
  background: var(--bg-dark) !important;
}

.dark-mode table.simple tbody tr:hover {
  background: var(--line-dark) !important;
}

.dark-mode table.simple tbody tr td {
  background: transparent !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode table.simple tbody tr:nth-child(even) td {
  background: transparent !important;
}

.dark-mode table.simple thead {
  background: var(--bg-dark) !important;
}

.dark-mode table.simple thead th {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Tüm tablolar için genel kurallar */
.dark-mode table {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode table tbody {
  background: var(--card-dark) !important;
}

.dark-mode table tbody tr {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode table tbody tr td {
  color: var(--text-dark) !important;
  background: transparent !important;
}

.dark-mode table thead {
  background: var(--bg-dark) !important;
}

.dark-mode table thead th {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Form elemanları için daha agresif kurallar */
.dark-mode form {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode form label {
  color: var(--text-dark) !important;
}

.dark-mode form input[type="text"],
.dark-mode form input[type="email"],
.dark-mode form input[type="password"],
.dark-mode form input[type="date"],
.dark-mode form input[type="number"],
.dark-mode form input[type="search"],
.dark-mode form input[type="tel"],
.dark-mode form select,
.dark-mode form textarea {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode form input[type="text"]:focus,
.dark-mode form input[type="email"]:focus,
.dark-mode form input[type="password"]:focus,
.dark-mode form input[type="date"]:focus,
.dark-mode form input[type="number"]:focus,
.dark-mode form input[type="search"]:focus,
.dark-mode form input[type="tel"]:focus,
.dark-mode form select:focus,
.dark-mode form textarea:focus {
  background: var(--card-dark) !important;
  border-color: var(--primary) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Tab'lar */
.dark-mode .tab,
.dark-mode [role="tab"],
.dark-mode [class*="tab"] {
  background: var(--bg-dark) !important;
  color: var(--text-secondary-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .tab.active,
.dark-mode [role="tab"][aria-selected="true"],
.dark-mode [class*="tab"].active {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Chat mesaj alanı */
.dark-mode .chatMessages,
.dark-mode #chatMessages,
.dark-mode [class*="chatMessages"] {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .chatMsg {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .chatMsg.mine {
  background: var(--line-dark) !important;
}

/* Dark Mode - Chat sidebar */
.dark-mode .chatSidebar {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .chatTeamBtn {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .chatTeamBtn:hover,
.dark-mode .chatTeamBtn.active {
  background: var(--line-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Tüm section ve div'ler */
.dark-mode section {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode section.card {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Tüm h1, h2, h3, h4, h5, h6 */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--text-dark) !important;
}

/* Dark Mode - Tüm p, div, span (genel metin) */
.dark-mode p,
.dark-mode div:not(.btn):not(.presetChip):not([class*="badge"]) {
  color: var(--text-dark) !important;
}

.dark-mode span:not([class*="badge"]):not([style*="background"]) {
  color: var(--text-dark) !important;
}

/* Dark Mode - Tüm yazıları daha görünür yap */
.dark-mode {
  color: var(--text-dark) !important;
}

.dark-mode * {
  color: inherit;
}

.dark-mode label {
  color: var(--text-dark) !important;
  font-weight: 500;
}

.dark-mode .hint {
  color: var(--text-secondary-dark) !important;
  font-weight: 400;
}

.dark-mode .filterOption {
  color: var(--text-dark) !important;
}

.dark-mode .filterOption span {
  color: var(--text-dark) !important;
  font-weight: 500;
}

/* Dark Mode - Toggle switch label'ları */
.dark-mode input[type="checkbox"]+span,
.dark-mode input[type="checkbox"]~span,
.dark-mode label:has(input[type="checkbox"]) {
  color: var(--text-dark) !important;
  font-weight: 500;
}

/* Dark Mode - Tüm metin elementleri için daha belirgin renk */
.dark-mode p,
.dark-mode div,
.dark-mode span,
.dark-mode label,
.dark-mode td,
.dark-mode th,
.dark-mode li,
.dark-mode a:not(.btn) {
  color: var(--text-dark) !important;
}

.dark-mode .muted,
.dark-mode [class*="muted"],
.dark-mode [style*="color: #64748b"],
.dark-mode [style*="color:#64748b"],
.dark-mode [style*="color: #94a3b8"],
.dark-mode [style*="color:#94a3b8"],
.dark-mode [style*="color: #cbd5e1"],
.dark-mode [style*="color:#cbd5e1"] {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - İkincil metinler için */
.dark-mode [style*="color: #475569"],
.dark-mode [style*="color:#475569"] {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Özel durumlar için */
.dark-mode [style*="background-color: #"],
.dark-mode [style*="background-color:#"] {
  background-color: var(--card-dark) !important;
}

.dark-mode [style*="background-color: #f"],
.dark-mode [style*="background-color:#f"] {
  background-color: var(--bg-dark) !important;
}

/* Dark Mode - Tablo wrapper'ları */
.dark-mode .tablewrap {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Tüm sayfalar için genel body background override */
.dark-mode html {
  background: var(--bg-dark) !important;
}

.dark-mode body>* {
  background: var(--bg-dark) !important;
}

/* Dark Mode - Özel buton renkleri korunmalı */
.dark-mode [style*="background: #10b981"],
.dark-mode [style*="background:#10b981"],
.dark-mode [style*="background: #3b82f6"],
.dark-mode [style*="background:#3b82f6"],
.dark-mode [style*="background: #dc2626"],
.dark-mode [style*="background:#dc2626"],
.dark-mode [style*="background: #16a34a"],
.dark-mode [style*="background:#16a34a"],
.dark-mode [style*="background: #6366f1"],
.dark-mode [style*="background:#6366f1"],
.dark-mode [style*="background: #0f172a"],
.dark-mode [style*="background:#0f172a"] {
  /* Bu renkler olduğu gibi kalabilir - butonlar için */
}

/* Dark Mode - Input placeholder'ları */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.6;
}

/* Dark Mode - Select option'ları */
.dark-mode select option {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Tüm inline style background override'ları (daha agresif) */
.dark-mode [style*="#fff"],
.dark-mode [style*="#ffffff"],
.dark-mode [style*="white"] {
  background: var(--card-dark) !important;
}

.dark-mode [style*="#f8fafc"],
.dark-mode [style*="#f1f5f9"],
.dark-mode [style*="#e2e8f0"] {
  background: var(--bg-dark) !important;
}

/* Dark Mode - Tablo header'ları için özel */
.dark-mode table thead tr {
  background: var(--bg-dark) !important;
}

.dark-mode table thead tr th {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Tablo body satırları için özel */
.dark-mode table tbody tr {
  background: var(--card-dark) !important;
}

.dark-mode table tbody tr:nth-child(odd) {
  background: var(--card-dark) !important;
}

.dark-mode table tbody tr:nth-child(even) {
  background: var(--bg-dark) !important;
}

/* Dark Mode - Plan sayfası özel stilleri */
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background:white"] {
  background: var(--card-dark) !important;
}

.dark-mode [style*="background: #f8fafc"],
.dark-mode [style*="background:#f8fafc"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #f1f5f9"],
.dark-mode [style*="background:#f1f5f9"] {
  background: var(--line-dark) !important;
}

.dark-mode [style*="background: #fef3c7"],
.dark-mode [style*="background:#fef3c7"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #f0fdf4"],
.dark-mode [style*="background:#f0fdf4"] {
  background: var(--bg-dark) !important;
}

.dark-mode [style*="background: #fffbeb"],
.dark-mode [style*="background:#fffbeb"] {
  background: var(--bg-dark) !important;
}

/* Dark Mode - Plan sayfası input ve butonlar */
.dark-mode [style*="background: #0f172a"],
.dark-mode [style*="background:#0f172a"] {
  background: var(--primary) !important;
  color: var(--text-inverted) !important;
}

.dark-mode [style*="color: #1e40af"],
.dark-mode [style*="color:#1e40af"] {
  color: var(--text-dark) !important;
}

/* Dark Mode - Plan sayfası tablo header'ları */
html.dark-mode table.plan thead {
  background: var(--table-header-bg) !important;
}

html.dark-mode table.plan thead th {
  background: var(--table-header-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html.dark-mode table.plan thead tr {
  background: var(--table-header-bg) !important;
}

html.dark-mode table.plan thead th.st,
html.dark-mode table.plan thead .st1,
html.dark-mode table.plan thead .st2,
html.dark-mode table.plan thead .st3 {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Dark mode için sticky başlıklar - ARAÇ sütunu gibi */
html.dark-mode .plan thead th.st1,
html.dark-mode .plan thead th.st2,
html.dark-mode .plan thead th.st3 {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  isolation: isolate !important;
}

/* Dark mode için daha agresif kurallar - inline style'ları override et */
html.dark-mode table.plan thead tr th.st1[style],
html.dark-mode table.plan thead tr th.st2[style],
html.dark-mode table.plan thead tr th.st3[style] {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html.dark-mode table.plan thead th.daycol,
html.dark-mode table.plan thead th.vehcol {
  background: var(--table-header-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.dark-mode table.plan thead th.daycol {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode table.plan thead th.daycol span {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Plan sayfası row header'ları */
.dark-mode table.plan tbody tr td.st.region,
.dark-mode table.plan tbody tr td.st.proj,
.dark-mode table.plan tbody tr td.st.resp {
  background-color: var(--project-color-dark, var(--bg-dark)) !important;
  border-color: var(--line) !important;
}

.dark-mode table.plan tbody tr td.st.region {
  color: var(--text) !important;
}

.dark-mode table.plan tbody tr td.st.proj {
  color: var(--text) !important;
}

.dark-mode table.plan tbody tr td.st.resp {
  color: var(--text) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Dark mode - sticky kolonlar: planRow renkleri korunur */
html.dark-mode .plan tbody td.st1,
html.dark-mode .plan tbody td.st2,
html.dark-mode .plan tbody td.st3 {
  backdrop-filter: none !important;
  z-index: 51 !important;
}

html.dark-mode .plan tbody td.st2 {
  z-index: 52 !important;
}

html.dark-mode .plan tbody td.st3 {
  z-index: 53 !important;
}

/* Dark Mode - İlk hücreler için inline style override */
.dark-mode table.plan thead th.st.st1,
.dark-mode table.plan thead th.st.st2,
.dark-mode table.plan thead th.st.st3 {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode table.plan thead th[style*="background: #f8fafc"],
.dark-mode table.plan thead th[style*="background:#f8fafc"] {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode table.plan thead th[style*="color: #0f172a"],
.dark-mode table.plan thead th[style*="color:#0f172a"],
.dark-mode table.plan thead th[style*="color: rgb(15, 23, 42)"] {
  color: var(--text-dark) !important;
}

.dark-mode table.plan tbody tr td.st.st1.region[style*="color: #166534"] {
  color: var(--text-dark) !important;
}

.dark-mode table.plan tbody tr td.st.st2.proj .pcode[style*="color: #0f172a"],
.dark-mode table.plan tbody tr td.st.st2.proj .pcode[style*="color:#0f172a"] {
  color: var(--text-dark) !important;
}

.dark-mode table.plan tbody tr td.st.st2.proj .pname[style*="color: #475569"],
.dark-mode table.plan tbody tr td.st.st2.proj .pname[style*="color:#475569"] {
  color: var(--text-secondary-dark) !important;
}

.dark-mode table.plan tbody tr td.st.resp {
  background: var(--bg-dark) !important;
  color: var(--text-secondary-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode table.plan tbody tr td.vehcol {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Plan sayfası hücreler */
.dark-mode table.plan tbody tr td.cell {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode table.plan tbody tr td.cell.filled {
  background: var(--card-dark) !important;
}

.dark-mode table.plan tbody tr td.cell.filled-personnel {
  background: var(--line-dark) !important;
}

.dark-mode table.plan tbody tr td.cell.todayCell {
  border-left: none !important;
  border-right: none !important;
  box-shadow:
    inset 3px 0 0 #ea580c,
    inset -3px 0 0 #ea580c;
}

/* Dark Mode - Plan sayfası bottom action bar */
.dark-mode .bottomActions,
.dark-mode [class*="bottomActions"],
.dark-mode [id*="bottomActions"] {
  background: var(--card-dark) !important;
  border-top-color: var(--border-dark) !important;
}

.dark-mode .bottomActions .btn,
.dark-mode [class*="bottomActions"] .btn {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .bottomActions .btn:hover,
.dark-mode [class*="bottomActions"] .btn:hover {
  background: var(--border-dark) !important;
}

/* Dark Mode - Plan sayfası top control bar */
.dark-mode [style*="background: #ffffff"][style*="border: 1px solid"] {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode [style*="background: #ffffff"] input,
.dark-mode [style*="background:#ffffff"] input {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode [style*="background: #ffffff"] select,
.dark-mode [style*="background:#ffffff"] select {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Plan sayfası selected label */
.dark-mode #selectedLabel,
.dark-mode [id*="selectedLabel"] {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Plan sayfası personel özet paneli */
.dark-mode #personelOzetPanel,
.dark-mode [id*="personelOzetPanel"] {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #personelOzetPanel>div,
.dark-mode [id*="personelOzetPanel"]>div {
  color: var(--text-dark) !important;
  border-bottom-color: var(--border-dark) !important;
}

.dark-mode .personnel-summary-card,
.dark-mode [class*="personnel-summary-card"] {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .personnel-summary-card>div,
.dark-mode [class*="personnel-summary-card"]>div {
  color: var(--text-dark) !important;
}

.dark-mode .personnel-summary-card span,
.dark-mode [class*="personnel-summary-card"] span {
  color: var(--text-dark) !important;
}

/* Dark Mode - Plan sayfası subproject panel */
.dark-mode #subprojectPanel,
.dark-mode [id*="subprojectPanel"] {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojectPanel>div,
.dark-mode [id*="subprojectPanel"]>div {
  color: var(--text-dark) !important;
}

.dark-mode .subproject-row,
.dark-mode [class*="subproject-row"] {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

/* Dark Mode - Tüm butonlar için genel override */
.dark-mode button:not(.plan-btn):not([style*="background: #10b981"]):not([style*="background:#10b981"]):not([style*="background: #3b82f6"]):not([style*="background:#3b82f6"]):not([style*="background: #dc2626"]):not([style*="background:#dc2626"]):not([style*="background: #16a34a"]):not([style*="background:#16a34a"]):not([style*="background: #6366f1"]):not([style*="background:#6366f1"]):not([style*="background: #0f172a"]):not([style*="background:#0f172a"]) {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode button:hover:not(.plan-btn):not([style*="background: #10b981"]):not([style*="background:#10b981"]):not([style*="background: #3b82f6"]):not([style*="background:#3b82f6"]):not([style*="background: #dc2626"]):not([style*="background:#dc2626"]):not([style*="background: #16a34a"]):not([style*="background:#16a34a"]):not([style*="background: #6366f1"]):not([style*="background:#6366f1"]):not([style*="background: #0f172a"]):not([style*="background:#0f172a"]) {
  background: var(--border-dark) !important;
}

/* Dark Mode - Plan sayfası butonları (özel renkli butonlar hariç) */
.dark-mode [style*="background: #f1f5f9"],
.dark-mode [style*="background:#f1f5f9"] {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode [style*="background: #f1f5f9"]:hover,
.dark-mode [style*="background:#f1f5f9"]:hover {
  background: var(--border-dark) !important;
}

/* Dark Mode - Link butonlar (a.btn) */
.dark-mode a.btn:not(.plan-btn) {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode a.btn:not(.plan-btn):hover {
  background: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode a.btn:not(.plan-btn)[style*="background: #f1f5f9"],
.dark-mode a.btn:not(.plan-btn)[style*="background:#f1f5f9"] {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode a.btn:not(.plan-btn)[style*="background: #f1f5f9"]:hover,
.dark-mode a.btn:not(.plan-btn)[style*="background:#f1f5f9"]:hover {
  background: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Proje Düzenle Sayfası */
.dark-mode section.card[style*="padding"] {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode section.card[style*="padding"] h2 {
  color: var(--text-dark) !important;
}

.dark-mode section.card[style*="padding"] input[style*="background: var(--card)"],
.dark-mode section.card[style*="padding"] select[style*="background: var(--card)"] {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode section.card[style*="padding"] input[style*="background: var(--card)"]::placeholder,
.dark-mode section.card[style*="padding"] select[style*="background: var(--card)"]::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.6 !important;
}

.dark-mode div[style*="background: var(--bg)"][style*="border: 1px solid var(--line)"] {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode div[style*="background: var(--bg)"][style*="border: 1px solid var(--line)"] input,
.dark-mode div[style*="background: var(--bg)"][style*="border: 1px solid var(--line)"] select {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode div[style*="background: var(--bg)"][style*="border: 1px solid var(--line)"] .hint {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-secondary-dark) !important;
}

.dark-mode div[style*="background: var(--bg)"][style*="border: 1px solid var(--line)"] .hint strong {
  color: var(--text-dark) !important;
}

.dark-mode #subprojects-table table.simple thead th {
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojects-table table.simple tbody tr {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojects-table table.simple tbody tr:hover {
  background: var(--bg-dark) !important;
}

.dark-mode #subprojects-table table.simple tbody td {
  color: var(--text-secondary-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojects-table table.simple tbody td strong {
  color: var(--text-dark) !important;
}

.dark-mode #subprojects-table table.simple tbody tr.edit-row {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojects-table table.simple tbody tr.edit-row input {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojects-table button[style*="background: var(--card)"] {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode #subprojects-table button[style*="background: var(--card)"]:hover {
  background: var(--bg-dark) !important;
}

.dark-mode #subprojects-table .btn.danger {
  background: var(--status-danger) !important;
  color: var(--text-inverted) !important;
  border-color: var(--status-danger) !important;
}

.dark-mode #subprojects-table .btn.danger:hover {
  background: var(--status-danger-text) !important;
  border-color: var(--status-danger-text) !important;
}

/* Dark Mode - Proje Seçim Alanı (Project Select) */
.dark-mode .project-select-trigger {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .project-select-dropdown {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .project-search-input {
  background: var(--card-dark) !important;
  color: var(--text-dark) !important;
  border-bottom-color: var(--border-dark) !important;
}

.dark-mode .project-search-input::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.6 !important;
}

.dark-mode .project-option {
  color: var(--text-dark) !important;
  border-bottom-color: var(--border-dark) !important;
}

.dark-mode .project-option:hover {
  background: var(--bg-dark) !important;
}

/* Seçili satır vurgusu */
tr.planRow.selectedRow {
  background-color: #dbeafe !important;
  box-shadow: 0 0 0 3px #3b82f6 !important;
  border-left: 4px solid #3b82f6 !important;
  position: relative;
  z-index: 1;
}

tr.planRow.selectedRow td {
  background-color: #dbeafe !important;
}

.dark-mode tr.planRow.selectedRow {
  background-color: #1e3a5f !important;
  box-shadow: 0 0 0 3px #60a5fa !important;
  border-left: 4px solid #60a5fa !important;
}

.dark-mode tr.planRow.selectedRow td {
  background-color: #1e3a5f !important;
}

/* Dark Mode - Form submit butonları */
.dark-mode form button[type="submit"],
.dark-mode form button.btn[type="submit"] {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-inverted) !important;
}

.dark-mode form button[type="submit"]:hover,
.dark-mode form button.btn[type="submit"]:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Dark Mode - Buton içindeki SVG iconlar */
.dark-mode button svg,
.dark-mode a.btn svg {
  color: var(--text-dark) !important;
}

.dark-mode button svg path,
.dark-mode button svg circle,
.dark-mode button svg line,
.dark-mode a.btn svg path,
.dark-mode a.btn svg circle,
.dark-mode a.btn svg line {
  stroke: var(--text-dark) !important;
  fill: var(--text-dark) !important;
}

/* Dark Mode - Secondary butonlar */
.dark-mode .btn.secondary {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .btn.secondary:hover {
  background: var(--border-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Ghost butonlar */
.dark-mode .btn.ghost {
  background: transparent !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .btn.ghost:hover {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - İş Detayı Modal */
.dark-mode .cellModalCard {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .cellModalCard h3,
.dark-mode .cellModalCard .attach-indicator {
  color: var(--text-dark) !important;
}

.dark-mode .cellModalCard .rowline {
  border-bottom-color: var(--border-dark) !important;
  background: var(--card-dark) !important;
}

.dark-mode .cellModalCard button[onclick="saveCell()"] {
  background: var(--text-dark) !important;
  color: var(--bg-dark) !important;
}

.dark-mode .cellModalCard button[onclick="closeCellModal()"] {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .cellModalCard button[onclick="closeCellModal()"]:hover {
  background: var(--border-dark) !important;
}

.dark-mode .cellModalCard button[onclick="clearCell()"] {
  background: var(--status-danger-text) !important;
  color: white !important;
}

.dark-mode #editorInfo {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-secondary-dark) !important;
}

.dark-mode #mTeamName {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #vehicleToggleButton {
  background: var(--line-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode #vehicleToggleButton:hover {
  background: var(--border-dark) !important;
}

.dark-mode #vehicleHint,
.dark-mode #teamVehicleHint {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .hint {
  color: var(--text-secondary-dark) !important;
}

/* Dark Mode - Attach Blocks */
.dark-mode .attach-block label {
  color: var(--text-dark) !important;
}

.dark-mode .dropzone {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .dropzone-hint {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .attach-title {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .attach-list {
  background: var(--bg-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* Dark Mode - Personnel Panel */
.dark-mode .personnelPanel {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
}

.dark-mode .personnelPanel>div:first-child>div:first-child {
  color: var(--text-dark) !important;
}

/* Dark Mode - Cell Modal Card - Genel Elementler */
.dark-mode .cellModalCard label {
  color: var(--text-dark) !important;
}

.dark-mode .cellModalCard input,
.dark-mode .cellModalCard select,
.dark-mode .cellModalCard textarea {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

.dark-mode .cellModalCard input::placeholder,
.dark-mode .cellModalCard textarea::placeholder {
  color: var(--text-secondary-dark) !important;
  opacity: 0.6 !important;
}

.dark-mode .cellModalCard .hint {
  color: var(--text-secondary-dark) !important;
}

.dark-mode .cellModalCard .cellFormStack label {
  color: var(--text-dark) !important;
}

.dark-mode .cellModalCard .cellFormStack input,
.dark-mode .cellModalCard .cellFormStack select,
.dark-mode .cellModalCard .cellFormStack textarea {
  background: var(--card-dark) !important;
  border-color: var(--border-dark) !important;
  color: var(--text-dark) !important;
}

/* ============================================
   REALTIME FEATURES - GERÇEK ZAMANLI ÖZELLİKLER
   ============================================ */

/* Hücre Kilitleme Göstergesi */
.cell.is-locked {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.cell.is-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(100, 116, 139, 0.1);
  pointer-events: none;
  border-radius: 4px;
}

.lock-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 4px;
  padding: 2px 4px;
  z-index: 10;
  animation: pulse 2s infinite;
}

.editing-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  background: #dbeafe;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  padding: 2px 4px;
  z-index: 10;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Başkası Düzenliyor Göstergesi */
.cell.is-editing-by-other {
  outline: 2px dashed #3b82f6;
  outline-offset: -2px;
}

/* İptal Edilen İşler */
.cell.is-cancelled,
.planRow.is-cancelled .cell {
  background: #ffcccc !important;
  position: relative;
}

.cell.is-cancelled .cell-time,
.cell.is-cancelled .cell-note,
.cell.is-cancelled .cell-people {
  text-decoration: line-through;
  color: #9ca3af !important;
}

.cell.is-cancelled::before {
  content: 'İPTAL';
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 5;
}

/* Mesai Göstergesi */
.overtime-indicator {
  position: absolute;
  top: 4px;
  right: 22px;
  font-size: 11px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.overtime-indicator:hover {
  transform: scale(1.2);
}

/* Animasyonlar */
.fade-out-animation {
  animation: fadeOut 0.3s ease forwards;
}

.fade-in-animation {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hücre Güncellenme Vurgusu */
.cell.highlight-updated {
  animation: highlightUpdate 2s ease;
}

@keyframes highlightUpdate {
  0% {
    background-color: #dbeafe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  }

  100% {
    background-color: inherit;
    box-shadow: none;
  }
}

.cell.highlight-cancelled {
  animation: highlightCancel 2s ease;
}

@keyframes highlightCancel {
  0% {
    background-color: #fee2e2;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
  }

  100% {
    background-color: #ffcccc;
    box-shadow: none;
  }
}

.cell.highlight-restored {
  animation: highlightRestore 2s ease;
}

@keyframes highlightRestore {
  0% {
    background-color: #d1fae5;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
  }

  100% {
    background-color: inherit;
    box-shadow: none;
  }
}

.cell.highlight-fade-out {
  animation: fadeOutCell 0.5s ease forwards;
}

.cell.highlight-fade-in {
  animation: fadeInCell 0.5s ease forwards;
}

@keyframes fadeOutCell {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.3;
  }
}

@keyframes fadeInCell {
  from {
    opacity: 0.3;
    background: #d1fae5;
  }

  to {
    opacity: 1;
    background: inherit;
  }
}

/* Tam Ekran Modu */
.fullscreen-mode {
  overflow: hidden;
}

.fullscreen-mode .topbar,
.fullscreen-mode .action-bar,
.fullscreen-mode #subprojectPanel {
  display: none !important;
}

.fullscreen-mode .tablewrap {
  max-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
}

.fullscreen-mode .gridPlan {
  margin: 0 !important;
  padding: 0 !important;
}


/* Fullscreen mode için jobTableWrapper stilleri */
.jobTableWrapper:fullscreen,
.tablewrap:fullscreen,
#gridPlanContainer:fullscreen {
  max-height: 100vh !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: auto !important;
  background: var(--card, #fff) !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 16px !important;
  margin: 0 !important;
}

.jobTableWrapper:fullscreen table.plan,
.tablewrap:fullscreen table.plan,
#gridPlanContainer:fullscreen table.plan {
  width: 100% !important;
  min-width: auto !important;
}

/* Push-to-Talk Buton */
.ptt-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ptt-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

.ptt-button.recording {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  animation: recording-pulse 1s infinite;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

@keyframes recording-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
  }
}

/* Toast Bildirimleri */
.realtime-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 320px;
}

.realtime-toast-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.realtime-toast-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.realtime-toast-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.realtime-toast-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Ayarlar Modal */
#settingsModal .modalCard,
#overtimeModal .modalCard,
#cancelModal .modalCard,
#moveModal .modalCard {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
  padding: 24px;
}

/* Dark Mode için Modal */
.dark-mode #settingsModal .modalCard,
.dark-mode #overtimeModal .modalCard,
.dark-mode #cancelModal .modalCard,
.dark-mode #moveModal .modalCard {
  background: var(--card-dark);
  color: var(--text-dark);
}

.dark-mode #settingsModal input,
.dark-mode #settingsModal select,
.dark-mode #overtimeModal input,
.dark-mode #overtimeModal select,
.dark-mode #overtimeModal textarea {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

/* Ses Mesajı Oynatıcı */
.voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  max-width: 280px;
}

.voice-player-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0f172a;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.voice-player-waveform {
  flex: 1;
  height: 24px;
  background: linear-gradient(90deg,
      transparent 0%,
      #3b82f6 10%,
      #3b82f6 20%,
      transparent 30%,
      #3b82f6 40%,
      #3b82f6 50%,
      transparent 60%,
      #3b82f6 70%,
      #3b82f6 80%,
      transparent 90%);
  background-size: 200% 100%;
  border-radius: 4px;
  opacity: 0.3;
}

.voice-player.playing .voice-player-waveform {
  animation: waveform 1s linear infinite;
  opacity: 1;
}

@keyframes waveform {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0% 0;
  }
}

.voice-player-duration {
  font-size: 11px;
  color: #64748b;
  min-width: 40px;
  text-align: right;
}

/* Sürükle-bırak taşıma */
.cell.drag-over {
  outline: 2px dashed #10b981;
  outline-offset: -2px;
  background: #d1fae5 !important;
}

.cell.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* Aksiyon butonları - hücre içi */
.cell-actions {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: none;
  gap: 4px;
}

.cell:hover .cell-actions {
  display: flex;
}

.cell-action-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.cell-action-btn.cancel {
  background: #fee2e2;
  color: #dc2626;
}

.cell-action-btn.cancel:hover {
  background: #fecaca;
}

.cell-action-btn.move {
  background: #dbeafe;
  color: #2563eb;
}

.cell-action-btn.move:hover {
  background: #bfdbfe;
}

.cell-action-btn.overtime {
  background: #fef3c7;
  color: #d97706;
}

.cell-action-btn.overtime:hover {
  background: #fde68a;
}

/* ============================================
   PTT (BAS-KONUŞ) BUTTON STYLES
   ============================================ */

#pttButton {
  position: relative;
  overflow: hidden;
}

#pttButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

#pttButton:active,
#pttButton.recording {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  transform: scale(0.98);
  animation: pttPulse 0.8s infinite;
}

@keyframes pttPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* PTT Gösterge Stilleri */
.ptt-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 24px 48px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 600;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ptt-indicator::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #ef4444;
  border-radius: 50%;
  animation: recordBlink 0.6s ease-in-out infinite;
}

@keyframes recordBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
}

/* ============================================
   TAILWIND SHIM (Dark Mode Compat)
   ============================================ */
html.dark-mode .bg-white {
  background-color: var(--card) !important;
}

html.dark-mode .bg-slate-50 {
  background-color: var(--bg) !important;
}

html.dark-mode .bg-slate-100 {
  background-color: var(--line-light) !important;
}

html.dark-mode .bg-slate-200 {
  background-color: var(--line) !important;
}

html.dark-mode .border-slate-100 {
  border-color: var(--line-light) !important;
}

html.dark-mode .border-slate-200 {
  border-color: var(--line) !important;
}

html.dark-mode .text-slate-400 {
  color: var(--muted) !important;
}

html.dark-mode .text-slate-500 {
  color: var(--text-secondary) !important;
}

html.dark-mode .text-slate-600 {
  color: var(--text) !important;
}

html.dark-mode .text-slate-800 {
  color: var(--text) !important;
}

html.dark-mode .text-slate-900 {
  color: var(--text) !important;
}

/* Invert Leaflet Map Tiles in Dark Mode */
html.dark-mode .leaflet-tile-pane {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

html.dark-mode .leaflet-container {
  background: var(--bg);
}

/* Ensure controls are visible */
html.dark-mode .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #ccc !important;
}

html.dark-mode .leaflet-control-attribution a {
  color: var(--text-inverted) !important;
}


/* ============================================
   PROJECT ROW COLORING
   ============================================ */
/* Default (Light Mode) */
tr.planRow td.st.region {
  background-color: var(--project-color, #f9fafb) !important;
  color: #0f172a !important;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

tr.planRow td.st.proj {
  background-color: var(--project-color, #f9fafb) !important;
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

tr.planRow td.st.resp {
  background-color: var(--project-color, #f9fafb) !important;
  color: var(--text);
  text-align: center !important;
  vertical-align: middle !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Specific text colors for better contrast */
tr.planRow td.st.proj .pcode {
  color: #0f172a !important;
}

tr.planRow td.st.proj .pname {
  color: #334155 !important;
}

tr.planRow td.st.resp .respText {
  color: #334155 !important;
  font-weight: 600;
}

/* Dark Mode Overrides */
html.dark-mode tr.planRow td.st.region {
  background-color: var(--project-color-dark, #1e293b) !important;
  color: #f1f5f9 !important;
}

html.dark-mode tr.planRow td.st.proj {
  background-color: var(--project-color-dark, #1e293b) !important;
  color: #e2e8f0 !important;
}

html.dark-mode tr.planRow td.st.resp {
  background-color: var(--project-color-dark, #1e293b) !important;
  color: #e2e8f0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* ============================================
   TEAM TOOLTIP STYLES
   ============================================ */

.team-tooltip-trigger {
  position: relative;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.team-tooltip-trigger::after {
  content: "👥";
  font-size: 10px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.team-tooltip-trigger:hover::after {
  opacity: 1;
}

.team-tooltip {
  position: absolute;
  z-index: 9999;
  min-width: 180px;
  max-width: 280px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  box-shadow:
    0 4px 20px -4px rgba(0, 0, 0, 0.15),
    0 8px 32px -8px rgba(59, 130, 246, 0.15);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.team-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.team-tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.team-tooltip-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 6px;
  color: white;
  font-size: 14px;
}

.team-tooltip-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.team-tooltip-count {
  font-size: 11px;
  color: #64748b;
  margin-left: auto;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}

.team-tooltip-members {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-tooltip-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: #334155;
  font-weight: 500;
}

.team-tooltip-member::before {
  content: "";
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.team-tooltip-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  color: #64748b;
  font-size: 12px;
}

.team-tooltip-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: teamTooltipSpin 0.6s linear infinite;
}

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

/* Dark Mode for Team Tooltip */
html.dark-mode .team-tooltip {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow:
    0 4px 20px -4px rgba(0, 0, 0, 0.5),
    0 8px 32px -8px rgba(99, 102, 241, 0.2);
}

html.dark-mode .team-tooltip-header {
  border-bottom-color: rgba(99, 102, 241, 0.2);
}

html.dark-mode .team-tooltip-title {
  color: #f1f5f9;
}

html.dark-mode .team-tooltip-count {
  color: #94a3b8;
  background: #334155;
}

html.dark-mode .team-tooltip-member {
  color: #e2e8f0;
}

html.dark-mode .team-tooltip-loading {
  color: #94a3b8;
}

html.dark-mode .team-tooltip-loading::before {
  border-color: #475569;
  border-top-color: #6366f1;
}

/* Team Name Input with Tooltip Trigger */
#mTeamName.team-tooltip-target {
  cursor: help;
}

#mTeamName.team-tooltip-target:not(:placeholder-shown) {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #86efac;
}

html.dark-mode #mTeamName.team-tooltip-target:not(:placeholder-shown) {
  background: linear-gradient(135deg, rgba(6, 95, 70, 0.3), rgba(6, 95, 70, 0.4));
  border-color: #047857;
}

/* ============================================
   MAP PAGE - TEAM TOOLTIP POPUP
   ============================================ */

.map-team-popup-members {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.map-team-popup-members-title {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.map-team-popup-members-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-team-popup-member {
  font-size: 12px;
  color: var(--text);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-team-popup-member::before {
  content: "•";
  color: #10b981;
  font-weight: bold;
}