/* ==========================================================================
   PT WPN ERP - Native Vanilla CSS Design System (No Tailwind Dependency)
   ========================================================================== */

:root {
  /* Color Tokens */
  --wpn-orange: #EA580C;
  --wpn-orange-light: #FFF7ED;
  --wpn-orange-border: #FFEDD5;
  --wpn-orange-dark: #C2410C;
  
  --wpn-blue: #2563EB;
  --wpn-blue-light: #EFF6FF;
  --wpn-blue-border: #DBEAFE;
  
  --wpn-emerald: #059669;
  --wpn-emerald-light: #ECFDF5;
  --wpn-emerald-border: #A7F3D0;
  
  --wpn-red: #EF4444;
  --wpn-red-light: #FEF2F2;
  --wpn-red-border: #FCA5A5;
  
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  
  /* Shadows & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
}

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

body {
  font-family: var(--font-sans);
  background-color: #F8FAFC;
  color: var(--slate-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
}

/* Layout Core */
.app-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--slate-50);
}

.sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  transition: transform 0.3s ease;
}

.main-content {
  margin-left: 260px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: calc(100% - 260px);
}

.topbar {
  height: 70px;
  background: #ffffff;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.page-body {
  padding: 28px;
  flex: 1;
}

/* Cards & Grid Containers */
.card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-100);
}

.grid-cols-1 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .main-content { margin-left: 0; width: 100%; }
  .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* Typography & Headings */
h1, h2, h3, .heading-font {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--slate-900);
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--wpn-orange);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--wpn-orange-dark);
}

.btn-secondary {
  background-color: #ffffff;
  color: var(--slate-700);
  border-color: var(--slate-200);
}

.btn-secondary:hover {
  background-color: var(--slate-50);
  border-color: var(--slate-300);
}

.btn-emerald {
  background-color: var(--wpn-emerald);
  color: #ffffff;
}

.btn-emerald:hover {
  background-color: #047857;
}

.btn-danger {
  background-color: var(--wpn-red);
  color: #ffffff;
}

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

/* Forms & Input Fields */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  background-color: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--slate-900);
  outline: none;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  border-color: var(--wpn-orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

/* Tables & Badges */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table-custom {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table-custom th {
  background-color: var(--slate-50);
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 800;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--slate-200);
}

.table-custom td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-100);
  font-size: 13.5px;
  color: var(--slate-800);
}

.table-custom tr:hover td {
  background-color: var(--slate-50);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
}

.badge-success { background-color: var(--wpn-emerald-light); color: var(--wpn-emerald); border: 1px solid var(--wpn-emerald-border); }
.badge-warning { background-color: var(--wpn-orange-light); color: var(--wpn-orange-dark); border: 1px solid var(--wpn-orange-border); }
.badge-danger { background-color: var(--wpn-red-light); color: var(--wpn-red); border: 1px solid var(--wpn-red-border); }
.badge-info { background-color: var(--wpn-blue-light); color: var(--wpn-blue); border: 1px solid var(--wpn-blue-border); }

/* Utility Helper Classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.text-muted { color: var(--slate-500); }
.text-orange { color: var(--wpn-orange); }
.text-emerald { color: var(--wpn-emerald); }
.text-blue { color: var(--wpn-blue); }