/* ═══════════════════════════════════════════════════════════════
   DefineX ITSM — Base CSS
   Design System: CSS Custom Properties, Dark Mode, Bento Box
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Font ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ───────────────────────────────────────────── */
/* ── Design Tokens ───────────────────────────────────────────── */
/* ── Design Tokens ───────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Colors — Dark Mode Palette */
  --bg-base:        #0d0e12;
  --bg-surface:     #13151c;
  --bg-elevated:    #1a1d27;
  --bg-card:        #1e2130;
  --bg-card-hover:  #242840;
  --bg-input:       #1a1d27;

  --border:         rgba(255,255,255,0.07);
  --border-strong:  rgba(255,255,255,0.14);

  /* DefineX Brand Palette */
  --accent:         #2554ed;
  --accent-hover:   #3b82f6;
  --accent-glow:    rgba(37,84,237,0.3);
  --purple:         #1d4ed8;
  --purple-glow:    rgba(29,78,216,0.25);

  /* Status Colors */
  --status-todo:      #94a3b8;
  --status-progress:  #3b82f6;
  --status-waiting:   #f59e0b;
  --status-done:      #22c55e;

  /* Priority Colors */
  --priority-low:      #22c55e;
  --priority-medium:   #2554ed;
  --priority-high:     #f59e0b;
  --priority-critical: #ef4444;

  /* Category Colors */
  --cat-support:     #38bdf8;
  --cat-hardware:    #f97316;
  --cat-software:    #a78bfa;
  --cat-system:      #34d399;
  --cat-cert:        #fbbf24;
  --cat-policy:      #fb7185;
  --cat-solution:    #3b82f6;
  --cat-workplace:   #4ade80;
  --cat-vendor:      #f472b6;

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #64748b;
  --text-accent:    #3b82f6;

  /* Alerts */
  --warn-yellow:    #f59e0b;
  --warn-red:       #ef4444;
  --warn-green:     #22c55e;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 24px rgba(37,84,237,0.35);

  /* Sizing */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   17px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;

  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   350ms ease;

  /* Focus Bar Height & Sidebar Width */
  --focus-bar-height: 52px;
  --sidebar-width: 220px;
}

[data-theme="light"] {
  /* Colors — DefineX Light Mode Palette */
  --bg-base:        #f8fafc;
  --bg-surface:     #ffffff;
  --bg-elevated:    #f1f5f9;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f8fafc;
  --bg-input:       #ffffff;

  --border:         #cbd5e1;
  --border-strong:  #94a3b8;

  /* DefineX Brand Palette */
  --accent:         #2554ed;
  --accent-hover:   #1d4ed8;
  --accent-glow:    rgba(37,84,237,0.18);
  --purple:         #1d4ed8;
  --purple-glow:    rgba(29,78,216,0.18);

  /* Status Colors */
  --status-todo:      #475569;
  --status-progress:  #2554ed;
  --status-waiting:   #d97706;
  --status-done:      #16a34a;

  /* Priority Colors */
  --priority-low:      #16a34a;
  --priority-medium:   #2554ed;
  --priority-high:     #d97706;
  --priority-critical: #dc2626;

  /* Category Colors */
  --cat-support:     #0284c7;
  --cat-hardware:    #ea580c;
  --cat-software:    #7c3aed;
  --cat-system:      #059669;
  --cat-cert:        #d97706;
  --cat-policy:      #e11d48;
  --cat-solution:    #2554ed;
  --cat-workplace:   #16a34a;
  --cat-vendor:      #db2777;

  /* Text */
  --text-primary:   #222222;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --text-accent:    #2554ed;

  /* Alerts */
  --warn-yellow:    #d97706;
  --warn-red:       #dc2626;
  --warn-green:     #16a34a;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-accent: 0 0 24px rgba(37,84,237,0.15);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

p { color: var(--text-secondary); }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--accent-hover); }

/* ── Buttons ─────────────────────────────────────────────────── */
button {
  font-family: var(--font-family);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}
button:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
button:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ── Universal Pill Button Styling (Devam Ediyor Style) ── */
.tab-btn, .filter-btn, [data-afilter], [data-lfilter], [data-tfilter], [data-pfilter] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 18px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important; /* Perfect Pill Shape */
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}

.tab-btn:hover, .filter-btn:hover, [data-afilter]:hover, [data-lfilter]:hover, [data-tfilter]:hover, [data-pfilter]:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.tab-btn.active, .filter-btn.active, [data-afilter].active, [data-lfilter].active, [data-tfilter].active, [data-pfilter].active {
  background: rgba(37, 84, 237, 0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(37, 84, 237, 0.15) !important;
}

[data-theme="light"] .tab-btn.active,
[data-theme="light"] .filter-btn.active,
[data-theme="light"] [data-afilter].active,
[data-theme="light"] [data-lfilter].active {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
  color: #2554ed !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 84, 237, 0.25);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px rgba(37, 84, 237, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-danger {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.25);
}
.btn-danger:hover {
  background: rgba(239,68,68,0.25);
  border-color: #ef4444;
}

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); }
.btn-icon { padding: var(--space-2); aspect-ratio: 1; }

/* ── Form Elements ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-input::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 80px; }

/* ── Table Scroll Container ──────────────────────────────────── */
.table-scroll-container {
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
}

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

.table-scroll-container thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border);
}

/* ── Bento Card ──────────────────────────────────────────────── */
.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
  
  /* Internal Scroll Özelliği */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}

.bento-card > div:not(.bento-card-header) {
  /* Başlık dışındaki div'ler uzarsa kaydırılabilir olur (özellikle listeler için) */
  flex-shrink: 0;
}

.bento-card > div:not(.bento-card-header):last-child {
  /* Genellikle listeler veya grid'ler son element olur */
  overflow-y: auto;
  flex-shrink: 1;
}

.bento-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.bento-card-clickable {
  cursor: pointer;
}
.bento-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.bento-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.bento-card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Status Badges ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.badge-todo    { background: rgba(100,116,139,0.15); color: var(--status-todo); }
.badge-progress{ background: rgba(99,102,241,0.15);  color: var(--status-progress); }
.badge-waiting { background: rgba(245,158,11,0.15);  color: var(--status-waiting); }
.badge-done    { background: rgba(34,197,94,0.15);   color: var(--status-done); }

/* ── Priority Dots ───────────────────────────────────────────── */
.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.priority-dot-low      { background: var(--priority-low); }
.priority-dot-medium   { background: var(--priority-medium); }
.priority-dot-high     { background: var(--priority-high); }
.priority-dot-critical { background: var(--priority-critical); box-shadow: 0 0 6px var(--priority-critical); }

/* ── Category Tags ───────────────────────────────────────────── */
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid;
}
.cat-support    { color: var(--cat-support);    background: rgba(56,189,248,0.1);    border-color: rgba(56,189,248,0.3); }
.cat-hardware   { color: var(--cat-hardware);   background: rgba(249,115,22,0.1);   border-color: rgba(249,115,22,0.3); }
.cat-software   { color: var(--cat-software);   background: rgba(167,139,250,0.1);  border-color: rgba(167,139,250,0.3); }
.cat-system     { color: var(--cat-system);     background: rgba(52,211,153,0.1);   border-color: rgba(52,211,153,0.3); }
.cat-cert       { color: var(--cat-cert);       background: rgba(251,191,36,0.1);   border-color: rgba(251,191,36,0.3); }
.cat-policy     { color: var(--cat-policy);     background: rgba(251,113,133,0.1);  border-color: rgba(251,113,133,0.3); }
.cat-solution   { color: var(--cat-solution);   background: rgba(129,140,248,0.1);  border-color: rgba(129,140,248,0.3); }
.cat-workplace  { color: var(--cat-workplace);  background: rgba(74,222,128,0.1);   border-color: rgba(74,222,128,0.3); }
.cat-vendor     { color: var(--cat-vendor);     background: rgba(244,114,182,0.1);  border-color: rgba(244,114,182,0.3); }

/* ── Toast Notifications ─────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  pointer-events: all;
  animation: slideInRight var(--transition-normal) ease;
  max-width: 360px;
}

.toast-success { border-left: 3px solid var(--warn-green); }
.toast-error   { border-left: 3px solid var(--warn-red); }
.toast-warning { border-left: 3px solid var(--warn-yellow); }
.toast-info    { border-left: 3px solid var(--accent); }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* ── Drawer ──────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 92vw);
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  box-shadow: var(--shadow-lg);
}

.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.drawer-title { font-size: var(--font-size-lg); font-weight: 600; }

.drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.drawer-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.drawer-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: min(440px, 90vw);
  box-shadow: var(--shadow-lg);
  transform: scale(0.95) translateY(8px);
  transition: transform var(--transition-normal);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

/* ── Utility classes ─────────────────────────────────────────── */
.flex    { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.mt-auto { margin-top: auto; }

/* ── Loading Skeleton ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
  text-align: center;
}
.empty-state-icon { font-size: 40px; opacity: 0.4; }
.empty-state-title { font-size: var(--font-size-md); font-weight: 500; color: var(--text-secondary); }
.empty-state-desc  { font-size: var(--font-size-sm); max-width: 280px; }