
:root{--bg:#0a1628;--card:#111d32;--accent:#41B592;--accent-h:#35a080;--text:#e8ecf1;--muted:#94a3b8;--border:rgba(65,181,146,0.15);--danger:#ef4444;--radius:10px}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.app-nav{display:flex;align-items:center;gap:24px;padding:0 24px;height:64px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-brand a{text-decoration:none;font-size:18px;font-weight:700;color:var(--text)}.nav-brand span{color:var(--accent)}
.nav-links{display:flex;gap:4px;flex:1}.nav-links a{color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:6px;font-size:14px;font-weight:500;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,.05)}.nav-links a.active{color:var(--accent)}
.nav-user{display:flex;align-items:center;gap:10px;font-size:14px}.nav-user span{color:var(--text)}.nav-user a{color:var(--muted);text-decoration:none;font-size:13px}.nav-user a:hover{color:var(--danger)}
.role-badge{background:rgba(65,181,146,.15);color:var(--accent);padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}
.app-main{padding:28px;max-width:1200px;margin:0 auto}.public-main{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:32px}
.auth-container{width:100%;max-width:420px}.auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:40px}
.auth-brand{text-align:center;font-size:24px;font-weight:700;margin-bottom:8px;color:var(--text)}.auth-brand span{color:var(--accent)}
.auth-card h2{text-align:center;color:var(--muted);font-weight:400;font-size:16px;margin-bottom:28px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}.page-header h1{font-size:24px}.page-header p{color:var(--muted);font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center}
.stat-card.accent{border-color:var(--accent)}.stat-value{font-size:26px;font-weight:700}.stat-card.accent .stat-value{color:var(--accent)}.stat-label{font-size:12px;color:var(--muted);margin-top:4px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}.card-header h3{font-size:15px}
.card-body{padding:18px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-row{display:flex;gap:14px;margin-bottom:10px}.form-group{flex:1;margin-bottom:6px}
.form-group label{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;background:var(--bg);border:1px solid rgba(148,163,184,.2);border-radius:8px;color:var(--text);font-size:14px;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(65,181,146,.15)}
.form-group select option{background:var(--bg);color:var(--text)}
.btn{display:inline-block;padding:9px 20px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:.2s}
.btn-primary{background:var(--accent);color:var(--bg)}.btn-primary:hover{background:var(--accent-h)}
.btn-secondary{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-secondary:hover{background:rgba(65,181,146,.1)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(239,68,68,.3);padding:4px 12px;font-size:12px}
.btn-sm{padding:5px 14px;font-size:12px}.btn-full{width:100%;text-align:center;padding:11px}
.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:8px 12px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.03)}.data-table tr:hover td{background:rgba(255,255,255,.02)}
.badge{padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;display:inline-block}
.st-draft{background:rgba(100,116,139,.15);color:#94a3b8}.st-submitted{background:rgba(59,130,246,.15);color:#60a5fa}
.st-approved{background:rgba(65,181,146,.15);color:#41B592}.st-rejected{background:rgba(239,68,68,.15);color:#f87171}
.st-active{background:rgba(65,181,146,.15);color:#41B592}
.alert{padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:13px}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.loading,.empty{text-align:center;padding:24px;color:var(--muted);font-size:14px}.empty a{color:var(--accent);text-decoration:none}
.form-actions{display:flex;gap:12px}
/* Timesheet grid */
.timesheet-table input.ts-input{width:60px;padding:6px 8px;text-align:center;background:var(--bg);border:1px solid rgba(148,163,184,.15);border-radius:6px;color:var(--text);font-size:13px}
.timesheet-table input.ts-input:focus{border-color:var(--accent);outline:none}
.timesheet-table th small{display:block;font-weight:400;font-size:10px;color:var(--muted)}
.row-total{font-weight:700;color:var(--accent);text-align:center}
.breakdown-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.br-label{min-width:120px;font-size:13px;color:var(--muted)}.br-bar{flex:1;height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden}
.br-bar span{display:block;height:100%;background:var(--accent);border-radius:4px}.br-val{font-size:13px;min-width:60px;text-align:right}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.form-row{flex-direction:column;gap:4px}.app-nav{flex-wrap:wrap;height:auto;padding:12px;gap:8px}.nav-links{order:3;width:100%;overflow-x:auto}.app-main{padding:14px}.timesheet-table input.ts-input{width:48px}}


/* Auth extras */
.auth-wide{max-width:640px}
.auth-divider{text-align:center;margin:20px 0;position:relative}
.auth-divider span{background:var(--card);padding:0 16px;color:var(--muted);font-size:13px;position:relative;z-index:1}
.auth-divider::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--border)}
.auth-footer{text-align:center;margin-top:20px;color:var(--muted);font-size:13px}.auth-footer a{color:var(--accent);text-decoration:none}
.form-section-label{color:var(--accent);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.plan-note{color:var(--muted);font-size:13px;margin:16px 0;text-align:center}.plan-note strong{color:var(--accent)}

/* Pricing */
.pricing-container{max-width:1000px;margin:0 auto;padding:40px 20px}
.pricing-header{text-align:center;margin-bottom:40px}.pricing-header h1{font-size:32px;margin-bottom:8px}.pricing-header p{color:var(--muted);font-size:16px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pricing-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;position:relative;text-align:center}
.pricing-card.featured{border-color:var(--accent);transform:scale(1.02)}
.pricing-card.current{border-color:var(--accent);box-shadow:0 0 20px rgba(65,181,146,.15)}
.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--bg);padding:4px 16px;border-radius:20px;font-size:12px;font-weight:600}
.pricing-card h3{font-size:20px;margin-bottom:16px}
.price{margin-bottom:24px}.currency{font-size:20px;vertical-align:top;color:var(--muted)}.amount{font-size:42px;font-weight:700}.period{color:var(--muted);font-size:14px}
.feature-list{list-style:none;text-align:left;margin-bottom:24px}
.feature-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:14px;color:var(--muted)}
.feature-list li::before{content:'\2713';color:var(--accent);margin-right:8px;font-weight:700}
.pricing-footer{text-align:center;margin-top:32px;color:var(--muted);font-size:14px}.pricing-footer a{color:var(--accent);text-decoration:none;display:block;margin-top:8px}

/* Billing */
.current-plan{text-align:center;padding:24px;background:var(--bg);border-radius:var(--radius);margin-bottom:20px}
.plan-name{font-size:24px;font-weight:700;color:var(--accent)}.plan-price{color:var(--muted);margin-top:4px}
.billing-actions{display:flex;gap:12px;justify-content:center}
.plan-badge{background:rgba(249,115,22,.15);color:#fb923c;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}
.plan-info{color:var(--muted);font-size:13px}
.form-help{color:var(--muted);font-size:13px;margin:8px 0}.form-help code{background:var(--bg);padding:2px 8px;border-radius:4px;font-size:12px}

/* Super admin */
.plan-free{background:rgba(100,116,139,.15);color:#94a3b8}.plan-pro{background:rgba(59,130,246,.15);color:#60a5fa}.plan-enterprise{background:rgba(249,115,22,.15);color:#fb923c}
.team-count{color:var(--muted);font-size:13px;margin-top:12px;text-align:right}

/* Responsive pricing */
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr}.pricing-card.featured{transform:none}.billing-actions{flex-direction:column}}

/* Timer bar (persistent top bar when timer running) */
.timer-bar{background:linear-gradient(90deg,#1a2744,#0f1d33);border-bottom:2px solid var(--accent);padding:8px 20px;position:sticky;top:0;z-index:1001;display:flex;align-items:center}
.timer-bar-inner{display:flex;align-items:center;gap:12px;width:100%;max-width:1200px;margin:0 auto}
.timer-dot{width:10px;height:10px;background:#ef4444;border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.timer-elapsed{font-family:'Courier New',monospace;font-size:20px;font-weight:700;color:var(--accent);letter-spacing:2px}

/* Timer widget on dashboard */
.timer-display{font-family:'Courier New',monospace;font-size:48px;font-weight:700;text-align:center;color:var(--accent);padding:20px 0;letter-spacing:4px}
.timer-card .card-body{padding:20px}

/* Budget bars */
.budget-bar-wrap{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-bottom:4px}
.budget-bar{height:100%;border-radius:4px;transition:width .3s}
.budget-ok{background:var(--accent)}
.budget-warn{background:#f59e0b}
.budget-danger{background:#ef4444}

/* Mobile hamburger */
.mobile-menu-btn{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;padding:4px 8px;margin-right:8px}

/* Auth links */
.auth-links{text-align:center;margin-top:12px}.auth-links a{color:var(--accent);font-size:13px;text-decoration:none}

/* PWA install prompt */
.pwa-prompt{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--accent);border-radius:var(--radius);padding:16px 24px;display:flex;align-items:center;gap:16px;z-index:2000;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.pwa-prompt button{white-space:nowrap}

/* Mobile responsive nav */
@media(max-width:768px){
    .mobile-menu-btn{display:block}
    .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--card);flex-direction:column;padding:12px 0;border-bottom:1px solid var(--border);z-index:999}
    .nav-links.open{display:flex}
    .nav-links a{padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.03)}
    .nav-user{display:none}
    .app-nav{position:relative}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
    .data-table{font-size:13px}
    .data-table th,.data-table td{padding:8px 6px}
    .timer-display{font-size:36px}
    .page-header{flex-direction:column;gap:12px;align-items:flex-start}
    .page-header .btn{width:100%}
    .form-row{flex-direction:column}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr}
    .timer-display{font-size:28px;letter-spacing:2px}
}

/* Profitability page */
.stats-grid-5{grid-template-columns:repeat(5,1fr)}
.text-profit{color:#41B592;font-weight:600}
.text-warn{color:#f59e0b;font-weight:600}
.text-loss{color:#ef4444;font-weight:600}
.text-right{text-align:right}
.form-select-inline{background:var(--card);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:var(--radius);font-size:14px}
.page-actions{display:flex;gap:8px;align-items:center}
.clickable-row{cursor:pointer;transition:background .15s}.clickable-row:hover{background:rgba(65,181,146,.06)}
.prof-table td,.prof-table th{white-space:nowrap}

/* Detail panel */
.detail-panel{border-color:var(--accent)}
.detail-summary{display:flex;gap:24px;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}
.detail-stat{display:flex;flex-direction:column;gap:4px}
.detail-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.detail-val{font-size:20px;font-weight:700}

@media(max-width:768px){
    .stats-grid-5{grid-template-columns:repeat(2,1fr)}
    .page-actions{flex-direction:column;align-items:stretch}
    .detail-summary{flex-direction:column;gap:12px}
    .prof-table{font-size:12px}
}

/* SSO buttons */
.sso-buttons{display:flex;gap:8px;flex-wrap:wrap}
.btn-sso{flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius);font-weight:500;font-size:14px;cursor:pointer;transition:background .2s;border:1px solid var(--border)}
.btn-microsoft{background:#2f2f2f;color:#fff;border-color:#555}.btn-microsoft:hover{background:#404040}
.btn-google{background:#fff;color:#333;border-color:#ddd}.btn-google:hover{background:#f5f5f5}
.btn-oidc{background:var(--card);color:var(--text);border-color:var(--border)}.btn-oidc:hover{background:rgba(255,255,255,.05)}
.sso-status{text-align:center;margin-top:8px;font-size:13px;min-height:20px}
.form-help-inline{color:var(--muted);font-size:12px;font-weight:normal}
@media(max-width:480px){.sso-buttons{flex-direction:column}}

/* AI Task Assistant */
.ai-input-wrap{position:relative;display:flex;align-items:center}
.ai-input-wrap input{flex:1;padding-right:40px}
.ai-assist-btn{
    position:absolute;right:4px;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:6px;border:none;
    background:linear-gradient(135deg,rgba(65,181,146,.15),rgba(0,120,212,.15));
    color:var(--accent,#41B592);font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.ai-assist-btn:hover{background:linear-gradient(135deg,rgba(65,181,146,.3),rgba(0,120,212,.3));transform:translateY(-50%) scale(1.1)}
.ai-assist-btn:disabled{opacity:.5;cursor:wait}
.ai-spinner{width:14px;height:14px;border:2px solid transparent;border-top-color:var(--accent,#41B592);border-radius:50%;display:inline-block;animation:ai-spin .6s linear infinite}
@keyframes ai-spin{to{transform:rotate(360deg)}}
.ai-loading{opacity:.7}
.ai-refined{animation:ai-glow .5s ease;border-color:var(--accent,#41B592) !important}
@keyframes ai-glow{0%{box-shadow:0 0 0 0 rgba(65,181,146,.4)}50%{box-shadow:0 0 12px 2px rgba(65,181,146,.3)}100%{box-shadow:0 0 0 0 rgba(65,181,146,0)}}

/* ── No Text Wrapping ──────────────────────────────────── */
.data-table td, .data-table th { white-space: nowrap; }
.data-table td:last-child { white-space: nowrap; }
.badge, .role-badge, .plan-badge { white-space: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-user { white-space: nowrap; }
.btn { white-space: nowrap; }
.stat-value, .stat-label { white-space: nowrap; }
.page-header h1 { white-space: nowrap; }
.page-header { flex-wrap: nowrap; }
.card-header { flex-wrap: nowrap; }
.card-header h3 { white-space: nowrap; }
.form-row { flex-wrap: nowrap; }
.tabs { flex-wrap: nowrap; overflow-x: auto; }
.tab { white-space: nowrap; }
.pricing-card h3, .pricing-card .price, .pricing-card .amount { white-space: nowrap; }
.breakdown-row .br-label, .breakdown-row .br-val { white-space: nowrap; }
.team-count { white-space: nowrap; }
.current-plan .plan-name, .current-plan .plan-price { white-space: nowrap; }
.billing-actions { flex-wrap: nowrap; }
.import-step { white-space: nowrap; }
.int-card__info h4 { white-space: nowrap; }
.int-card__status { white-space: nowrap; }
.event-info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.timer-bar-inner { white-space: nowrap; }

/* Allow wrapping only on description/notes fields */
.data-table td.desc-cell { white-space: normal; max-width: 300px; }

/* Horizontal scroll for tables that overflow */
.card-body { overflow-x: auto; }

/* Mobile: allow wrapping on small screens */
@media (max-width: 768px) {
    .form-row { flex-wrap: wrap; }
    .page-header { flex-wrap: wrap; }
    .billing-actions { flex-wrap: wrap; }
    .nav-links { flex-wrap: wrap; }
}
