:root {
  --primary: #1A5C78;
  --primary-dark: #0F2B3C;
  --primary-light: #2A7A9B;
  --accent: #DC2626;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #1e293b;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --sidebar-w: 250px;
  --header-h: 56px;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;overflow-x:hidden}
a{color:var(--primary);text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:0.875rem}

/* LOGIN */
.login-container{display:flex;height:100vh;width:100vw}
.login-left{width:50%;background:linear-gradient(135deg,#0F2B3C,#1A5C78,#2A7A9B);display:flex;flex-direction:column;position:relative;overflow:hidden;padding:2.5rem 3rem}
.login-logo-top{position:relative;z-index:1;margin-bottom:auto}
.login-logo-top img{height:40px}
.login-left .watermark{position:absolute;user-select:none;pointer-events:none;z-index:0}
.login-left .watermark-top{width:320px;height:320px;top:2%;left:15%;transform:translate(-20%,0)}
.login-left .watermark-bottom{width:220px;height:220px;bottom:5%;right:-5%;transform:translate(0,0)}
.login-left-content{position:relative;z-index:1;text-align:left;max-width:420px;padding:0 1rem;margin-bottom:auto}
.login-left-footer{position:relative;z-index:1;display:flex;flex-direction:column;gap:0.75rem}
.login-badges{display:flex;gap:0.6rem;flex-wrap:wrap;z-index:1}
.login-badge{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:0.35rem 0.85rem;border-radius:20px;font-size:0.72rem;font-weight:500;letter-spacing:0.02em}
.login-copyright{color:rgba(255,255,255,0.4);font-size:0.72rem}
.login-right{width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2.5rem 3rem;background:#f5f6f8;overflow-y:auto}
.login-right-inner{width:100%;max-width:420px}
.login-right h1{font-size:1.5rem;font-weight:700;margin-bottom:0.15rem;display:flex;align-items:center;gap:0.5rem}
.login-right h1 .staging{background:#f59e0b;color:#fff;font-size:0.6rem;padding:2px 8px;border-radius:4px;font-weight:600;letter-spacing:0.05em}
.login-right .subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:0.9rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.04em}
.form-group input{width:100%;padding:0.7rem 0.85rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.9rem;transition:border 0.2s}
.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,92,120,0.1)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem 1.25rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-size:0.85rem;font-weight:600;cursor:pointer;transition:background 0.2s}
.login-form .btn-primary{width:100%;padding:0.75rem;font-size:0.9rem}
.btn-primary:hover{background:var(--primary-dark)}
.login-tagline{color:#fff;font-size:2rem;font-weight:700;line-height:1.2;margin-top:0}
.tagline-accent{color:#dc2626}
.login-desc{color:rgba(255,255,255,0.75);font-size:0.92rem;margin-top:0.75rem;line-height:1.6}
.login-stats{display:flex;gap:2rem;margin-top:1.5rem}
.login-stat{display:flex;flex-direction:column}
.login-stat-val{color:#fff;font-size:1.75rem;font-weight:700}
.login-stat-lbl{color:rgba(255,255,255,0.5);font-size:0.78rem}
.password-header{display:flex;justify-content:space-between;align-items:center}
.forgot-link{font-size:0.78rem;color:var(--primary);text-decoration:none}
.forgot-link:hover{text-decoration:underline}
.keep-signed{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:var(--text-secondary);margin-bottom:1.25rem;cursor:pointer}
.keep-signed input{margin:0}
.social-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--text-secondary);font-size:0.8rem}
.social-divider::before,.social-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.social-buttons{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:1rem}
.social-btn{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.6rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:#fff;font-size:0.85rem;font-weight:500;color:var(--text);cursor:pointer;transition:background 0.2s}
.social-btn:hover{background:var(--bg)}
.signup-link{text-align:center;font-size:0.82rem;color:var(--text-secondary);margin-bottom:0.75rem}
.signup-link a{color:var(--primary)}
.staging-banner{background:#fef3cd;border:1px solid #f59e0b;color:#92400e;text-align:center;padding:0.5rem;border-radius:var(--radius);font-size:0.72rem;font-weight:600;margin-bottom:0.75rem}
.login-footer{margin-top:1.5rem;font-size:0.75rem;color:var(--text-secondary);text-align:center;display:none}
.login-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:0.6rem 0.85rem;border-radius:var(--radius);font-size:0.82rem;margin-bottom:1rem;display:none}

/* LAYOUT */
.app-layout{display:flex;height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--primary-dark);color:#fff;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;transition:width 0.25s ease}
.sidebar.collapsed{width:60px}
.sidebar.collapsed .sidebar-logo-full{display:none}
.sidebar.collapsed .sidebar-logo-icon{display:flex}
.sidebar.collapsed .sidebar-brand-text{display:none}
.sidebar.collapsed .sidebar-brand{padding:1rem 0.5rem 0.25rem;justify-content:center}
.sidebar.collapsed .sidebar-section{font-size:0;padding:0.3rem 0;margin-top:0.3rem;text-align:center}
.sidebar.collapsed .sidebar-section::after{content:'';display:block;width:20px;height:1px;background:rgba(255,255,255,0.15);margin:0 auto}
.sidebar.collapsed a.nav-item{justify-content:center;padding:0.6rem;gap:0;border-left:none}
.sidebar.collapsed a.nav-item .nav-label,.sidebar.collapsed .nav-badge,.sidebar.collapsed .sidebar-sep{display:none}
.sidebar.collapsed a.nav-item .nav-icon{margin:0}
.sidebar-brand{padding:1.15rem 1.25rem 0.5rem;display:flex;flex-direction:column;gap:0.4rem}
.sidebar-logo-full{display:block}
.sidebar-logo-img{height:32px;filter:brightness(0) invert(1)}
.sidebar-logo-icon{display:none;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;opacity:0.85;font-weight:bold;letter-spacing:-0.05em}
.sidebar-brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:700;font-size:0.78rem;letter-spacing:0.06em;color:rgba(255,255,255,0.85)}
.tier-indicator{display:block;font-size:0.68rem;opacity:0.45;font-weight:400;margin-top:1px}
.sidebar-collapse-btn{opacity:0.5;transition:opacity 0.2s}
.sidebar-collapse-btn:hover{opacity:1}
.sidebar-section{padding:0.5rem 0.75rem 0.15rem;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.35);margin-top:0.5rem}
.sidebar-sep{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:0.5rem 0.75rem}
.sidebar nav{flex:1;padding:0.25rem 0}
.sidebar a.nav-item{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 1.25rem;color:rgba(255,255,255,0.7);font-size:0.82rem;transition:all 0.15s;border-left:3px solid transparent}
.sidebar a.nav-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.sidebar a.nav-item.active{background:rgba(255,255,255,0.1);color:#fff;border-left-color:var(--primary-light)}
.nav-item .nav-icon{width:18px;height:18px;flex-shrink:0;opacity:0.7}
.nav-item .nav-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item.active .nav-icon{opacity:1}
.nav-item .nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:0.65rem;padding:1px 6px;border-radius:10px;font-weight:600}
.nav-item .nav-badge.new{background:#22c55e}
.nav-item .nav-badge.ai{background:linear-gradient(135deg,#8b5cf6,#6366f1);font-size:0.6rem}
.sidebar-bottom{padding:0.5rem 0}

/* MAIN AREA */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:var(--header-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:1rem}
.breadcrumb{font-size:0.82rem;color:var(--text-secondary)}
.breadcrumb span{color:var(--text)}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);padding:0.4rem 0.6rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.35rem;font-size:0.8rem}
.topbar-btn:hover{background:var(--bg)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600}
.content{flex:1;overflow-y:auto;padding:1.5rem}

/* PAGE BANNER */
.page-banner{border-radius:var(--radius);padding:1.25rem 1.5rem;color:#fff;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between}
.banner-content{display:flex;align-items:center;gap:1rem}
.banner-icon{width:42px;height:42px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center}
.banner-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.banner-title{font-size:1.1rem;font-weight:700}
.banner-desc{font-size:0.8rem;opacity:0.85;margin-top:0.1rem}
.banner-actions{display:flex;gap:0.5rem}
.banner-btn{background:rgba(255,255,255,0.2);color:#fff;border:none;padding:0.45rem 1rem;border-radius:var(--radius);font-size:0.8rem;font-weight:500;transition:background 0.2s}
.banner-btn:hover{background:rgba(255,255,255,0.3)}
.banner-btn.solid{background:#fff;color:var(--text)}

/* CARDS */
.card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);padding:1.25rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.card-title{font-size:0.9rem;font-weight:600}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}

/* STAT CARDS */
.stat-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);padding:1rem 1.15rem;display:flex;align-items:flex-start;gap:0.85rem}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat-info .stat-value{font-size:1.5rem;font-weight:700;line-height:1.2}
.stat-info .stat-label{font-size:0.78rem;color:var(--text-secondary)}
.stat-info .stat-change{font-size:0.72rem;margin-top:0.2rem}
.stat-change.up{color:#16a34a}
.stat-change.down{color:#dc2626}

/* TABLES */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary);padding:0.6rem 0.75rem;border-bottom:2px solid var(--border);background:#f8fafc}
.data-table td{padding:0.65rem 0.75rem;border-bottom:1px solid var(--border);font-size:0.82rem}
.data-table tr:hover{background:#f8fafc}
.status-badge{padding:2px 8px;border-radius:12px;font-size:0.72rem;font-weight:500;display:inline-block}
.status-badge.green{background:#dcfce7;color:#166534}
.status-badge.yellow{background:#fef9c3;color:#854d0e}
.status-badge.red{background:#fef2f2;color:#991b1b}
.status-badge.blue{background:#dbeafe;color:#1e40af}
.status-badge.purple{background:#f3e8ff;color:#6b21a8}
.status-badge.gray{background:#f1f5f9;color:#475569}
.status-badge.cyan{background:#cffafe;color:#155e75}

/* ACTIVITY LIST */
.activity-item{display:flex;align-items:flex-start;gap:0.75rem;padding:0.65rem 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.activity-text{font-size:0.82rem;flex:1}
.activity-time{font-size:0.72rem;color:var(--text-secondary);white-space:nowrap}

/* TABS */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1.25rem}
.tab{padding:0.6rem 1.15rem;font-size:0.82rem;font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all 0.15s;background:none;border-top:none;border-left:none;border-right:none}
.tab:hover{color:var(--text)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* INTEGRATION CARDS */
.integration-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem;display:flex;align-items:center;gap:1rem}
.integration-logo{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#f8fafc;padding:4px}
.integration-logo-fallback{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;color:#fff;flex-shrink:0}
.integration-info{flex:1}
.integration-name{font-weight:600;font-size:0.88rem}
.integration-desc{font-size:0.75rem;color:var(--text-secondary)}
.integration-status{font-size:0.72rem;font-weight:500;padding:3px 10px;border-radius:12px}
.integration-status.connected{background:#dcfce7;color:#166534}
.integration-status.available{background:#f1f5f9;color:#475569}

/* CHAT / ONBOARDING */
.chat-container{max-width:720px;margin:0 auto}
.chat-messages{display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1rem}
.chat-msg{display:flex;gap:0.75rem;align-items:flex-start}
.chat-msg.bot .chat-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0}
.chat-msg.user{flex-direction:row-reverse}
.chat-msg .chat-bubble{max-width:75%;padding:0.75rem 1rem;border-radius:12px;font-size:0.85rem;line-height:1.5}
.chat-msg.bot .chat-bubble{background:#f1f5f9;border-top-left-radius:4px}
.chat-msg.user .chat-bubble{background:var(--primary);color:#fff;border-top-right-radius:4px}
.chat-input-row{display:flex;gap:0.5rem}
.chat-input-row input{flex:1;padding:0.7rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.85rem}
.chat-input-row button{padding:0 1.25rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-weight:600}

/* PROGRESS STEPS */
.progress-steps{display:flex;gap:0;margin-bottom:1.5rem}
.progress-step{flex:1;text-align:center;padding:0.6rem 0.5rem;font-size:0.75rem;color:var(--text-secondary);position:relative;border-bottom:3px solid var(--border)}
.progress-step.done{border-color:var(--primary);color:var(--primary)}
.progress-step.active{border-color:var(--primary-light);color:var(--primary);font-weight:600}

/* DOC GRID */
.doc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;transition:all 0.2s}
.doc-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(26,92,120,0.1)}
.doc-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem}
.doc-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.doc-title{font-weight:600;font-size:0.88rem;margin-bottom:0.25rem}
.doc-desc{font-size:0.75rem;color:var(--text-secondary)}

/* AI ASSISTANT */
.ai-search{max-width:600px;margin:0 auto 2rem;position:relative}
.ai-search input{width:100%;padding:0.85rem 1rem 0.85rem 2.75rem;border:2px solid var(--border);border-radius:12px;font-size:0.95rem}
.ai-search input:focus{outline:none;border-color:var(--primary)}
.ai-search .search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary)}
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:2rem}
.quick-action{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center;cursor:pointer;transition:all 0.2s;font-size:0.82rem;font-weight:500}
.quick-action:hover{border-color:var(--primary);background:#f0f9ff}

/* MISC */
.search-bar{display:flex;gap:0.5rem;margin-bottom:1rem}
.search-bar input{flex:1;padding:0.55rem 0.85rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.82rem}
.search-bar select{padding:0.55rem 0.85rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.82rem;background:#fff}
.btn{padding:0.5rem 1rem;border-radius:var(--radius);font-size:0.82rem;font-weight:500;border:1px solid var(--border);background:#fff;color:var(--text);transition:all 0.15s}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-dark)}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-secondary);font-size:0.9rem}
.sla-bar{height:8px;border-radius:4px;background:#e2e8f0;overflow:hidden;margin-top:0.35rem}
.sla-fill{height:100%;border-radius:4px;transition:width 0.5s}
.filter-row{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap}
.filter-chip{padding:0.35rem 0.85rem;border-radius:20px;font-size:0.78rem;border:1px solid var(--border);background:#fff;cursor:pointer;transition:all 0.15s}
.filter-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tree-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:0.7rem;font-weight:500;margin-right:0.25rem}
.schedule-grid{display:grid;grid-template-columns:60px repeat(5,1fr);gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden}
.schedule-cell{background:#fff;padding:0.4rem;min-height:48px;font-size:0.72rem}
.schedule-header{background:#f8fafc;font-weight:600;text-align:center;padding:0.5rem}
.schedule-event{background:#dbeafe;border-left:3px solid #3b82f6;padding:0.25rem 0.4rem;border-radius:0 4px 4px 0;margin-bottom:2px;font-size:0.68rem}
.schedule-event.green{background:#dcfce7;border-color:#22c55e}
.schedule-event.purple{background:#f3e8ff;border-color:#7c3aed}
.schedule-event.amber{background:#fef3c7;border-color:#f59e0b}
.welcome-card{background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-radius:var(--radius);padding:1.5rem;color:#fff;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between}
.welcome-card h2{font-size:1.15rem;font-weight:600}
.welcome-card p{font-size:0.85rem;opacity:0.85;margin-top:0.25rem}
.smart-suggestion{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius);padding:0.6rem 0.85rem;font-size:0.8rem;display:flex;align-items:center;gap:0.5rem;cursor:pointer;transition:background 0.15s}
.smart-suggestion:hover{background:rgba(255,255,255,0.2)}
.pulse-severity{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:0.35rem}
.pulse-severity.critical{background:#dc2626}
.pulse-severity.warning{background:#f59e0b}
.pulse-severity.info{background:#3b82f6}
.estates-feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center}
.estates-feature .feat-icon{width:48px;height:48px;border-radius:12px;margin:0 auto 0.75rem;display:flex;align-items:center;justify-content:center}
.estates-feature .feat-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.estates-feature h4{font-size:0.88rem;margin-bottom:0.25rem}
.estates-feature p{font-size:0.75rem;color:var(--text-secondary)}

/* ===== WORK ORDERS MODULE ===== */
.wo-action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;cursor:pointer;transition:background 0.15s;color:var(--text-secondary)}
.wo-action-btn:hover{background:#f3f4f6;color:#1A5C78}
.wo-action-btn svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wo-action-delete:hover{background:#fef2f2;color:#E63946}
.wo-pagination{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1rem;border-top:1px solid var(--border);font-size:0.82rem;color:var(--text-secondary)}
.wo-pagination .btn{font-size:0.78rem;padding:0.3rem 0.75rem}
.wo-pagination .btn:disabled{opacity:0.4;cursor:not-allowed}
.wo-tabs{display:flex;gap:0;margin-bottom:1.25rem;border-bottom:2px solid var(--border)}
.wo-tab{padding:0.6rem 1.25rem;font-size:0.88rem;font-weight:500;border:none;background:none;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.15s}
.wo-tab.active{color:#1A5C78;border-bottom-color:#1A5C78}
.wo-tab:hover{color:#1A5C78}
.wo-upload-zone{border:2px dashed #c7d2da;border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all 0.2s;background:#fafbfc}
.wo-upload-zone:hover,.wo-upload-zone.dragover{border-color:#1A5C78;background:#f0f7fb}
.wo-upload-zone svg{stroke:#1A5C78;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wo-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#1A5C78;border-radius:50%;animation:wo-spin 0.8s linear infinite}
@keyframes wo-spin{to{transform:rotate(360deg)}}
.wo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.wo-form-group{display:flex;flex-direction:column;gap:0.3rem}
.wo-form-group label{font-size:0.8rem;font-weight:500;color:var(--text-secondary)}
.wo-input{padding:0.45rem 0.65rem;border:1px solid #d1d5db;border-radius:6px;font-size:0.85rem;font-family:inherit;transition:border-color 0.15s}
.wo-input:focus{outline:none;border-color:#1A5C78;box-shadow:0 0 0 2px rgba(26,92,120,0.1)}
select.wo-input{background:#fff}
textarea.wo-input{resize:vertical}
.wo-worker-chip{display:inline-flex;align-items:center;gap:0.3rem;padding:0.35rem 0.75rem;background:#f0f7fb;border:1px solid #c7d2da;border-radius:20px;font-size:0.82rem;color:#1A5C78}
.wo-detail-table td{border-bottom:1px solid #f3f4f6}
.wo-detail-table tr:last-child td{border-bottom:none}
@media(max-width:768px){.wo-form-grid{grid-template-columns:1fr}}

/* ===== FIELD OPERATIONS (Claims, Waste, Fuel) ===== */
.fo-detail-row td{padding:0 !important;border-bottom:1px solid var(--border) !important;background:#f8fafc}
.fo-detail-panel{padding:1rem 1.25rem}
.fo-photo-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fo-photo-overlay-inner{display:flex;flex-direction:column;align-items:center}

@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* === HR MODULE: Timesheets, Medical Leave, Training === */
.tr-tab-btn{transition:all 0.2s ease}
.tr-tab-btn:hover{color:var(--primary)!important;background:#f0f9ff}
.tr-tab-btn.active{color:var(--primary)!important;font-weight:600!important;border-bottom-color:var(--primary)!important}

/* HRMS integration card */
.hrms-card{border:1px dashed #cbd5e1;background:#f8fafc}
.hrms-logo{padding:0.5rem 1rem;background:white;border:1px solid #e5e7eb;border-radius:8px;font-size:0.82rem;font-weight:600;color:#334155}

/* Training calendar grid */
.tr-cal-day{padding:0.4rem;background:white;min-height:80px;vertical-align:top;transition:background 0.15s}
.tr-cal-day:hover{background:#f0f9ff}

/* Medical leave row hover */
.data-table tbody tr:hover{background:#f8fafc!important}
.wo-hide-toggle{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer}
.wo-hide-toggle input{opacity:0;width:0;height:0}
.wo-toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:20px;transition:.2s}
.wo-toggle-slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.wo-hide-toggle input:checked+.wo-toggle-slider{background:var(--primary)}
.wo-hide-toggle input:checked+.wo-toggle-slider:before{transform:translateX(16px)}

/* Page Header (Settings, etc.) */
.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.page-header h1{font-size:1.5rem;font-weight:700;margin:0;color:var(--text)}
.page-header p{font-size:0.85rem;color:var(--text-secondary);margin:0.15rem 0 0}
.header-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:12px;border:1px solid var(--border)}
.header-icon svg{width:24px;height:24px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topbar-btn svg{stroke-linecap:round;stroke-linejoin:round}

.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:24px;transition:.3s}
.toggle-slider:before{position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider{background:var(--primary)}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}

.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--primary);padding:0.4rem 0.85rem;border-radius:var(--radius);font-size:0.8rem;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-outline:hover{background:var(--primary);color:#fff}

.btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border);padding:0.5rem 1.25rem;border-radius:var(--radius);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.2s}
.btn-secondary:hover{background:var(--border)}

/* Modal overlay + modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;overflow-y:auto}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:12px;padding:2rem;position:relative;margin:1rem}