/* GLOBAL MOBILE & WEB SPACING FIX */

body{
  padding: 0;
  margin: 0;
}

.main-container{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Mobile extra spacing */
@media (max-width: 768px){
  body{
    padding: 0 10px !important;
  }

  .main-container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .panel{
    padding: 12px !important;
  }

  table{
    width: 100%;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%; /* stop weird auto zoom on mobile */
}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(circle at top,#020617 0,#020617 40%,#0b1120 100%);
  color:#e5e7eb;
  line-height:1.5;
}
.bg{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:radial-gradient(circle at top,#0f172a 0,#020617 55%,#020617 100%);
}
.login-card{
  background:#020617;
  padding:24px 20px;
  border-radius:10px;
  box-shadow:0 24px 55px rgba(15,23,42,.9);
  max-width:380px;
  width:100%;
  border:1px solid #1f2937;
}
.title{font-size:1.5rem;margin-bottom:4px;color:#f9fafb}
.subtitle{font-size:.85rem;color:#9ca3af;margin-bottom:12px}
.form label{display:block;font-size:.85rem;margin-top:10px;margin-bottom:4px;color:#e5e7eb}
input,select{
  width:100%;padding:8px 10px;border-radius:10px;
  border:1px solid #374151;font-size:.9rem;
  background:#020617;color:#e5e7eb;
}
input:focus,select:focus{
  outline:none;border-color:#38bdf8;
  box-shadow:0 0 0 1px #38bdf833;
  background:#020617;
}
.btn-primary{
  margin-top:14px;padding:9px 16px;border:none;border-radius:6px;
  background:linear-gradient(135deg,#22c55e,#22c55e);
  color:#022c22;font-weight:700;cursor:pointer;font-size:.9rem;
  transition:background .15s,transform .05s,box-shadow .15s;
}
.btn-primary:hover{box-shadow:0 10px 25px rgba(34,197,94,.35)}
.btn-primary:active{transform:scale(.97);background:linear-gradient(135deg,#16a34a,#16a34a)}
.alert{
  padding:8px 10px;border-radius:10px;font-size:.85rem;margin-bottom:6px;
  background:#052e16;color:#bbf7d0;border:1px solid #166534;
}
.alert-error{
  background:#450a0a;color:#fecaca;border:1px solid #b91c1c;
}
.topbar{
  background:linear-gradient(90deg,#020617,#020617);
  color:#f9fafb;padding:10px 0;
  box-shadow:0 1px 6px rgba(15,23,42,.9);
  border-bottom:1px solid #111827;
}
.topbar-inner{
  max-width:1120px;margin:0 auto;padding:0 16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.logo{font-size:1.25rem;font-weight:700;color:#f9fafb}
.topbar-sub{font-size:.8rem;color:#9ca3af}
.btn-secondary{
  padding:7px 12px;border-radius:6px;border:1px solid #4b5563;
  background:#020617;color:#e5e7eb;font-size:.8rem;
  text-decoration:none;margin-left:6px;
  transition:background .15s,transform .05s,box-shadow .15s;
}
.btn-secondary:hover{
  background:#111827;box-shadow:0 4px 12px rgba(15,23,42,.7);
}
.btn-secondary:active{transform:scale(.97);background:#000}
.layout{
  max-width:1120px;margin:18px auto;padding:0 16px;
  display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1.1fr);
  gap:16px;
}
.layout-admin{grid-template-columns:minmax(0,2fr) minmax(0,1.2fr)}
.panel{
  background:#020617;border-radius:10px;padding:14px 14px 16px 14px;
  box-shadow:0 18px 40px rgba(15,23,42,.9);
  min-height:120px;border:1px solid #1f2937;
}
.main-panel h2,.side-panel h2{
  font-size:1.05rem;margin-bottom:6px;color:#f9fafb;
}
.hint{font-size:.8rem;color:#9ca3af;margin-bottom:10px}
.portion-title{
  margin-top:10px;margin-bottom:4px;font-size:.95rem;color:#f9fafb;
  border-left:4px solid #38bdf8;padding-left:6px;
}
.muted{font-size:.8rem;color:#9ca3af}
.table{
  width:100%;border-collapse:collapse;margin-bottom:6px;font-size:.85rem;
}
.table th,.table td{
  padding:6px 6px;border-bottom:1px solid #111827;text-align:left;vertical-align:top;
}
.table th{
  background:#020617;
  background:linear-gradient(135deg,#111827,#020617);
  color:#e5e7eb;font-weight:600;font-size:.82rem;
  position:sticky;top:0;z-index:1;
}
.table.compact th,.table.compact td{padding:4px 5px}
.qty{font-weight:600;color:#e5e7eb}
.take-input{
  width:70px;padding:5px 6px;border-radius:8px;
  border:1px solid #4b5563;font-size:.8rem;background:#020617;color:#e5e7eb;
}
.take-input:focus{
  border-color:#22c55e;box-shadow:0 0 0 1px #22c55e33;
}
.btn-small{
  padding:4px 8px;border-radius:6px;border:none;
  background:#22c55e;color:#022c22;font-size:.75rem;cursor:pointer;
  white-space:nowrap;transition:background .15s,transform .05s,box-shadow .15s;
}
.btn-small:hover{background:#16a34a;box-shadow:0 4px 14px rgba(34,197,94,.5)}
.btn-small:active{transform:scale(.97);background:#166534}
.today-list{
  list-style:none;font-size:.82rem;max-height:380px;overflow:auto;padding-right:4px;
  background:#020617;border-radius:12px;padding:6px;margin-top:4px;
  border:1px solid #1f2937;
}
.today-list li{padding:5px 4px;border-bottom:1px dashed #1f2937}
.today-list li:last-child{border-bottom:none}
.today-list strong{color:#38bdf8}
.time{display:block;font-size:.7rem;color:#6b7280}
.student-block{
  border-radius:16px;border:1px solid #1f2937;
  padding:10px 10px;margin-bottom:12px;
  background:radial-gradient(circle at top left,#0f172a,#020617);
}
.student-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;font-size:.85rem;
}

/* Allocations and today boxes */
.student-alloc-box{
  border-radius:14px;padding:10px;margin-bottom:10px;
  background:linear-gradient(135deg,#052e16,#022c22);
  border:1px solid #15803d;
}
.student-today-box{
  margin-top:8px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,#451a03,#7c2d12);
  border:1px solid #ea580c;
}
.student-today-title{
  font-size:0.82rem;font-weight:700;
  background:#f97316;color:#111827;
  padding:4px 10px;border-radius:6px;
  display:inline-block;margin-bottom:6px;
}

/* Category + Portion badges */
td.category-cell{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  border-radius:6px;
  color:#e0f2fe;font-weight:600;
  padding:4px 10px;font-size:.78rem;
}
td.portion-cell{
  border-radius:6px;
  padding:4px 10px;font-size:.78rem;
  font-weight:600;
}
td.portion-breakfast{background:linear-gradient(135deg,#0f766e,#14b8a6);color:#ecfeff;}
td.portion-lunch{background:linear-gradient(135deg,#1d4ed8,#38bdf8);color:#eff6ff;}
td.portion-dinner{background:linear-gradient(135deg,#7c2d12,#f97316);color:#fffbeb;}

.grand-total{
  margin-top:10px;font-size:.9rem;color:#e5e7eb;
  background:linear-gradient(135deg,#14532d,#166534);
  border-radius:12px;padding:6px 8px;border:1px solid #16a34a;
}

@media(max-width:768px){
  .layout,.layout-admin{grid-template-columns:minmax(0,1fr);}
  .topbar-inner{flex-direction:column;align-items:flex-start}
  .panel{padding:12px;margin-bottom:8px}
  .student-block{margin-bottom:10px}
  .table th,.table td{font-size:.78rem}
  .btn-secondary{margin-top:4px}
}
/* ===================== */
/* LIGHT THEME FOR STUDENT DASHBOARD */
/* ===================== */

.student-body{
  background:#f3f4f6;
  color:#111827;
}

/* top bar for student */
.student-body .topbar{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}
.student-body .topbar-inner{
  box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.student-body .logo{
  color:#111827;
}
.student-body .topbar-sub{
  color:#6b7280;
}

/* secondary buttons (Refresh / Logout) */
.student-body .btn-secondary{
  background:#ffffff;
  border-color:#d1d5db;
  color:#111827;
  border-radius:6px;
  box-shadow:0 1px 2px rgba(15,23,42,.1);
  transition:background .15s,box-shadow .15s,transform .05s;
}
.student-body .btn-secondary:hover{
  background:#f3f4f6;
  box-shadow:0 3px 8px rgba(15,23,42,.18);
}
.student-body .btn-secondary:active{
  transform:scale(.98);
  background:#e5e7eb;
}

/* student panels */
.student-body .panel{
  background:#ffffff;
  border-color:#e5e7eb;
  box-shadow:0 10px 25px rgba(15,23,42,.08);
}

/* colorful table headers for student */
.student-body .table th{
  background:linear-gradient(135deg,#0f172a,#1f2937);
  color:#f9fafb;
}

/* category cell in student view – light but colorful */
.student-body td.category-cell{
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
  color:#0f172a;
  border-radius:6px;
}

/* portion colors in student view – light theme */
.student-body td.portion-cell{
  border-radius:6px;
}
.student-body td.portion-breakfast{
  background:#dcfce7;
  color:#166534;
}
.student-body td.portion-lunch{
  background:#dbeafe;
  color:#1d4ed8;
}
.student-body td.portion-dinner{
  background:#ffedd5;
  color:#c2410c;
}

/* section heading for Breakfast / Lunch / Dinner */
.student-body .portion-heading{
  margin-top:12px;
  margin-bottom:6px;
  font-size:.95rem;
  font-weight:600;
  background:#e5e7eb;
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  color:#111827;
}

/* buttons on student page (Confirm) – square + click effect */
.student-body .btn-small{
  background:#22c55e;
  color:#022c22;
  border-radius:6px;
  box-shadow:0 1px 2px rgba(16,185,129,.4);
  transition:background .15s,box-shadow .15s,transform .05s;
}
.student-body .btn-small:hover{
  background:#16a34a;
  box-shadow:0 4px 10px rgba(22,163,74,.6);
}
.student-body .btn-small:active{
  transform:scale(.97);
  background:#15803d;
}

/* take input field */
.student-body .take-input{
  background:#ffffff;
  color:#111827;
  border-color:#d1d5db;
}

/* grand total box */
.student-body .grand-total{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#166534;
}

/* today summary + list */
.student-body .side-panel{
  background:#ffffff;
}
.student-body .today-list{
  background:#f9fafb;
  border-color:#e5e7eb;
}
.student-body .today-list strong{
  color:#1d4ed8;
}
.student-body .time{
  color:#6b7280;
}

/* mobile tweaks for student */
@media(max-width:768px){
  .student-body .panel{
    padding:10px;
  }
}
/* Force black color for main headings on student dashboard */
.student-body .main-panel h2,
.student-body .side-panel h2{
  color:#111827 !important;
  font-weight:700;
}
/* ===================== */
/* MOBILE FRIENDLY LAYOUT */
/* ===================== */
@media (max-width: 768px) {

  /* 1-column layout on mobile */
  .layout,
  .layout-admin {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Top bar stacks nicely */
  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Panels a bit tighter */
  .panel {
    padding: 10px;
    margin-bottom: 8px;
  }

  .student-block {
    padding: 8px;
    margin-bottom: 10px;
  }

  /* Tables: allow horizontal scroll instead of breaking */
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .table th,
  .table td {
    font-size: 0.75rem;
    padding: 4px 4px;
  }

  /* Buttons easier to tap */
  .btn-secondary,
  .btn-small {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  /* Inputs smaller but clear */
  .take-input {
    width: 64px;
    font-size: 0.78rem;
  }

  /* Today list shorter on mobile */
  .today-list {
    max-height: 260px;
  }
}
/* === Better mobile view specifically for student dashboard === */
@media (max-width: 768px) {

  /* Slightly smaller base text on student page */
  .student-body{
    font-size:14px;
  }

  .student-body h2{
    font-size:1rem;
  }

  /* Tables: use full width, allow wrapping instead of zooming */
  .student-body .table{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:normal;   /* allow long item names to wrap */
  }

  .student-body .table th,
  .student-body .table td{
    font-size:0.78rem;
    padding:4px 4px;
  }

  /* Panels a bit tighter on mobile */
  .student-body .panel{
    padding:10px;
    margin-bottom:10px;
  }

  /* Buttons a bit smaller but still tappable */
  .student-body .btn-small,
  .student-body .btn-secondary{
    padding:6px 10px;
    font-size:0.8rem;
  }

  .student-body .take-input{
    width:60px;
    font-size:0.78rem;
  }

  .student-body .today-list{
    max-height:260px;
  }
}
/* ===== Make Student page match Admin mobile feel ===== */

.student-body .layout{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Student panels spacing like admin */
.student-body .panel{
  padding: 16px !important;
}

/* Improve student table spacing */
.student-body table{
  width: 100%;
  border-spacing: 0 8px;
}

/* Cleaner cards on mobile */
@media (max-width: 768px){
  .student-body{
    padding: 0 12px !important;
  }

  .student-body .panel{
    padding: 14px !important;
  }
}
/* Make Remaining column text solid black and strong */
.qty {
    color: #000 !important;       /* pure black */
    font-weight: bold;            /* make it stand out */
    opacity: 1 !important;        /* remove any transparency */
}
/* Green WhatsApp copy button */
#copyShareBtn {
    background-color: #25D366;
    color: #fff;
    border: none;
    padding: 10px 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

#copyShareBtn:hover {
    background-color: #1ebc5a;
}