/* shared.css — Assignment Portal v2 */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

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

:root{
  --bg:#0c0e12;
  --surface:#13161d;
  --surface2:#1a1e27;
  --border:#22262f;
  --border2:#2e3341;
  --accent:#e8a87c;
  --accent2:#d4875a;
  --blue:#7ca8e8;
  --green:#7ce8a8;
  --red:#e87c7c;
  --text:#eae6de;
  --text2:#b8b4ac;
  --muted:#6b6e7a;
  --font-display:'DM Serif Display',Georgia,serif;
  --font:'DM Sans',sans-serif;
  --r:8px;
  --r2:12px;
  --shadow:0 4px 24px rgba(0,0,0,0.4);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
}

/* ── Typography ── */
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.2;}
h1{font-size:clamp(2rem,4vw,3.5rem);}
h2{font-size:clamp(1.4rem,2.5vw,2rem);}
h3{font-size:1.2rem;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--r);border:none;
  font-family:var(--font);font-size:13px;font-weight:500;
  cursor:pointer;transition:all 0.2s;text-decoration:none;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#0c0e12;}
.btn-primary:hover{background:var(--accent2);}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost{background:none;color:var(--text2);padding:8px 12px;}
.btn-ghost:hover{color:var(--text);background:var(--surface2);}
.btn-danger{background:rgba(232,124,124,0.1);color:var(--red);border:1px solid rgba(232,124,124,0.2);}
.btn-danger:hover{background:rgba(232,124,124,0.2);}
.btn-sm{padding:6px 14px;font-size:12px;}
.btn-lg{padding:14px 28px;font-size:15px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-full{width:100%;justify-content:center;}

/* ── Forms ── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
label{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);}
input,textarea,select{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 14px;font-family:var(--font);font-size:14px;color:var(--text);
  outline:none;transition:border-color 0.2s,box-shadow 0.2s;width:100%;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,168,124,0.1);
}
select option{background:var(--surface);}
textarea{resize:vertical;min-height:80px;}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:24px;}
.card-sm{padding:16px;}

/* ── Messages ── */
.msg{border-radius:var(--r);padding:12px 14px;font-size:13px;margin-bottom:16px;display:none;line-height:1.5;}
.msg.error{background:rgba(232,124,124,0.08);border:1px solid rgba(232,124,124,0.2);color:var(--red);}
.msg.success{background:rgba(124,232,168,0.08);border:1px solid rgba(124,232,168,0.2);color:var(--green);}
.msg.info{background:rgba(232,168,124,0.08);border:1px solid rgba(232,168,124,0.2);color:var(--accent);}
.msg.show{display:block;}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;}
.badge-accent{background:rgba(232,168,124,0.12);color:var(--accent);}
.badge-green{background:rgba(124,232,168,0.12);color:var(--green);}
.badge-red{background:rgba(232,124,124,0.12);color:var(--red);}
.badge-blue{background:rgba(124,168,232,0.12);color:var(--blue);}
.badge-muted{background:var(--surface2);color:var(--muted);}

/* ── Nav ── */
.nav{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.nav-logo{font-family:var(--font-display);font-size:18px;color:var(--accent);text-decoration:none;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2);}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#0c0e12;flex-shrink:0;}

/* ── Page layout ── */
.page{max-width:1100px;margin:0 auto;padding:32px 24px;}
.page-sm{max-width:600px;margin:0 auto;padding:32px 24px;}
.page-header{margin-bottom:32px;}
.page-header h1{margin-bottom:8px;}
.page-header p{color:var(--muted);font-size:14px;}

/* ── Grid ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ── Table ── */
.table-wrap{overflow-x:auto;border-radius:var(--r2);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;}
th{text-align:left;padding:12px 16px;font-size:11px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--border);}
td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text2);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,0.02);}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);
  padding:32px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  transform:translateY(16px);transition:transform 0.2s;
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.modal-title{font-family:var(--font-display);font-size:22px;}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;padding:4px;}
.modal-close:hover{color:var(--text);}

/* ── Empty state ── */
.empty{text-align:center;padding:60px 24px;color:var(--muted);}
.empty-icon{font-size:40px;margin-bottom:12px;opacity:0.5;}
.empty p{font-size:14px;margin-bottom:20px;}

/* ── Countdown ── */
.countdown{font-size:12px;font-weight:500;}
.countdown.urgent{color:var(--red);}
.countdown.soon{color:var(--accent);}
.countdown.ok{color:var(--green);}
.countdown.expired{color:var(--muted);}

/* ── Loading ── */
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--muted);gap:12px;}

/* ── Divider ── */
.divider{height:1px;background:var(--border);margin:24px 0;}

/* ── Tabs ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px;}
.tab-btn{padding:10px 16px;background:none;border:none;font-family:var(--font);font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s;}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-btn:hover:not(.active){color:var(--text);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ── Class card ── */
.class-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);
  padding:0;overflow:hidden;cursor:pointer;transition:border-color 0.2s,transform 0.2s;
  text-decoration:none;display:block;
}
.class-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.class-card-banner{height:6px;}
.class-card-body{padding:20px;}
.class-card-subject{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:6px;}
.class-card-name{font-family:var(--font-display);font-size:20px;margin-bottom:8px;color:var(--text);}
.class-card-meta{font-size:12px;color:var(--muted);}

/* ── Task card ── */
.task-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:20px;transition:border-color 0.2s;}
.task-card:hover{border-color:var(--border2);}
.task-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.task-card-title{font-family:var(--font-display);font-size:18px;}
.task-card-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);}

/* ── Pending banner ── */
.pending-banner{background:rgba(232,168,124,0.06);border:1px solid rgba(232,168,124,0.15);border-radius:var(--r2);padding:32px;text-align:center;}
.pending-banner h2{font-family:var(--font-display);font-size:24px;margin-bottom:8px;}
.pending-banner p{color:var(--muted);font-size:14px;}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}