/* ================================
   Light Theme — OfflineAssignmentsApp
   Replace your assets/style.css with this file
   ================================ */

/* Root palette */
:root{
  --bg: #f8fafc;              /* page background */
  --card: #ffffff;            /* card background */
  --border: #e5e7eb;          /* subtle borders */
  --text: #111827;            /* primary text */
  --text-muted: #6b7280;      /* secondary text */
  --link: #2563eb;            /* links / primary accents */
  --link-hover: #1d4ed8;

  --btn: #ffffff;
  --btn-text: #111827;
  --btn-border: #d1d5db;
  --btn-hover: #f3f4f6;

  --primary: #2563eb;         /* blue */
  --primary-600: #1d4ed8;
  --primary-50: #eff6ff;

  --warn: #f59e0b;            /* amber */
  --warn-600: #d97706;
  --warn-50: #fffbeb;

  --danger: #dc2626;          /* red */
  --danger-600: #b91c1c;
  --danger-50: #fef2f2;

  --ok: #16a34a;              /* green */
  --ok-50: #ecfdf5;

  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}

/* Global reset-ish */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Layout */
.container{
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

/* Typography helpers */
h1,h2,h3{margin:0 0 8px 0}
h1{font-size: 22px}
h2{font-size: 18px}
h3{font-size: 16px}
.muted{color:var(--text-muted); font-size: 12px}

/* Links / Buttons */
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover); text-decoration:underline}

.btn{
  display:inline-block;
  background:var(--btn);
  color:var(--btn-text);
  border:1px solid var(--btn-border);
  border-radius:10px;
  padding:6px 10px;
  text-decoration:none;
  cursor:pointer;
  font-weight:500;
}
.btn:hover{background:var(--btn-hover); text-decoration:none}
.btn:disabled{opacity:.6; cursor:not-allowed}

.btn-primary{
  background:var(--primary);
  color:#fff;
  border-color: var(--primary-600);
}
.btn-primary:hover{background:var(--primary-600)}

.btn-warn{
  background:var(--warn);
  color:#fff;
  border-color: var(--warn-600);
}
.btn-warn:hover{background:var(--warn-600)}

.btn-danger{
  background:var(--danger);
  color:#fff;
  border-color: var(--danger-600);
}
.btn-danger:hover{background:var(--danger-600)}

/* Forms */
label{
  display:block;
  margin: 6px 0 6px;
  font-weight:600;
}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* Grid (12-col) */
.row{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.col{min-width:0}

/* Tools row */
.tools{display:flex; gap:8px; flex-wrap:wrap}

/* Rule */
.hr{
  height:1px;
  background:var(--border);
  margin:12px 0;
}

/* Tables */
table{
  width:100%;
  border-collapse: collapse;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
thead th{
  background:#f3f4f6;
  color:#374151;
  text-align:left;
  padding:10px 12px;
  font-weight:700;
  border-bottom:1px solid var(--border);
}
tbody td{
  padding:10px 12px;
  border-top:1px solid var(--border);
}
tbody tr:nth-child(even){background:#fafafa}
.clickable-row{cursor:pointer}
.clickable-row:hover{background:#eef2ff} /* subtle violet-ish */

/* Badges for days left */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.badge-danger{background:#fee2e2; color:#991b1b; border:1px solid #fecaca}
.badge-warn{background:#fef3c7; color:#92400e; border:1px solid #fde68a}
.badge-ok{background:#dcfce7; color:#065f46; border:1px solid #bbf7d0}

/* Top bars / nav clusters */
.topnav, .topbar .links{display:flex; gap:8px; flex-wrap:wrap}
.page-info{color:var(--text-muted); font-size:13px}

/* Pagination */
.pagination{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.page-btn{
  padding:6px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  display:inline-block;
}
.page-btn:hover{background:#f3f4f6}
.page-btn.active{
  background:var(--primary-50);
  border-color: var(--primary);
  color:#0b1727;
  font-weight:600;
}

/* Modal (used in task_form) */
.modal-backdrop{
  position:fixed; inset:0; 
  background: rgba(0,0,0,.4);
  display:none;
  align-items:center; justify-content:center;
  z-index:1000;
}
.modal{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  min-width:360px; max-width:520px;
  box-shadow: var(--shadow);
}
.modal h3{margin:0 0 12px 0}
.modal .actions{display:flex; gap:8px; justify-content:flex-end; margin-top:12px}

/* Charts (SVG) */
.chart svg{display:block; width:100%; height:auto}

/* Responsive tweaks */
@media (max-width: 900px){
  .container{padding:0 12px}
}
@media (max-width: 600px){
  h1{font-size:20px}
  .row{gap:10px}
  .btn{padding:6px 10px}
}

/* Utility */
.hidden{display:none !important}


/* Compact icons-only nav */
.nav.icon-strip {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.nav.icon-strip .signout-form {
  margin-left: 4px;
  display: inline-block;
}

.nav.icon-strip .signout-form button.logout-btn {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger-600);
}

.nav.icon-strip .signout-form button.logout-btn:hover {
  background: var(--danger-600);
  color: #fff;
}

.btn.btn-icon {
  padding: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}

.btn.btn-icon:hover {
  filter: brightness(1.05);
}

@media (max-width: 600px) {
  .btn.btn-icon { width: 34px; height: 34px; font-size: 17px; }
}

/* Icon container so badge can sit at the top-right */
.nav .nav-icon .icon-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* slightly larger tap target looks nicer */
  min-width: 28px;
  min-height: 28px;
}

/* iPhone-like notification badge */
.nav .notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  background:#ef4444;                /* vibrant red */
  color:#fff;
  border-radius:10px;                 /* rounded pill by default */
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:2px 6px;                    /* pill for 2+ chars */
  border:2px solid #fff;              /* crisp on light background */
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.12);
  pointer-events:none;
}

/* Single-character: force a small rounded square (squircle vibe) */
.nav .notif-badge.is-one{
  width:18px;
  height:18px;
  padding:0;                          /* remove pill padding */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;                  /* rounded square */
}