/* Semantic surfaces shared by the timesheet, expense review and inbox. */
:root{--tone-green-bg:#e6f3eb;--tone-green-text:#226242;--tone-amber-bg:#fff3d8;--tone-amber-text:#76520b;--tone-blue-bg:#e8f1fc;--tone-blue-text:#285c91;--tone-red-bg:#fcebea;--tone-red-text:#963d3a}
html[data-theme="dark"]{--tone-green-bg:#183a30;--tone-green-text:#98e3bc;--tone-amber-bg:#3d321e;--tone-amber-text:#f3d38d;--tone-blue-bg:#20364e;--tone-blue-text:#add1fa;--tone-red-bg:#43292e;--tone-red-text:#ffb7b3}
#employeeView .employee-date-filter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:12px;padding:14px}
#employeeView .employee-date-filter .report-period{display:flex;margin:0;padding:0;box-shadow:none;align-self:end;min-width:0;border-radius:10px}
#employeeView .report-period select{min-height:42px;padding:8px 24px 8px 10px;min-width:0}
#employeeView .date-range-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#employeeView .date-range-inputs label{min-width:0;font-size:13px;display:grid;gap:5px}
#employeeView .date-range-inputs input{width:100%;min-width:0;min-height:42px;box-sizing:border-box}
#employeeView .date-filter-controls{display:block}
#employeeView .date-shortcuts{display:flex;gap:8px;background:transparent!important}
#employeeView .date-shortcuts .btn{min-height:42px;padding:8px 16px;font-weight:600}
#employeeView .date-shortcuts .btn[aria-pressed="true"]{background:var(--tone-green-bg)!important;color:var(--tone-green-text)!important;border-color:var(--tone-green-text)!important;box-shadow:inset 0 0 0 1px var(--tone-green-text)}
#employeeView #employeeDateStatus{grid-column:1/-1;font-size:12px;margin:0;line-height:1.5}
#employeeView .report-list-heading{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
#employeeView .report-list-heading h2{margin:0;font-size:18px;line-height:1.4;min-width:0}
#employeeView .report-view-actions{display:flex;flex-direction:row;align-items:center;flex:0 0 auto;width:auto;gap:0}
#employeeView .view-toggle{display:flex;width:auto;align-self:center;padding:2px;border-radius:10px}
#employeeView .view-toggle-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;min-height:40px;padding:0;border-radius:7px}
#employeeView .view-toggle-btn.is-active{background:var(--tone-blue-bg)!important;color:var(--tone-blue-text)!important;box-shadow:none}
#employeeView .employee-days>.context-help-actions{display:flex;width:100%;margin:0 0 16px;gap:8px}
#employeeView #addEventBtn{flex:1;width:100%;min-height:46px;background:var(--tone-green-bg)!important;color:var(--tone-green-text)!important;border:1px solid var(--tone-green-text)!important;box-shadow:none;font-weight:600}
html[data-theme="dark"] #employeeView #addEventBtn{background:var(--tone-green-bg)!important;color:var(--tone-green-text)!important;border-color:var(--tone-green-text)!important;box-shadow:none!important}
html[data-theme="dark"] #employeeView :is(.report-period select,.date-range-inputs input){background:#202b38!important;color:#e1eaf5!important;border-color:#435267!important}
#employeeView .finance-payable{background:var(--tone-green-bg)!important;color:var(--tone-green-text)!important;border-color:var(--tone-green-text)!important;border-radius:10px;padding:12px}
#employeeView .finance-payable :is(span,strong,small){color:var(--tone-green-text)!important}
#employeeView .finance-item:has(#mealTotal),#employeeView .expense-meal,#adminView .expense-meal{background:var(--tone-amber-bg)!important;color:var(--tone-amber-text)!important}
#employeeView .finance-item:has(#taxiTotal),#employeeView .expense-taxi,#adminView .expense-taxi{background:var(--tone-blue-bg)!important;color:var(--tone-blue-text)!important}
#employeeView .finance-item:has(#mealTotal)>*,#employeeView .finance-item:has(#taxiTotal)>*{color:inherit!important}
#employeeView .finance-item{border-radius:8px;padding:8px}
html[data-theme="dark"] #employeeView .task-chip.work-mounting{background:var(--tone-green-bg)!important;color:var(--tone-green-text)!important}
html[data-theme="dark"] #employeeView .task-chip.work-console{background:var(--tone-blue-bg)!important;color:var(--tone-blue-text)!important}
html[data-theme="dark"] #employeeView .task-chip.work-other{background:var(--tone-red-bg)!important;color:var(--tone-red-text)!important}
.payment-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
#staffPayments,#ownPayments{padding:16px;margin:12px 0;border:1px solid var(--line);border-radius:12px}
:is(#staffPayments,#ownPayments) h3{font-size:15px;font-weight:600;margin:0 0 8px}
:is(#staffPayments,#ownPayments)>p{font-size:14px;margin:0;line-height:1.5;color:var(--muted)}
#adminReportList .entry-card{padding:16px}
#adminReportList .entry-top{margin-bottom:14px;gap:16px;align-items:flex-start}
#adminReportList .review-action{gap:10px}
#adminReportList .review-status{font-weight:600}
#adminReportList .day-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,46%);align-items:start;gap:18px}
#adminReportList .compact-expenses{display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin:0}
#adminReportList .compact-expenses>div,#adminTableView .compact-expenses>div{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;font-weight:400}
#adminReportList .inline-expense{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600}
#adminReportList .compact-expenses input{width:120px;max-width:55%;height:38px;min-height:38px;font-weight:500}
#adminReportList .compact-expenses .btn{align-self:flex-start;height:auto;min-height:36px}
.receipt-declaration{display:block;font-size:12px;line-height:1.5;font-weight:500;color:inherit}
.trip-comment{margin:0!important;font-size:14px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.trip-comment>span{display:block;font-size:11px;font-weight:500;opacity:.8;margin-bottom:3px}
#adminReportList .entry-meta{align-self:start;gap:7px}
#adminReportList>.entry-card>.muted{margin:12px 0 0;font-size:12px}
[data-notifications]{display:inline-flex;align-items:center;justify-content:center;gap:7px;position:relative}
.notification-bell{display:inline-flex}
.notification-count:not(:empty){display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#287b53;color:#fff;font-size:12px;font-weight:600}
#notificationItems{display:grid;gap:10px}
#notificationItems .notification-item{margin:0;padding:14px;border:1px solid var(--line);border-left:3px solid var(--line-strong);background:var(--surface-solid);border-radius:10px}
#notificationItems .notification-item.is-unread{border-left-color:var(--tone-blue-text);background:var(--tone-blue-bg)!important}
#notificationItems .notification-item[data-kind="reviewed"],#notificationItems .notification-item[data-kind="payment_recorded"],#notificationItems .notification-item[data-kind="correction_approved"]{border-left-color:var(--tone-green-text)}
#notificationItems .notification-item:is([data-kind="reviewed"],[data-kind="payment_recorded"],[data-kind="correction_approved"]).is-unread{background:var(--tone-green-bg)!important}
#notificationItems .notification-item:is([data-kind="correction_required"],[data-kind="correction_rejected"],[data-kind="payment_canceled"]){border-left-color:var(--tone-amber-text)}
#notificationItems .notification-item:is([data-kind="correction_required"],[data-kind="correction_rejected"],[data-kind="payment_canceled"]).is-unread{background:var(--tone-amber-bg)!important}
#notificationItems .notification-item>strong{display:block;font-size:14px;line-height:1.5;font-weight:600}
#notificationItems .notification-item>p{font-size:13px;line-height:1.5;margin:7px 0;color:var(--text)}
#notificationItems .inline-actions{justify-content:flex-start;gap:8px;margin-top:12px}
#notificationItems .btn{min-height:36px;font-size:12px;padding:7px 10px;box-shadow:none}
#notificationsDialog .push-device-settings{padding:14px;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--tone-blue-bg)!important}
#notificationsDialog .push-device-settings h3{font-size:14px;line-height:1.4;margin:0 0 8px}
#notificationsDialog .push-device-settings p{font-size:13px;line-height:1.5;margin:8px 0}
#notificationsDialog .push-device-settings .btn{min-height:36px;margin:4px 8px 4px 0;font-size:13px}
@media(max-width:900px){#employeeView .employee-date-filter{grid-template-columns:minmax(0,1fr) auto}#employeeView .date-range-inputs{grid-column:1/-1;grid-row:2}#employeeView .date-filter-controls{grid-column:2;grid-row:1}}
@media(max-width:760px){
 #employeeView .employee-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;margin-bottom:12px;min-height:0}
 #employeeView .employee-header h1{font-size:18px;white-space:nowrap;margin:0}
 #employeeView .employee-header .brand-heading{min-width:0;gap:8px!important}
 #employeeView .employee-header :is(.profile-avatar-header,.header-logo-mobile){width:32px;height:32px;min-width:32px;flex-basis:32px;border-radius:9px}
 #employeeView .employee-navigation{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
 #employeeView .employee-menu{order:2}
 #employeeView .employee-menu>summary{font-size:0;padding:0;width:40px;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px}
 #employeeView .employee-menu-icon{width:20px;height:20px}
 #employeeView .employee-navigation>[data-notifications]{width:40px;height:40px;min-height:40px;padding:0;grid-column:auto;border:1px solid var(--line);border-radius:10px}
 #employeeView .notification-label{display:none}
 #employeeView .notification-count:not(:empty){position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;font-size:10px}
 #employeeView .report-list-heading h2{font-size:16px}
 #employeeView .employee-date-filter{padding:12px;gap:10px}
 #employeeView .report-period select{font-size:13px;padding-inline:7px;min-height:38px}
 #employeeView .date-shortcuts{gap:5px}
 #employeeView .date-shortcuts .btn{font-size:12px;min-height:38px;padding:7px 8px;width:auto}
 #adminReportList .day-bottom{grid-template-columns:minmax(0,1fr)}
 .payment-actions{flex-direction:column;gap:10px}
 .payment-actions .btn{width:100%}
}
@media(max-width:360px){#employeeView .employee-date-filter{grid-template-columns:1fr}#employeeView .date-filter-controls{grid-column:1;grid-row:3}#employeeView .date-shortcuts .btn{flex:1}#employeeView .employee-header h1{font-size:16px}}

/* Login is one centered column at every viewport size. */
#loginView{box-sizing:border-box;min-height:100dvh;padding:24px 16px}
#loginView .login-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;width:min(420px,100%);padding:64px 32px 28px;gap:0;border-radius:24px;box-shadow:0 16px 56px #15233614}
#loginView .login-card::after{border-radius:24px}
#loginView .login-icon{width:64px;height:64px;margin:0 auto 28px;filter:none;flex-shrink:0;object-fit:contain}
#loginView .login-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%}
#loginView .field{gap:8px;margin:0;min-width:0}
#loginView .field label{font-size:14px;font-weight:600;letter-spacing:0;line-height:20px}
html[data-theme="dark"] #loginView .field label{color:#bec9d6}
#loginView .login-form input{box-sizing:border-box;height:48px;min-height:48px;min-width:0;width:100%;padding:12px 14px;border-radius:12px;font-size:16px;line-height:22px}
#loginView .password-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
#loginView .login-form .btn{box-sizing:border-box;width:100%;height:auto;min-height:44px;padding:10px 14px;margin:0;border-radius:12px;font-size:14px;line-height:22px;font-weight:500;text-align:center;justify-content:center}
#loginView .login-form .btn-password-toggle{height:48px;min-height:48px;width:auto;padding-inline:12px;font-size:13px}
#loginView #loginBtn{min-height:48px;font-size:16px;font-weight:600;box-shadow:0 4px 12px #287b531a}
#loginView .login-form .btn-link{background:transparent;border:0;text-decoration:none;color:var(--muted);box-shadow:none}
#loginView .login-form .btn-link:hover{text-decoration:underline;color:var(--text)}
#loginView .login-form :is(.error-text,.login-status){margin:0;font-size:13px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
#loginView .login-card>[data-language-slot]{position:absolute;top:16px;right:16px;margin:0;display:block}
#loginView .language-icon-control{position:relative;display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid);color:var(--muted);cursor:pointer}
#loginView .language-icon-control>span{display:flex;pointer-events:none}
#loginView .language-icon-control select{position:absolute;inset:0;width:100%!important;min-width:0;max-width:none;height:100%;margin:0;opacity:0;cursor:pointer}
#loginView .language-icon-control:focus-within{outline:3px solid #4c7ae8;outline-offset:2px;color:var(--text)}
#loginView .language-icon-control:hover{border-color:var(--line-strong);color:var(--text)}
@media(max-width:480px){#loginView .login-card{padding:60px 24px 24px;border-radius:20px}#loginView .login-card::after{border-radius:20px}}

/* Review workspace: preserve readable text while freeing space for workdays. */
#peopleSection .staff-filter-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);gap:10px;margin-bottom:12px}
#peopleSection .staff-filter-grid .field{gap:6px;min-width:0}
#peopleSection .staff-filter-grid label,#reviewQueueControls label{font-size:13px;font-weight:500;line-height:1.4;color:var(--muted)}
#peopleSection .staff-filter-grid :is(input,select),#reviewQueueControls :is(input[type=month],input[type=date]){height:38px;min-height:38px;padding:7px 9px;font-size:13px;line-height:1.4;box-sizing:border-box;border-radius:9px;width:100%;min-width:0}
#peopleSection .staff-filter-grid select{padding-right:24px}
#reviewQueueControls{margin:0 0 10px;gap:10px;font-size:13px}
#reviewQueueControls .review-period{gap:10px}
#reviewQueueControls .review-period label{display:grid;gap:6px}
#reviewQueueControls .review-shortcuts{gap:6px}
#reviewQueueControls .review-shortcuts button{min-height:34px;padding:6px 9px;font-size:13px}
#reviewQueueControls .btn{min-height:36px;padding:7px 10px;font-size:13px}
#adminEditor .staff-profile-header{grid-template-columns:56px minmax(0,1fr);gap:6px 12px;align-items:start}
#adminEditor .staff-profile-header #staffIdentityAvatar{width:56px;height:72px;min-height:0;grid-row:1/3;border-radius:9px}
#adminEditor #adminEmployeeName{font-size:18px;line-height:1.3;margin:0}
#adminEditor #employeeProfileSummary{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
#adminEditor #employeeProfileSummary .profile-stat{flex:0 1 auto;min-width:90px;padding:0;border:0;background:transparent!important;box-shadow:none}
#adminEditor #employeeProfileSummary .profile-stat span{font-size:11px;font-weight:500;line-height:1.4;margin-bottom:3px}
#adminEditor #employeeProfileSummary .profile-stat strong{font-size:14px;line-height:1.4;font-weight:600}
#adminEditor .admin-report-filters{margin:8px 0;gap:8px;min-height:0}
#adminEditor .admin-report-filters .view-toggle-btn{min-height:34px;padding:6px 10px;font-size:13px}
#adminEditor #adminReportSummary{padding:9px 12px;margin:0;gap:8px 18px;border-radius:9px}
#adminEditor #adminReportSummary span{font-size:12px}
#adminEditor #adminReportSummary strong{font-size:16px;margin-top:3px}
#adminEditor #staffPayments{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:8px 0;padding:10px 12px;box-shadow:none;border-radius:10px;flex-shrink:0}
#staffPayments h3{margin:0;font-size:14px}
#staffPayments>p{font-size:12px;margin:0}
#staffPayments .payment-actions{margin:0 0 0 auto;gap:8px;flex-direction:row}
#staffPayments .payment-actions .btn{min-height:36px;padding:7px 10px;font-size:13px;width:auto}
#staffPayments .payment-history{order:3;flex-basis:100%;font-size:13px}
#staffPayments .payment-history summary{cursor:pointer;padding:4px 0;color:var(--muted)}
#staffPayments .payment-history[open]{max-height:180px;overflow-y:auto}
#adminReportList .entry-card{padding:12px}
#adminReportList .entry-top{margin-bottom:8px;gap:10px}
#adminReportList .day-bottom{grid-template-columns:minmax(0,1fr);gap:10px}
#adminReportList .compact-expenses{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
#adminReportList .compact-expenses>.expense-meal{flex:0 1 160px;min-width:140px}
#adminReportList .compact-expenses>.expense-taxi{flex:0 1 auto;width:fit-content;max-width:min(600px,100%);min-width:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px}
#adminReportList .compact-expenses .inline-expense{justify-content:flex-start;gap:8px;flex:0 0 auto}
#adminReportList .compact-expenses .expense-taxi .trip-comment{flex:0 1 auto;max-width:440px;white-space:pre-wrap}
#adminReportList .compact-expenses .receipt-declaration{flex-basis:100%}
#adminReportList .compact-expenses .expense-taxi .btn{align-self:center}
#adminReportList .compact-expenses>div{padding:9px 10px;gap:7px}
#adminReportList .compact-expenses input{height:34px;min-height:34px;width:100px}
#adminReportList .trip-comment{font-size:13px}
#adminReportList .trip-comment>span{display:none}
#adminReportList .compact-expenses .btn{min-height:32px;padding:5px 9px}
#adminReportList>.entry-card>.muted{margin-top:8px}
#paymentDialog{width:min(580px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
#paymentForm{display:grid;gap:14px;padding:22px;overflow-y:auto;max-height:calc(100dvh - 24px);box-sizing:border-box}
#paymentForm .dialog-header{margin:0;gap:12px;flex-direction:row}
#paymentForm h2{font-size:22px;line-height:1.3;margin:0}
#paymentForm p{margin:0;font-size:14px;line-height:1.5}
#paymentForm [data-payment-amount]{font-size:24px;line-height:1.3}
#paymentForm [data-payment-details]{margin-top:-8px;color:var(--muted)}
#paymentForm .field{font-size:13px;font-weight:500;gap:6px}
#paymentForm input{font-size:16px;min-height:42px;padding:9px 10px;min-width:0}
#paymentForm .payment-period-picker{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px}
#paymentForm .payment-presets{display:flex;gap:8px;flex-wrap:wrap}
#paymentForm .payment-presets .btn{flex:1;min-height:36px;font-size:13px;padding:7px 9px;white-space:nowrap}
#paymentForm .payment-presets [aria-pressed=true]{background:var(--tone-green-bg)!important;color:var(--tone-green-text)!important;border-color:var(--tone-green-text)!important}
#paymentForm .payment-date-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#paymentForm [type=submit]{width:100%;min-height:44px}
#paymentForm [type=submit]:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
#peopleSection .staff-filter-grid select{appearance:none;padding-right:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%237b8794' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
@media(max-width:760px){#adminEditor .staff-profile-header{grid-template-columns:48px minmax(0,1fr)}#adminEditor .staff-profile-header #staffIdentityAvatar{width:48px;height:60px}#staffPayments .payment-actions{margin-left:0;width:100%}#staffPayments .payment-actions .btn{flex:1}#paymentForm{padding:16px}#paymentForm h2{font-size:20px}}
.host-role-preview{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;max-width:1500px;margin:12px auto;padding:10px 16px;border:1px solid var(--border,#cbd5e1);border-radius:12px;background:var(--card,#fff);color:var(--text,#20242a);font-size:14px}
.host-role-preview label{display:flex;align-items:center;gap:8px;font-weight:600}.host-role-preview select{width:auto;max-width:240px;min-height:38px;padding:6px 30px 6px 10px;font-size:14px}.host-role-preview>span{flex:1;color:var(--muted,#667085)}
[data-theme="dark"] .host-role-preview{background:#19232c;border-color:#3d5364;color:#e4edf3}
@media(max-width:600px){.host-role-preview{margin:8px;gap:8px}.host-role-preview>span{flex-basis:100%}}
/* Vertical resizing preserves typography and uses existing list scroll areas. */
#adminView .height-resizable{resize:vertical;overflow:auto;min-height:120px;max-height:2400px;box-sizing:border-box}
#adminView .height-resizable.is-collapsed{height:auto!important;min-height:0;resize:none}
#adminView .height-resizable.has-custom-height{max-height:2400px!important}
#adminView #peopleSection>.height-resizable{resize:vertical;overflow:auto!important;min-height:240px;max-height:2400px!important;box-sizing:border-box}
#adminView:has(#peopleSection:not(.hidden)>.has-custom-height){height:auto;min-height:calc(100dvh - 24px)}
#peopleSection:has(>.has-custom-height){align-items:start;flex:none}
#peopleSection>.has-custom-height #adminEditor{min-height:0;overflow:hidden;flex:1;display:flex;flex-direction:column}
#peopleSection>.has-custom-height #staffReportsViewport{flex:1;min-height:100px;height:auto;overflow:auto}
#peopleSection>.has-custom-height #employeeAdminList{flex:1;min-height:100px;max-height:none;overflow:auto}
.block-height-reset{display:none;flex:0 0 auto;min-width:28px;min-height:28px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--surface-solid);color:var(--muted);cursor:ns-resize}
.height-resizable>.section-heading>.block-height-reset{display:inline-flex;align-items:center;justify-content:center}
.height-resizable::-webkit-resizer{background:linear-gradient(135deg,transparent 45%,#8299ab 46%,#8299ab 54%,transparent 55%,transparent 65%,#8299ab 66%,#8299ab 74%,transparent 75%)}
#adminView .dashboard-card.height-resizable:not(.is-collapsed){display:flex;flex-direction:column}
#adminView .dashboard-card.has-custom-height>.section-heading,#adminView .dashboard-card.has-custom-height>.admin-summary-filters{flex-shrink:0}
#adminView .dashboard-card.has-custom-height>:is(.table-wrap,.attention-list,.bug-reports-list){flex:1;min-height:80px;max-height:none;overflow:auto}
.trips-filters{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr)) minmax(160px,1fr) minmax(180px,2fr);gap:12px;margin-block:16px}
.trips-filters .field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px}.trips-filters :is(input,select){width:100%;min-width:0;min-height:40px;font-size:14px;padding:8px 10px}
.trips-table{min-width:1000px}.trips-table td{white-space:pre-line;vertical-align:top;font-size:14px}.trips-table th{font-size:12px}
#businessTripsSection>.section-heading{gap:12px;flex-wrap:wrap}#businessTripsSection .inline-actions{margin:0;gap:8px}
#businessTripsSection.has-custom-height{display:flex;flex-direction:column}#businessTripsSection.has-custom-height>.table-wrap{flex:1;min-height:100px;overflow:auto}
@media(max-width:760px){.trips-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.trips-filters :is(input,select){font-size:16px}#businessTripsSection .mini-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
.trips-create{padding:12px 0;border-bottom:1px solid var(--border,#8884);margin-bottom:12px}.trip-catalog-list{display:flex;gap:8px;flex-wrap:wrap;max-height:140px;overflow:auto;margin-bottom:14px}.trip-catalog-item{padding:8px 12px;border:1px solid var(--border,#8884);border-radius:10px;font-size:13px}#tripCreateForm .trips-filters{margin-bottom:10px}
.trip-person-card{border:1px solid var(--border,#8884);border-radius:14px;padding:12px 16px;margin:10px 0;background:var(--surface,transparent)}.trip-person-card>summary{cursor:pointer;display:flex;flex-direction:column;gap:6px;list-style:none}.trip-person-card>summary::before{content:'▸ Развернуть';font-size:12px;color:var(--muted,#78808a)}.trip-person-card[open]>summary::before{content:'▾ Свернуть'}.trip-card-totals{font-size:13px;line-height:1.6}.trip-day-line{display:flex;align-items:center;gap:12px;border-top:1px solid #8883;padding:10px 0}.trip-day-line>span{flex:1}.trip-allowance-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:14px;border-top:1px solid #8884}.trip-allowance-form>p{grid-column:1/-1}.trip-allowance-form>button{justify-self:start}.trip-link-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}.trip-link-tools select{max-width:320px}.trip-person-card .entry-card{margin-top:12px}@media(max-width:650px){.trip-allowance-form{grid-template-columns:1fr}.trip-day-line{flex-wrap:wrap}.trip-person-card{padding:12px}.trip-link-tools select{max-width:100%}}
.trip-create-toggle{cursor:pointer;font-weight:600;font-size:14px;padding:8px 0;color:var(--accent,#438353)}

#tripCatalogList .trip-catalog-item{cursor:pointer;text-align:left;color:inherit;font:inherit;background:var(--surface,transparent)}#tripCatalogList .trip-catalog-item[aria-pressed="true"]{border-color:#47845b;background:rgba(71,132,91,.12)}#tripCatalogList .trip-catalog-legacy{font-size:13px;color:var(--muted,#78808a)}#tripsBack{margin:12px 0}#tripsRows .trip-person-compact{padding:10px 12px;margin:6px 0}#tripsRows .trip-person-compact>summary{display:grid;grid-template-columns:minmax(180px,1fr) minmax(210px,1fr) minmax(260px,2fr);gap:8px 16px;align-items:center}#tripsRows .trip-person-compact>summary::before{display:none}#tripsRows .trip-person-compact>summary strong::before{content:'▸ ';font-weight:400}#tripsRows .trip-person-compact[open]>summary strong::before{content:'▾ '}#tripsRows .trip-person-compact>summary .muted{font-size:13px}@media(max-width:760px){#tripsRows .trip-person-compact>summary{grid-template-columns:1fr;gap:4px}}

.shared-trip-costs{border:1px solid var(--border,#8884);border-radius:12px;padding:14px;margin:12px 0}.shared-trip-costs h3{margin:0 0 8px}.shared-trip-cost-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #8883}.shared-trip-cost-row>span{flex:1}.shared-trip-cost-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}.shared-trip-cost-form .field:has([name=description]),.shared-trip-cost-form>p{grid-column:1/-1}.trip-allowance-form>[hidden]{display:none!important}@media(max-width:650px){.shared-trip-cost-form{grid-template-columns:1fr}.shared-trip-cost-row{flex-wrap:wrap}.shared-trip-cost-row>span{flex-basis:100%}}

#businessTripsSection>.section-heading{justify-content:flex-start}#businessTripsSection>.section-heading>h2{flex:0 0 auto;margin-right:0}#businessTripsSection>.section-heading>.inline-actions{flex:0 0 auto;margin-left:auto}

/* Keep rounded scroll surfaces intact without an external scrollbar strip. */
.dialog-card{scrollbar-width:none;overscroll-behavior:contain;clip-path:inset(0 round 20px)}
.dialog-card::-webkit-scrollbar{display:none}
:where(.audit-list,.approval-list,.review-list,.table-wrap,.distribution-sheet){scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
#notificationsDialog .dialog-card{width:min(860px,94vw)}
#notificationsDialog .push-device-settings{padding:10px 14px;margin:12px 0;background:var(--surface-solid)!important;box-shadow:none}
#notificationsDialog .push-device-settings summary{cursor:pointer;font-weight:600;font-size:14px}
.notification-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:13px}
.notification-read,.notification-time{color:var(--muted);font-size:13px}
#notificationItems .notification-item.has-project{background:var(--event-bg)!important;border-color:var(--event-border);border-left-color:var(--event-border)}
.notification-project{display:inline-block;padding:4px 8px;margin:4px 6px 4px 0;border:1px solid var(--event-border);border-radius:8px;background:var(--event-bg);color:var(--event-text);font-size:13px}
#notificationItems .notification-item:not(.is-unread){border-left-width:1px}
.notification-opt-in .dialog-card{max-width:440px}

.notification-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.notification-toolbar label{display:grid;gap:6px;min-width:0;flex:1 1 240px}
.notification-toolbar label[hidden]{display:none}
.notification-toolbar select{width:100%;min-width:0}
@media(max-width:480px){.notification-toolbar>button{width:100%}}

#businessTripsSection>.trips-filters{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#tripsOverview{margin-block:14px;overflow:auto;max-height:460px}
.trip-overview-table{width:100%;border-collapse:collapse;font-size:13px}
.trip-overview-table th,.trip-overview-table td{padding:10px;border-bottom:1px solid var(--border,#8884);text-align:left;vertical-align:top;min-width:85px}
.trip-overview-table th{position:sticky;top:0;background:var(--card,#f1f4f8);z-index:1}
.trip-overview-table td:first-child{min-width:210px}
#businessTripsSection .shared-trip-cost-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
#businessTripsSection .shared-trip-cost-form .field{flex:1 1 170px;min-width:0}
@media(max-width:600px){#businessTripsSection>.trips-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}