@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root, [data-theme="light"] {
  --pp-bg: #f5f8f6;
  --pp-surface: rgba(255,255,255,0.9);
  --pp-primary: #28a99e;
  --pp-primary-dark: #025043;
  --pp-accent: #EF9623;
  --pp-yellow: #FFD302;
  --pp-green: #4AAB48;
  --pp-text: #111;
  --pp-text-muted: #888;
  --pp-border: rgba(0,0,0,0.06);
  --pp-shadow: 0 2px 16px rgba(0,0,0,0.04);
  --pp-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --pp-sidebar-bg: #fff;
  --pp-input-bg: #f9fbfa;
}

[data-theme="dark"] {
  --pp-bg: #0d1f1a;
  --pp-surface: rgba(18,35,30,0.9);
  --pp-primary: #28a99e;
  --pp-primary-dark: #025043;
  --pp-accent: #EF9623;
  --pp-yellow: #FFD302;
  --pp-green: #4AAB48;
  --pp-text: #eef2f0;
  --pp-text-muted: #6b7d75;
  --pp-border: rgba(255,255,255,0.05);
  --pp-shadow: 0 2px 16px rgba(0,0,0,0.15);
  --pp-shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --pp-sidebar-bg: #111f1a;
  --pp-input-bg: rgba(255,255,255,0.04);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { overflow-x:hidden; font-family:'Plus Jakarta Sans',Arial,sans-serif; background:var(--pp-bg); color:var(--pp-text); min-height:100vh; -webkit-font-smoothing:antialiased; }

/* === TOP BAR === */
.pp-topbar {
  position:fixed; top:0; left:0; right:0; z-index:200; height:56px;
  background:var(--pp-surface); /* HTG_LIGHT: backdrop-filter disabled */ /* HTG_LIGHT: backdrop-filter disabled */
  border-bottom:1px solid var(--pp-border); padding:0 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.pp-topbar-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:var(--pp-text); }
.pp-topbar-logo img { height:28px; width:auto; object-fit:contain; }
.pp-topbar-logo span { font-weight:700; font-size:0.9rem; }
.pp-topbar-right { display:flex; align-items:center; gap:0.6rem; }
.pp-theme-btn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--pp-border);
  background:var(--pp-input-bg); cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.pp-theme-btn:hover { border-color:var(--pp-primary); }
.pp-hamburger {
  width:36px; height:36px; border-radius:8px; border:1px solid var(--pp-border);
  background:var(--pp-input-bg); cursor:pointer; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px;
}
.pp-hamburger span { display:block; width:18px; height:2px; background:var(--pp-text); border-radius:1px; transition:all 0.2s; }
.pp-user-menu { display:flex; align-items:center; gap:0.5rem; }
.pp-user-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--pp-primary),var(--pp-accent)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.8rem; }
.pp-user-name { font-weight:600; font-size:0.8rem; display:none; }
.pp-btn--sm { padding:0.4rem 0.8rem; font-size:0.75rem; border-radius:16px; font-weight:600; text-decoration:none; }
.pp-btn--outline { background:transparent; border:2px solid var(--pp-primary); color:var(--pp-primary); }
.pp-btn--outline:hover { background:var(--pp-primary); color:#fff; }

/* === SIDEBAR === */
.pp-layout { display:flex; padding-top:56px; min-height:100vh; }
.pp-sidebar {
  width:240px; background:var(--pp-sidebar-bg); border-right:1px solid var(--pp-border);
  padding:1rem 0.75rem; position:fixed; top:56px; left:0; bottom:0; z-index:150;
  overflow-y:auto; transition:transform 0.3s ease;
}
.pp-sidebar-nav { display:flex; flex-direction:column; gap:0.15rem; }
.pp-nav-link {
  display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.75rem; border-radius:10px;
  text-decoration:none; color:var(--pp-text-muted); font-size:0.82rem; font-weight:500;
  transition:all 0.2s;
}
.pp-nav-link:hover { background:rgba(40,169,158,0.1); color:var(--pp-text); }
.pp-nav-link.active { background:linear-gradient(135deg,var(--pp-primary),var(--pp-primary-dark)); color:#fff; }
.pp-nav-icon { width:18px; height:18px; flex-shrink:0; }

/* Sidebar overlay for mobile */
.pp-sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:140; }

/* === MAIN === */
.pp-main { flex:1; margin-left:240px; padding:1.5rem; min-height:calc(100vh - 56px); }
.pp-page-head { margin-bottom:1.5rem; }
.pp-page-head h1 { font-size:1.4rem; font-weight:800; }
.pp-page-head p { color:var(--pp-text-muted); font-size:0.85rem; margin-top:0.2rem; }

/* === STATS - Colorful cards === */
.pp-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; }
.pp-stat-card {
  border-radius:16px; padding:1.25rem; color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--pp-shadow); transition:all 0.3s;
}
.pp-stat-card:active { transform:scale(0.97); }
.pp-stat-card:nth-child(1) { background:linear-gradient(135deg, #28a99e, #025043); }
.pp-stat-card:nth-child(2) { background:linear-gradient(135deg, #4AAB48, #2d7a2a); }
.pp-stat-card:nth-child(3) { background:linear-gradient(135deg, #EF9623, #c0392b); }
.pp-stat-card:nth-child(4) { background:linear-gradient(135deg, #FFD302, #e6a800); color:#1a1a1a; }
.pp-stat-card:nth-child(4) .pp-stat-label { color:#5a4a00; }
.pp-stat-value { font-size:2rem; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.pp-stat-label { font-size:0.75rem; opacity:0.85; margin-top:0.3rem; font-weight:500; }
.pp-stat-icon { position:absolute; top:10px; right:10px; font-size:1.5rem; opacity:0.3; }

/* === PANELS === */
.pp-grid-2 { display:grid; grid-template-columns:1fr; gap:0.75rem; }
.pp-panel {
  background:var(--pp-surface); /* HTG_LIGHT: backdrop-filter disabled */ /* HTG_LIGHT: backdrop-filter disabled */
  border:1px solid var(--pp-border); border-radius:14px; overflow:hidden; box-shadow:var(--pp-shadow);
}
.pp-panel-head { padding:1rem 1.25rem; border-bottom:1px solid var(--pp-border); }
.pp-panel-head h2 { font-size:0.9rem; font-weight:700; }
.pp-panel-body { padding:1rem 1.25rem; }

.pp-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.pp-table th { text-align:left; padding:0.5rem 0.3rem; color:var(--pp-text-muted); font-weight:600; font-size:0.68rem; text-transform:uppercase; border-bottom:2px solid var(--pp-border); }
.pp-table td { padding:0.6rem 0.3rem; border-bottom:1px solid var(--pp-border); }
.pp-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:12px; font-size:0.65rem; font-weight:600; text-transform:uppercase; }
.pp-badge--ok { background:rgba(74,171,72,0.15); color:#4AAB48; }
.pp-badge--warn { background:rgba(239,150,35,0.15); color:#EF9623; }
.pp-badge--info { background:rgba(40,169,158,0.15); color:#28a99e; }

.pp-activity-list { display:flex; flex-direction:column; }
.pp-activity-item { display:flex; justify-content:space-between; gap:0.5rem; padding:0.6rem 0; border-bottom:1px solid var(--pp-border); font-size:0.8rem; }
.pp-activity-item:last-child { border-bottom:none; }

/* === LOGIN === */
.pp-login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; position:relative; overflow:hidden; padding:1rem; }
.pp-login-bg { position:absolute; inset:0; background:linear-gradient(150deg, #025043 0%, #0f2a1e 30%, #EF9623 70%, #FFD302 100%); }
.pp-login-bg::before { content:''; position:absolute; top:-100px; right:-80px; width:300px; height:300px; background:radial-gradient(circle, rgba(255,211,2,0.3) 0%, transparent 60%); border-radius:50%; }
.pp-login-bg::after { content:''; position:absolute; bottom:-80px; left:-60px; width:250px; height:250px; background:radial-gradient(circle, rgba(40,169,158,0.3) 0%, transparent 60%); border-radius:50%; }
.pp-login-card {
  position:relative; z-index:1; background:rgba(255,255,255,0.12); /* HTG_LIGHT: backdrop-filter disabled */ /* HTG_LIGHT: backdrop-filter disabled */
  border:1px solid rgba(255,255,255,0.2); border-radius:24px; padding:2rem 1.5rem; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.pp-login-logo { text-align:center; margin-bottom:1.5rem; }
.pp-login-logo img { height:40px; width:auto; object-fit:contain; margin-bottom:0.5rem; }
.pp-login-logo h1 { font-size:1.3rem; font-weight:800; color:#fff; }
.pp-login-logo p { color:rgba(255,255,255,0.7); font-size:0.8rem; margin-top:0.2rem; }

.pp-field { margin-bottom:1rem; }
.pp-field label { display:block; font-size:0.72rem; font-weight:700; margin-bottom:0.3rem; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.05em; }
.pp-field input { width:100%; padding:0.7rem 0.85rem; border:1.5px solid rgba(255,255,255,0.2); border-radius:10px; background:rgba(255,255,255,0.08); color:#fff; font-size:1rem; font-family:inherit; }
.pp-field input::placeholder { color:rgba(255,255,255,0.35); }
.pp-field input:focus { outline:none; border-color:#FFD302; background:rgba(255,255,255,0.12); }

.pp-btn { display:inline-block; padding:0.7rem 1.2rem; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:0.85rem; text-decoration:none; font-family:inherit; transition:all 0.2s; }
.pp-btn--primary { background:linear-gradient(135deg, #FFD302, #EF9623); color:#1a1a1a; box-shadow:0 4px 16px rgba(255,211,2,0.3); }
.pp-btn--primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,211,2,0.4); }
.pp-btn--full { width:100%; text-align:center; display:block; }

.pp-flash { padding:0.7rem 0.85rem; border-radius:10px; margin-bottom:0.75rem; font-size:0.8rem; }
.pp-flash--error { background:rgba(231,76,60,0.15); color:#ffb8a8; border:1px solid rgba(231,76,60,0.3); }
.pp-flash--success { background:rgba(74,171,72,0.15); color:#a8e6a0; border:1px solid rgba(74,171,72,0.3); }
.pp-messages { margin-bottom:0.75rem; }
.pp-login-footer { text-align:center; margin-top:1rem; }
.pp-login-footer a { color:rgba(255,255,255,0.75); font-size:0.8rem; }

.pp-logo-light, .pp-logo-dark { display:none; }
[data-theme="light"] .pp-logo-light { display:block; }
[data-theme="dark"] .pp-logo-dark { display:block; }

/* === RESPONSIVE === */
@media (min-width:768px) {
  .pp-stats-grid { grid-template-columns:repeat(4,1fr); }
  .pp-grid-2 { grid-template-columns:1fr 1fr; }
  .pp-user-name { display:block; }
  .pp-main { padding:2rem; }
}
@media (max-width:767px) {
  .pp-hamburger { display:flex; }
  .pp-sidebar { transform:translateX(-100%); }
  .pp-sidebar.open { transform:translateX(0); }
  .pp-sidebar-overlay.active { display:block; }
  .pp-main { margin-left:0; }
  .pp-topbar-logo span { display:none; }
}


/* Light mode input visibility */
[data-theme="light"] .pp-field input,
[data-theme="light"] .pp-field select,
[data-theme="light"] .pp-field textarea {
  border-color: #c0c7c4 !important;
  background: #fff !important;
  color: #111 !important;
}
[data-theme="light"] .pp-field input::placeholder,
[data-theme="light"] .pp-field textarea::placeholder {
  color: #999 !important;
}

.pp-field input, .pp-field select, .pp-field textarea {
  width:100%; padding:0.75rem 1rem;
  border:1.5px solid #d0d5d3;
  border-radius:10px;
  background:#fff;
  color:#111;
  font-size:1rem; /* 16px — prevents iOS zoom on focus */
  font-family:inherit;
  transition:all 0.2s;
}
[data-theme="dark"] .pp-field input,
[data-theme="dark"] .pp-field select,
[data-theme="dark"] .pp-field textarea {
  border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);
  color:#eef2f0;
}
.pp-field input:focus, .pp-field select:focus, .pp-field textarea:focus {
  outline:none;
  border-color:var(--pp-primary);
  box-shadow:0 0 0 3px rgba(40,169,158,0.15);
}
.pp-field input::placeholder,
.pp-field textarea::placeholder {
  color:#aaa;
}
[data-theme="dark"] .pp-field select,
[data-theme="dark"] .pp-field textarea {
  border-color: rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #eef2f0 !important;
}

/* Assignment box - light mode gradient */
.pp-assignment-box {
  background: linear-gradient(135deg, rgba(74,171,72,0.06), rgba(239,150,35,0.06));
  border: 1px solid rgba(74,171,72,0.15);
}
[data-theme="dark"] .pp-assignment-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
/* Radio buttons */
.pp-radio { width:20px; height:20px; accent-color:#4AAB48; cursor:pointer; }

/* Light mode warm gradient background */
[data-theme="light"] body {
  background: linear-gradient(160deg, #f2f8ee 0%, #fef9f2 40%, #f5faf3 100%);
  background-attachment: fixed;
}
[data-theme="light"] .pp-sidebar {
  background: rgba(255,255,255,0.85);
  /* HTG_LIGHT: backdrop-filter disabled */
}
[data-theme="light"] .pp-panel,
[data-theme="light"] .pp-stat-card {
  border-color: rgba(74,171,72,0.12);
}
[data-theme="light"] .pp-stat-card:nth-child(odd) {
  box-shadow: 0 2px 12px rgba(74,171,72,0.08);
}
[data-theme="light"] .pp-stat-card:nth-child(even) {
  box-shadow: 0 2px 12px rgba(239,150,35,0.06);
}

/* ===== MOBILE OVERFLOW FIX ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
.pp-main {
  overflow-x: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
/* ================================ */