@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--primary:#3b82f6;--primary-dark:#2563eb;--bg:#f8fafc;--glass-bg:rgba(255,255,255,0.85);--glass-border:rgba(255,255,255,0.5)}
body{font-family:'Plus Jakarta Sans',sans-serif;background-color:var(--bg);color:#1e293b;-webkit-tap-highlight-color:transparent;min-height:100vh}
.page{display:none;opacity:0;transform:translateY(10px);transition:all .3s cubic-bezier(.4,0,.2,1)}
.page.active{display:block;opacity:1;transform:translateY(0)}
.glass-card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:1.25rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.02),0 2px 4px -1px rgba(0,0,0,.02)}
.glass-nav{background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.5);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}
input,select,textarea{transition:all .2s;border:1px solid #e2e8f0!important;border-radius:1rem!important;background-color:#fff;font-size:.95rem}
input:focus,select:focus,textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(59,130,246,.1);outline:none}
.btn-press{transition:transform .1s}
.btn-press:active{transform:scale(.96)}
.nav-active{color:var(--primary);position:relative}
.nav-active::after{content:'';position:absolute;bottom:-8px;width:4px;height:4px;border-radius:50%;background:var(--primary);left:50%;transform:translateX(-50%)}
.calendar-day{transition:all .2s ease-in-out;border-radius:.75rem;font-size:.9rem;font-weight:600}
.calendar-day.has-jobs{position:relative}
.calendar-day.has-jobs::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background-color:var(--primary)}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:.4s;border-radius:34px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}
input:checked+.slider{background-color:var(--primary)}
input:checked+.slider:before{transform:translateX(20px)}
.loader{width:48px;height:48px;border:5px solid #FFF;border-bottom-color:var(--primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}
@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#toast-container{z-index:9999;pointer-events:none}
.toast{padding:12px 24px;background-color:#1e293b;color:#fff;border-radius:1rem;font-weight:500;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);opacity:0;transform:translateY(20px);transition:all .3s ease-out;pointer-events:auto;display:flex;align-items:center;gap:8px}
.toast.show{opacity:1;transform:translateY(0)}
.modal{display:none;opacity:0;transition:opacity .2s ease-in-out}
.modal.flex{display:flex;opacity:1}
.modal-content{transform:scale(.95);transition:transform .2s ease-in-out}
.modal.flex .modal-content{transform:scale(1)}
.compact-invoice{font-family:'Plus Jakarta Sans',sans-serif}
#login-screen{position:fixed;inset:0;z-index:300;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#0f172a 100%);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login-card{width:100%;max-width:380px;background:#fff;border-radius:1.75rem;overflow:hidden;box-shadow:0 40px 60px rgba(0,0,0,.4)}
.login-header{background:linear-gradient(135deg,#1d4ed8,#4f46e5);padding:2rem;text-align:center}
.login-logo-box{width:72px;height:72px;background:rgba(255,255,255,.2);border-radius:1.25rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3)}
#hamburger-panel{position:fixed;top:0;right:0;height:100%;width:280px;background:#fff;z-index:80;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.15);border-left:1px solid rgba(226,232,240,.5)}
#hamburger-panel.open{transform:translateX(0)}
#hamburger-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
#hamburger-backdrop.open{opacity:1;pointer-events:auto}
#account-sheet{position:fixed;inset-x:0;bottom:0;background:#fff;border-radius:1.75rem 1.75rem 0 0;z-index:80;padding:1.5rem;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -20px 60px rgba(0,0,0,.15)}
#account-sheet.open{transform:translateY(0)}
#account-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
#account-backdrop.open{opacity:1;pointer-events:auto}
#dev-panel{position:fixed;inset:0;background:#f8fafc;z-index:200;display:none;flex-direction:column}
#dev-panel.open{display:flex}
.dev-tab-btn{padding:.75rem 1rem;font-size:.75rem;font-weight:700;color:#94a3b8;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
.dev-tab-btn.active{color:#3b82f6;border-bottom-color:#3b82f6}
.dev-tab-content{display:none}
.dev-tab-content.active{display:block}
.perm-table{width:100%;border-collapse:collapse}
.perm-table th{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;padding:.5rem;text-align:center}
.perm-table td{padding:.5rem;border-bottom:1px solid #f1f5f9}
.perm-table td:first-child{font-size:.75rem;font-weight:600;color:#475569}
.perm-check{width:18px;height:18px;accent-color:#3b82f6;cursor:pointer;display:block;margin:0 auto}
.role-badge-admin{background:#dbeafe;color:#1d4ed8}
.role-badge-technician{background:#d1fae5;color:#065f46}
.role-badge-dev{background:#fae8ff;color:#7e22ce}
.code-area{font-family:'Courier New',monospace;font-size:.75rem;line-height:1.6;background:#1e293b;color:#e2e8f0;border-radius:.75rem!important;border-color:#334155!important;padding:1rem;min-height:200px;resize:vertical}
#svg-preview-box{width:80px;height:80px;border:2px dashed #e2e8f0;border-radius:1rem;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.installed-feature-item{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1rem;display:flex;align-items:center;gap:.75rem}
#header-logo-area{display:flex;align-items:center;justify-content:center}
#header-logo-area svg{max-width:100%;max-height:100%}
.fsp-feature-container{max-width:100%;overflow-x:hidden;position:relative;box-sizing:border-box;min-height:40px}
.fsp-feature-container *{max-width:100%;box-sizing:border-box}
.fsp-feature-container *[style*="position:fixed"],.fsp-feature-container *[style*="position: fixed"]{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important}
.fsp-feat-modal{width:100%;max-width:28rem;max-height:90vh;background:#fff;border-radius:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden}
.fsp-feat-modal-body{flex:1;overflow-y:auto;padding:1.25rem}
.custom-scroll::-webkit-scrollbar{width:4px}
.custom-scroll::-webkit-scrollbar-track{background:transparent}
.custom-scroll::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}

/* NEW: Hide bottom nav on scroll */
#bottom-nav {
  transition: transform 0.3s ease-in-out;
}
#bottom-nav.nav-hidden {
  transform: translateY(120%);
}