:root{
  --bg: #0b0b0b;
  --card: #141414;
  --text: #f6f6f6;
  --muted: #6b7280;
  --dg-yellow: #FFD400;
}
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background: linear-gradient(135deg, #0b0b0b, #131313); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, 'Apple Color Emoji','Segoe UI Emoji'; }
#app{ min-height:100vh; display:flex; flex-direction:column; }

.topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; position:sticky; top:0; background:rgba(10,10,10,.8); backdrop-filter: blur(8px); border-bottom:1px solid #1f1f1f; z-index:10; }
.brand{ display:flex; gap:12px; align-items:center; }
.dg-badge{ background: var(--dg-yellow); color:#000; font-weight:900; padding:6px 8px; border-radius:10px; }
.title{ font-size:18px; font-weight:800; }
.subtitle{ font-size:12px; color:#9ca3af; }

.employee-nav{ display:flex; flex-wrap:wrap; gap:10px; row-gap:8px; margin-left:auto; justify-content:flex-end; align-content:flex-start; }
.employee-pill{
  background:#151515;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid #2a2a2a;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  color:#fafafa;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.employee-pill .dot{ width:10px; height:10px; border-radius:999px; background:#6b7280; }
.employee-pill.working .dot{ background:#22c55e; }
.employee-pill .label{ font-weight:700; letter-spacing:.2px; }
.employee-pill .badge-mod{
  font-size:10px; padding:2px 6px; border-radius:999px; background:#ff4747; color:#fff; font-weight:800;
  box-shadow:0 0 8px rgba(255,71,71,.4);
}
.employee-pill:hover{ transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.employee-pill.selected{
  background:#202020;
  box-shadow: 0 0 0 2px #FFD400 inset, 0 0 20px rgba(255,212,0,.25);
  transform: translateY(-1px) scale(1.02);
}
.employee-pill.selected .label{ color:#fff; }
.employee-pill.mod{ border-image: conic-gradient(from 0deg, #ff4d4d, #7f1d1d, #ff4d4d) 1; border:2px solid transparent; }
.employee-pill .dot{ width:10px; height:10px; border-radius:999px; background: var(--muted); }
.employee-pill.working .dot{ background:#22c55e; }
.employee-pill.mod{ box-shadow: inset 0 0 0 2px #ef4444; }
.employee-pill.selected{ background: linear-gradient(135deg, #FFD400, #111); color:#000; box-shadow: 0 0 14px rgba(255,212,0,0.35), inset 0 0 0 2px #222; }

main{ flex:1; padding: 16px; }



.home-grid{ display:grid; grid-template-columns: 1fr; gap:16px; }
.card{ background: var(--card); border-radius:16px; padding:16px; border:1px solid #222; }
.center{ text-align:center; }
.day-card .day{ font-size:32px; font-weight:900; }
.day-card .date{ color:#a1a1aa; }

.chips{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
.chip{ padding:6px 12px; border-radius:999px; border:1px solid #222; background:#111; }
.chip-t{ border-color:#f59e0b; }
.chip-p{ border-color:#34d399; }

/* Weather cluster */
.cluster{ position:relative; overflow:hidden; }
.cluster-bg{ position:absolute; inset:0; background: radial-gradient(600px 200px at 20% 50%, rgba(255,68,0,0.15), transparent), radial-gradient(600px 200px at 80% 50%, rgba(0,180,255,0.15), transparent); filter: blur(20px); }
.cluster-inner{ position:relative; display:flex; justify-content:space-between; align-items:center; z-index:1; }
.cluster-side .label{ font-size:14px; color:#9ca3af; text-align:center; }
.cluster-side .value{ font-size:28px; font-weight:800; text-align:center; }
.cluster-center .big{ font-size:44px; font-weight:900; text-align:center; }
.mini{ font-size:12px; color:#9ca3af; text-align:center; }

/* Progress */
.progress-card{ padding:1rem; border-radius:1rem; background: linear-gradient(135deg, #222, #111); box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.progress-header{ display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-bottom:.5rem; }
.progress-bar{ height:24px; border-radius:12px; background:#333; overflow:hidden; position:relative; }

/* Progress bar fill */
.progress-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, #fff41f, #fdb071, #fff41f);
  background-size:200% 100%;
  animation: progressGlow 3s linear infinite;
  transition: width .4s ease-in-out;
  border-radius:12px 0 0 12px;
}

@keyframes progressGlow{ 0%{background-position:0 0;} 100%{background-position:200% 0;} }
.progress-counter{ font-size:.9rem; color:#ccc; }
.rain-note{ margin-top:10px; color:#a3e635; }
.nodisplay{ display:none; }

/* Employee page */
.emp-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.btn.back{ background:#111; color:#fff; border:1px solid #333; border-radius:8px; padding:8px 12px; cursor:pointer; }
.emp-name{ font-weight:900; font-size:20px; }

.mod-banner{ width:100%; text-align:center; font-weight:900; color:#ff4d4d; background: radial-gradient(ellipse at center, rgba(255,77,77,0.15), rgba(0,0,0,0)); padding:10px 12px; border-radius:14px; margin:6px auto 12px; letter-spacing:.5px; max-width:680px; text-shadow:0 0 8px rgba(255,77,77,.5), 0 0 2px rgba(255,77,77,.4); }

.important{ background:#1b1b1b; border:1px solid #333; padding:10px 12px; border-radius:10px; margin-bottom:10px; }

.task-section{ margin:14px 0; }
.task-list{ display:flex; flex-direction:column; gap:10px; }
.task{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; background:#121212; border:1px solid #232323; border-radius:12px; padding:12px; }
.task .desc{ font-weight:600; }
.badge-critical{ margin-left:8px; font-size:10px; padding:2px 6px; border-radius:999px; background:#991b1b; color:#fff; }
.toggle{ border:1px solid #333; border-radius:10px; padding:8px 10px; background:#111; color:#fff; cursor:pointer; min-width:130px; }
.toggle.not{ border-color:#ef4444; color:#ef4444; }
.toggle.yes{ border-color:#22c55e; color:#22c55e; }

/* Store-wide bulletin card (super important) */
.bulletins-card{
  background: linear-gradient(135deg, #3b0a0a, #140000);
  border: 2px solid #ff4d4d;
  box-shadow: 0 10px 30px rgba(255,0,0,0.3), 0 0 0 4px rgba(255,77,77,0.2) inset;
  position: relative;
  overflow: hidden;
}
@keyframes stripes { 0%{ background-position:0 0;} 100%{ background-position:200px 0;} }
.bulletins-title{
  font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
  color:#FFD400; text-shadow:0 0 12px rgba(255,212,0,.5), 0 0 2px rgba(0,0,0,.6);
}
.bulletins-list{ margin:0; padding-left:18px; }
.bulletins-list li{ margin:6px 0; line-height:1.3; font-weight:600; }

.cluster-center{ display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; }

.emp-mod-badge{
  margin-left:10px; padding:4px 10px; border-radius:999px; 
  background:#ff4747; color:white; font-weight:800; font-size:.85rem;
  box-shadow:0 0 8px rgba(255,71,71,.35);
}

/* Enhanced selected state */
.employee-pill.selected{
  background: linear-gradient(135deg, rgba(255,212,0,.15), rgba(0,0,0,.0));
  box-shadow: 0 0 0 2px var(--dg-yellow) inset, 0 6px 24px rgba(255,212,0,.25);
  transform: translateY(-1px) scale(1.02);
}

.bulletins-text{ font-weight:800; font-size:1rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }

/* Important Note style for employees, matches STORE BULLETIN */
.important-note {
  background: linear-gradient(135deg, #5c0000, #220000);
  border: 2px solid #ff1a1a;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,0,0,0.4);
}
.important-note-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: #ffeb3b;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: block;
}

/* Login screen */
.login-screen{ position:relative; display:flex; align-items:center; justify-content:center; min-height:60vh; }
.login-card{ background: var(--card); border-radius: 16px; padding: 32px; width: min(560px, 94vw); box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 0 0 1px #1f1f1f; display:flex; flex-direction:column; align-items:center; gap:16px; }
.login-title{ font-size: 28px; font-weight: 900; letter-spacing:.25px; }
.login-form{ width:100%; display:flex; gap:12px; }
.login-input{ flex:1; background:#0f0f0f; color: var(--text); border:1px solid #2a2a2a; border-radius: 12px; padding: 14px 16px; font-size:18px; outline:none; }
.login-input:focus{ outline:2px solid #FFD40055; }
.login-btn{ padding: 14px 18px; font-size: 16px; border-radius: 12px; background: var(--dg-yellow); color:#000; font-weight:800; border:none; cursor:pointer; }
.login-hint{ color: var(--muted); font-size: 12px; }
.dg-badge.big{ transform: translateY(-6px); padding:10px 12px; font-size: 18px; border-radius: 14px; }

/* force hide */
.nodisplay{ display:none !important; }
.login-screen.nodisplay{ display:none !important; }
.home-grid.nodisplay{ display:none !important; }

/* view hide fix */

.view:not(.active){ display:none !important; }

/* Strong view visibility rules */
.view{ display:none !important; }
.view.active{ display:block !important; }


#employee {
  padding: 20px 40px;
  max-width: 1200px;   /* keeps it from being too wide on desktop */
  width: 100%;         /* allows it to shrink on smaller screens */
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  #employee {
    padding: 10px 15px;
  }
}

.type {
  color: #888;
  font-size: 0.9em;
  font-style: italic;
  margin-top: 4px;
}