.web-crm body{min-height:100svh;overscroll-behavior-y:none}
.web-crm main{padding-bottom:calc(170px + var(--safe-bottom))}
.web-crm .navigation{position:fixed;top:auto;bottom:0;left:0;right:0;margin:0;border-radius:24px 24px 0 0;border-bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:10px max(12px,var(--safe-right)) calc(10px + var(--safe-bottom)) max(12px,var(--safe-left));z-index:40;background:#102033f2}
.web-crm .nav-item{flex-direction:column;justify-content:center;gap:5px;min-height:55px;padding:8px 4px;font-size:20px}
.web-crm .nav-item span{font-size:11px;line-height:1.3}
.web-crm .nav-add{position:fixed;bottom:calc(95px + var(--safe-bottom));right:max(18px,var(--safe-right));margin:0;width:auto;max-width:calc(100vw - 36px);padding:13px 22px;min-height:48px;border-radius:28px;background:var(--accent);color:#10252a;box-shadow:0 8px 35px #0008}
.web-crm .topbar{margin-top:10px}.web-crm .workspace-heading{padding-top:24px}
.web-crm .toast{bottom:calc(170px + var(--safe-bottom));z-index:300}
#nativeConnection{position:fixed;left:12px;right:12px;bottom:calc(150px + var(--safe-bottom));z-index:250;padding:12px 16px;border-radius:14px;background:#522e2f;color:#fff4ec;font-size:13px;text-align:center;box-shadow:0 4px 25px #0008}
@media(orientation:landscape) and (max-height:500px){.web-crm .navigation{padding-top:3px;padding-bottom:calc(3px + var(--safe-bottom))}.web-crm .nav-item{min-height:44px;flex-direction:row}.web-crm .nav-add{bottom:calc(64px + var(--safe-bottom));min-height:44px;padding:9px 18px}.web-crm main{padding-bottom:calc(120px + var(--safe-bottom))}.web-crm .toast{bottom:calc(120px + var(--safe-bottom))}}
/* Floating glass tabs, clear icons and a separate, readable add action. */
.web-crm .navigation{left:max(12px,var(--safe-left));right:max(12px,var(--safe-right));bottom:calc(8px + var(--safe-bottom));border:1px solid #ffffff30;border-radius:36px;padding:6px;gap:2px;background:linear-gradient(145deg,#64748355,#102033b8);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 1px #ffffff40,0 8px 30px #0006}
.web-crm .nav-item{min-height:60px;border-radius:30px;font-size:20px;padding:7px 2px;gap:4px;color:var(--muted);border:1px solid transparent}
.web-crm .nav-item.active{background:#ffffff20;border-color:#ffffff18;color:var(--accent);box-shadow:inset 0 1px 2px #ffffff15}
.web-crm .nav-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.web-crm .nav-item span{font-size:10px;line-height:1.2;max-width:100%;white-space:normal}
.web-crm .navigation .nav-add{width:52px;height:52px;min-height:52px;max-width:52px;bottom:calc(91px + var(--safe-bottom));right:max(18px,var(--safe-right));padding:0;display:grid;place-items:center;font-size:32px;line-height:1;color:#10252a;background:var(--accent);-webkit-text-fill-color:#10252a;border:1px solid #ffffff70}
.web-crm #refresh,.web-crm #refreshEmployee{display:none}
.web-crm main{padding-bottom:calc(160px + var(--safe-bottom))}
#pullRefresh{position:fixed;top:calc(var(--safe-top) + 8px);left:calc(50% - 18px);width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--accent);background:#132235ee;border:1px solid #ffffff30;z-index:290;font-size:24px;opacity:0;pointer-events:none;transform:translateY(0);transition:opacity .15s,transform .15s}
#pullRefresh.visible{opacity:1;transform:translateY(var(--pull,40px))}#pullRefresh.armed{background:#304a56}#pullRefresh.loading{animation:refresh-pulse .8s ease-in-out infinite alternate}@keyframes refresh-pulse{to{opacity:.45}}
@media(prefers-reduced-motion:reduce){#pullRefresh{transition:none}#pullRefresh.loading{animation:none}}
@media(orientation:landscape) and (max-height:500px){.web-crm .navigation{left:15%;right:15%;padding:3px}.web-crm .nav-item{min-height:44px;flex-direction:row}.web-crm .navigation .nav-add{bottom:calc(64px + var(--safe-bottom));width:44px;height:44px;min-height:44px;max-width:44px}}
.web-crm #overviewView .overview-grid{display:flex;flex-direction:column;gap:18px}
.web-crm #overviewView .calendar-panel{width:100%;padding:22px 16px}
.web-crm #overviewMetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.web-crm #overviewMetrics .kpi{padding:14px 13px;border-radius:20px;min-width:0}
.web-crm #overviewMetrics .kpi small{font-size:11px;line-height:1.5}
.web-crm #overviewMetrics .kpi strong{font-size:clamp(18px,5.5vw,25px);margin:9px 0 4px;overflow-wrap:anywhere}
.web-crm #overviewMetrics .kpi .hint{font-size:10px;line-height:1.5}
.web-crm #overviewView .day-panel{margin-top:18px}
.web-crm .calendar{gap:6px}.web-crm .calendar-day{min-height:48px;padding:6px 2px}
.web-crm .button-group{gap:10px;flex-wrap:wrap}.web-crm .detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.web-crm .entry-row{gap:12px;padding:14px 0}.web-crm .entry-actions{display:flex;gap:8px}.web-crm .entry-actions button{min-width:44px;min-height:44px}
.web-crm .settings-tabs{gap:10px}.web-crm .settings-row{gap:10px;padding:12px 0}
/* Keep all six possible weeks visible above the floating navigation. */
.web-crm .topbar{padding:12px 14px;margin-top:6px;min-height:72px}
.web-crm .brand small{display:none}
.web-crm .workspace-heading{padding:16px 0 14px}
.web-crm .workspace-heading h1{font-size:26px;margin:5px 0 0}
.web-crm .workspace-heading .eyebrow{font-size:9px}
.web-crm #overviewView .calendar-panel{padding:16px 12px}
.web-crm .calendar-panel>.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin-bottom:12px}
.web-crm .calendar-panel .section-head>div:first-child{min-width:0}
.web-crm .calendar-panel .eyebrow{font-size:8px;letter-spacing:1px}
.web-crm .calendar-panel h2{font-size:17px;line-height:1.3;margin:5px 0 0}
.web-crm .calendar-panel .section-head .button-group{width:auto;flex-shrink:0;flex-wrap:nowrap;gap:5px}
.web-crm .calendar-panel .button-group .icon-button{width:44px;min-width:44px;min-height:44px;padding:0;font-size:22px}
.web-crm .calendar-panel .button-group #today{display:none}
.web-crm .calendar{gap:4px;grid-auto-rows:auto}
.web-crm .calendar .weekday{padding:4px 0;min-height:20px;font-size:10px}
.web-crm .calendar .calendar-day{position:relative;height:44px;min-height:44px;max-height:44px;padding:3px 1px;border-radius:13px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:0}
.web-crm .calendar-day small{position:absolute;right:3px;bottom:2px;font-size:8px;line-height:1;max-width:calc(100% - 6px);overflow:hidden;white-space:nowrap}
.web-crm .calendar-day .dot{display:none}
.web-crm .calendar-panel>.caption{display:none}
@media(min-height:850px){.web-crm .calendar .calendar-day{height:48px;min-height:48px;max-height:48px}}
.web-crm .calendar-panel .button-group #today{display:block;min-width:50px;min-height:44px;padding:4px;font-size:10px}

.web-crm .nav-item{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.web-crm .nav-item svg{transform-origin:center;transform-box:fill-box}
@media(prefers-reduced-motion:reduce){.web-crm .nav-item{transition:none}}
/* App interactions: no double-tap zoom or accidental text selection. */
.web-crm,.web-crm body,.web-crm body *{touch-action:manipulation}
.web-crm body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.web-crm input,.web-crm textarea,.web-crm [contenteditable="true"],.web-crm [contenteditable="true"] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Slow light beneath the frosted panels; text and company branding stay still. */
.web-crm .aurora{overflow:hidden;contain:paint}
.web-crm .aurora::before{content:'';position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(ellipse at 22% 28%,var(--theme-glow,#40697c66),transparent 48%),radial-gradient(ellipse at 76% 64%,var(--theme-base,#234c4655),transparent 52%),radial-gradient(ellipse at 60% 20%,#e3efff12,transparent 38%);opacity:.65;transform-origin:50% 50%;animation:crm-liquid-light 26s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes crm-liquid-light{0%{transform:translate3d(-3%,-2%,0) scale(1.02) rotate(-3deg);opacity:.4}50%{transform:translate3d(3%,1%,0) scale(1.08) rotate(2deg);opacity:.7}100%{transform:translate3d(-1%,4%,0) scale(1.04) rotate(5deg);opacity:.5}}
.web-crm.app-background .aurora::before{animation-play-state:paused}
.web-crm .highcontrast .aurora::before{display:none}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){.web-crm .aurora::before{animation:none;will-change:auto;opacity:.25}}

/* More visible flowing light, still underneath all content. */
.web-crm .aurora::before{inset:-22%;background:radial-gradient(ellipse at 22% 28%,var(--accent,#b4ffe0) 0%,transparent 50%),radial-gradient(ellipse at 78% 65%,var(--theme-glow,#40697c66) 0%,transparent 55%),radial-gradient(ellipse at 60% 20%,#e3efff30,transparent 40%);animation:crm-liquid-flow 16s ease-in-out infinite alternate}
@keyframes crm-liquid-flow{0%{transform:translate3d(-9%,-6%,0) scale(1.03) rotate(-8deg);opacity:.17}50%{transform:translate3d(9%,3%,0) scale(1.16) rotate(5deg);opacity:.32}100%{transform:translate3d(-3%,10%,0) scale(1.08) rotate(12deg);opacity:.23}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-transparency:reduce){.web-crm .aurora::before{animation:none;will-change:auto;opacity:.15}}

.web-crm .nav-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Desktop workspace: compact content, inline actions and conventional navigation. */
@media(min-width:761px){
 .web-crm body{user-select:text;-webkit-user-select:text;overscroll-behavior-y:auto}
 .web-crm .topbar{width:calc(100% - 48px);max-width:1180px;margin:20px auto 0;padding:16px 22px}
 .web-crm main{width:calc(100% - 48px);max-width:1180px;margin:0 auto;padding:24px 0 48px}
 .web-crm .brand small{display:block}
 .web-crm .navigation{position:sticky;top:12px;bottom:auto;left:auto;right:auto;display:flex;gap:6px;width:100%;margin:0;padding:7px;border-radius:18px;z-index:40}
 .web-crm .navigation .nav-item{flex-direction:row;gap:9px;min-height:44px;padding:10px 18px;border-radius:12px;font-size:14px}
 .web-crm .nav-item span{font-size:14px;white-space:nowrap}
 .web-crm .navigation .nav-add{position:static;display:flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;width:auto;height:auto;max-width:none;min-height:44px;padding:10px 18px;font-size:14px;border-radius:12px;line-height:1.4}
 .web-crm #refresh,.web-crm #refreshEmployee{display:inline-flex}
 .web-crm .workspace-heading{padding:26px 0 22px}
 .web-crm .workspace-heading h1{font-size:32px}
 .web-crm #overviewView .overview-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:20px;align-items:start}
 .web-crm #overviewView .calendar-panel{padding:22px}
 .web-crm #overviewMetrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
 .web-crm #overviewMetrics .kpi{padding:18px}
 .web-crm #overviewMetrics .kpi strong{font-size:25px}
 .web-crm .calendar-panel h2{font-size:21px}
 .web-crm .calendar{gap:6px}
 .web-crm .calendar .calendar-day{height:54px;min-height:54px;max-height:54px}
 .web-crm .calendar-day small{font-size:10px;bottom:5px;right:5px}
 .web-crm .calendar-panel>.caption{display:block}
 .web-crm .calendar-panel .button-group #today{font-size:12px;padding:8px}
 .web-crm .toast{bottom:24px;max-width:560px}
 .web-crm .auth-card{max-width:560px;margin:6vh auto;padding:36px}
 .web-crm .auth-card h1{font-size:46px}
 .web-crm .settings-panel{max-width:960px}
 .web-crm .client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:1000px){
 .web-crm .navigation .nav-item{padding:10px 12px}
 .web-crm #overviewView .overview-grid{grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr)}
 .web-crm .client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .web-crm #overviewMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .web-crm main{width:auto;max-width:600px;padding-left:16px;padding-right:16px;margin:auto}
 .web-crm .topbar{max-width:568px;margin-left:auto;margin-right:auto;width:calc(100% - 32px)}
 .web-crm .navigation{max-width:568px;margin-left:auto;margin-right:auto}
 .web-crm .auth-card{max-width:100%;padding:26px 22px}
 .web-crm .auth-card h1{font-size:clamp(30px,8.5vw,44px)}
 .web-crm .brand strong{font-size:18px}
 .web-crm .account{gap:6px;flex-wrap:wrap;justify-content:flex-end}
}

/* Monetary values stay together; wide values remain readable via scrolling. */
.web-crm .kpi strong,.web-crm #overviewMetrics .kpi strong{white-space:nowrap;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums;max-width:100%;overflow-x:auto}

.web-crm .amount,.web-crm .card-bottom b,.web-crm .card-bottom>div>div,.web-crm #financeRows td:not(:first-child){white-space:nowrap;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums}

.web-crm .photo-placeholder{width:100%;min-height:100px;display:grid;place-items:center}