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

:root {
  --primary: #4361ee;
  --primary-light: #4895ef;
  --secondary: #3f37c9;
  --accent: #f72585;
  --success: #4cc9f0;
  --warning: #f8961e;
  --danger: #f94144;
  --light: #f8f9fa;
  --dark: #212529;
  --gray: #adb5bd;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --radius: 8px;
}

html, body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f8fa;
  color: var(--dark);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
}

.login-page {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.08), rgba(76, 201, 240, 0.15));
}

.login-card {
  width: min(480px, 100%);
  background: white;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  padding: 3rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-logo {
  width: 180px;
  margin: 0 auto 0.5rem auto;
}

.login-title {
  margin: 0;
  font-size: 2rem;
  color: var(--primary);
  font-weight: 600;
}

.login-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 1.05rem;
}

.google-signin-slot {
  display: flex;
  justify-content: center;
}

.login-status {
  background: rgba(67, 97, 238, 0.08);
  color: #1e3a8a;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.layout-shell {
  position: relative;
}

.theme-toggle-chunk {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1000;
  color: var(--dark);
}

.theme-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}

.theme-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
}

.theme-mode {
  font-weight: 600;
  color: var(--dark);
}

.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(33, 37, 41, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0;
}

.toggle-switch .toggle-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  transition: transform 0.3s ease;
  box-shadow: var(--shadow);
}

.toggle-switch.active {
  background: var(--primary);
}

.toggle-switch.active .toggle-handle {
  transform: translateX(24px);
}

.toggle-switch:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 3px;
}

#app {
  max-width: 1280px; /* was 1000px */
  margin: 0 auto;
  padding: 2rem;
}

h1:focus {
  outline: none;
}

h2 {
  color: var(--primary);
  font-weight: 600;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

/* Brand heading with logo */
h2.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.brand-logo {
  height: 2em; /* scales with h2 font-size */
  width: auto;
  display: block;
}

h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  background-color: var(--accent);
  border-radius: 2px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.signout-button {
  background: #111827;
  color: #f9fafb;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
}

.signout-button:hover {
  transform: translateY(-1px);
  background: #0f172a;
}

.signout-button:focus-visible {
  outline: 3px solid rgba(67, 97, 238, 0.4);
  outline-offset: 3px;
}

body.dark-mode .signout-button {
  background: #7069d4;
  color: #f5f7fb;
  box-shadow: 0 10px 20px rgba(59, 66, 140, 0.35);
}

body.dark-mode .signout-button:hover {
  background: #5b55c1;
}

h4 {
  color: var(--secondary);
  font-weight: 500;
  margin: 1.5rem 0 1rem;
}

/* Calendar */
.calendar {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  overflow: hidden;
}

.calendar-header {
  background: var(--primary);
  color: white;
  padding: 0.5rem 0.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-dow .dow {
  background: #f1f3f5;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  border-bottom: 1px solid #e9ecef;
}

.calendar-cell {
  min-height: 110px;
  border-right: 1px solid #f1f3f5;
  border-bottom: 1px solid #f1f3f5;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calendar-cell:nth-child(7n) {
  border-right: none;
}

.calendar-cell.other-month {
  background: #fbfcfd;
  color: #9aa1a7;
}

.calendar-cell.today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cal-nav {
  background: transparent;
  color: white;
  border: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}
.cal-nav:hover { background: rgba(255,255,255,0.15); }

.date-number {
  font-size: 0.9rem;
  font-weight: 600;
}

.calendar-assignments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calendar-assignments li {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden; /* clip long chip content */
}

.calendar-assignments li.calendar-item {
  cursor: pointer;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.calendar-assignments li.calendar-item:hover,
.calendar-assignments li.calendar-item:focus-visible {
  background-color: rgba(67, 97, 238, 0.12);
}

.calendar-assignments li.calendar-item:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

body.dark-mode {
  --primary: #4c6ef5;
  --primary-light: #748ffc;
  --secondary: #adb5ff;
  --accent: #f72585;
  --success: #4cc9f0;
  --warning: #f8961e;
  --danger: #f94144;
  --light: #0f111a;
  --dark: #f5f7fb;
  --gray: #6c7393;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  background-color: #0f111a;
  color: #f5f7fb;
}

body.dark-mode .theme-toggle-chunk {
  background: #1c1f2b;
  color: #f5f7fb;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .theme-title {
  color: #9aa1c2;
}

body.dark-mode .theme-mode {
  color: #f5f7fb;
}

body.dark-mode .toggle-switch {
  background: #3b3f54;
}

body.dark-mode .toggle-switch .toggle-handle {
  background: #f5f7fb;
}

body.dark-mode .toggle-switch.active {
  background: var(--primary-light);
}

body.dark-mode .calendar {
  background: #1c1f2b;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
}

body.dark-mode .calendar-header {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

body.dark-mode .calendar-dow .dow {
  background: #232636;
  border-bottom: 1px solid #2f3245;
  color: #d4d7f2;
}

body.dark-mode .calendar-cell {
  border-right: 1px solid #232636;
  border-bottom: 1px solid #232636;
}

body.dark-mode .calendar-cell.other-month {
  background: #161827;
  color: #6c7393;
}

body.dark-mode .calendar-assignments li {
  color: #e0e4ff;
}

body.dark-mode .calendar-assignments li.calendar-item:hover,
body.dark-mode .calendar-assignments li.calendar-item:focus-visible {
  background-color: rgba(72, 149, 239, 0.18);
}

body.dark-mode .calendar-check {
  color: #8c90a9;
}

body.dark-mode .assignment-form {
  background: #1c1f2b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  border: 1px solid #2a2e42;
}

body.dark-mode .assignment-form input,
body.dark-mode .assignment-form textarea {
  background: #121423;
  border: 1px solid #2f3550;
  color: #f5f7fb;
}

body.dark-mode .assignment-form input[type="date"],
body.dark-mode .assignment-form input[type="time"] {
  color-scheme: dark;
}

body.dark-mode .assignment-form input[list] {
  color-scheme: dark;
}

body.dark-mode .assignment-form input::placeholder,
body.dark-mode .assignment-form textarea::placeholder {
  color: #6f7697;
}

body.dark-mode .assignment-form input:focus,
body.dark-mode .assignment-form textarea:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(116, 143, 252, 0.2);
  background: #181b2c;
}

body.dark-mode .date-group {
  background: #161927;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  border: 1px solid #22263a;
}

body.dark-mode .date-header {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

body.dark-mode .assignment-item {
  border-bottom: 1px solid #252b3d;
}

body.dark-mode .assignment-item:last-child {
  border-bottom: none;
}

body.dark-mode .assignment-item:hover {
  background-color: rgba(116, 143, 252, 0.08);
}

body.dark-mode .list-filters label {
  color: #d8dcff;
}

body.dark-mode .empty-state {
  background: #1f2333;
  border-color: #303755;
  color: #c6caeb;
}

body.dark-mode .assignment-item.editing {
  background: #1f2333;
  box-shadow: inset 0 0 0 2px rgba(252, 211, 77, 0.18);
}

body.dark-mode .edit-form-modern input,
body.dark-mode .edit-form-modern textarea {
  background: #121423;
  border: 1px solid #303655;
  color: #f5f7fb;
}

body.dark-mode .edit-form-modern input[type="date"],
body.dark-mode .edit-form-modern input[type="time"] {
  color-scheme: dark;
}

body.dark-mode .edit-form-modern input[list] {
  color-scheme: dark;
}

body.dark-mode .edit-form-modern input::placeholder,
body.dark-mode .edit-form-modern textarea::placeholder {
  color: #7a81a3;
}

body.dark-mode .edit-form-modern input:focus,
body.dark-mode .edit-form-modern textarea:focus {
  background: #181b2c;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(116, 143, 252, 0.2);
}

body.dark-mode .icon-btn {
  color: #b8bcda;
  background: transparent;
}

body.dark-mode .icon-btn:hover {
  color: var(--primary-light);
  background: rgba(116, 143, 252, 0.12);
}

body.dark-mode .icon-btn--danger {
  color: #f08c8c;
}

body.dark-mode .icon-btn--danger:hover {
  color: #ff6b6b;
  background: rgba(249, 65, 68, 0.15);
}

.calendar-assignments li.completed {opacity:0.6;}
.calendar-assignments li.completed .calendar-chip {text-decoration:line-through;}
.calendar-assignments li.completed .calendar-check.done {opacity:1; text-decoration:none;}

.subject-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 10px;
}

.calendar-check {
  font-size: 0.9rem;
  line-height: 1;
  color: #9aa1a7;
  flex: 0 0 auto;
}

.calendar-check.done {
  color: var(--accent);
  font-weight: 700;
}

.calendar-chip {
  display: inline-block;
  max-width: 100%;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  color: #1f2937;
  background-clip: padding-box;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;   /* allow shrinking within the li */
  min-width: 0;     /* required for flex item ellipsis */
}

.calendar-edit-wrapper {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.calendar-edit-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.calendar-edit-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.calendar-edit-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f2937;
}

.calendar-edit-due {
  font-size: 0.9rem;
  color: #475569;
}

.calendar-edit-wrapper .edit-form-modern {
  padding: 0;
}

body.dark-mode .calendar-edit-wrapper {
  background: #1c1f2b;
  border: 1px solid #2a2e42;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

body.dark-mode .calendar-edit-title {
  color: #f5f7fb;
}

body.dark-mode .calendar-edit-due {
  color: #c0c6f3;
}

/* New assignment form */
.assignment-form {
  background-color: white;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.assignment-form input,
.assignment-form textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.assignment-form input:focus,
.assignment-form textarea:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
  outline: none;
}

.assignment-form .due-date-time {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.assignment-form .due-date-time > input[type="date"] {
  flex: 1 1 auto;
}

.assignment-form .due-date-time .due-time-input {
  flex: 0 0 auto;
  width: clamp(10ch, 16vw, 14ch);
  text-transform: uppercase;
}

.add-button {
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  grid-column: 1;
  width: fit-content;
}

.add-button:hover {
  background-color: #e91e63;
  transform: translateY(-2px);
}

/* Assignment groups */
.date-group {
  background-color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.date-header {
  background-color: var(--primary);
  color: white;
  padding: 0.75rem 1rem;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.assignment-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.assignment-item {
  padding: 1rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.assignment-item:last-child {
  border-bottom: none;
}

/* List filters */
.list-filters {display:flex; gap:1.25rem; align-items:center; margin:0 0 0.75rem 0; font-size:0.8rem; padding:0.25rem 0.25rem; flex-wrap:wrap;}
.list-filters label {display:flex; align-items:center; gap:0.4rem; cursor:pointer; user-select:none; font-weight:500; color:#374151;}
.list-filters input[type=checkbox] {width:15px; height:15px; cursor:pointer;}
.empty-state {padding:1rem 1.25rem; background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:6px; font-size:0.85rem; color:#475569; margin-bottom:1.25rem;}

.assignment-item:hover {
  background-color: rgba(67, 97, 238, 0.05);
}

/* Editing state highlight */
.assignment-item.editing {background:#fffef7; box-shadow:inset 0 0 0 2px #fcd34d40; border-radius:6px;}

/* Collapsible edit panel below summary line */
.assignment-item .edit-panel {width:100%; padding:0 0.25rem 0.85rem 0.25rem; animation:panelSlide .28s ease;}
@keyframes panelSlide {from {opacity:0; transform:translateY(-4px);} to {opacity:1; transform:translateY(0);} }
.assignment-line.is-editing {position:relative;}
.assignment-line.is-editing:after {content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg,var(--primary-light),var(--secondary)); opacity:.35; border-radius:2px;}
.btn.btn-cancel {background:#e5e7eb; color:#374151;}
.btn.btn-cancel:hover {background:#d1d5db;}
body.dark-mode .btn.btn-cancel {background:#303552; color:#e0e4ff;}
body.dark-mode .btn.btn-cancel:hover {background:#3a3e5c;}

/* Modern edit form layout */
.edit-form-modern {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem 1.25rem; padding:0.75rem 0.25rem 0.25rem; width:100%;}
.edit-form-modern .field {display:flex; flex-direction:column; gap:0.4rem; min-width:0;}
.edit-form-modern .date-time-stack {display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center;}
.edit-form-modern .date-time-stack input[type="date"] {flex:1 1 180px; min-width:160px;}
.edit-form-modern .date-time-stack .due-time-input {flex:0 0 auto; width:clamp(10ch, 16vw, 14ch); text-transform:uppercase;}
.edit-form-modern label {font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; color:#475569;}
body.dark-mode .edit-form-modern label {color:#b9bff0;}
.edit-form-modern input, .edit-form-modern textarea {border:1px solid #d0d7e2; background:#f8fafc; padding:.6rem .7rem; border-radius:6px; font:inherit; font-size:.85rem; transition:border .2s, background .25s, box-shadow .2s;}
.edit-form-modern input:focus, .edit-form-modern textarea:focus {outline:none; border-color:var(--primary-light); background:#fff; box-shadow:0 0 0 3px rgba(67,97,238,.15);}
.edit-form-modern textarea {resize:vertical; min-height:110px; line-height:1.35;}
.edit-form-modern .span-2 {grid-column:span 2;}
.edit-form-modern .field.compact-field {flex:0 0 auto; min-width:140px; max-width:180px;}
.edit-form-modern .field.compact-field .numeric-input,
.edit-form-modern .field.compact-field .time-input {width:100%;}
.numeric-input {text-align:center; font-variant-numeric:tabular-nums;}
.attachments-field {display:flex; flex-direction:column; gap:0.75rem;}
.upload-zone {position:relative; border:2px dashed #cbd5f5; border-radius:8px; padding:1rem; background:#f8fafc; text-align:center; color:#526296; transition:border-color .2s, background .2s; min-height:128px; display:flex; align-items:center; justify-content:center;}
.upload-zone:hover, .upload-zone:focus-within {border-color:var(--primary-light); background:#eef2ff;}
.upload-zone .upload-input {position:absolute; inset:0; opacity:0; cursor:pointer;}
.upload-hint {display:flex; flex-direction:column; gap:0.35rem; pointer-events:none; font-size:0.85rem; font-weight:500;}
.upload-hint .upload-primary {font-weight:600; color:#1f2937;}
.upload-hint .upload-secondary {font-size:0.75rem; color:#6b7280;}
.upload-disabled {padding:0.75rem 1rem; border:1px dashed #cbd5f5; border-radius:8px; color:#475569; background:#f8fafc; font-size:0.85rem; text-align:center;}
.attachment-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem;}
.attachment-item {display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.6rem 0.75rem; border:1px solid #e2e8f0; border-radius:8px; background:white; box-shadow:0 1px 2px rgba(15,23,42,0.06);}
.attachment-meta {display:flex; flex-direction:column; gap:0.2rem; min-width:0;}
.attachment-name {font-weight:600; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.attachment-size {font-size:0.72rem; color:#64748b;}
.attachment-actions {display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;}
.attachment-actions select {padding:0.5rem; border-radius:6px; border:1px solid #cbd5e1; background:#f8fafc; font-size:0.8rem;}
.attachment-actions select:focus {outline:none; border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(99,102,241,0.2);}
body.dark-mode .upload-zone {border-color:#49537a; background:#161a2a; color:#cad3ff;}
body.dark-mode .upload-zone:hover,
body.dark-mode .upload-zone:focus-within {border-color:var(--primary-light); background:#1d2235;}
body.dark-mode .upload-hint .upload-primary {color:#e0e5ff;}
body.dark-mode .upload-hint .upload-secondary {color:#959cc4;}
body.dark-mode .upload-disabled {border-color:#3a4160; background:#15192a; color:#c1c7ec;}
body.dark-mode .attachment-item {background:#1b2032; border-color:#2d324a; box-shadow:0 4px 12px rgba(0,0,0,0.45);}
body.dark-mode .attachment-name {color:#f5f7fb;}
body.dark-mode .attachment-size {color:#9aa1c2;}
body.dark-mode .attachment-actions select {background:#1b2032; border-color:#333a58; color:#e0e5ff;}
body.dark-mode .attachment-actions select:focus {box-shadow:0 0 0 3px rgba(116,143,252,0.22);}
.edit-form-modern .span-3 {grid-column:span 3;}
.edit-form-modern .row-full {grid-column:1 / -1;}
.edit-form-modern .field-row {display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end;}
.edit-form-modern .field-row .field {flex:1 1 0; min-width:180px;}
.edit-form-modern .field.compact-field {flex:0 0 auto; min-width:auto;}
.edit-form-modern .field.compact-field .numeric-input {width:clamp(6ch, 10vw, 8.5ch);}
.edit-form-modern .field.compact-field .time-input {width:clamp(6.5ch, 9vw, 9.5ch);}
.numeric-input {text-align:center;}
.edit-form-modern .edit-actions {display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;}
.edit-form-modern .btn {background:#64748b; color:#fff;}
.edit-form-modern .btn:hover {background:#475569;}
.edit-form-modern .btn.btn-save {background:var(--secondary);} 
.edit-form-modern .btn.btn-save:hover {background:#2d2aa8;}
.edit-form-modern .btn.btn-delete {background:var(--danger);} 
.edit-form-modern .btn.btn-delete:hover {background:#dc2626;}


@media (max-width: 640px){
  .edit-form-modern {grid-template-columns:1fr;}
  .edit-form-modern .span-2 {grid-column:span 1;}
  .attachments-field {gap:0.6rem;}
  .edit-form-modern .field.compact-field {max-width:none; min-width:0;}
  .edit-form-modern .span-3 {grid-column:span 1;}
  .edit-form-modern .row-full {grid-column:1 / -1;}
  .edit-form-modern .field-row {flex-direction:column;}
  .edit-form-modern .field.compact-field .numeric-input,
  .edit-form-modern .field.compact-field .time-input {width:100%;}
  .edit-form-modern .date-time-stack {flex-direction:column; align-items:stretch;}
  .edit-form-modern .date-time-stack input[type="date"] {flex:1 1 auto; min-width:0;}
  .edit-form-modern .date-time-stack .due-time-input {width:100%;}
}

/* Compact single-line assignment styles */
.assignment-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  font-size: 0.85rem;
}

/* Compact line icon button palette (single-line assignment view) */
.assignment-line .icon-btn { color:#6b7280; }
.assignment-line .icon-btn:hover { color:var(--primary); background:rgba(0,0,0,0.06); }
.assignment-line .icon-btn--danger { color:#dc2626; }
.assignment-line .icon-btn--danger:hover { color:#b91c1c; background:rgba(185,28,28,0.08); }
/* Outline SVG icons */
.icon-outline { stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; width:18px; height:18px; display:block; }
.icon-outline path { vector-effect: non-scaling-stroke; }

.assignment-line .subject-bubble {
  flex: 0 0 auto;
  font-size: 0.65rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px; /* slight rounding */
  color: #1e1f2a;
  font-weight: 600;
}

.single-line-title {
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desc-inline {
  color: #616161;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}

.progress-mini {
  position: relative;
  width: 70px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 70px;
}

/* Stacked points + completion bar */
.progress-stack {display:flex; flex-direction:column; gap:0.25rem; min-width:110px; flex:0 0 auto;}
.progress-stack .top-row {display:flex; align-items:center; gap:0.4rem;}
.progress-stack .complete-label {font-size:0.55rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#64748b;}
.progress-stack .progress-mini {margin-top:0; width:100%; flex:0 0 auto;}

.progress-mini .bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--success), var(--primary-light));
}

.points-mini {
  font-size: 0.65rem;
  font-weight: 600;
  color: #374151;
  background: #f3f4f6;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  flex: 0 0 auto;
}

.points-chip {
  background: #e0f2fe;
  color: #075985;
  font-size: 0.55rem;
  font-weight: 600;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.points-chip.actual {
  background: #dcfce7;
  color: #166534;
}

.due-time-chip {
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-right: 0.5rem;
  margin-left: 0.4rem;
  flex: 0 0 auto;
}

body.dark-mode .due-time-chip {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
}

/* Time chips */
.time-chip {background:#eef2ff; color:#4338ca; font-size:0.55rem; font-weight:600; padding:0.25rem 0.4rem; border-radius:4px; letter-spacing:.5px; text-transform:uppercase;}
.time-chip.actual {background:#f0fdf4; color:#166534;}
.time-chip.remaining {background:#fef9c3; color:#854d0e;}

.compact-actions {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.assignment-list {
  border-top: 1px solid #eceff3;
}

.assignment-item {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid #eceff3;
}

.assignment-item:hover {
  background: #f9fafc;
}

.assignment-item:last-child {
  border-bottom: none;
}

.time-input {font-family:monospace; letter-spacing:1px; text-align:center;}

/* Error UI */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

 .blazor-error-boundary {
  border:2px dashed #dc2626;
  padding:0.75rem;
  background:#fff5f5;
  color:#b91c1c;
}

/* Workload chart */
.workload-chart {margin:0.75rem 0 1rem; padding:0.5rem 0.25rem; background:#fff; border:1px solid #e2e8f0; border-radius:8px;}
.workload-chart {overflow-x:auto;}
.workload-chart svg {width:100%; font:10px/1.2 system-ui, sans-serif; height:auto;}
.workload-chart .bar {fill:#6366f1; opacity:.85;}
.workload-chart .bar:hover {opacity:1;}
.workload-chart .bar-val {font-size:9px; fill:#334155; font-weight:600;}
.workload-chart .bar-val.inside {fill:#fff;}
.workload-chart .x-label {font-size:9px; fill:#475569; font-weight:500;}
.workload-chart .axis-label {font-size:10px; fill:#1e293b; font-weight:600;}
.workload-chart .tick {font-size:9px; fill:#64748b;}
.empty-forecast {font-size:.7rem; padding:.4rem .6rem; color:#64748b;}
/* stacked workload segments */
.workload-chart .seg {stroke:#47556930; stroke-width:.5;}

body.dark-mode .workload-chart {
  background: #1c1f2b;
  border-color: #2a2e42;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

body.dark-mode .workload-chart .axis-label {
  fill: #f5f7fb;
}

body.dark-mode .workload-chart .tick {
  fill: #9aa1c2;
}

body.dark-mode .workload-chart .x-label {
  fill: #c7caf5;
}

body.dark-mode .workload-chart .bar-val {
  fill: #d9ddff;
}

body.dark-mode .empty-forecast {
  color: #9aa1c2;
}