/* =========================================================
   DIGITALSY — shared/style.css
   Mobile-first, responsive, animated EdTech design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:        #5B6AF0;
  --primary-light:  #EEF0FF;
  --primary-dark:   #3D4ED8;
  --secondary:      #FF7043;
  --secondary-light:#FFF0EB;
  --accent:         #00C9A7;
  --accent-light:   #E0FAF5;
  --gold:           #FFB400;
  --gold-light:     #FFF8E1;
  --dark:           #1A1D3A;
  --dark-2:         #2E3260;
  --mid:            #6B7280;
  --border:         #E5E7F0;
  --light:          #F6F7FB;
  --white:          #FFFFFF;
  --success:        #22C55E;
  --warning:        #F59E0B;
  --danger:         #EF4444;
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;
  --shadow-sm:      0 2px 8px rgba(91,106,240,0.08);
  --shadow-md:      0 6px 24px rgba(91,106,240,0.13);
  --shadow-lg:      0 16px 48px rgba(91,106,240,0.18);
  --font-head:      'Poppins', sans-serif;
  --font-body:      'Nunito', sans-serif;
  --ease:           cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:       cubic-bezier(0.16,1,0.3,1);
  --dur:            0.3s;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font-body);
  background: var(--light);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(91,106,240,0.07) 0%, transparent 52%),
    radial-gradient(circle at 82% 88%, rgba(0,201,167,0.06) 0%, transparent 52%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 14px 48px;
}

/* ── Animations ────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes bounceIn { 0%{transform:scale(0.8);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes pulse-ring {
  0%  {box-shadow:0 0 0 0 rgba(91,106,240,0.35)}
  70% {box-shadow:0 0 0 12px rgba(91,106,240,0)}
  100%{box-shadow:0 0 0 0 rgba(91,106,240,0)}
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Page card ─────────────────────────────────────────── */
.page-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 32px 22px;
  width: 100%;
  max-width: 560px;
  border: 1px solid rgba(91,106,240,0.08);
  animation: fadeUp 0.45s var(--ease-out) both;
  position: relative;
  overflow: hidden;
}
.page-card::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--secondary));
}
.page-card.wide { max-width:860px; }

/* ── Brand header ──────────────────────────────────────── */
.brand-header { text-align:center; margin-bottom:24px; }
.brand-logo {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:1.6rem; font-weight:800;
  color:var(--primary); text-decoration:none;
}
.brand-dot {
  width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  animation:float 2s ease-in-out infinite;
}
.brand-header p { color:var(--mid); font-size:0.85rem; margin-top:4px; }

/* ── Role badge ────────────────────────────────────────── */
.role-badge {
  display:inline-block;
  padding:4px 14px; border-radius:var(--radius-full);
  font-size:0.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.07em;
  margin-bottom:18px;
}
.role-badge.student    { background:var(--primary-light); color:var(--primary); }
.role-badge.teacher    { background:var(--accent-light);  color:#00826b; }
.role-badge.instructor { background:#EFEcFF;              color:#5B21B6; }
.role-badge.guardian   { background:#FFF0EB;              color:#C2410C; }
.role-badge.admin      { background:var(--gold-light);    color:#92400E; }

/* ── Typography ────────────────────────────────────────── */
h1 {
  font-family:var(--font-head); color:var(--dark);
  font-size:clamp(1.35rem,5vw,1.8rem); font-weight:700;
  margin-bottom:22px; line-height:1.25;
}
h2 { font-family:var(--font-head); font-size:1.2rem; font-weight:600; }
h3 {
  font-family:var(--font-head); font-size:1rem; font-weight:600;
  color:var(--dark-2); margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
h3::before {
  content:''; display:inline-block;
  width:4px; height:18px;
  background:var(--primary); border-radius:var(--radius-full);
}
p { font-size:0.9rem; color:var(--mid); line-height:1.65; }
a { color:var(--primary); font-weight:700; text-decoration:none; transition:color var(--dur); }
a:hover { color:var(--primary-dark); text-decoration:underline; }

/* ── Forms ─────────────────────────────────────────────── */
.form-grid {
  display:grid; grid-template-columns:1fr;
  gap:12px; margin-bottom:16px;
}
input, select, textarea {
  font-family:var(--font-body); font-size:0.95rem;
  padding:13px 16px; border:2px solid var(--border);
  border-radius:var(--radius-md); width:100%;
  background:var(--light); color:var(--dark);
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur);
  outline:none; -webkit-appearance:none; appearance:none;
}
input::placeholder, textarea::placeholder { color:#B0B5C9; }
input:focus, select:focus, textarea:focus {
  border-color:var(--primary); background:var(--white);
  box-shadow:0 0 0 4px rgba(91,106,240,0.12);
}
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer;
}
textarea { resize:vertical; min-height:90px; line-height:1.6; }

.field-group { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field-label { font-size:0.78rem; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:0.06em; }

.file-input {
  background:var(--primary-light); border:2px dashed var(--primary);
  border-radius:var(--radius-md); padding:18px; text-align:center; margin:14px 0; cursor:pointer;
  transition:background var(--dur);
}
.file-input:hover { background:#E6E8FF; }
.file-input label { display:block; font-size:0.88rem; font-weight:700; color:var(--primary); margin-bottom:8px; cursor:pointer; }
.file-input input[type="file"] { width:100%; font-size:0.82rem; background:transparent; border:none; box-shadow:none; padding:4px 0; }
.file-input input[type="file"]:focus { box-shadow:none; border:none; }

/* ── Buttons ────────────────────────────────────────────── */
.btn, .btn-main, .btn-secondary, .btn-danger,
.btn-logout, .btn-back, .btn-small, .btn-send,
.btn-google, .btn-fb, .btn-twitter {
  font-family:var(--font-body); font-weight:700; cursor:pointer; border:none;
  border-radius:var(--radius-md); display:inline-flex;
  align-items:center; justify-content:center; gap:7px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),opacity var(--dur),background var(--dur);
  text-decoration:none; white-space:nowrap;
}
.btn-main {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; padding:14px 24px; width:100%; font-size:1rem;
  box-shadow:0 4px 16px rgba(91,106,240,0.35); margin-top:8px;
  border-radius:var(--radius-lg); letter-spacing:0.02em; position:relative; overflow:hidden;
}
.btn-main::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent); opacity:0; transition:opacity var(--dur); }
.btn-main:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(91,106,240,0.45); }
.btn-main:hover::after { opacity:1; }
.btn-main:active { transform:scale(0.98); }

.btn-secondary {
  background:var(--light); color:var(--mid); padding:12px 20px;
  width:100%; font-size:0.9rem; margin-top:8px; border:2px solid var(--border);
}
.btn-secondary:hover { background:var(--border); color:var(--dark); transform:translateY(-1px); }

.btn-danger { background:rgba(239,68,68,0.1); color:var(--danger); padding:12px 20px; width:100%; border:2px solid rgba(239,68,68,0.25); margin-top:8px; font-size:0.9rem; }
.btn-danger:hover { background:var(--danger); color:#fff; }

.btn-logout { background:transparent; color:var(--danger); border:2px solid rgba(239,68,68,0.3); padding:8px 18px; border-radius:var(--radius-full); font-size:0.82rem; }
.btn-logout:hover { background:rgba(239,68,68,0.08); border-color:var(--danger); transform:scale(1.02); }

.btn-back { background:var(--light); color:var(--mid); padding:8px 16px; border:2px solid var(--border); border-radius:var(--radius-full); font-size:0.82rem; }
.btn-back:hover { background:var(--border); color:var(--dark); }

.btn-small { background:var(--accent); color:#fff; padding:6px 14px; border-radius:var(--radius-sm); font-size:0.78rem; }
.btn-small:hover { background:#00b396; transform:scale(1.04); }

.btn-send { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; padding:12px 20px; border-radius:var(--radius-md); font-size:0.9rem; flex-shrink:0; }
.btn-send:hover { transform:scale(1.04); box-shadow:0 4px 14px rgba(91,106,240,0.35); }

.btn-remove { background:rgba(239,68,68,0.1); color:var(--danger); padding:5px 12px; border-radius:var(--radius-sm); font-size:0.75rem; border:1px solid rgba(239,68,68,0.2); cursor:pointer; font-family:var(--font-body); font-weight:700; transition:all var(--dur); }
.btn-remove:hover { background:var(--danger); color:#fff; }

/* Social */
.social-login { display:flex; gap:10px; margin-top:16px; }
.btn-google, .btn-fb, .btn-twitter { flex:1; padding:11px 8px; border-radius:var(--radius-md); font-size:0.8rem; box-shadow:var(--shadow-sm); }
.btn-google  { background:#DB4437; color:#fff; }
.btn-fb      { background:#4267B2; color:#fff; }
.btn-twitter { background:#1DA1F2; color:#fff; }
.btn-google:hover,.btn-fb:hover,.btn-twitter:hover { opacity:.85; transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* Admin */
.btn-admin { background:linear-gradient(135deg,#1A1D3A,#2E3260) !important; box-shadow:0 4px 16px rgba(26,29,58,0.3) !important; }

/* ── Divider ────────────────────────────────────────────── */
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--mid); font-size:0.78rem; font-weight:600; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Dash header ────────────────────────────────────────── */
.dash-header {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px; padding-bottom:22px; margin-bottom:22px;
  border-bottom:2px solid var(--border);
}
.user-info { display:flex; flex-direction:column; align-items:center; gap:10px; }
.user-info h1 { margin-bottom:0; font-size:1.15rem; }

.avatar {
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:4px solid var(--primary);
  box-shadow:0 0 0 4px rgba(91,106,240,0.15), var(--shadow-md);
  animation:pulse-ring 2.8s ease-out infinite;
}
.avatar.teacher    { border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,201,167,0.15),var(--shadow-md); }
.avatar.instructor { border-color:#7C3AED;       box-shadow:0 0 0 4px rgba(124,58,237,0.15),var(--shadow-md); }
.avatar.guardian   { border-color:var(--secondary); box-shadow:0 0 0 4px rgba(255,112,67,0.15),var(--shadow-md); }

.id-badge { background:var(--primary-light); color:var(--primary); font-family:'Courier New',monospace; font-size:0.72rem; font-weight:700; padding:3px 12px; border-radius:var(--radius-full); letter-spacing:0.08em; display:inline-block; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:var(--light); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:16px;
  border:1px solid var(--border);
  animation:fadeUp 0.4s var(--ease-out) both;
}
.card p { text-align:left; color:var(--dark); margin:6px 0; font-size:0.88rem; }
.card p strong { color:var(--primary); }
.card + .card { animation-delay:0.07s; }

/* ── Two-col grid ───────────────────────────────────────── */
.dash-grid { display:grid; grid-template-columns:1fr; gap:16px; }

/* ── Dashboard nav ──────────────────────────────────────── */
.dash-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.dash-nav button {
  padding:12px 8px; background:var(--primary-light);
  color:var(--primary); border:2px solid rgba(91,106,240,0.18);
  border-radius:var(--radius-md); cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:0.8rem;
  transition:all var(--dur) var(--ease);
}
.dash-nav button:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-3px); box-shadow:0 6px 18px rgba(91,106,240,0.28); }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); margin-top:10px; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.86rem; }
thead tr th { background:var(--dark); color:#fff; padding:12px 14px; text-align:left; font-family:var(--font-head); font-weight:600; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; }
thead tr th:first-child { border-radius:var(--radius-md) 0 0 0; }
thead tr th:last-child  { border-radius:0 var(--radius-md) 0 0; }
tbody tr { transition:background var(--dur); animation:slideInLeft 0.3s var(--ease-out) both; }
tbody tr:nth-child(even) { background:var(--light); }
tbody tr:hover { background:var(--primary-light); }
td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--dark); vertical-align:middle; }
tbody tr:nth-child(1){animation-delay:.04s} tbody tr:nth-child(2){animation-delay:.08s}
tbody tr:nth-child(3){animation-delay:.12s} tbody tr:nth-child(4){animation-delay:.16s}
tbody tr:nth-child(5){animation-delay:.20s}

/* ── Status ─────────────────────────────────────────────── */
.status-present { background:rgba(34,197,94,0.12); color:var(--success); padding:3px 10px; border-radius:var(--radius-full); font-weight:700; font-size:0.76rem; }
.status-absent  { background:rgba(239,68,68,0.10); color:var(--danger);  padding:3px 10px; border-radius:var(--radius-full); font-weight:700; font-size:0.76rem; }

/* ── Admin badge ────────────────────────────────────────── */
.admin-badge { background:linear-gradient(135deg,var(--gold),#FFA000); color:var(--dark); font-weight:800; text-align:center; padding:8px 16px; border-radius:var(--radius-md); margin-bottom:16px; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; box-shadow:0 4px 14px rgba(255,180,0,0.3); animation:bounceIn 0.5s var(--ease) both; }

/* ── Admin stats ─────────────────────────────────────────── */
.admin-stats { display:flex; gap:12px; margin:20px 0; flex-wrap:wrap; }
.stat-card { flex:1; min-width:80px; background:var(--primary-light); padding:20px 12px; border-radius:var(--radius-lg); text-align:center; border:2px solid rgba(91,106,240,0.15); transition:transform var(--dur) var(--ease),box-shadow var(--dur); animation:bounceIn 0.5s var(--ease) both; }
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-card h2 { font-size:1.9rem; font-weight:900; color:var(--primary); font-family:var(--font-head); }
.stat-card p  { color:var(--mid); font-size:0.78rem; font-weight:600; margin-top:4px; }

/* ── Forum ──────────────────────────────────────────────── */
.header-flex { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.header-flex h1 { margin-bottom:0; font-size:1.25rem; }

#forum-container { background:var(--light); border-radius:var(--radius-lg); padding:14px; border:1px solid var(--border); }
#messages-box { height:300px; overflow-y:auto; border:2px solid var(--border); background:var(--white); margin-bottom:10px; padding:10px; display:flex; flex-direction:column; gap:10px; border-radius:var(--radius-md); scroll-behavior:smooth; }
#messages-box::-webkit-scrollbar { width:4px; }
#messages-box::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-full); }

.message-bubble { padding:10px 14px; border-radius:var(--radius-lg); background:var(--primary-light); max-width:84%; align-self:flex-start; animation:slideInLeft 0.2s var(--ease-out) both; border:1px solid rgba(91,106,240,0.1); }
.message-bubble.own { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; align-self:flex-end; border:none; box-shadow:0 4px 12px rgba(91,106,240,0.28); }
.message-user { font-weight:800; font-size:0.72rem; display:block; margin-bottom:3px; opacity:.75; letter-spacing:.04em; text-transform:uppercase; }
.message-bubble p { font-size:0.88rem; margin:4px 0 0; line-height:1.5; color:inherit; text-align:left; }
.forum-form { display:flex; gap:10px; margin-top:10px; }
.forum-form input { flex:1; border-radius:var(--radius-full); padding:11px 18px; }

/* ── Leaderboard ─────────────────────────────────────────── */
.rank-1 td { background:rgba(255,180,0,0.08); font-weight:700; }
.rank-2 td { background:rgba(156,163,175,0.08); }
.rank-3 td { background:rgba(180,83,9,0.07); }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-weight:800; font-size:0.8rem; }
.rank-1 .rank-badge { background:var(--gold);   color:#fff; }
.rank-2 .rank-badge { background:#9CA3AF;        color:#fff; }
.rank-3 .rank-badge { background:#B45309;        color:#fff; }

/* ── Modal ──────────────────────────────────────────────── */
.modal { position:fixed; inset:0; background:rgba(26,29,58,0.6); backdrop-filter:blur(5px); display:flex; justify-content:center; align-items:flex-end; z-index:3000; animation:fadeIn 0.2s ease both; }
.modal.hidden { display:none!important; }
.modal-content { background:var(--white); padding:28px 22px; border-radius:var(--radius-xl) var(--radius-xl) 0 0; width:100%; max-width:560px; box-shadow:0 -8px 40px rgba(26,29,58,0.18); animation:fadeUp 0.35s var(--ease-out) both; }
.modal-content h3 { font-size:1.05rem; margin-bottom:14px; }
.modal-content input,.modal-content textarea { margin:7px 0; background:var(--light); }
.modal-btns { display:flex; gap:10px; margin-top:14px; }
.modal-btns .btn-main,.modal-btns .btn-secondary { flex:1; margin:0; padding:13px; }

/* ── Instructor badge ────────────────────────────────────── */
.badge-instructor { color:#5B21B6; background:#EFEcFF; padding:3px 12px; border-radius:var(--radius-full); font-size:0.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(124,58,237,0.2); display:inline-block; margin-top:3px; }

/* ── Guardian card ───────────────────────────────────────── */
.guardian-info-card { background:linear-gradient(135deg,var(--primary-light),var(--accent-light)); border:1px solid rgba(91,106,240,0.15); border-radius:var(--radius-lg); padding:18px; margin-bottom:16px; }
.guardian-info-card h3 { color:var(--dark); }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; margin:24px auto; }

/* ── Responsive ──────────────────────────────────────────── */
@media (min-width:420px) {
  .page-card { padding:36px 28px; }
}
@media (min-width:600px) {
  body { padding:36px 24px 64px; }
  .form-grid { grid-template-columns:1fr 1fr; }
  .dash-header { flex-direction:row; justify-content:space-between; text-align:left; }
  .user-info { flex-direction:row; }
  .user-info h1 { text-align:left; }
  .dash-grid { grid-template-columns:1fr 2fr; }
  .modal { align-items:center; padding:20px; }
  .modal-content { border-radius:var(--radius-xl); max-width:460px; padding:34px 30px; }
  #messages-box { height:340px; }
}
@media (min-width:900px) {
  body { padding:48px 32px 80px; }
  .page-card { padding:48px 52px; }
  .page-card.wide { padding:40px 48px; }
  h1 { font-size:2rem; }
  .dash-nav button { padding:14px 10px; font-size:0.88rem; }
  .admin-stats { gap:18px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}