/* ═══ RESET & BASE ═══ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:#f5f5f3;color:#1a1a1a;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ═══ GLOBAL TRANSITIONS ═══ */
a,button,input,select,textarea,.btn,.btn-s,.card,.stat,.chip,.badge,.stg-item .rm,.drop-zone,.user-row{
  transition:all .18s ease}

/* ═══ LOGIN ═══ */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f3;background-image:radial-gradient(ellipse at 30% 20%,rgba(29,78,216,.04) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(124,58,237,.03) 0%,transparent 60%)}
.login-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:40px 36px;width:380px;max-width:92vw;box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.06)}
.login-brand{text-align:center;margin-bottom:28px}
.login-logo{height:36px;margin-bottom:10px;object-fit:contain}
.login-brand p{font-size:13px;color:#8c8c88;margin-top:2px;font-weight:500;letter-spacing:.01em}
.login-error{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;font-size:12px;padding:10px 14px;border-radius:10px;margin-bottom:14px;line-height:1.4}

/* ═══════════════════════════════════════
   SIDEBAR (desktop)
   ═══════════════════════════════════════ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:220px;
  background:#fff;border-right:1px solid #eceae6;
  z-index:40;display:flex;flex-direction:column;
  transition:width .25s ease;overflow:hidden;
  box-shadow:1px 0 4px rgba(0,0,0,.03)}
.sidebar.collapsed{width:60px}

.sb-top{
  display:flex;align-items:center;gap:10px;
  padding:16px 16px 14px;border-bottom:1px solid #f0eeea;
  min-height:56px;flex-shrink:0}
.sb-logo{height:26px;object-fit:contain;flex-shrink:0}
.sb-title{font-size:13px;font-weight:700;color:#1a1a1a;white-space:nowrap;overflow:hidden;transition:opacity .2s ease}
.sidebar.collapsed .sb-title{opacity:0;width:0}
.sb-toggle{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:#9c9c97;padding:4px;border-radius:6px;flex-shrink:0}
.sb-toggle:hover{background:#f0eeea;color:#1a1a1a}

/* Sidebar navigation */
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;scrollbar-width:thin;scrollbar-color:#e0deda transparent}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-thumb{background:#e0deda;border-radius:2px}

.sb-section{padding:16px 16px 4px;font-size:9px;font-weight:700;color:#b0b0ab;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;overflow:hidden}
.sidebar.collapsed .sb-section{text-align:center;font-size:0;padding:12px 0 4px}
.sidebar.collapsed .sb-section::after{content:'';display:block;width:24px;height:1px;background:#e5e3de;margin:0 auto}

.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;margin:1px 8px;border-radius:8px;
  font-size:12px;font-weight:500;color:#6b6b66;
  cursor:pointer;white-space:nowrap;overflow:hidden;
  border:none;background:none;width:calc(100% - 16px);text-align:left;
  font-family:inherit;transition:all .15s ease}
.sb-item:hover{background:#f5f5f3;color:#1a1a1a}
.sb-item.active{background:rgba(29,78,216,.06);color:#1d4ed8;font-weight:600}
.sb-item svg{flex-shrink:0;width:18px;height:18px}
.sb-item .sb-label{overflow:hidden;transition:opacity .2s ease}
.sidebar.collapsed .sb-item{padding:8px 0;margin:1px 4px;justify-content:center;width:calc(100% - 8px)}
.sidebar.collapsed .sb-item .sb-label{opacity:0;width:0;position:absolute}

/* ═══════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════ */
.main-wrap{
  margin-left:220px;min-height:100vh;
  transition:margin-left .25s ease;display:flex;flex-direction:column}
.sidebar.collapsed ~ .main-wrap{margin-left:60px}

/* ═══ TOP BAR ═══ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;background:#fff;border-bottom:1px solid #eceae6;
  position:sticky;top:0;z-index:30;gap:10px;min-height:52px;
  box-shadow:0 1px 3px rgba(0,0,0,.03)}
.topbar-left{display:flex;align-items:center;gap:8px}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-user{font-size:12px;color:#6b6b66;display:flex;align-items:center;gap:6px}
.topbar-hamburger{display:none;background:none;border:none;cursor:pointer;color:#6b6b66;padding:4px}

.content-area{padding:20px 24px;flex:1}

/* ═══ STATS ═══ */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.stat{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.stat:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);transform:translateY(-1px)}
.stat-l{font-size:11px;color:#9c9c97;margin-bottom:4px;font-weight:500}
.stat-v{font-size:22px;font-weight:700;letter-spacing:-.02em}
.stat-v.r{color:#dc2626}.stat-v.p{color:#7c3aed}.stat-v.g{color:#16a34a}

/* ═══ VIEWS ═══ */
.view{display:none;animation:fadeIn .2s ease}
.view.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ═══ BUTTONS ═══ */
.btn{font-size:12px;padding:7px 14px;border-radius:8px;border:1px solid #e0deda;background:#fff;color:#1a1a1a;cursor:pointer;font-family:inherit;white-space:nowrap;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn:hover{background:#fafaf8;box-shadow:0 2px 4px rgba(0,0,0,.06);transform:translateY(-0.5px)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn-p{background:#1d4ed8;color:#fff;border-color:#1d4ed8;box-shadow:0 1px 3px rgba(29,78,216,.25)}
.btn-p:hover{background:#1e40af;box-shadow:0 4px 12px rgba(29,78,216,.3);transform:translateY(-0.5px)}
.btn-d{color:#dc2626;border-color:#fca5a5;background:#fff}
.btn-d:hover{background:#fef2f2;border-color:#f87171}
.btn-s{font-size:10px;padding:3px 8px;border-radius:6px;border:1px solid #e5e3de;background:#fff;color:#64748b;cursor:pointer;font-family:inherit;font-weight:500;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.btn-s:hover{background:#f0f0ec;color:#1a1a1a;border-color:#d0cec8;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.btn:disabled,.btn-s:disabled,.btn-p:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ═══ BADGES ═══ */
.badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;letter-spacing:.01em}
.bp0{background:#fee2e2;color:#991b1b}.bp1{background:#fef3c7;color:#92400e}.bp2{background:#dbeafe;color:#1e3a8a}.bp3{background:#dcfce7;color:#14532d}
.st{background:#f1f5f9;color:#475569}.sw{background:#fef3c7;color:#92400e}.sr{background:#dbeafe;color:#1e3a8a}.sq{background:#ede9fe;color:#5b21b6}.sd{background:#dcfce7;color:#166534}.sb{background:#fee2e2;color:#991b1b}
.qnr{background:#f1f5f9;color:#94a3b8}.qpq{background:#ede9fe;color:#5b21b6}.qpa{background:#dcfce7;color:#166534}.qfa{background:#fee2e2;color:#991b1b}.qna{background:#f1f5f9;color:#94a3b8}
.role-badge{font-size:9px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.role-admin{background:#dbeafe;color:#1e3a8a}.role-ops{background:#fef3c7;color:#92400e}.role-viewer{background:#f1f5f9;color:#64748b}

/* ═══ TABLE ═══ */
.tbl{overflow-x:auto;border-radius:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.03);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12px;background:#fff}
@media(max-width:900px){table{min-width:900px}}
th{font-size:10px;font-weight:600;color:#9c9c97;text-align:left;padding:10px 10px;border-bottom:1px solid #eceae6;background:#fafaf8;text-transform:uppercase;letter-spacing:.05em}
td{padding:9px 10px;border-bottom:1px solid #f5f4f1;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafaf8}
.rsk td{background:#fef8f8}
.rsk:hover td{background:#fef2f2}

/* ═══ MISC ELEMENTS ═══ */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot-r{background:#dc2626}.dot-a{background:#d97706}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:16px 18px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.05)}
.card h4{font-size:13px;font-weight:700;color:#1a1a1a}.card-sub{font-size:11px;color:#9c9c97;margin-top:3px}
.prog{height:6px;background:#f0eeea;border-radius:3px;margin:8px 0;overflow:hidden}.prog-f{height:6px;border-radius:3px;transition:width .4s ease}
.chip{display:inline-block;font-size:10px;padding:3px 10px;border-radius:20px;margin:2px 2px 2px 0;border:1px solid #e5e3de;background:#fafaf8;color:#64748b;font-weight:500}
.chip:hover{background:#f0f0ec;border-color:#d0cec8}
.chip.bl{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.chip.dn{background:#dcfce7;color:#166534;border-color:#86efac}
.chip.rk{background:#fef3c7;color:#92400e;border-color:#fde68a}
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ld{height:7px;border-radius:4px;background:#f0eeea;flex:1;overflow:hidden}.ld-f{height:7px;border-radius:4px;transition:width .4s ease}

/* ═══ CALENDAR ═══ */
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cd{font-size:10px;font-weight:600;color:#9c9c97;text-align:center;padding:4px}
.cc{min-height:62px;border:1px solid rgba(0,0,0,.06);border-radius:8px;padding:4px;background:#fff;transition:box-shadow .18s ease}
.cc:hover{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.cc.ty{border-color:#1d4ed8;background:#eff6ff;box-shadow:0 0 0 1px rgba(29,78,216,.15)}
.cc.em{background:#fafaf8;border-color:#f0eeea}
.ci{font-size:9px;padding:2px 4px;border-radius:4px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ EOD ═══ */
.eod{background:#fafaf8;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:20px;font-size:12px;line-height:1.9;white-space:pre-wrap;font-family:'DM Sans',sans-serif;color:#3a3a3a;box-shadow:0 1px 2px rgba(0,0,0,.03)}

/* ═══ LABELS / SECTIONS ═══ */
.slbl{font-size:10px;font-weight:600;color:#9c9c97;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.rc{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px 16px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.rc:hover{box-shadow:0 2px 6px rgba(0,0,0,.06)}
.rc.hi{border-left:3px solid #dc2626;border-radius:0 12px 12px 0}
.rc.md{border-left:3px solid #d97706;border-radius:0 12px 12px 0}

/* ═══ MODALS ═══ */
.ov{display:none;position:fixed;inset:0;background:rgba(10,10,10,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:50;align-items:center;justify-content:center}
.ov.op{display:flex;animation:overlayIn .2s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.mdl{background:#fff;border-radius:16px;padding:24px;width:540px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);animation:modalSlide .25s ease}
@keyframes modalSlide{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.mdl h3{font-size:15px;font-weight:700;margin-bottom:16px;color:#1a1a1a}

/* ═══ FORMS ═══ */
.fr{margin-bottom:10px}
.fr label{display:block;font-size:10px;color:#9c9c97;margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.fr input,.fr select,.fr textarea{width:100%;font-size:12px;padding:8px 12px;border-radius:8px;border:1px solid #e0deda;background:#fff;font-family:inherit;outline:none;transition:border-color .18s ease,box-shadow .18s ease;color:#1a1a1a}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.fr input::placeholder,.fr textarea::placeholder{color:#c4c4bf}
.fr textarea{resize:vertical;min-height:52px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid #f0eeea}
.ib{display:flex;gap:4px;align-items:center}
.ib input{font-size:11px;padding:4px 8px;border-radius:6px;border:1px solid #93c5fd;outline:none;min-width:70px}

/* ═══ MISC ═══ */
.empty{text-align:center;padding:2.5rem;color:#b0b0ab;font-size:13px;font-weight:500}
.stg-list{max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e0deda transparent}
.stg-list::-webkit-scrollbar{width:4px}
.stg-list::-webkit-scrollbar-thumb{background:#e0deda;border-radius:2px}
.stg-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px}
.stg-item:hover{background:#fafaf8}
.stg-item .rm{font-size:10px;color:#e0aca8;cursor:pointer;opacity:0;transition:all .18s ease;font-weight:500}
.stg-item:hover .rm{opacity:1}
.stg-item .rm:hover{color:#dc2626}
.qa-sec{border-top:1px solid #f0eeea;margin-top:14px;padding-top:14px}
.qa-sec .slbl{color:#7c3aed}
input[type=file]{display:none}

/* ═══ FILE DROP ZONE ═══ */
.drop-zone{border:2px dashed #d0cec8;border-radius:12px;padding:28px;text-align:center;color:#b0b0ab;font-size:12px;cursor:pointer;font-weight:500}
.drop-zone:hover,.drop-zone.drag-over{border-color:#1d4ed8;background:rgba(29,78,216,.04);color:#1d4ed8}
.drop-zone input[type=file]{display:none}

/* ═══ ACTIVITY LOG ═══ */
.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f5f4f1;font-size:12px}
.activity-item:last-child{border-bottom:none}
.activity-time{font-size:10px;color:#b0b0ab;white-space:nowrap;min-width:125px;font-weight:500}
.activity-action{font-weight:600}
.activity-detail{color:#6b6b66}

/* ═══ USER LIST ═══ */
.user-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;border:1px solid #f0eeea;margin-bottom:6px}
.user-row:hover{background:#fafaf8;border-color:#e5e3de;box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* ═══ LOADING SPINNER ═══ */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:20px;height:20px;border:2.5px solid #e5e3de;border-top-color:#1d4ed8;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}

/* ═══ ATTENDANCE ═══ */
.att-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.att-dot-g{background:#16a34a}.att-dot-r{background:#dc2626}.att-dot-a{background:#d97706}.att-dot-l{background:#7c3aed}
.att-person{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:12px}
.att-person:hover{background:#fafaf8}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.btn-clockout{background:#fff;border:1px solid #e0deda;color:#1a1a1a;font-size:12px;padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:all .18s ease}
.btn-clockout:hover{background:#fafaf8;box-shadow:0 2px 4px rgba(0,0,0,.06);transform:translateY(-0.5px)}
.btn-clockout:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;background:#f5f4f1;color:#9c9c97}
.team-status-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px;margin-top:8px}

/* ═══ TOAST NOTIFICATIONS ═══ */
.toast-container{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 18px;font-size:12px;font-family:'DM Sans',sans-serif;box-shadow:0 4px 20px rgba(0,0,0,.1);animation:toastIn .3s ease;display:flex;align-items:center;gap:8px;max-width:340px}
.toast.out{animation:toastOut .3s ease forwards}
.toast-ok{border-left:3px solid #16a34a;border-radius:0 12px 12px 0}
.toast-warn{border-left:3px solid #d97706;border-radius:0 12px 12px 0}
.toast-info{border-left:3px solid #1d4ed8;border-radius:0 12px 12px 0}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}

/* ═══════════════════════════════════════
   MOBILE BOTTOM BAR
   ═══════════════════════════════════════ */
.mobile-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid #eceae6;
  z-index:45;padding:4px 0 env(safe-area-inset-bottom,4px);
  box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.mobile-bar .mob-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:9px;font-weight:500;
  color:#9c9c97;padding:6px 4px;transition:color .15s ease}
.mobile-bar .mob-btn.active{color:#1d4ed8}
.mobile-bar .mob-btn.active svg{stroke:#1d4ed8}

/* Clock in/out toggle button on mobile bar */
.mob-clock{position:relative}
.mob-clock.clocked-in{color:#16a34a}
.mob-clock.clocked-in svg{stroke:#16a34a}
.mob-clock.clocked-out{color:#9c9c97}
.mob-clock-elapsed{font-size:8px;color:#16a34a;font-weight:600;margin-top:-1px}

/* ═══════════════════════════════════════
   MOBILE FULL-SCREEN MENU
   ═══════════════════════════════════════ */
.mobile-menu{
  display:none;position:fixed;inset:0;
  background:#fff;z-index:55;
  flex-direction:column;overflow-y:auto;
  animation:mmSlideIn .25s ease}
.mobile-menu.open{display:flex}
@keyframes mmSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

.mm-header{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;border-bottom:1px solid #f0eeea;flex-shrink:0}
.mm-close{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:#9c9c97;padding:4px;border-radius:8px}
.mm-close:hover{background:#f0eeea;color:#1a1a1a}

.mm-nav{flex:1;padding:12px 0;overflow-y:auto}
.mm-section{padding:16px 20px 6px;font-size:10px;font-weight:700;color:#b0b0ab;text-transform:uppercase;letter-spacing:.1em}
.mm-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;font-size:14px;font-weight:500;color:#4b4b46;
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
  font-family:inherit;transition:background .15s ease}
.mm-item:hover{background:#f5f5f3}
.mm-item.active{color:#1d4ed8;font-weight:600;background:rgba(29,78,216,.04)}
.mm-item svg{flex-shrink:0;width:20px;height:20px}

.mm-footer{
  padding:16px 20px;border-top:1px solid #f0eeea;flex-shrink:0;
  display:flex;flex-direction:column;gap:8px}

/* ═══════════════════════════════════════
   MOBILE MY TASKS — SWIPEABLE CARDS
   ═══════════════════════════════════════ */
.my-task-card{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;
  padding:14px 16px;margin-bottom:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  display:flex;align-items:center;gap:12px;
  touch-action:pan-y;user-select:none;
  transition:transform .2s ease,box-shadow .2s ease}
.my-task-card:active{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.my-task-info{flex:1;min-width:0}
.my-task-title{font-size:13px;font-weight:600;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.my-task-meta{font-size:11px;color:#9c9c97;margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.my-task-status{
  -webkit-appearance:none;appearance:none;
  border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;
  padding:8px 14px;border-radius:20px;
  min-width:85px;text-align:center;
  transition:all .18s ease;flex-shrink:0}
.my-task-status.s-todo{background:#f1f5f9;color:#475569}
.my-task-status.s-prog{background:#fef3c7;color:#92400e}
.my-task-status.s-done{background:#dcfce7;color:#166534}

/* ═══════════════════════════════════════
   OLD MOBILE TASK VIEW (All Tasks tab)
   ═══════════════════════════════════════ */
.mobile-tasks{display:none}
.mtask{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:12px 14px;margin-bottom:6px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.mtask-info{flex:1;min-width:0}
.mtask-title{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtask-meta{font-size:10px;color:#9c9c97;margin-top:2px}
.mtask-status{-webkit-appearance:none;appearance:none;font-size:10px;padding:6px 10px;border-radius:8px;border:1px solid #e0deda;background:#fff;font-family:inherit;font-weight:600;cursor:pointer;min-width:90px;text-align:center}
.mtask-status:focus{border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.1)}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (<768px)
   ═══════════════════════════════════════ */
@media(max-width:768px){
  /* Hide sidebar */
  .sidebar{display:none!important}

  /* Reset main wrap */
  .main-wrap{margin-left:0!important}

  /* Show bottom bar */
  .mobile-bar{display:flex}

  /* Add bottom padding for bottom bar */
  .content-area{padding:14px 16px 80px}

  /* Show hamburger in topbar */
  .topbar-hamburger{display:none}

  /* Topbar adjustments */
  .topbar{padding:8px 16px}

  /* Stats */
  .stats{grid-template-columns:repeat(3,1fr)}

  /* Forms */
  .fg{grid-template-columns:1fr}
  .login-card{padding:28px 24px;border-radius:16px}

  /* Hide desktop task table on mobile */
  .task-filters{display:none!important}
  .tbl{display:none!important}
  .mobile-tasks{display:block!important}
}

@media(max-width:480px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:10px 12px}
  .stat-v{font-size:18px}
  .topbar-left .btn{font-size:11px;padding:6px 10px}
}