/* Base styles and variables */
:root {
  --color-io-header: #fdedec;
  --color-io-branch: #f5b7b1;
  --color-re-header: #ebf5fb;
  --color-re-branch: #aed6f1;
  --color-ps-header: #fdf2e9;
  --color-ps-branch: #f5cba7;
  --color-mom-header: #fef9e7;
  --color-mom-branch: #f9e79f;
  
  --bg-positive: #d4efdf;
  --text-positive: #196f3d;
  --bg-negative: #f9d5d5;
  --text-negative: #b03a2e;
  --bg-neutral: #f2f3f4;
  --text-neutral: #5d6d7e;
}

body {
  font-family: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

/* Custom Table Styles matching reference image */
.sate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.675rem;
}

.sate-table th, .sate-table td {
  padding: 4px 3px;
  border: 1px solid #cbd5e1;
  text-align: center;
  line-height: 1.1;
}

/* Table Section Headers */
.header-io { background-color: #fbeee6 !important; color: #ba4a00; font-weight: bold; }
.header-re { background-color: #ebf5fb !important; color: #1f618d; font-weight: bold; }
.header-ps { background-color: #fdedec !important; color: #922b21; font-weight: bold; }
.header-mom { background-color: #fef9e7 !important; color: #7d6608; font-weight: bold; }

/* Table Rows Hierarchy */
.row-reg {
  background-color: #f8fafc;
  font-weight: 800;
  text-transform: uppercase;
}

.row-witel {
  background-color: #f1f5f9;
  font-weight: 700;
}

.row-branch {
  color: #ffffff;
  font-weight: 700;
}
.table-io .row-branch { background-color: #e67e22 !important; }
.table-re .row-branch { background-color: #2980b9 !important; }
.table-ps .row-branch { background-color: #e74c3c !important; }
.table-mom .row-branch { background-color: #d35400 !important; }

.row-wok {
  background-color: #ffffff;
  font-weight: 500;
}
.row-wok td:first-child {
  text-align: left;
  padding-left: 14px;
}

/* Conditional Formatting Heatmap Classes */
.cell-pos {
  background-color: var(--bg-positive) !important;
  color: var(--text-positive) !important;
  font-weight: 600;
}

.cell-neg {
  background-color: var(--bg-negative) !important;
  color: var(--text-negative) !important;
  font-weight: 600;
}

.cell-zero {
  background-color: #ffffff;
  color: #94a3b8;
}

/* Status Indicator Dots */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.status-dot.red { background-color: #e74c3c; }
.status-dot.yellow { background-color: #f1c40f; }
.status-dot.green { background-color: #2ecc71; }

/* Transition WOK Badge */
.wok-transisi::after {
  content: " ★";
  color: #e74c3c;
  font-weight: bold;
}

/* Gauge Chart custom styling */
.gauge-container {
  position: relative;
  width: 140px;
  height: 70px; /* Semi-circle */
  overflow: hidden;
  margin: 0 auto;
}

.gauge-svg {
  width: 140px;
  height: 140px;
}

.gauge-bg {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 16;
}

.gauge-fill {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.gauge-io-fill { stroke: #e67e22; }
.gauge-re-fill { stroke: #2980b9; }
.gauge-ps-fill { stroke: #e74c3c; }

.gauge-value {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

/* Glassmorphism panel styling */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

/* Dark mode overrides (optional and premium addition) */
body.dark-theme {
  background-color: #0f172a;
  color: #f1f5f9;
}

body.dark-theme .glass-panel {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

body.dark-theme .row-reg { background-color: #1e293b; color: #f1f5f9; }
body.dark-theme .row-witel { background-color: #334155; color: #f1f5f9; }
body.dark-theme .row-wok { background-color: #1e293b; color: #cbd5e1; }
body.dark-theme .sate-table th, body.dark-theme .sate-table td { border-color: #475569; }

/* Custom Scrollbar for side-scrolling on smaller viewports */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
}

@media (max-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }
}

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