/* ============================================================
   Tiny Seeds Library - App Stylesheet
   Ported from the original front-end prototype (index.html).
   Kept as-is per spec: 'keep the existing UI style'.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

  :root {
    --primary:#F2681B; --primary-dark:#c9510e; --primary-light:#ffd4b8; --primary-pale:#fff5ef;
    --navy:#1a2e4a; --navy-mid:#2d4a6e; --navy-light:#6b8db5; --navy-pale:#eef3fa;
    --teal:#1D9E75; --teal-light:#E1F5EE;
    --amber:#e8a020; --amber-light:#FFF3CD;
    --coral:#e05050; --coral-light:#FCEAEA;
    --purple:#7c5cdb; --purple-light:#eeebff;
    --green:#2e9e5a; --green-light:#E8F7EF;
    --gray:#64748b; --gray-light:#f1f5f9;
    --border:rgba(0,0,0,0.1); --white:#ffffff;
    --text:#1e293b; --text-muted:#64748b;
    --radius:12px; --radius-lg:18px;
    --shadow:0 2px 16px rgba(242,104,27,0.08);
    --shadow-lg:0 8px 32px rgba(242,104,27,0.15);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Nunito',sans-serif;background:var(--gray-light);color:var(--text);min-height:100vh;overflow-x:hidden}
  @keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes pop{0%{transform:scale(0.8);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
  @keyframes ndrop{from{opacity:0;transform:translateY(-20px) scale(0.9)}to{opacity:1;transform:none}}
  .animate-in{animation:fadeIn 0.35s ease forwards}
  .animate-pop{animation:pop 0.3s ease forwards}

  /* LOGIN */
  #loginScreen{min-height:100vh;background:linear-gradient(135deg,var(--navy) 0%,#2a5e9d 40%,var(--primary) 100%);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
  #loginScreen::before{content:'📚🌱🎨🌈⛰️🌊🌳';position:absolute;top:-20px;left:0;right:0;font-size:60px;letter-spacing:40px;opacity:0.06;animation:float 6s ease-in-out infinite;pointer-events:none;white-space:nowrap}
  .login-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .bubble{position:absolute;border-radius:50%;opacity:0.06;animation:float 8s ease-in-out infinite}
  .login-wrap{width:100%;max-width:440px;position:relative;z-index:1}
  .login-header{text-align:center;margin-bottom:28px}
.login-logo {
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
  animation: bounce 2s ease-in-out infinite;
  /* background, border-radius, padding, box-shadow removed */
}
.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1)); /* optional: keep or remove shadow */
}
  .login-header h2{font-family:'Fredoka One',cursive;font-size:30px;color:white;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
  .login-header p{font-size:14px;color:rgba(255,255,255,0.75);margin-top:4px}
  .login-card{background:white;border-radius:24px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.25)}
  .form-group{margin-bottom:16px}
  .form-group label{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px}
  .form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:14px;font-family:'Nunito',sans-serif;outline:none;transition:all 0.2s;background:var(--gray-light)}
  .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);background:white;box-shadow:0 0 0 4px rgba(242,104,27,0.12)}
  .btn-primary{width:100%;padding:13px;background:var(--primary);color:white;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:all 0.2s;letter-spacing:0.3px}
  .btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
  .login-info{background:var(--primary-pale);border:1.5px solid var(--primary-light);border-radius:10px;padding:12px 14px;margin-top:14px;font-size:12px;color:var(--navy);line-height:1.7}


/* Import Comic Neue */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

/* Entire website base font – Georgia */
body, button, input, select, textarea, .form-group input, .form-group select, .form-group textarea, .table-card, .sidebar-item, .stat-card .s-label, .badge, .btn-action, .btn-sm, .modal, .toast {
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* Bold Georgia for strong text */
strong, b, th, .stat-card .s-val, .btn-primary, .btn-save, .sidebar-item.active, .page-header h2 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 700;
}

/* Keep Fredoka One for cheerful headings (dashboard, group cards, etc.) */
.fredoka, .group-card .g-name, .dashboard-welcome h2, .chart-card h3, .modal h3 {
  font-family: 'Fredoka One', cursive;
}

  /* TOPBAR */
/* ========= SCHOOL-STYLE TOPBAR ========= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 68px;
  font-family: 'Nunito', sans-serif;
  color: white;

  /* orange full-width background */
  background: #F2681B;

  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px 0 24px;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.topbar-logo img {
  cursor: pointer;
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.topbar-logo h1 {
  font-family: 'Comic Neue', cursive;
  cursor: pointer;
  font-weight: 700;
  font-size: 30px;
  margin-left: 5px;
  color: white;
  line-height: 1.2;
}

.topbar-logo span {
  font-family: 'Georgia', serif;
  font-weight: 400;
  font-size: 15px;
  opacity: 0.85;
  display: block;
  margin-top: 1px;
}


/* navy overlay — right side with diagonal cut */
.topbar-user {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: #0B083E;
  clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 24px 0 60px;
  font-size: 13px;
  z-index: 1;
}

/* ---- rest is unchanged ---- */

.user-badge {
  background: #fb8122;
  border-radius: 40px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.super-badge {
  background: #6fb9c8;
}

.teacher-badge {
  background: #6EC1E4;
}

.parent-badge {
  background: #fb8122;
}

.btn-logout {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  color: white;
  border-radius: 40px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-logout:hover {
  background: rgba(255,255,255,0.15);
  border-color: white;
  transform: translateY(-1px);
}


  /* APP LAYOUT */
  #app{display:none}
  .app-body{display:flex;min-height:calc(100vh - 62px)}
  .sidebar{width:230px;background:white;border-right:1px solid var(--border);padding:16px 10px;flex-shrink:0;box-shadow:2px 0 8px rgba(0,0,0,0.04)}
  .sidebar-label{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;padding:0 12px;margin:12px 0 4px}
  .sidebar-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text);transition:all 0.15s;margin-bottom:2px;position:relative}
  .sidebar-item:hover{background:var(--primary-pale);color:var(--primary-dark)}
  .sidebar-item.active{background:var(--primary-pale);color:var(--primary)}
  .sidebar-item.active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:3px;background:var(--primary);border-radius:0 3px 3px 0}
  .sidebar-item .icon{width:22px;text-align:center;font-size:16px}
  .main-content { flex:1; padding:26px; overflow-y:auto; }
  .main-content.fade-out {opacity: 0.6;}


  /* BADGES */
  .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
  .badge-rainbow{background:#fce8f7;color:#943a6e}
  .badge-trees{background:#e8f7ef;color:#1a6e3a}
  .badge-river{background:#e3f5fc;color:#0e5a78}
  .badge-mountain{background:#fff3e0;color:#8a5000}
  .badge-pending{background:#fff8e1;color:#a07000}
  .badge-approved{background:#e8f7ef;color:#1a6e3a}
  .badge-returned{background:var(--gray-light);color:var(--gray)}
  .badge-overdue{background:var(--coral-light);color:var(--coral)}
  .badge-issued{background:#e8f7ef;color:#1a6e3a}
  .badge-teacher{background:var(--teal-light);color:var(--teal)}
  .badge-superadmin{background:var(--purple-light);color:var(--purple)}

  /* PAGE HEADER */
  .page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
  .page-header h2{font-family:'Fredoka One',cursive;font-size:24px;color:var(--navy)}
  .page-header p{font-size:13px;color:var(--text-muted);margin-top:3px}

  /* BUTTONS */
  .btn-action{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:var(--primary);color:white;border:none;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:all 0.2s}
  .btn-action:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow)}
  .btn-secondary{background:white;color:var(--navy);border:2px solid var(--border)}
  .btn-secondary:hover{background:var(--navy-pale);border-color:var(--navy-light)}

  /* STAT CARDS */
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
  .stat-card{background:white;border-radius:var(--radius-lg);padding:18px;border:1px solid var(--border);transition:all 0.2s;position:relative;overflow:hidden}
  .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .stat-card .s-label{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
  .stat-card .s-val{font-size:30px;font-weight:800;color:var(--navy);font-family:'Fredoka One',cursive}
  .stat-card .s-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
  .stat-card.orange .s-val{color:var(--primary)}
  .stat-card.teal .s-val{color:var(--teal)}
  .stat-card.amber .s-val{color:var(--amber)}
  .stat-card.coral .s-val{color:var(--coral)}
  .stat-card.purple .s-val{color:var(--purple)}

  /* TABLE */
  .table-card{background:white;border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}
  .table-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
  .search-box{display:flex;align-items:center;gap:8px;background:var(--gray-light);border:1.5px solid var(--border);border-radius:10px;padding:7px 12px;flex:1;max-width:260px;transition:all 0.2s}
  .search-box:focus-within{border-color:var(--primary);background:white}
  .search-box input{border:none;background:transparent;outline:none;font-size:13.5px;width:100%;font-family:'Nunito',sans-serif}
  .filter-group{display:flex;gap:6px;flex-wrap:wrap}
  .filter-btn{padding:5px 13px;border:1.5px solid var(--border);border-radius:20px;background:white;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);transition:all 0.15s;font-family:'Nunito',sans-serif}
  .filter-btn.active,.filter-btn:hover{background:var(--primary-pale);border-color:var(--primary-light);color:var(--primary-dark)}
  table{width:100%;border-collapse:collapse;min-width:500px}
  thead tr{background:var(--gray-light)}
  th{padding:10px 16px;font-size:11px;font-weight:800;color:var(--text-muted);text-align:left;text-transform:uppercase;letter-spacing:0.7px;white-space:nowrap}
  td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid rgba(0,0,0,0.05)}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:var(--primary-pale)}
  .table-scroll { overflow-x:auto; }
  .action-btns{display:flex;gap:5px;flex-wrap:wrap}
  .btn-sm{padding:4px 10px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid;transition:all 0.15s;white-space:nowrap;font-family:'Nunito',sans-serif}
  .btn-edit{border-color:#a7d7c5;background:var(--teal-light);color:#0e5a3e}
  .btn-edit:hover{background:var(--teal);color:white;border-color:var(--teal)}
  .btn-delete{border-color:#f7c1c1;background:var(--coral-light);color:var(--coral)}
  .btn-delete:hover{background:var(--coral);color:white;border-color:var(--coral)}
  .btn-approve{border-color:#a7d7c5;background:var(--green-light);color:var(--green)}
  .btn-approve:hover{background:var(--green);color:white}
  .btn-return{border-color:#ffd08a;background:var(--amber-light);color:#8a5000}
  .btn-return:hover{background:var(--amber);color:white}
  .btn-issue{border-color:#b8cef7;background:var(--navy-pale);color:var(--navy)}
  .btn-issue:hover{background:var(--navy);color:white}
  .btn-mail{border-color:#d4a7f7;background:var(--purple-light);color:var(--purple)}
  .btn-mail:hover{background:var(--purple);color:white}

  /* IMAGE UPLOAD UI */
  .img-upload-box { border: 2px dashed #cbd5e1; border-radius: 10px; padding: 15px; text-align: center; background: #f8fafc; cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; }
  .img-upload-box:hover { border-color: var(--primary); background: var(--primary-pale); }
  .img-upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .img-upload-box img { max-height: 100px; max-width: 100%; border-radius: 6px; margin-top: 10px; display: none; object-fit: contain; }

  /* GROUP CARDS */
  .groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
  .group-card{background:white;border-radius:var(--radius-lg);padding:20px;border:1px solid var(--border);cursor:pointer;transition:all 0.2s;text-align:center;position:relative;overflow:hidden}
  .group-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
  .group-card.rainbow::before{background:linear-gradient(90deg,#ff6b6b,#ffa500,#ffd700,#4caf50,#2196f3,#9c27b0)}
  .group-card.trees::before{background:linear-gradient(90deg,#2e9e5a,#4caf50)}
  .group-card.river::before{background:linear-gradient(90deg,#1976d2,#2196f3)}
  .group-card.mountain::before{background:linear-gradient(90deg,#e8a020,#ff9800)}
  .group-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
  .group-card .g-icon{font-size:36px;margin-bottom:10px;display:block}
  .group-card .g-name{font-family:'Fredoka One',cursive;font-size:18px;color:var(--navy)}
  .group-card .g-teacher{font-size:12px;color:var(--text-muted);margin-top:3px}
  .group-card .g-count{font-size:28px;font-weight:800;font-family:'Fredoka One',cursive;margin-top:10px}

  /* BOOK GRID */
  .book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
  .book-card{background:white;border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border);transition:all 0.2s}
  .book-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
  .book-spine{width:100%;height:140px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:12px;overflow:hidden;background:#f8fafc;border:1px solid #e2e8f0;}
  .book-card .b-title{font-weight:800;font-size:13.5px;line-height:1.3;color:var(--navy)}
  .book-card .b-author{font-size:12px;color:var(--text-muted);margin-top:3px}
  .b-stock{font-size:12px;margin-top:8px;display:flex;justify-content:space-between;align-items:center}

  /* MODAL */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);animation:fadeIn 0.2s ease}
  .modal{background:white;border-radius:22px;padding:28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.25);animation:pop 0.25s ease}
  .modal h3{font-family:'Fredoka One',cursive;font-size:22px;color:var(--navy);margin-bottom:20px}
  .modal-footer{display:flex;gap:10px;margin-top:22px;justify-content:flex-end;flex-wrap:wrap}
  .btn-cancel{padding:10px 20px;background:var(--gray-light);border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif}
  .btn-save{padding:10px 24px;background:var(--primary);color:white;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:all 0.2s}
  .btn-save:hover{background:var(--primary-dark)}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* NOTIFICATIONS */
  .notice-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
  .notice-item{background:linear-gradient(135deg,#fff8e1,#fff3cd);border:1.5px solid #ffd54f;border-radius:var(--radius);padding:14px 16px;display:flex;align-items:flex-start;gap:10px;animation:ndrop 0.4s ease}
  .notice-item.urgent{background:linear-gradient(135deg,#fce8e8,var(--coral-light));border-color:#f7c1c1}
  .notice-icon{font-size:20px;flex-shrink:0;margin-top:1px}
  .notice-text{flex:1}
  .notice-title{font-weight:800;font-size:13.5px;color:var(--navy)}
  .notice-sub{font-size:12px;color:var(--text-muted);margin-top:2px}

  /* PENDING BADGE */
  .pending-badge{background:var(--primary);color:white;border-radius:20px;padding:1px 7px;font-size:11px;font-weight:800;margin-left:auto;}

  /* STUDENT SEARCH */
  .student-search-result{background:var(--gray-light);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all 0.2s;border:1.5px solid transparent}
  .student-search-result:hover,.student-search-result.selected{background:var(--primary-pale);border-color:var(--primary-light)}
  .student-avatar{width:36px;height:36px;background:var(--primary);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0}

  /* GRADUATE */
  .graduate-btn{background:linear-gradient(135deg,#f7d94c,#f2a30f);color:var(--navy);border:none;border-radius:12px;padding:10px 20px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px}
  .graduate-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(242,163,15,0.4)}

  /* EMPTY STATE */
  .empty-state{text-align:center;padding:48px 20px;color:var(--text-muted)}
  .empty-state .e-icon{font-size:52px;margin-bottom:12px;opacity:0.6}
  .empty-state p{font-size:15px;font-weight:600}

  /* STUDENT MINI */
  .student-mini{background:var(--primary-pale);border:1.5px solid var(--primary-light);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
  .student-mini .av{width:40px;height:40px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0}

  /* EXPORT */
  .export-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .btn-export{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;border:1.5px solid;transition:all 0.2s}
  .btn-export-json{background:#e8f4fd;border-color:#90caf9;color:#1565c0}
  .btn-export-json:hover{background:#1565c0;color:white}
  .btn-export-excel{background:#e8f5e9;border-color:#a5d6a7;color:#1b5e20}
  .btn-export-excel:hover{background:#1b5e20;color:white}

  /* TOAST */
  .toast{position:fixed;bottom:24px;right:24px;background:var(--navy);color:white;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;z-index:999;box-shadow:var(--shadow-lg);transform:translateX(200%);opacity:0;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);max-width:320px;font-family:'Nunito',sans-serif}
  .toast.show{transform:translateX(0);opacity:1}

  /* EMAIL PREVIEW */
  .email-preview{background:#f8f9fa;border:1px solid #dee2e6;border-radius:10px;padding:16px;font-size:13px;line-height:1.7;color:#333;white-space:pre-wrap;font-family:monospace;max-height:280px;overflow-y:auto;margin:10px 0}

  /* INFO BOX */
  .info-box{background:var(--primary-pale);border:1.5px solid var(--primary-light);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--navy);line-height:1.7;margin-bottom:14px}
  .info-box strong{font-weight:800}

  /* Dashboard specific */
.dashboard-welcome { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.dashboard-welcome h2 { font-size: 24px; margin: 0; gap: 15px; }
.dashboard-welcome p { color: var(--text-muted); margin-top: 4px;text-align: center; }
.dashboard-search { background: white; border: 1.5px solid var(--border); border-radius: 30px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; max-width: 260px; }
.dashboard-search input { border: none; outline: none; width: 100%; font-family: 'Nunito', sans-serif; }
.stat-link { font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 600; display: inline-block; margin-top: 6px; }
.stat-link:hover { text-decoration: underline; }
.small-table { font-size: 13px; }
.small-table td { padding: 8px 12px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.btn-quick { background: var(--primary-pale); color: var(--primary); border: 1px solid var(--primary-light); padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.btn-quick:hover { background: var(--primary); color: white; border-color: var(--primary); }
.group-overview-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.group-overview-card .g-info h4 { font-family: 'Fredoka One', cursive; font-size: 16px; margin-bottom: 4px; }
.group-overview-card .g-count { font-size: 28px; font-weight: 800; color: var(--primary); }

  
  /* PAGINATION */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  flex-wrap: wrap;
}
.pagination button {
  background: white;
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Nunito', sans-serif;
}
.pagination button:hover:not(:disabled) {
  background: var(--primary-pale);
  border-color: var(--primary-light);
  color: var(--primary);
}
.pagination button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-info {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 8px;
}


  /* MOBILE */
  /* ========== MOBILE (max-width: 768px) ========== */
    /* ========== MOBILE (max-width: 768px) ========== */
  @media (max-width: 768px) {
    /* Topbar – desktop jastai row, tara padding & font size kam */
    .topbar {
      padding: 0 16px;
      height: 56px;
      display: flex;
      flex-direction: row !important;
      align-items: center;
      justify-content: space-between;
    }
    .topbar-logo {
      gap: 8px;
      padding: 0;
    }
    .topbar-logo img {
      width: 40px;
      height: 40px;
    }
    .topbar-logo h1 {
      font-size: 18px;
    }
    .topbar-logo span {
      font-size: 10px;
      display: block;         /* dekhauni, hide nagarne */
    }
    .topbar-user {
      position: static;       /* absolute hatayo */
      width: auto;
      background: transparent; /* yata background remove garyo, parent ko color aaucha */
      clip-path: none;
      padding: 0;
      gap: 8px;
      display: flex;
      align-items: center;
    }
    #topbarName {
      font-size: 11px;
      display: inline-block;
    }
    .user-badge {
      padding: 4px 10px;
      font-size: 11px;
    }
    .btn-logout {
      padding: 4px 10px;
      font-size: 11px;
    }

    /* Sidebar – horizontal scroll (tara scrollbar dekhaucha) */
    .app-body {
      flex-direction: column;
    }
    .sidebar {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 8px 12px;
      display: flex;
      overflow-x: auto;
      scrollbar-width: thin;    /* scrollbar dekhaucha */
      gap: 8px;
    }
    .sidebar-item {
      white-space: nowrap;
      margin-bottom: 0;
      padding: 6px 12px;
    }
    .sidebar-item.active::before {
      display: none;
    }

    /* Main content */
    .main-content {
      padding: 16px;
    }

    /* Stats & grids – responsive */
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    /* Dashboard welcome text – center matra */
    .dashboard-welcome {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .dashboard-welcome .dashboard-search {
      max-width: 90%;
      margin-top: 8px;
    }

    /* Groups & books */
    .groups-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .book-grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Forms, modals, tables same as before */
    .table-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
    .search-box {
      max-width: 100%;
    }
    .form-row {
      grid-template-columns: 1fr;
    }
    .modal {
      padding: 20px;
    }
    .modal-footer {
      flex-direction: column;
    }
    .modal-footer button {
      width: 100%;
    }
    .page-header {
      flex-direction: column;
      align-items: flex-start;
    }
    .issue-grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* ========== EXTRA SMALL (max-width: 480px) ========== */
  @media (max-width: 480px) {
    .stats-grid {
      grid-template-columns: 1fr;
    }
    .groups-grid {
      grid-template-columns: 1fr;
    }
    .book-grid {
      grid-template-columns: 1fr;
    }
    .topbar-logo h1 {
      font-size: 16px;
    }
    .topbar-logo span {
      font-size: 9px;
    }
    .user-badge {
      font-size: 10px;
      padding: 3px 8px;
    }
    .btn-logout {
      font-size: 10px;
      padding: 3px 8px;
    }
  }     
  @media(max-width:480px){.stats-grid{grid-template-columns:1fr}.groups-grid{grid-template-columns:1fr}}