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

body,
input,
button {
      font-family: 'Poppins', sans-serif;
}

body {
      background: #f4f7fb;
      color: #1f3042;
      min-height: 100vh;
}

a {
      text-decoration: none;
}

/* Navbar */
/* sudah di handle navbar.css sebagai css global */

.logout-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.7);
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, color 0.2s;
      font-family: 'Poppins', sans-serif;
}

.logout-btn:hover {
      background: rgba(197, 48, 48, 0.35);
      color: #fff;
      border-color: rgba(197, 48, 48, 0.4);
}

/* Page header */
.page-header {
      background: white;
      border-bottom: 1px solid #dde3ee;
      padding: 16px 24px;
}

.page-header-content h2 {
      font-size: 17px;
      color: #1f3042;
      font-weight: 600;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 8px;
}

.page-header-content h2 i {
      color: #3f6ea0;
}

.page-header-content p {
      font-size: 13px;
      color: #6b7a90;
}

/* Main */
.stat-main {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
}

/* Summary row */
.stat-summary-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
}

.summary-card {
      background: white;
      border-radius: 14px;
      padding: 18px 16px;
      box-shadow: 0 4px 16px rgba(31, 48, 66, 0.07);
      border: 1px solid #e0e7f0;
      text-align: center;
}

.summary-card-val {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #3f6ea0;
      display: block;
      margin-bottom: 4px;
}

.summary-card-lbl {
      font-size: 11px;
      color: #9aabb8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
}

.summary-card-icon {
      font-size: 1.2rem;
      color: #c5d0e0;
      margin-bottom: 6px;
      display: block;
}

/* Charts grid */
.stat-charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
}

.stat-charts-row--2col {
      grid-template-columns: 3fr 2fr;
}

.stat-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(31, 48, 66, 0.07);
      border: 1px solid #e0e7f0;
}

.stat-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
}

.stat-card-header i {
      color: #3f6ea0;
      font-size: 14px;
}

.stat-card-header h3 {
      font-size: 14px;
      font-weight: 600;
      color: #1f3042;
      flex: 1;
}

.stat-badge {
      font-size: 11px;
      font-weight: 700;
      background: #3f6ea0;
      color: white;
      padding: 2px 10px;
      border-radius: 99px;
}

/* Produktivitas */
.productivity-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
}

.productivity-wrap canvas {
      flex: 1;
}

.prod-info {
      display: flex;
      /* flex-direction: column; */
      align-items: center;
      gap: 8px;
      min-width: 130px;
}

.prod-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
}

.prod-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
}

/* Gap list */
.gap-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.gap-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: #f8fafc;
      border-radius: 10px;
}

.gap-day {
      font-size: 12px;
      font-weight: 700;
      color: #3f6ea0;
      width: 50px;
      flex-shrink: 0;
}

.gap-bar-wrap {
      flex: 1;
      height: 8px;
      background: #e8edf5;
      border-radius: 99px;
      overflow: hidden;
}

.gap-bar {
      height: 100%;
      background: linear-gradient(90deg, #3f6ea0, #7ab8f5);
      border-radius: 99px;
}

.gap-val {
      font-size: 11px;
      color: #9aabb8;
      white-space: nowrap;
      min-width: 60px;
      text-align: right;
}

/* Table */
.matkul-table-wrap {
      overflow-x: auto;
}

.matkul-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
}

.matkul-table thead tr {
      background: #f8fafc;
}

.matkul-table th {
      padding: 10px 14px;
      text-align: left;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #9aabb8;
      border-bottom: 2px solid #e8edf5;
}

.matkul-table td {
      padding: 10px 14px;
      border-bottom: 1px solid #f0f4fa;
      color: #1f3042;
}

.matkul-table tbody tr:hover {
      background: #f8fafc;
}

.matkul-table .hari-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 99px;
      background: #eef3fb;
      color: #3f6ea0;
}

/* Responsive */
@media(max-width:1024px) {
      .stat-summary-row {
            grid-template-columns: repeat(3, 1fr);
      }

      .stat-charts-row,
      .stat-charts-row--2col {
            grid-template-columns: 1fr;
      }
}

@media(max-width:768px) {
      .stat-main {
            padding: 12px;
      }

      .stat-summary-row {
            grid-template-columns: repeat(2, 1fr);
      }

      .productivity-wrap {
            flex-direction: column;
      }
}

@media(max-width:480px) {
      .stat-summary-row {
            grid-template-columns: 1fr 1fr;
      }

      .prod-info {
            flex-direction: column;
            align-items: center;
      }
}

/* ============================================================
   FIX CHART: Matikan animasi resize/enlarge, buat chart
   langsung muncul dengan ukuran tetap (tidak bounce).
   ============================================================ */

/* Wrapper canvas harus punya tinggi eksplisit */
.stat-card canvas {
      display: block !important;
      max-width: 100% !important;
      height: 220px !important;
}

/* Matikan animasi default Chart.js yang bikin chart geser/membesar */
.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
      display: none !important;
}

/* Pastikan stat-card tidak overflow saat chart render */
.stat-card {
      overflow: hidden;
}

/* Productivity wrap: pastikan canvas tidak terlalu besar di mobile */
.productivity-wrap canvas {
      max-height: 220px !important;
}