/* VertiForce Desktop — light workspace, ink navigation, violet accents. */
:root { color-scheme: light; --bg-primary:#f5f6fa; --bg-card:#fff; --bg-input:#f8f9fc; --text-main:#20263b; --text-muted:#69738a; --border-color:#e1e5ee; --accent-blue:#6153d5; --accent-emerald:#137660; --accent-amber:#936019; --accent-rose:#b43b51; }
body { background:#f5f6fa; color:var(--text-main); }
.app-container { background:#f5f6fa; }
.desktop-nav { display:none; }
.app-header { background:#ffffffed; border-color:#e6e8ef; }
.avatar { background:#eeeafd; color:#6453c7; }
.user-role { color:#788196; }
.icon-btn,.header-home-btn { background:#fff; border-color:#e3e6ee; color:#56617a; }
.icon-btn.danger { color:#a64b61; }
.btn-primary { background:#6654da; color:#fff; box-shadow:0 5px 12px #6654da18; }
.btn-primary:hover { background:#5544c4; }
.btn-secondary,.btn-sm { background:#fff; color:#46526b; border:1px solid #dfe3ed; }
.btn-success { background:#177b65; color:#fff; }
.btn-spinner { border-color:#ffffff55; border-top-color:#fff; }
.form-group label,#expenseForm label,#calendarCreateForm label { color:#4c5670; }
.form-control,input[type="text"],input[type="password"],input[type="time"],input[type="number"],select,textarea,#expenseForm :is(input,select,textarea),#calendarCreateForm :is(input:not([type=checkbox]),textarea) { background:#f8f9fc; color:#253049; border-color:#d7dce8; }
input::placeholder,textarea::placeholder { color:#7c8599; }
.input-icon { color:#7a829a; }
.eyebrow { color:#6b5cc6; }
.mobile-home { padding:24px 20px; gap:26px; }
.home-intro { position:relative; overflow:hidden; padding:28px; border-radius:24px; background:linear-gradient(120deg,#24253d,#453766); color:#fff; isolation:isolate; }
.home-intro .eyebrow { color:#c5b4fb; margin-bottom:16px; }
.home-intro h2 { position:relative; z-index:1; font-size:32px; line-height:1.13; letter-spacing:-1px; font-weight:650; }
.home-intro > p:last-child { position:relative; z-index:1; color:#d8d2e6; font-size:13px; line-height:1.65; max-width:430px; }
.home-intro::after { content:''; position:absolute; width:280px; height:280px; border:1px solid #ffffff18; border-radius:50%; right:-150px; top:-80px; box-shadow:0 0 0 32px #ffffff05,0 0 0 64px #ffffff04; z-index:-1; }
.home-date { position:relative; z-index:1; color:#d2c5ec; margin-bottom:18px; font-size:12px; }
.home-section-label { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.home-section-label h3 { font-size:18px; letter-spacing:-.4px; font-weight:650; }
.home-section-label p { color:#788297; font-size:12px; }
.home-modules { gap:16px; }
.mobile-home .module-card { background:#fff; border:1px solid #e3e6ef; min-height:174px; border-radius:20px; padding:20px; gap:25px; box-shadow:0 4px 18px #24345004; transition:transform .2s,border-color .2s,box-shadow .2s; }
.mobile-home .module-card:hover { background:#fff; border-color:#afa2e8; box-shadow:0 12px 32px #51458612; transform:translateY(-3px); }
.module-icon { background:#eeebff; color:#6a55c9; width:46px; height:46px; border-radius:15px; }
.module-mint .module-icon { background:#e5f5ee; color:#208366; }
.module-violet .module-icon { background:#f3eaff; color:#9659c6; }
.module-amber .module-icon { background:#fff2df; color:#b7832f; }
.module-copy strong { color:#263048; font-size:16px; font-weight:650; }
.module-copy > span { color:#778095; font-size:12px; }
.module-arrow { top:25px; right:18px; color:#9a9eb0; }
.home-brand-note { color:#7f879b; justify-content:flex-start; }
.home-brand-divider { background:#bdc2d0; }
#homePermissionsStatus,.sync-status,#expenseStatus,#checkStatus,#calendarCreateStatus:not(:empty) { color:#53517b; background:#f0edfb; border-color:#ddd5f2; }
.appt-card,.check-card,.check-group,.expense-card,#expensesScreen .expense-card,.calendar-item { background:#fff; border-color:#e1e5ef; box-shadow:0 4px 18px #23345404; }
#expensesScreen { background:#f5f6fa; color:#20263b; }
.commessa-tag { background:#eeebfb; color:#6553b4; }
.date-selector-bar { background:#fff; border:1px solid #e1e5ef; }
.date-title { color:#525c75; }
.pill-btn.active { background:#eeeafa; color:#6553b4; border-color:#d8cef3; }
.nav-tabs { background:#fff; border-color:#e4e7ef; }
.nav-tab { color:#788095; }
.nav-tab.active { background:#f4f1fd; color:#6450bf; border-color:#8068d1; }
.badge { background:#e9e2fa; color:#6753b1; }
.calendar-heading .eyebrow,.calendar-grid > strong,.calendar-day-items > h3 { color:#778198; }
.calendar-day { background:#fff; color:#5b6680; border-color:#e3e7ef; border-radius:14px; }
.calendar-day:hover { background:#f0ebfc; border-color:#bca9e3; }
.calendar-day.selected { background:#6956ce; color:#fff; border-color:#6956ce; box-shadow:0 5px 12px #6956ce22; }
.calendar-day-count { background:#d8f1e7; color:#26755f; }
.calendar-day.selected .calendar-day-count { background:#ffffff26; color:#fff; }
.expense-menu .action-tile { background:#fff; border-color:#e2e6ef; }
.action-tile .module-icon { background:#e5f5ee; color:#208366; }
#expenseSentOpen .module-icon { background:#eeebff; color:#6a55c9; }
.action-arrow { color:#8994a8; }
.modal-card,#expenseReceiptDialog { background:#fff; color:#253049; border-color:#e1e5ee; }
.modal-header,.modal-footer { border-color:#e2e6ef; }
#timesheetModal :is(.timesheet-period,.timesheet-totals,#signatureGroup,.timesheet-day-summary > div) { background:#f7f8fc; border-color:#e0e5ef; }
.alert-danger { color:#a9364d; background:#fdf0f3; border-color:#f2cbd3; }
/* A deliberate, quiet sign-in screen. */
.login-wrapper { background:radial-gradient(ellipse at 8% 8%,#ede8fa,transparent 55%),#f5f6fa; }
.brand-edition { border-color:#d7d1e5; color:#716483; }
.brand-header h1 { color:#2c2946; }
.brand-header h1 span { color:#867496; }
.brand-header .login-intro { color:#747288; }
.logo-icon { background:#6654da; color:#fff; }
.login-card { background:#fff; border-color:#e5e0ee; box-shadow:0 20px 64px #3d235610; }
.login-card-heading h2 { color:#302b45; }
.remember-login { color:#778196; }
.app-footer { color:#828598; }
.desktop-page-heading { display:none; }
@media (min-width:900px) {
 .app-container { max-width:none; width:100%; }
 .main-layout { position:relative; padding-left:252px; }
 .desktop-nav { display:block; position:absolute; inset:0 auto 0 0; width:252px; background:#202436; color:#fff; }
 .desktop-nav-inner { position:sticky; top:0; min-height:100dvh; display:flex; flex-direction:column; padding:32px 20px 24px; gap:32px; }
 .desktop-brand { display:flex; align-items:center; gap:11px; font-size:23px; font-weight:700; letter-spacing:-.7px; padding:0 10px; }
 .desktop-brand-mark { display:grid; place-items:center; width:34px; height:38px; border-radius:11px; background:#aa95ef; color:#242436; }
 .desktop-brand-mark .ui-icon { width:21px; height:21px; }
 .desktop-nav-inner > .eyebrow { color:#8d91ad; font-size:10px; padding:16px 12px 0; }
 .desktop-nav-items { display:grid; gap:7px; }
 .desktop-nav-button { display:flex; align-items:center; gap:13px; min-height:52px; padding:14px; border:1px solid transparent; border-radius:13px; font:inherit; font-size:14px; text-align:left; background:transparent; color:#aeb2c9; cursor:pointer; }
 .desktop-nav-button .ui-icon { width:20px; height:20px; }
 .desktop-nav-button:hover { background:#ffffff08; color:#fff; }
 .desktop-nav-button.active { color:#e5dafa; background:#aaa0ed1a; border-color:#aaa0ed1f; }
 .desktop-nav-button.active::after { content:''; margin-left:auto; width:5px; height:5px; border-radius:50%; background:#bb9fe9; }
 .desktop-nav-note { margin-top:auto; border-top:1px solid #ffffff12; padding:22px 12px 0; font-size:12px; line-height:1.8; color:#9b9fb8; }
 .desktop-nav-note strong { display:block; color:#c2bfd6; font-size:13px; font-weight:500; margin-bottom:4px; }
 .app-header { min-height:92px; padding:20px 42px; gap:20px; }
 .desktop-page-heading { display:grid; gap:4px; margin-right:auto; }
 .desktop-page-heading small { font-size:10px; color:#9299aa; letter-spacing:1.4px; text-transform:uppercase; }
 .desktop-page-heading strong { font-size:16px; font-weight:600; }
 .user-name { font-size:13px; }
 .user-role { font-size:11px; }
 .avatar { width:38px; height:38px; border-radius:13px; }
 .mobile-home,.content-area,#checklistsScreen { padding:38px 42px; }
 .mobile-home { gap:30px; max-width:1360px; width:100%; margin:0 auto; }
 .home-intro { min-height:244px; padding:34px 40px; border-radius:25px; background:linear-gradient(115deg,#29283f 10%,#4b386c 100%); }
 .home-intro h2 { font-size:42px; letter-spacing:-1.6px; }
 .home-intro .eyebrow { margin-bottom:14px; }
 .home-intro > p:last-child { color:#ccc4dc; font-size:14px; margin-top:17px; }
 .home-date { position:absolute; top:36px; right:38px; color:#ded0f0; background:#ffffff0a; border:1px solid #ffffff14; border-radius:10px; padding:9px 13px; font-size:12px; }
 .home-intro::after { width:380px; height:380px; right:28px; top:90px; box-shadow:0 0 0 36px #ffffff04,0 0 0 74px #ffffff03,0 0 0 112px #ffffff02; }
 .home-section-label { margin-top:2px; }
 .home-section-label h3 { font-size:20px; }
 .home-modules { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
 .mobile-home .module-card { min-height:172px; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; align-content:center; gap:22px; padding:30px; border-radius:20px; }
 .module-icon { width:58px; height:58px; border-radius:18px; }
 .module-icon .ui-icon { width:27px; height:27px; }
 .module-copy strong { font-size:21px; letter-spacing:-.5px; }
 .module-copy > span { font-size:13px; margin-top:4px; }
 .module-arrow { position:absolute; right:26px; top:auto; bottom:22px; }
 .module-arrow .ui-icon { width:18px; height:18px; }
 .home-brand-note { padding-top:4px; font-size:11px; }
 .nav-tabs { top:92px; padding:0 42px; }
 .nav-tab { flex:0 1 250px; }
 .appointments-list,#historyList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
 .appt-card { margin:0; min-width:0; }
 .date-selector-bar { margin-bottom:24px; }
 .calendar-header { max-width:680px; margin:0 auto 28px; }
 #calendarCreateOpen { width:auto; min-width:220px; }
 .calendar-workspace { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); align-items:start; gap:28px; margin-top:26px; }
 .calendar-grid { margin:0; gap:8px; background:#fff; border:1px solid #e3e6ef; padding:20px; border-radius:22px; }
 .calendar-day { min-height:70px; font-size:15px; }
 .calendar-grid > strong { font-size:11px; }
 .calendar-day-items { max-height:70vh; overflow-y:auto; padding-right:4px; }
 .calendar-day-items > p { background:#fff; border:1px dashed #d7dce8; border-radius:20px; padding:28px; color:#7c8496; line-height:1.8; }
 .expense-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #expenseForm,#calendarCreateForm { max-width:760px; }
 .modal-overlay { align-items:center; padding:32px; }
 .modal-card { max-width:860px; border-radius:24px; }
 #timesheetModal .modal-card { padding:28px; }
 .login-wrapper { max-width:1240px; margin:auto; padding:72px 72px 32px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr); gap:80px; align-content:center; align-items:center; }
 .login-brand { margin-bottom:72px; }
 .brand-header h1 { font-size:52px; letter-spacing:-2px; }
 .brand-header .login-intro { font-size:17px; }
 .login-card { width:100%; padding:38px; border-radius:26px; }
 .app-footer { grid-column:1 / -1; margin-top:32px; }
}
@media (min-width:900px) and (max-width:1100px) {
 .main-layout { padding-left:216px; }
 .desktop-nav { width:216px; }
 .app-header { padding:20px 26px; }
 .mobile-home,.content-area,#checklistsScreen { padding:30px 26px; }
 .home-intro { padding:30px; }
 .home-date { position:static; display:inline-block; margin-bottom:16px; }
 .home-intro h2 { font-size:36px; }
 .mobile-home .module-card { padding:24px; gap:15px; grid-template-columns:48px minmax(0,1fr); }
 .module-copy strong { font-size:18px; }
 .module-icon { width:48px; height:48px; }
 .calendar-workspace { grid-template-columns:1fr; }
}
@media (max-width:360px) {
 .mobile-home .module-card { padding:16px; }
 .module-copy strong { font-size:14px; }
 .home-intro { padding:23px; }
 .home-intro h2 { font-size:29px; }
 .home-section-label p { display:none; }
}
@media (prefers-reduced-motion:reduce) { .mobile-home .module-card:hover { transform:none; } }
/* Complete the shared form palette, including validation and saved states. */
.info-banner,.pdf-panel { background:#eeedf7; border-color:#aa99dd; color:#43506c; }
.info-banner .label { color:#737e96; }
.info-banner .value { color:#394762; }
#timesheetModal .timesheet-period h3,#timesheetModal .timesheet-totals label { color:#5c4aa9; }
#timesheetModal .form-control { color-scheme:light; border-color:#d7dce8; }
#timesheetModal .form-control::placeholder,#checkEditor textarea::placeholder { color:#78849b; }
.check-progress { background:#fff6e4; color:#775317; border-color:#e0be6e; box-shadow:none; }
.check-progress.check-progress-complete { background:#e8f6ee; color:#277251; border-color:#9ed2b5; }
.check-group-count { background:#f7e7c7; color:#805c21; }
.check-group-count[data-complete="true"] { background:#dff3e7; color:#28663e; }
.check-field.check-missing,.check-sign.check-missing { background:#fff1f3; color:#6c3b49; border-color:#df8799; }
#timesheetModal .hours-incomplete { background:#fff1f3!important; border-color:#df8799!important; }
.check-optional { color:#7a8497; }
.check-action-status,.check-completed,#timesheetModal .save-progress-status { background:#f0edfb; color:#53517b; border-color:#ddd5f2; }
#checkStatus[data-kind="success"],.check-action-status[data-kind="success"],#timesheetModal .save-progress-status.saved { background:#e8f6ee; color:#277251; border-color:#9ed2b5; }
#checkStatus[data-kind="error"],.check-action-status[data-kind="error"],#timesheetModal .save-progress-status.error { background:#fff0f3; color:#a83951; border-color:#e6abb8; }
#checkStatus[data-kind="working"],.check-action-status[data-kind="working"],#timesheetModal .save-progress-status.saving { background:#edf2fc; color:#466496; border-color:#c8d6f0; }
.alert-locked { background:#efedf9; color:#655787; border-color:#d4c8ef; }
.day-chip { background:#efebfa; color:#6d5aad; border-color:#d7cef0; }
.day-chip.active { background:#6d5aad; color:#fff; border-color:#6d5aad; }
input:focus,select:focus,textarea:focus { border-color:#9480d5; box-shadow:0 0 0 3px #9480d51a; }