@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

/* ==========================================================================
   InvenTriage — Enterprise ITAM & ITSM Design System Stylesheet
   High-Craft Corporate Light Theme (Linear / Stripe / ServiceNow Next UI)
   Multi-Tier Enterprise Typography & Visual Hierarchy
   ========================================================================== */

:root {
  /* Design System Palette */
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --border-hairline: #E2E8F0;
  --border-strong: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --accent-primary: #2563EB;
  --accent-primary-hover: #1D4ED8;
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;

  /* Multi-Tier Enterprise Typography System */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-metric: 'Space Grotesk', 'Outfit', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   1. Typography System & Layered Visual Hierarchy
   ========================================================================== */

/* Layer 1: Body Copy, Inputs, Tables & Descriptions (Maximum Legibility) */
body,
p,
td,
input,
select,
textarea,
button {
  font-family: var(--font-sans);
}

/* Layer 2: Display Headings, Navigation & Table Headers (Prestigious Corporate Identity) */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.sidebar-brand,
thead th,
.card-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

thead th {
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Layer 3: High-Impact Numeric Metrics & KPI Values (Data-Dense & Tabular) */
.font-metric,
.metric-value,
#kpiTotalAssets,
#kpiOpenTickets,
#kpiSlaCompliance,
#kpiLicenseSeatsUsed,
#kpiLicenseSeatsTotal,
#kpiMttrValue,
#kpiAiTriagedRatio {
  font-family: var(--font-metric) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Layer 4: System Engineering, Hardware Asset Tags, IP/MAC & Serial Data (Monospace) */
.font-mono,
.tech-code,
code,
pre,
kbd,
samp {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. Institutional & Utility Typography Classes
   ========================================================================== */

/* Sivas Cumhuriyet Üniversitesi Bitirme Projesi & Corporate Badges */
.heading-institutional {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Reusable Big Metric Value */
.metric-value {
  font-family: var(--font-metric) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1;
}

/* Technical Asset Codes, Barcodes, Network IP/MAC & UUIDs */
.tech-code {
  font-family: var(--font-mono) !important;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  background-color: #F1F5F9;
  color: #334155;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid #E2E8F0;
}

/* Academic & Status Pill Badges */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   3. Enterprise UI Components & Layout Enhancements
   ========================================================================== */

/* Custom Sleek Enterprise Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Enterprise Crisp Panels (maintains .glass-panel class compatibility) */
.glass-panel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
}

.glass-panel-hover:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

/* Enterprise Form Controls */
.glass-input {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.glass-input::placeholder {
  color: #94A3B8;
}
.glass-input:focus {
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

/* Sidebar Navigation */
.nav-tab-btn {
  color: #475569;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
.nav-tab-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}
.nav-tab-btn.active {
  background: #EFF6FF;
  color: #1D4ED8;
  border-left-color: #2563EB;
  font-weight: 600;
}

/* Subtle Enterprise Status Accents (Replaces AI-slop neon pulses) */
.sla-breached-pulse {
  border-left: 3px solid #DC2626 !important;
}

.sla-warning-pulse {
  border-left: 3px solid #D97706 !important;
}

.ai-engine-glow {
  border-left: 3px solid #2563EB !important;
}

/* Kanban Board Styling */
.kanban-col {
  min-height: calc(100vh - 250px);
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.kanban-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  cursor: grab;
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card:hover {
  border-color: #94A3B8;
  box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.08);
}

.kanban-dropzone.drag-over {
  background: #EFF6FF;
  border: 1px dashed #2563EB;
}

/* Slide-Over Inspector Drawer */
#ticketDrawer {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#ticketDrawer.drawer-open {
  transform: translateX(0);
}
#drawerBackdrop {
  transition: opacity 0.2s ease;
}

/* Modal Animations */
@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-content-animated {
  animation: modalScaleIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Toast Notifications */
@keyframes toastSlideIn {
  from {
    transform: translateX(105%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.toast-item {
  animation: toastSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Line Clamp Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}