/* ============================================================
   BRAND FONTS — Domino's Sans (variable)
   wght 100–950, wdth 50%–150% (Extra Cond → Extra Exp). Both weight and
   width are CSS-registered axes, so plain font-weight / font-stretch drive
   them directly — no font-variation-settings needed. The font also has a
   slnt axis for italics, but no italic text is used in this app, so
   font-style is left at its 'normal' default (declaring an oblique range
   here caused browsers to render everything slanted).
   Display = headings only (caps-only glyph set, no lowercase).
   Text = everything else (body, subheads, functional text).
   ============================================================ */
@font-face {
  font-family: 'Dominos Sans Display';
  src: url('../fonts/Dominos_Sans_Display_VF.woff2') format('woff2');
  font-weight: 100 950;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: 'Dominos Sans Text';
  src: url('../fonts/Dominos_Sans_Text_VF.woff2') format('woff2');
  font-weight: 100 950;
  font-stretch: 50% 150%;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS & DOMINO'S THEME
   ============================================================ */
:root {
  --primary-red: #FF0000;
  --primary-red-hover: #CC0000;
  --primary-red-tint: #FEEBE7;
  --primary-blue: #0090E2;
  --primary-blue-hover: #0073B5;
  --primary-blue-light: #E0EDF4;
  --primary-blue-tint: #F1F5F5;

  --success: #00a36c;
  --success-light: #e6faf4;
  --success-border: rgba(0,163,108,0.2);

  --warning: #f59e0b;
  --warning-light: #fef3e2;
  --warning-border: rgba(245,158,11,0.25);

  --danger: var(--primary-red);
  --danger-light: var(--primary-red-tint);
  --danger-border: rgba(255,0,0,0.2);

  --surface: #ffffff;
  --bg: #f4f6fb;
  --bg-muted: #edf0f7;
  --text: #0d1526;
  --text-sec: #4a5568;
  --text-tert: #8fa3b8;
  --border: #e0e6ef;
  --border-dark: #c8d3e0;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.09), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl: 0 24px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  --font: 'Dominos Sans Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Dominos Sans Display', -apple-system, BlinkMacSystemFont, sans-serif;

  --device-scale: 1;
  --device-w: 440px;
  --device-h: 953px;
  --device-radius: 48px;
  --device-pad: 6px;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font);font-variation-settings:'slnt' 0;font-style:normal}
html,body{height:100%;font-family:var(--font);color:var(--text);background:#070a12;-webkit-font-smoothing:antialiased;overflow:hidden}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:flex;height:100vh;overflow:hidden}

.shell-nav{width:280px;flex:0 0 280px;background:linear-gradient(180deg,#070a12 0%,#111827 100%);color:#f1f5f9;display:flex;flex-direction:column;border-right:1px solid #1e293b;z-index:10}
.shell-brand{padding:20px 20px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #1e293b}
.domino-logo-sidebar{display:flex;gap:4px;transform:rotate(-12deg);width:36px;height:18px;flex-shrink:0}
.domino-tile-sidebar{width:17px;height:17px;border-radius:3px;position:relative}
.domino-tile-sidebar.blue{background:var(--primary-blue)}
.domino-tile-sidebar.red{background:var(--primary-red)}
.domino-dot-sidebar{width:3.5px;height:3.5px;background:#ffffff;border-radius:50%;position:absolute}
.domino-tile-sidebar.blue .domino-dot-sidebar{top:50%;left:50%;transform:translate(-50%,-50%)}
.domino-tile-sidebar.red .domino-dot-sidebar.d1{top:3.5px;left:3.5px}
.domino-tile-sidebar.red .domino-dot-sidebar.d2{bottom:3.5px;right:3.5px}
.shell-brand-info{line-height:1.2}
.shell-brand-info .name{font-size:14px;font-weight:800;color:#fff;letter-spacing:-0.2px}
.shell-brand-info .sub{font-size:11px;color:#64748b;margin-top:2px}
.shell-section{padding:16px 18px 6px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#475569;text-transform:uppercase}
.shell-list{list-style:none;padding:0 10px}
.shell-list li{margin:3px 0}
.shell-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:12px;color:#94a3b8;cursor:pointer;transition:all .15s ease;border:1px solid transparent}
.shell-link:hover{background:rgba(255,255,255,0.04);color:#f1f5f9}
.shell-link.active{background:rgba(0,144,226,0.15);color:#38bdf8;font-weight:600;border:1px solid rgba(0,144,226,0.3)}
.shell-link .num{font-size:10px;color:#475569;width:18px;flex-shrink:0;text-align:right}
.shell-link.active .num{color:#38bdf8}
.shell-link .ico{font-size:15px;flex-shrink:0}

/* Viewport */
.viewport-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.toolbar{height:48px;background:#0f172a;border-bottom:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;flex-shrink:0}
.toolbar .title{color:#94a3b8;font-size:12px;font-weight:500}
.toolbar .title b{color:#cbd5e1;font-weight:600}
.toolbar .right{display:flex;align-items:center;gap:12px}
.device-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:6px;border:1px solid #1e293b;background:#070a12;color:#64748b;font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s}
.device-btn.on{background:rgba(0,144,226,0.15);border-color:rgba(0,144,226,0.4);color:#38bdf8;font-weight:500}
.zoom-wrap{display:flex;align-items:center;gap:8px;color:#64748b;font-size:11px}
.zoom-wrap input[type=range]{width:110px;cursor:pointer;accent-color:var(--primary-blue)}
.zoom-val{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
/* The web page itself never scrolls — only the phone UI inside it does. The
   frame is centred and clipped here; use the zoom slider to fit it. */
.viewport{flex:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 0%,rgba(0,144,226,0.12),transparent 45%),radial-gradient(circle at 80% 100%,rgba(255,0,0,0.08),transparent 45%),#070a12;overflow:hidden;padding:32px;position:relative}
.viewport::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}

/* Device Frame */
.device-frame{position:relative;transition:all 0.25s ease-out;flex-shrink:0;background:#000000;box-shadow:0 40px 80px -20px rgba(0,0,0,0.8),0 0 0 1px rgba(255,255,255,0.12);width:var(--device-w);height:var(--device-h);border-radius:var(--device-radius);padding:var(--device-pad);overflow:hidden}
.device-screen{width:100%;height:100%;background:var(--bg);border-radius:calc(var(--device-radius) - 6px);overflow:hidden;position:relative;display:flex;flex-direction:column}

/* Dynamic Island */
.dynamic-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#000000;border-radius:20px;z-index:10001;display:flex;align-items:center;justify-content:center;transition:all 0.4s cubic-bezier(0.19,1,0.22,1);color:#fff;font-size:11px;pointer-events:none;padding:0 12px;font-weight:600}
.dynamic-island.expanded{width:280px;height:38px;border-radius:24px}
.dynamic-island .island-content{display:none;align-items:center;gap:8px;opacity:0;transition:opacity 0.2s ease;white-space:nowrap;width:100%;justify-content:center}
.dynamic-island.expanded .island-content{display:flex;opacity:1}

/* Status Bar */
.statusbar-phone{height:44px;background:transparent;display:flex;align-items:center;justify-content:space-between;padding:0 28px;flex-shrink:0;z-index:100;position:absolute;top:0;left:0;right:0}
.statusbar-phone .time{font-size:13.5px;font-weight:600;color:#000;letter-spacing:-0.2px}
.statusbar-phone.dark-status .time{color:#fff}
.statusbar-phone .icons{display:flex;align-items:center;gap:6px;color:#000}
.statusbar-phone.dark-status .icons{color:#fff}
.ios-icon{vertical-align:middle;display:inline-block}
.ios-home-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:140px;height:5px;background:#000000;border-radius:3px;z-index:10001;pointer-events:none}
.ios-home-bar.light-bar{background:#ffffff}

/* ============================================================
   SCREENS LAYOUT
   ============================================================ */
.screen{display:none !important;position:absolute;inset:0;width:100%;height:100%;flex-direction:column;background:var(--bg);overflow:hidden;padding-top:44px;}
.screen.active{display:flex !important;animation:screenFade .25s cubic-bezier(0.16,1,0.3,1);}
@keyframes screenFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Just enough room under the last item for the floating nav to sit over
   nothing: the nav is 60px tall and floats 22px up, plus a little breathing
   room. That clearance CANNOT be bottom padding — WebKit leaves a scrolling
   flex container's bottom padding out of the scrollable area, so in Safari
   the scroll would stop at the last card and whatever sits there stays stuck
   under the nav. A real flex item can't be dropped, so ::after reserves it.
   Its own row gap is cancelled so the number below is the whole tail. */
:root{--nav-clearance:94px}
.screen-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 22px 0;display:flex;flex-direction:column;gap:var(--body-gap);position:relative;--body-gap:18px}
.screen-body::after{content:'';flex:0 0 var(--body-clearance,var(--nav-clearance));margin-top:calc(0px - var(--body-gap))}
/* The body is a flex column, so its cards are flex items and would rather
   squash than let the body scroll. Lock every block at its natural height so
   overflow always turns into scroll; the two lists that own an inner scroll
   opt back in below. */
.screen-body > *{flex-shrink:0}
.screen-body > .agenda-list,
.screen-body > .day-timeslot-list{flex-shrink:1}
/* Home's agenda grows to fill the body and scrolls on its own, so the body
   itself never scrolls — a spacer there would only shrink the list. The
   agenda reserves the clearance itself below. */
.screen-body:has(> .agenda-list){--body-clearance:0px}


/* Hide scrollbars */
.device-screen *::-webkit-scrollbar{display:none !important;}
.device-screen *{-ms-overflow-style:none !important;scrollbar-width:none !important;}

/* ============================================================
   HEADER
   ============================================================ */
.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 10px;background:rgba(255,255,255,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,0.06);flex-shrink:0}
.mobile-header .title{font-size:19px;font-family:var(--font-display);font-weight:800;font-stretch:50%;color:var(--primary-blue);letter-spacing:normal;text-transform:uppercase}
.mobile-header .left-action,.mobile-header .right-action{display:flex;align-items:center;gap:8px;width:34px}
.mobile-header .circle-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--bg-muted);color:var(--text-sec);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .15s}

/* ============================================================
   FLOATING BOTTOM NAV
   ============================================================ */
.mobile-nav{position:absolute;bottom:22px;left:22px;right:22px;height:60px;background:rgba(255,255,255,0.92);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,0.7);border-radius:30px;display:flex;align-items:center;justify-content:space-around;box-shadow:0 8px 32px rgba(0,0,0,0.10),0 2px 8px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.9);z-index:1000;padding:0 16px;transform-origin:bottom center;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;color:var(--text-tert);cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);position:relative;}
.nav-item i{font-size:22px;transition:all 0.25s ease;}
.nav-item:hover{color:var(--text-sec);background:var(--bg-muted);}
.nav-item.active{background:var(--primary-blue);transform:scale(1.06);}
.nav-item.active i{color:#fff;}
.nav-item.active::after{content:'';position:absolute;bottom:-8px;width:4px;height:4px;border-radius:50%;background:var(--primary-red);}

/* Shrunk nav on scroll — 10% smaller, always visible */
.mobile-nav.shrunk{transform:translateY(8px) scale(0.90);opacity:0.80;box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.mobile-nav.shrunk .nav-item{width:38px;height:38px;}
.mobile-nav.shrunk .nav-item i{font-size:19px;}
.mobile-nav.shrunk .nav-item.active::after{display:none;}

/* ============================================================
   BUTTONS — Blue for positive, Red only for negative/destructive
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:all .18s ease;text-decoration:none;white-space:nowrap;letter-spacing:0.01em}
.btn-primary{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-blue-hover) 100%);color:#fff;box-shadow:0 4px 14px rgba(0,144,226,0.30)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(0,144,226,0.40);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-red{background:linear-gradient(135deg,var(--primary-red) 0%,var(--primary-red-hover) 100%);color:#fff;box-shadow:0 4px 14px rgba(255,0,0,0.30)}
.btn-red:hover{box-shadow:0 6px 20px rgba(255,0,0,0.40);transform:translateY(-1px)}
.btn-outline{background:rgba(255,255,255,0.8);border:1.5px solid var(--border-dark);color:var(--text-sec);backdrop-filter:blur(8px)}
.btn-outline:hover{background:#ffffff;border-color:var(--primary-blue);color:var(--primary-blue)}
.btn-lg{height:52px;font-size:14px;border-radius:14px}
.btn-block{width:100%}

/* ============================================================
   CARDS & INPUTS
   ============================================================ */
.card{background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm)}
.card.interactive{cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.card.interactive:hover{border-color:var(--primary-blue);box-shadow:var(--shadow);transform:translateY(-1px)}

.label{font-size:11.5px;font-weight:700;color:var(--text-sec);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.04em}
.input{width:100%;height:46px;border:1.5px solid var(--border);border-radius:12px;padding:0 14px;font-family:inherit;font-size:13.5px;color:var(--text);background:#ffffff;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(0,144,226,0.10)}
.input::placeholder{color:var(--text-tert)}

.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:12px;font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap;width:fit-content;letter-spacing:0.03em}
.badge-blue{background:var(--primary-blue-light);color:var(--primary-blue)}
.badge-red{background:var(--primary-red-tint);color:var(--primary-red)}
.badge-warning{background:var(--warning-light);color:var(--warning)}
.badge-success{background:var(--success-light);color:var(--success)}
.badge-amber{background:var(--warning-light);color:var(--warning);display:inline-flex;align-items:center;gap:4px}
.badge-grey{background:var(--bg-muted);color:var(--text-sec)}

/* ============================================================
   STORE CHECK-IN / CHECK-OUT
   ============================================================ */
.checkin-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin-bottom:4px}
.checkin-banner .txt{flex:1;min-width:0}
.checkin-banner .txt h5{font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkin-banner .txt p{font-size:10.5px;margin-top:2px;opacity:0.85}
.checkin-banner > i{font-size:20px;flex-shrink:0}
.checkin-banner.active{background:var(--success-light);color:var(--success);border:1px solid rgba(22,163,74,0.25)}
.checkin-banner.active .btn{height:30px;font-size:11px;padding:0 12px;background:var(--success);color:#fff;flex-shrink:0}
.checkin-banner.idle{background:var(--bg-muted);color:var(--text-sec);border:1px dashed var(--border-dark);cursor:pointer}
.checkin-banner.idle .chev{font-size:14px;color:var(--text-tert)}
.checkin-session-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px}
.checkin-session-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.checkin-session-row + .checkin-session-row{border-top:1px solid var(--border-subtle)}
.checkin-session-row .lbl{font-size:11.5px;color:var(--text-sec)}
.checkin-session-row .val{font-size:13px;font-weight:800;color:var(--text)}
.checkin-session-tasks{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.checkin-log-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:8px}
.checkin-log-row.active{border-color:rgba(22,163,74,0.35);background:var(--success-light)}
.checkin-log-row .txt{min-width:0}
.checkin-log-row .store{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkin-log-row .meta{font-size:10.5px;color:var(--text-sec);margin-top:2px}

.task-group-label{font-size:13px;font-family:var(--font-display);font-weight:700;font-stretch:50%;color:var(--text-sec);text-transform:uppercase;letter-spacing:normal;margin-bottom:10px}

/* Switch */
.switch{position:relative;width:46px;height:26px;background:var(--border-dark);border-radius:13px;cursor:pointer;transition:background .25s;flex-shrink:0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#ffffff;border-radius:50%;transition:left .25s;box-shadow:0 2px 6px rgba(0,0,0,0.18)}
.switch.on{background:var(--primary-blue)}
.switch.on::after{left:23px}

/* Overlays */
.overlay{position:absolute;inset:0;background:rgba(12,17,26,0.6);display:none;align-items:flex-end;justify-content:center;z-index:1500;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:36px;overflow:hidden}
.overlay.open{display:flex}
.sheet{background:#ffffff;border-radius:24px 24px 0 0;width:100%;max-height:85%;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .28s cubic-bezier(0.16,1,0.3,1);box-shadow:var(--shadow-xl)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:42px;height:5px;background:var(--border-dark);border-radius:3px;margin:12px auto 4px;flex-shrink:0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative;z-index:10;background:#ffffff}
.sheet-head h3{font-size:15px;font-weight:800;color:var(--text)}
.sheet-head .close-btn{border:none;background:var(--bg-muted);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-sec);font-size:14px}
/* flex:1 + min-height:0 is what actually lets a tall form scroll inside the
   sheet — without it the body keeps its content height and spills past the
   sheet's max-height. Its blocks are locked at natural height for the same
   reason .screen-body's are. */
.sheet-body{flex:1 1 auto;min-height:0;padding:20px 22px 36px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:18px;position:relative;z-index:1}
.sheet-body > *{flex-shrink:0}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
#screen-splash{background:radial-gradient(ellipse at 40% 30%,rgba(0,144,226,0.28) 0%,transparent 55%),radial-gradient(ellipse at 70% 80%,rgba(255,0,0,0.18) 0%,transparent 50%),linear-gradient(160deg,#070c18 0%,#0c1422 50%,#111827 100%);display:flex;align-items:center;justify-content:center;padding:32px;text-align:center}
.splash-content{display:flex;flex-direction:column;align-items:center;animation:splashPulse 2s ease-in-out infinite alternate}
.splash-content img{height:90px;width:auto;object-fit:contain}
.splash-content h2{margin-top:28px;color:#fff;font-size:20px;font-family:var(--font-display);font-weight:950;font-stretch:75%;letter-spacing:normal;text-transform:uppercase}
.splash-content p{margin-top:6px;color:rgba(0,180,230,0.75);font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
@keyframes splashPulse{0%{transform:scale(0.96);opacity:0.80}100%{transform:scale(1.04);opacity:1}}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
#screen-login{background:radial-gradient(ellipse at 30% 0%,rgba(0,144,226,0.30) 0%,transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(255,0,0,0.18) 0%,transparent 55%),linear-gradient(165deg,#080d18 0%,#0e1a2e 55%,#111827 100%);color:#fff;padding:32px 28px;text-align:center;align-items:center;justify-content:center;padding-top:72px;padding-bottom:36px}
.login-header-logo{margin-bottom:36px;display:flex;flex-direction:column;align-items:center;gap:12px}
.login-header-logo img{height:68px;width:auto;object-fit:contain}
.login-title{font-size:20px;font-family:var(--font-display);font-weight:950;font-stretch:75%;letter-spacing:normal;color:#fff;text-transform:uppercase}
.login-sub{color:rgba(0,180,230,0.75);font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;max-width:260px;margin:6px auto 0;line-height:1.55}
.login-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);width:100%;border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:20px;box-shadow:0 24px 60px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.07);backdrop-filter:blur(12px)}
.login-instructions{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5;text-align:left;background:rgba(0,144,226,0.15);border:1px solid rgba(0,144,226,0.30);border-radius:10px;padding:11px 13px;display:flex;gap:8px;align-items:flex-start}
.login-instructions i{color:#38bdf8;font-size:15px;margin-top:1px;flex-shrink:0}
.btn-microsoft{display:flex;align-items:center;justify-content:center;gap:12px;height:50px;background:#ffffff;color:#1a1a1a;border:none;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px rgba(0,0,0,0.25);width:100%;letter-spacing:0.01em}
.btn-microsoft:hover{background:#f5f5f5;transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,0,0,0.35)}
.ms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:18px;height:18px;flex-shrink:0}
.ms-color{width:8px;height:8px}
.ms-orange{background:#f25022}.ms-green{background:#7fba00}.ms-blue{background:#00a1f1}.ms-yellow{background:#ffb900}
.login-footer{margin-top:40px;font-size:10.5px;color:rgba(255,255,255,0.22);letter-spacing:0.01em}

/* ============================================================
   HOME SCREEN
   ============================================================ */
.home-greeting-section{display:flex;align-items:center;justify-content:space-between}
.home-greeting-txt h3{font-size:22px;font-family:var(--font-display);font-weight:950;font-stretch:75%;color:var(--primary-blue);letter-spacing:normal;text-transform:uppercase}
.home-greeting-txt p{font-size:11.5px;color:var(--text-sec);margin-top:2px}
.home-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-blue-hover) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:0 4px 12px rgba(0,144,226,0.35);flex-shrink:0}

/* Planned vs Actual Card */
.visits-hero-card{flex-shrink:0;background:linear-gradient(135deg,#0090E2 0%,#0073B5 60%,#004B76 100%);color:#fff;border:none;padding:16px 18px;box-shadow:0 6px 20px rgba(0,144,226,0.30);border-radius:16px;position:relative;overflow:hidden}
.visits-hero-card::before{content:'';position:absolute;top:-50px;right:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none}
.visits-hero-card::after{content:'';position:absolute;bottom:-40px;left:10px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.03);pointer-events:none}
.visits-hero-title{font-size:10px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,0.65);letter-spacing:0.08em;position:relative;z-index:1}
.visits-hero-cols{display:flex;gap:0;margin-top:8px;position:relative;z-index:1}
.visits-hero-col{flex:1;text-align:center}
.visits-hero-col:not(:last-child){border-right:1px solid rgba(255,255,255,0.15)}
.visits-hero-num{font-size:28px;font-family:var(--font-display);font-weight:950;font-stretch:75%;letter-spacing:normal;line-height:1}
.visits-hero-lbl{font-size:9px;font-weight:700;text-transform:uppercase;color:rgba(255,255,255,0.6);letter-spacing:0.06em;margin-top:3px}
.visits-progress-wrap{margin-top:10px;position:relative;z-index:1}
.visits-progress-bar{height:5px;background:rgba(255,255,255,0.15);border-radius:4px;overflow:hidden;margin-top:5px}
.visits-progress-fill{height:100%;background:linear-gradient(90deg,rgba(255,255,255,0.5),#fff);border-radius:4px;transition:width 0.6s ease}
.visits-progress-meta{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,0.65);margin-top:5px}

.home-visit-summary{padding:12px 16px;border-radius:14px;display:flex;flex-direction:column;gap:8px}
.home-visit-summary-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--text)}
.home-visit-summary-head i{color:var(--primary-blue);font-size:15px}
.home-visit-summary-count{margin-left:auto;background:var(--primary-blue-light);color:var(--primary-blue);font-size:11px;font-weight:800;padding:2px 9px;border-radius:10px}
.home-visit-summary-list{display:flex;flex-direction:column;gap:1px;max-height:148px;overflow-y:auto;scrollbar-width:none}
.home-visit-summary-list::-webkit-scrollbar{display:none}
.home-visit-summary-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:10px;cursor:pointer;transition:background .15s}
.home-visit-summary-row:hover{background:var(--bg-muted)}
.home-visit-summary-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.home-visit-summary-row .dot.pending{background:var(--primary-red)}
.home-visit-summary-row .dot.in-progress{background:var(--warning)}
/* The store the DM is checked in at right now */
.home-visit-summary-row .dot.onsite{background:var(--primary-blue);box-shadow:0 0 0 3px rgba(0,144,226,0.20);animation:onsitePulse 1.8s ease-out infinite}
@keyframes onsitePulse{0%{box-shadow:0 0 0 0 rgba(0,144,226,0.45)}70%{box-shadow:0 0 0 5px rgba(0,144,226,0)}100%{box-shadow:0 0 0 0 rgba(0,144,226,0)}}
.home-visit-summary-row .store{font-weight:600;font-size:12.5px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-visit-summary-row .time{font-size:11px;color:var(--text-tert);flex-shrink:0}
.home-visit-summary-empty{font-size:12px;color:var(--text-tert);text-align:center;padding:6px 0}

.section-divider-title{font-size:13.5px;font-weight:800;color:var(--text);margin-top:4px;display:flex;align-items:center;justify-content:space-between;letter-spacing:-0.1px}
.section-divider-title a{font-size:12.5px;font-weight:600;color:var(--primary-blue);text-decoration:none;cursor:pointer}

/* Same WebKit rule as .screen-body above: the nav clearance is a flex item,
   not bottom padding, or Safari won't scroll the last card clear of the nav. */
.agenda-list{display:flex;flex-direction:column;gap:var(--agenda-gap);flex-grow:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:0;scrollbar-width:none;--agenda-gap:10px}
.agenda-list::after{content:'';flex:0 0 var(--nav-clearance);margin-top:calc(0px - var(--agenda-gap))}
.agenda-list::-webkit-scrollbar{display:none}
.agenda-card{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border:1.5px solid var(--border);border-radius:14px;background:#ffffff;cursor:pointer;transition:all 0.22s;box-shadow:var(--shadow-sm)}
.agenda-card:hover{border-color:var(--primary-blue);box-shadow:var(--shadow);transform:translateY(-1px)}
.icon-btn-ghost{width:28px;height:28px;border-radius:8px;border:none;background:var(--bg-muted);color:var(--text-sec);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;flex-shrink:0;transition:background .15s}
.icon-btn-ghost:hover{background:var(--border-dark);color:var(--text)}
.agenda-info{display:flex;gap:12px;align-items:center;min-width:0}
.agenda-status-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.agenda-status-indicator.completed{background:var(--primary-blue);box-shadow:0 0 0 3px var(--primary-blue-light)}
.agenda-status-indicator.pending{background:var(--primary-red);box-shadow:0 0 0 3px var(--primary-red-tint)}
.agenda-status-indicator.in-progress{background:var(--warning);box-shadow:0 0 0 3px var(--warning-light)}
.agenda-store-details{min-width:0}
.agenda-store-name{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-store-meta{font-size:11px;color:var(--text-sec);margin-top:3px;display:flex;gap:8px}

.quick-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-action-btn{background:#ffffff;border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:12.5px;color:var(--text-sec);transition:all 0.18s;box-shadow:var(--shadow-sm)}
.quick-action-btn:hover{border-color:var(--primary-blue);color:var(--primary-blue);box-shadow:var(--shadow)}
.quick-action-btn i{font-size:20px;color:var(--primary-blue)}

/* ============================================================
   SCHEDULER / CALENDAR
   ============================================================ */
.calendar-card{padding:18px;display:flex;flex-direction:column;gap:10px}
.calendar-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:10px}
.calendar-month{font-size:14px;font-weight:700;color:var(--text)}
.calendar-arrows{display:flex;gap:8px}
.calendar-arrows button{border:none;background:var(--bg-muted);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-sec);cursor:pointer;font-size:12px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.calendar-day-lbl{font-size:10.5px;font-weight:600;color:var(--text-tert);padding:4px 0}
.calendar-day{font-size:12px;font-weight:600;color:var(--text-sec);height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .12s;position:relative}
.calendar-day:hover{background:var(--bg-muted)}
.calendar-day.active{background:var(--primary-blue);color:#fff}
.calendar-day.today{border:1px solid var(--primary-blue);color:var(--primary-blue)}
.calendar-day.today.active{color:#fff}
.calendar-day .event-dot{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--primary-red)}
.calendar-day.active .event-dot{background:#ffffff}

.day-timeslot-list{display:block;max-height:360px;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}

/* ============================================================
   DAY TIMELINE (proportional agenda)
   ============================================================ */
.day-timeline{position:relative;width:100%}
/* hour row = label in the gutter + a full-width click target to add a visit */
.dt-hour{position:absolute;left:0;right:0;border-top:1px solid var(--border-subtle)}
.dt-hour:first-child{border-top-color:transparent}
.dt-hour-lbl{position:absolute;left:0;top:-7px;width:var(--dt-gutter);padding-right:8px;text-align:right;font-size:10px;font-weight:700;color:var(--text-tert);font-variant-numeric:tabular-nums;letter-spacing:0.01em}
.dt-hour-hit{position:absolute;left:var(--dt-gutter);right:0;top:0;bottom:0;border:none;background:transparent;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;transition:background .12s}
.dt-hour-hit:hover{background:var(--primary-blue-light)}
.dt-add-chip{display:inline-flex;align-items:center;gap:4px;font-family:inherit;font-size:10px;font-weight:700;color:var(--primary-blue);background:#fff;border:1px solid rgba(0,144,226,0.35);border-radius:20px;padding:2px 8px;opacity:0;transform:translateX(4px);transition:opacity .12s,transform .12s}
.dt-hour-hit:hover .dt-add-chip{opacity:1;transform:none}
.dt-hour.selected .dt-add-chip{opacity:1;transform:none;background:var(--primary-blue);color:#fff;border-color:var(--primary-blue)}

/* event blocks — height is proportional to duration, lanes handle overlap */
.dt-events{position:absolute;left:var(--dt-gutter);right:0;top:0;bottom:0;pointer-events:none}
.dt-event{position:absolute;pointer-events:auto;display:flex;gap:7px;overflow:hidden;border-radius:10px;padding:6px 8px;cursor:pointer;background:var(--primary-blue-light);border:1px solid rgba(0,144,226,0.28);box-shadow:0 1px 3px rgba(12,17,26,0.07);transition:transform .12s,box-shadow .12s}
.dt-event:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(12,17,26,0.14);z-index:4}
.dt-event-bar{width:3px;border-radius:3px;background:var(--primary-blue);flex-shrink:0}
.dt-event-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.dt-event-title{font-size:11.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.dt-event-meta{font-size:9.5px;font-weight:600;color:var(--primary-blue);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-event-type{font-size:9.5px;color:var(--text-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dt-event.compact{align-items:center;padding:3px 8px}
.dt-event.compact .dt-event-title{font-size:10.5px}
.dt-event.compact .dt-event-meta{font-size:9px}
.dt-event-flag{align-self:flex-start;flex-shrink:0;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--warning);background:rgba(217,119,6,0.14);border-radius:6px;padding:2px 5px}
.dt-event-check{font-size:14px;color:var(--success);flex-shrink:0;align-self:flex-start}

.dt-event.in-progress{background:var(--warning-light);border-color:rgba(217,119,6,0.3)}
.dt-event.in-progress .dt-event-bar{background:var(--warning)}
.dt-event.in-progress .dt-event-meta{color:var(--warning)}
.dt-event.completed{background:var(--success-light);border-color:rgba(22,163,74,0.28)}
.dt-event.completed .dt-event-bar{background:var(--success)}
.dt-event.completed .dt-event-meta{color:var(--success)}
.dt-event.completed .dt-event-title{color:var(--text-sec)}

/* current-time marker */
.dt-now{position:absolute;left:calc(var(--dt-gutter) - 4px);right:0;height:0;border-top:2px solid var(--primary-red);z-index:5;pointer-events:none}
.dt-now-dot{position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--primary-red)}
.day-timeslot-list::-webkit-scrollbar{display:none}
.timeslot-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;transition:all .15s;flex-shrink:0}
.timeslot-row .ts-time{font-size:11.5px;font-weight:700;color:var(--text);width:118px;flex-shrink:0;font-variant-numeric:tabular-nums;line-height:1.35}
.timeslot-row .ts-info{font-size:11.5px;color:var(--text-tert);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeslot-row .ts-status-icon{font-size:14px;color:var(--text-tert);flex-shrink:0}
.timeslot-row.free .ts-status-icon{color:var(--primary-blue)}
.timeslot-row.free:hover{border-color:var(--primary-blue);background:var(--primary-blue-light)}
.timeslot-row.selected{border-color:var(--primary-blue);background:var(--primary-blue-light)}
.timeslot-row.selected .ts-time{color:var(--primary-blue)}
.timeslot-row.selected .ts-status-icon{color:var(--primary-blue)}
.timeslot-row.booked{background:var(--primary-blue-light);border-color:rgba(0,144,226,0.2)}
.timeslot-row.booked .ts-time{color:var(--primary-blue)}
.timeslot-row.booked .ts-info{color:var(--text);font-weight:600}
.timeslot-row.booked .ts-status-icon{color:var(--primary-blue)}
.timeslot-row.booked:hover{border-color:var(--primary-blue);background:#dcebf3}
/* Duration pill + occupied ("in progress") slots inside a booked window */
.timeslot-row .ts-dur{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;background:rgba(0,144,226,0.14);color:var(--primary-blue);font-size:10px;font-weight:700;vertical-align:1px}
.timeslot-row.busy{background:repeating-linear-gradient(45deg,var(--bg-muted),var(--bg-muted) 6px,rgba(148,163,184,0.10) 6px,rgba(148,163,184,0.10) 12px);border-style:dashed;border-color:var(--border-dark);cursor:default}
.timeslot-row.busy .ts-time,.timeslot-row.busy .ts-info{color:var(--text-tert);font-weight:600}
.timeslot-row.booked.in-progress{background:var(--warning-light);border-color:rgba(217,119,6,0.25)}
.timeslot-row.booked.in-progress .ts-time,.timeslot-row.booked.in-progress .ts-status-icon{color:var(--warning)}
.timeslot-row.booked.in-progress .ts-dur{background:rgba(217,119,6,0.16);color:var(--warning)}
.timeslot-row.booked.completed{background:var(--success-light);border-color:rgba(22,163,74,0.22)}
.timeslot-row.booked.completed .ts-time,.timeslot-row.booked.completed .ts-status-icon{color:var(--success)}
.timeslot-row.booked.completed .ts-dur{background:rgba(22,163,74,0.16);color:var(--success)}

.timeslot-add-more{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border-radius:10px;border:1.5px dashed var(--border-dark);color:var(--text-tert);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0}
.timeslot-add-more:hover{border-color:var(--primary-blue);color:var(--primary-blue);background:var(--primary-blue-light)}
.timeslot-add-more i{font-size:13px}
.scheduler-section-title{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.scheduled-list{display:flex;flex-direction:column;gap:10px}
.scheduled-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#ffffff;position:relative;transition:all .15s;box-shadow:var(--shadow-sm)}
.scheduled-item.completed{border-left:4px solid var(--primary-blue)}
.scheduled-item.pending{border-left:4px solid var(--primary-red)}
.scheduled-item.in-progress{border-left:4px solid var(--warning)}
.scheduled-details{flex:1;min-width:0}
.scheduled-store{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scheduled-meta{display:flex;gap:10px;font-size:11px;color:var(--text-sec);margin-top:4px}
.scheduled-meta span{display:flex;align-items:center;gap:3px}
.scheduled-actions{flex-shrink:0}
.empty-scheduler{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center;gap:10px;border:1.5px dashed var(--border-dark);border-radius:var(--radius);background:rgba(255,255,255,0.4)}
.empty-scheduler i{font-size:36px;color:var(--text-tert)}
.empty-scheduler h4{font-size:14px;font-weight:700;color:var(--text-sec)}
.empty-scheduler p{font-size:12px;color:var(--text-tert);line-height:1.4}

/* ============================================================
   GEOFENCE CHECK-IN
   ============================================================ */
.checkin-selector-card{display:flex;flex-direction:column;gap:8px}
.checkin-store-label{font-size:11px;font-weight:700;color:var(--text-tert);text-transform:uppercase;letter-spacing:0.08em;text-align:center;margin-bottom:4px}
.checkin-store-name{font-size:18px;font-weight:800;color:var(--text);text-align:center}
.geo-map-box{height:190px;border-radius:16px;position:relative;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#e9eef5}
.geo-map-canvas{position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,0.45) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(148,163,184,0.45) 1.5px,transparent 1.5px);background-size:56px 56px}
.geo-map-block{position:absolute;background:#d7e0ec;border-radius:6px}
.geo-map-park{position:absolute;background:#d9edde;border-radius:10px}
.geo-map-compass{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:#ffffff;color:var(--text-sec);display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:var(--shadow-sm);z-index:5}

.geo-radius-ring{position:absolute;left:50%;top:52%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(0,144,226,0.5);background:rgba(0,144,226,0.08);transition:border-color .4s ease,background .4s ease}
.geo-radius-ring.verified{border-color:rgba(0,163,108,0.55);background:rgba(0,163,108,0.10)}
.geo-radius-ring.denied{border-color:rgba(255,0,0,0.4);background:rgba(255,0,0,0.06)}

.geo-store-marker{position:absolute;left:50%;top:52%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;z-index:3}
.geo-store-pin{width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--primary-blue);transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,0.25);border:2px solid #fff}
.geo-store-pin i{transform:rotate(45deg);color:#fff;font-size:15px}
.geo-marker-tag{margin-top:5px;background:#0d1526;color:#fff;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:8px;white-space:nowrap;letter-spacing:0.02em}
.geo-user-tag{background:var(--primary-blue)}

.geo-user-marker{position:absolute;left:36%;top:64%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:4;opacity:0;transition:opacity .4s ease}
.geo-user-marker.active{opacity:1}
.geo-user-dot-wrap{position:relative;width:18px;height:18px}
.geo-user-halo{position:absolute;inset:-11px;border-radius:50%;background:rgba(0,144,226,0.28);animation:geoUserPulse 1.8s infinite ease-out}
.geo-user-dot{position:absolute;inset:0;border-radius:50%;background:var(--primary-blue);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.geo-user-marker.verified .geo-user-halo{background:rgba(0,163,108,0.28)}
.geo-user-marker.denied .geo-user-dot{background:var(--text-tert)}
.geo-user-marker.denied .geo-user-halo{display:none}
@keyframes geoUserPulse{0%{transform:scale(0.5);opacity:0.9}100%{transform:scale(1.9);opacity:0}}

.geo-map-disabled-overlay{position:absolute;inset:0;background:rgba(233,238,245,0.85);display:none;align-items:center;justify-content:center;z-index:10;font-size:26px;color:var(--text-tert)}
.geo-map-disabled-overlay.show{display:flex}

/* The geofence block is its own wrapper, so it has to re-establish the
   column rhythm the .screen-body flex gap used to provide. The status line
   reads as a caption for the map (sits closer); the primary action gets the
   most separation. */
#checkin-geo-ui{display:flex;flex-direction:column;gap:20px}
#checkin-geo-ui > *{flex-shrink:0}
#checkin-geo-ui .geo-status-row{margin-top:-8px}
#checkin-geo-ui #btn-trigger-geofence,
#checkin-geo-ui #btn-confirm-checkin{margin-top:6px}
.geo-status-row{text-align:center;padding:6px 4px 0}
.geo-status-row .state-lbl{font-size:14px;font-weight:800;color:var(--text)}
.geo-status-row .details-lbl{font-size:11px;color:var(--text-sec);margin-top:3px;font-variant-numeric:tabular-nums}
.geofence-alert-box{border-radius:12px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--border)}
.geofence-alert-box.pending{background:var(--primary-blue-tint);border-color:rgba(0,144,226,0.2);color:var(--primary-blue)}
.geofence-alert-box.success{background:var(--primary-blue-tint);border-color:rgba(0,144,226,0.2);color:var(--primary-blue)}
.geofence-alert-box i{font-size:18px;margin-top:1px}
.geofence-alert-box .txt h5{font-size:13px;font-weight:700}
.geofence-alert-box .txt p{font-size:11.5px;opacity:0.85;margin-top:2px;line-height:1.4}

/* ============================================================
   RECORD / CHECKLIST
   ============================================================ */
.recording-active-store-card{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-blue-hover) 100%);color:#fff;border:none;padding:20px 22px;position:relative}
.recording-active-store-card h4{font-size:16px;font-weight:800;letter-spacing:-0.2px}
.recording-active-store-card p{font-size:12px;color:rgba(255,255,255,0.75);margin-top:2px}
.recording-active-store-card .badge-overlay{position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
.sl-info-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.sl-info-row:first-child{padding-top:0}
.sl-info-row:last-child{padding-bottom:0;border-bottom:none}
.sl-info-row i{width:34px;height:34px;border-radius:10px;background:var(--primary-blue-light);color:var(--primary-blue);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.sl-info-lbl{font-size:10.5px;font-weight:700;color:var(--text-tert);text-transform:uppercase;letter-spacing:0.05em}
.sl-info-val{font-size:13px;font-weight:700;color:var(--text);margin-top:2px}
.subtabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:4px}
.subtab{flex:1;height:40px;border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-sec);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-2px;text-align:center}
.subtab.on{color:var(--primary-blue);border-bottom-color:var(--primary-blue);font-weight:700}
.subtab-count{display:inline-block;min-width:16px;padding:0 5px;margin-left:3px;font-size:10px;font-weight:700;line-height:16px;border-radius:8px;background:var(--border);color:var(--text-sec)}
.subtab.on .subtab-count{background:var(--primary-blue);color:#fff}
.checklist-section{display:flex;flex-direction:column;gap:8px}
.checklist-section-title{font-size:13px;font-family:var(--font-display);font-weight:700;font-stretch:50%;color:var(--primary-blue);text-transform:uppercase;letter-spacing:normal;margin:14px 2px 2px}
.checklist-section-title:first-of-type{margin-top:2px}
.checklist-progress-card{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.checklist-progress-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--text-sec);margin-bottom:6px}
.checklist-progress-bar{height:6px;background:var(--bg-muted);border-radius:4px;overflow:hidden}
.checklist-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-blue),var(--primary-blue-hover));border-radius:4px;transition:width 0.3s ease}
.locked-record-banner{display:flex;flex-direction:column;gap:12px;background:var(--warning-light);border:1px solid var(--warning-border);border-radius:14px;padding:16px 18px;margin:16px 22px;flex-shrink:0}
.locked-record-banner-top{display:flex;align-items:flex-start;gap:12px}
.locked-record-banner i{font-size:21px;color:var(--warning);margin-top:1px;flex-shrink:0}
.locked-record-banner .txt{flex:1}
.locked-record-banner h5{font-size:13px;font-weight:800;color:var(--text)}
.locked-record-banner p{font-size:11.5px;color:var(--text-sec);margin-top:4px;line-height:1.5}
.amendment-pending-note{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--warning);background:var(--warning-light);border:1px solid var(--warning-border);border-radius:12px;padding:12px 14px}
.amendment-pending-note i{font-size:16px;flex-shrink:0}
.record-locked .yn-toggle button{pointer-events:none}
.record-locked .yn-toggle{opacity:0.75}
.record-locked .btn-photo-capture{pointer-events:none;opacity:0.4}
.record-locked .delete-photo{pointer-events:none}
.record-locked .file-upload-card{pointer-events:none;cursor:default}
.record-locked .file-upload-card:not(.uploaded){opacity:0.5}
.record-locked .checklist-remarks-input{pointer-events:none;background:var(--bg-muted)}
.checklist-row{padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#ffffff;display:flex;flex-direction:column;gap:8px;margin-bottom:0;box-shadow:0 4px 12px rgba(0,0,0,0.02)}
.checklist-q{font-size:13px;font-weight:700;color:var(--text);line-height:1.45}
.checklist-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.yn-toggle{display:flex;gap:4px;background:var(--bg-muted);padding:3px;border-radius:8px;border:1px solid var(--border)}
.yn-toggle button{width:52px;height:28px;border:none;background:transparent;border-radius:6px;font-family:inherit;font-size:11px;font-weight:700;color:var(--text-sec);cursor:pointer;transition:all .15s}
.yn-toggle button.yes-active{background:var(--primary-blue);color:#fff;box-shadow:var(--shadow-sm)}
.yn-toggle button.no-active{background:var(--primary-red);color:#fff;box-shadow:var(--shadow-sm)}
.photo-upload-widget{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn-photo-capture{width:34px;height:34px;border-radius:8px;background:var(--primary-blue-light);border:1.5px dashed rgba(0,144,226,0.4);color:var(--primary-blue);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:16px;flex-shrink:0}
.btn-photo-capture:hover{background:#d0e7f3}
.photo-thumb-item{width:34px;height:34px;border-radius:8px;overflow:hidden;position:relative;border:1px solid var(--border-dark);flex-shrink:0}
.photo-thumb-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb-item .delete-photo{position:absolute;inset:0;background:rgba(255,0,0,0.85);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;font-size:12px}
.photo-thumb-item:hover .delete-photo{opacity:1}
.checklist-q-badge{display:inline-block;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:middle}
.checklist-q-badge.critical{background:var(--primary-red-tint);color:var(--primary-red)}
.checklist-q-badge.major{background:var(--primary-red-tint);color:var(--primary-red)}
.checklist-q-badge.minor{background:var(--warning-light);color:var(--warning)}
.checklist-pts{font-size:10px;font-weight:700;color:var(--text-tert);text-transform:uppercase;letter-spacing:0.04em}
.checklist-remarks-input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;font-family:inherit;font-size:12px;color:var(--text);background:var(--bg-muted);min-height:44px;resize:vertical;transition:border-color .15s}
.checklist-remarks-input:focus{outline:none;border-color:var(--primary-blue);background:var(--surface)}
.checklist-remarks-input::placeholder{color:var(--text-tert)}
.form-field-row{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#ffffff;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,0.02)}
.form-field-label{font-size:12.5px;font-weight:700;color:var(--text)}
.form-field-input,.form-field-textarea{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--text);background:var(--surface);transition:border-color .15s}
.form-field-input{height:42px;padding:0 12px}
.form-field-textarea{min-height:80px;resize:vertical}
.form-field-input:focus,.form-field-textarea:focus{outline:none;border-color:var(--primary-blue)}
.form-field-checkbox-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#ffffff}
.form-field-checkbox-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-blue);flex-shrink:0}
.record-locked .form-field-input,.record-locked .form-field-textarea{pointer-events:none;background:var(--bg-muted)}
.record-locked .form-field-checkbox-row input[type=checkbox]{pointer-events:none}
.file-upload-section{display:flex;flex-direction:column;gap:14px}
.file-upload-card{border:2px dashed var(--border-dark);border-radius:14px;padding:24px 18px;text-align:center;cursor:pointer;background:#ffffff;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:10px}
.file-upload-card:hover{border-color:var(--primary-blue);background:var(--primary-blue-tint)}
.file-upload-card i{font-size:28px;color:var(--text-tert)}
.file-upload-card h5{font-size:13px;font-weight:700;color:var(--text-sec)}
.file-upload-card.uploaded{border:1.5px solid rgba(0,144,226,0.2);background:var(--primary-blue-light);color:var(--primary-blue)}
.file-upload-card.uploaded i{color:var(--primary-blue)}
.file-upload-card.uploaded h5{color:var(--primary-blue)}

/* ============================================================
   REVIEW SUMMARY
   ============================================================ */
.summary-doc-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.summary-doc-row:first-child{padding-top:14px}
.summary-doc-row:last-child{border-bottom:none;padding-bottom:0}
.summary-doc-left{display:flex;align-items:center;gap:10px}
.summary-doc-icon{width:36px;height:36px;border-radius:10px;background:var(--bg-muted);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--text-sec);flex-shrink:0}
.summary-doc-name{font-size:13.5px;font-weight:700;color:var(--text)}
.summary-doc-status{font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap}
.summary-doc-status.ok{color:var(--success)}
.summary-doc-status.info{color:var(--primary-blue)}

.summary-lock-note{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;color:var(--text-tert)}

/* ============================================================
   REPORTS
   ============================================================ */
.report-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.report-stat-card{border:none;border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,0.1);color:#fff}
.report-stat-card:nth-child(1) { background: linear-gradient(135deg, var(--primary-blue) 0%, #0073B5 100%); }
.report-stat-card:nth-child(2) { background: linear-gradient(135deg, var(--primary-red) 0%, #b5132c 100%); }
.report-stat-card .val{font-size:26px;font-family:var(--font-display);font-weight:950;font-stretch:75%;color:#fff;margin-bottom:2px}
.report-stat-card .lbl{font-size:11.5px;color:rgba(255,255,255,0.8);font-weight:600}
.report-stat-card .trend{font-size:10.5px;color:rgba(255,255,255,0.95);font-weight:700;display:flex;align-items:center;gap:4px;margin-top:8px;background:rgba(255,255,255,0.15);padding:4px 8px;border-radius:12px;width:fit-content}
.report-comparison-section{display:flex;flex-direction:column;gap:8px}
.comparison-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:0;box-shadow:0 2px 8px rgba(0,0,0,0.03)}
.comp-head{display:flex;align-items:center;justify-content:space-between;background:var(--bg-muted);border:1px solid var(--border);border-radius:12px;padding:12px;margin:-6px -6px 12px -6px}
.comp-head-completed{background:var(--primary-blue-light);border-color:rgba(0,144,226,0.25)}
.comp-head-missed{background:var(--primary-red-tint);border-color:var(--danger-border)}
.comp-store{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.comp-type-title{font-size:11.5px;font-weight:700;color:var(--primary-blue);margin-top:3px}
.comp-date{font-size:11.5px;color:var(--text-sec);margin-top:2px}
.task-edit-badge{width:22px;height:22px;border-radius:50%;background:var(--warning-light);color:var(--warning);border:none;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;flex-shrink:0}

/* ============================================================
   FORM FIELDS (Schedule Store Visit / Filters sheets)
   ============================================================ */
.field-group{display:flex;flex-direction:column;gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-label{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px;display:block}
.form-control{width:100%;height:46px;border:1.5px solid var(--border);border-radius:12px;padding:0 14px;font-family:inherit;font-size:13.5px;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.form-control:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(0,144,226,0.10)}
.form-select-wrap{position:relative}
.form-select-wrap .form-control{cursor:pointer;padding-right:36px}
.form-select-wrap #schedule-time-display{cursor:text}
.form-select-wrap .select-caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-tert);font-size:14px}
.sheet-actions{display:flex;flex-direction:column;gap:8px;margin-top:24px}

/* ============================================================
   CUSTOM DATE PICKER — replaces the native <input type="date"> popup
   ============================================================ */
.date-picker-scrim{position:fixed;inset:0;z-index:4999;background:transparent;display:none}
.date-picker-scrim.open{display:block}
.date-picker-popover{position:fixed;z-index:5000;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-xl);padding:14px;display:none;font-family:var(--font)}
.date-picker-popover.open{display:block;animation:screenFade .15s ease}
.date-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.date-picker-header button{width:26px;height:26px;border-radius:8px;border:none;background:var(--bg-muted);color:var(--text-sec);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:background .15s}
.date-picker-header button:hover{background:var(--border-dark)}
.date-picker-label{font-size:13px;font-weight:800;color:var(--text)}
.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.date-picker-weekdays span{font-size:9.5px;font-weight:700;color:var(--text-tert);text-transform:uppercase;letter-spacing:0.02em}
.date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.date-picker-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;border:none;background:transparent;transition:all .12s;font-family:inherit}
.date-picker-day:not(:disabled):hover{background:var(--bg-muted)}
.date-picker-day.other-month{color:var(--text-tert);opacity:0.35;cursor:default}
.date-picker-day.today{color:var(--primary-blue);font-weight:800}
.date-picker-day.selected{background:var(--primary-blue);color:#fff;font-weight:800}
.date-picker-day.selected.today{color:#fff}
.date-picker-footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);text-align:center}
.date-picker-today-btn{background:none;border:none;color:var(--primary-blue);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.date-picker-today-btn:hover{text-decoration:underline}

/* ============================================================
   CUSTOM TIME PICKER — pairs with the editable time field above
   ============================================================ */
.time-picker-popover{width:220px;padding:10px}
.time-picker-hint{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-tert);padding:2px 4px 8px;border-bottom:1px solid var(--border);margin-bottom:6px}
.time-picker-hint i{font-size:12px;flex-shrink:0}
.time-picker-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.time-picker-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 10px;border-radius:8px;border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;transition:all .12s}
.time-picker-row:hover{background:var(--bg-muted)}
.time-picker-row.disabled{color:var(--text-tert);opacity:0.45;cursor:not-allowed;text-decoration:line-through}
.time-picker-row.disabled:hover{background:transparent}
.time-picker-row.selected{background:var(--primary-blue);color:#fff}
.time-picker-badge{font-size:10px;font-weight:700;color:var(--primary-blue);background:var(--primary-blue-light);padding:2px 7px;border-radius:10px;flex-shrink:0}
.time-picker-row.selected .time-picker-badge{background:rgba(255,255,255,0.25);color:#fff}
.form-control.field-invalid{border-color:var(--primary-red);animation:fieldInvalidShake .3s ease}
@keyframes fieldInvalidShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.comp-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.comp-timeline{display:flex;flex-direction:column;gap:10px;position:relative;padding-left:14px}
.comp-timeline::before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:2px;background:var(--border-dark)}
.timeline-node{position:relative}
.timeline-node::after{content:'';position:absolute;left:-13px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--text-tert)}
.timeline-node.success::after{background:var(--primary-blue);box-shadow:0 0 0 2px var(--primary-blue-light)}
.timeline-node.danger::after{background:var(--primary-red);box-shadow:0 0 0 2px var(--primary-red-tint)}
.timeline-node.warning::after{background:var(--warning);box-shadow:0 0 0 2px var(--warning-light)}
.timeline-node .node-lbl{font-size:11px;color:var(--text-sec);font-weight:600}
.timeline-node .node-val{font-size:12px;font-weight:700;color:var(--text);margin-top:1px}
.compliance-meter{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.compliance-meter .lbl{font-size:12px;font-weight:600;color:var(--text-sec)}
.compliance-meter .val{font-size:13.5px;font-weight:800;color:var(--primary-blue)}

/* ============================================================
   PROFILE SCREEN
   ============================================================ */
.profile-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 0 20px;border-bottom:1px solid var(--border);text-align:center}
.profile-avatar-wrap{position:relative;width:72px;height:72px}
.profile-avatar{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--primary-blue),var(--primary-blue-hover));color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,144,226,0.35)}
.profile-avatar-badge{position:absolute;bottom:0;right:0;background:var(--primary-red);color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:10px;border:1.5px solid #fff;line-height:1}
.profile-info{display:flex;flex-direction:column;gap:4px;align-items:center}
.profile-info h3{font-size:18px;font-weight:800;color:var(--text)}
.profile-info p{font-size:13px;color:var(--text-sec)}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.meta-item{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.meta-item .m-lbl{font-size:10px;font-weight:700;color:var(--text-tert);text-transform:uppercase;letter-spacing:0.05em}
.meta-item .m-val{font-size:13px;font-weight:700;color:var(--text-sec)}
.store-list-container{display:flex;flex-direction:column;gap:10px;flex:1}
.store-list-title{font-size:13px;font-weight:800;color:var(--text);display:flex;justify-content:space-between}
.store-list-title span{font-size:11px;font-weight:700;color:var(--primary-blue);background:var(--primary-blue-light);padding:2px 8px;border-radius:12px}
.store-list-scroll{display:flex;flex-direction:column;gap:8px}
.store-row-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#ffffff;transition:all 0.15s;box-shadow:var(--shadow-sm)}
.store-row-card:hover{border-color:var(--primary-blue)}
.store-icon{width:34px;height:34px;border-radius:10px;background:var(--primary-blue-tint);color:var(--primary-blue);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.store-details{flex:1;min-width:0}
.store-details .store-name{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-details .store-desc{font-size:10.5px;color:var(--text-sec);margin-top:2px}

/* ============================================================
   SSO OVERLAY
   ============================================================ */
.ms-auth-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:2000;padding:24px;border-radius:36px;overflow:hidden}
.ms-auth-card{background:#ffffff;border-radius:18px;padding:26px;width:100%;max-width:320px;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:16px}
.ms-auth-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#747474}
.ms-auth-title{font-size:18px;font-weight:700;color:#1e293b;margin-top:4px}
.ms-auth-sub{font-size:12px;color:var(--text-sec);line-height:1.4}
.ms-user-pill{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:background 0.15s}
.ms-user-pill:hover{background:var(--bg-muted)}
.ms-user-avatar{width:36px;height:36px;background:var(--primary-blue-light);color:var(--primary-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.ms-user-details .name{font-size:13px;font-weight:700;color:var(--text)}
.ms-user-details .email{font-size:11px;color:var(--text-sec)}
.ms-auth-btn-row{display:flex;justify-content:flex-end;margin-top:4px}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.home-notif-btn{position:relative;width:38px;height:38px;border-radius:50%;background:#ffffff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-sec);font-size:17px;cursor:pointer;box-shadow:var(--shadow-sm);flex-shrink:0}
.home-notif-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--primary-red);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-item{display:flex;gap:12px;padding:14px;border-radius:14px;background:#ffffff;border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative}
.notif-item.unread{background:var(--primary-blue-tint);border-color:rgba(0,144,226,0.18)}
.notif-icon{width:38px;height:38px;border-radius:10px;background:var(--primary-blue-light);color:var(--primary-blue);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:700;color:var(--text)}
.notif-message{font-size:12px;color:var(--text-sec);margin-top:2px;line-height:1.4}
.notif-time{font-size:10.5px;color:var(--text-tert);margin-top:4px}
.notif-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--primary-red);position:absolute;top:14px;right:14px}
.notif-empty{text-align:center;color:var(--text-tert);font-size:13px;padding:40px 0}

/* ============================================================
   CAMERA VIEWFINDER
   ============================================================ */
.camera-viewfinder-overlay{position:absolute;inset:0;background:#000000;display:none;flex-direction:column;z-index:2100;border-radius:36px;overflow:hidden}
.viewfinder-preview{flex:1;position:relative;background:#111827;display:flex;align-items:center;justify-content:center;overflow:hidden}
.viewfinder-map-guide{width:70%;height:50%;border:2px dashed rgba(255,255,255,0.4);border-radius:12px;position:relative}
.viewfinder-map-guide::before{content:'Align Document or Area';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,0.6);font-size:11px;font-weight:600;text-align:center;white-space:nowrap}
.viewfinder-controls{height:96px;background:#000000;display:flex;align-items:center;justify-content:space-between;padding:0 32px;flex-shrink:0}
.viewfinder-btn-cancel{border:none;background:transparent;color:#ffffff;font-family:inherit;font-size:13.5px;cursor:pointer;font-weight:600}
.viewfinder-btn-capture{width:60px;height:60px;border-radius:50%;border:4px solid #ffffff;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:transform 0.1s}
.viewfinder-btn-capture:active{transform:scale(0.92)}
.viewfinder-btn-inner{width:44px;height:44px;border-radius:50%;background:#ffffff}

/* ============================================================
   EMAIL TOAST
   ============================================================ */
.email-toast{position:absolute;top:60px;left:18px;right:18px;background:#0c111a;border:1.5px solid rgba(0,144,226,0.3);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow-xl);transform:translateY(-220%);opacity:0;pointer-events:none;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease;z-index:9999;color:#ffffff}
.email-toast.active{transform:translateY(0);opacity:1;pointer-events:auto}
.email-toast i{color:var(--primary-blue);font-size:20px;margin-top:2px;flex-shrink:0}
.toast-txt{display:flex;flex-direction:column;gap:2px}
.toast-txt h6{font-size:12.5px;font-weight:700;color:#ffffff}
.toast-txt p{font-size:11px;color:#94a3b8;line-height:1.35}

/* ============================================================
   EMAIL RECIPIENT PICKER (Review Summary)
   ============================================================ */
.email-picker{position:relative;border:1.5px solid var(--border);border-radius:12px;padding:8px;background:var(--surface)}
.email-picker-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.email-picker-tags:empty{margin-bottom:0}
.email-picker-tag{display:flex;align-items:center;gap:6px;background:var(--primary-blue-light);color:var(--primary-blue);font-size:11.5px;font-weight:700;padding:5px 6px 5px 10px;border-radius:20px}
.email-picker-tag i{cursor:pointer;font-size:13px;opacity:0.75}
.email-picker-tag i:hover{opacity:1}
.email-picker-input{width:100%;border:none;outline:none;font-family:inherit;font-size:13px;color:var(--text);background:transparent;height:28px;padding:0 4px}
.email-picker-dropdown{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#ffffff;border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow-xl);max-height:200px;overflow-y:auto;z-index:50}
.email-picker-option{display:flex;flex-direction:column;gap:1px;padding:9px 12px;cursor:pointer}
.email-picker-option:hover{background:var(--bg-muted)}
.email-picker-option .eo-name{font-size:12.5px;font-weight:700;color:var(--text)}
.email-picker-option .eo-email{font-size:11px;color:var(--text-sec)}
.email-picker-empty{padding:10px 12px;font-size:11.5px;color:var(--text-tert);text-align:center}
.record-locked .email-picker,.record-locked .form-field-checkbox-row.email-send-toggle{pointer-events:none;opacity:0.6}

/* ============================================================
   EDIT HISTORY OVERLAY
   ============================================================ */
.edit-history-list{display:flex;flex-direction:column;gap:10px}
.edit-history-item{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg-muted)}
.edit-history-item .eh-time{font-size:10.5px;color:var(--text-tert);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px}
.edit-history-item .eh-changes{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.edit-history-item .eh-change-row{font-size:12px;color:var(--text)}
.edit-history-item .eh-change-row b{font-weight:700}
.edit-history-item .eh-remarks{font-size:12px;color:var(--text-sec);line-height:1.4;border-top:1px dashed var(--border-dark);padding-top:6px}
.edit-history-empty{text-align:center;color:var(--text-tert);font-size:12.5px;padding:24px 0}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.btn:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;}

/* ============================================================
   CUSTOM IN-APP DROPDOWN
   ============================================================ */
.custom-dd-wrapper{position:relative}
.custom-dd-trigger{width:100%;height:46px;border:1.5px solid var(--border);border-radius:12px;padding:0 36px 0 14px;font-family:inherit;font-size:13.5px;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;}
.custom-dd-trigger.placeholder{color:var(--text-tert)}
.custom-dd-trigger:focus,.custom-dd-trigger.open{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(0,144,226,0.10)}
.custom-dd-caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:auto;color:var(--text-tert);font-size:14px;transition:transform .2s ease;cursor:pointer;z-index:1}
.custom-dd-trigger.open ~ .custom-dd-caret{transform:translateY(-50%) rotate(180deg)}
.custom-dd-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.13);overflow-y:scroll;z-index:2000;display:none;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.18) rgba(0,0,0,0.04);animation:ddFadeIn .15s ease}
.custom-dd-panel.open{display:block}
.custom-dd-panel.drop-up{animation:ddFadeInUp .15s ease}
@keyframes ddFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes ddFadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.custom-dd-panel::-webkit-scrollbar{width:6px}
.custom-dd-panel::-webkit-scrollbar-track{background:rgba(0,0,0,0.04);border-radius:0 12px 12px 0}
.custom-dd-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);border-radius:6px;min-height:32px}
.custom-dd-panel::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}
.custom-dd-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border-subtle);font-size:13px;color:var(--text);transition:background .12s;display:flex;align-items:center;justify-content:space-between;gap:8px}
.custom-dd-item:last-child{border-bottom:none}
.custom-dd-item:hover{background:var(--bg-muted)}
.custom-dd-item.selected{background:var(--primary-blue);color:#fff}
.custom-dd-item.selected i{color:#fff}
.custom-dd-check{font-size:14px;flex-shrink:0;opacity:0}
.custom-dd-item.selected .custom-dd-check{opacity:1}