:root { --assetli-green:#073f12; --assetli-green-deep:#0f3d0f; --assetli-green-mid:#0f5c1d; --assetli-orange:#ff9800; --assetli-white:#f7fff4; --assetli-blue:#0868dc; }
/* Shared density applies to all modules, including grids in dialogs. */
vaadin-grid.tbg-standard-grid { font-size:12px; --lumo-font-size-m:12px; --lumo-font-size-s:12px; --lumo-size-m:28px; --vaadin-grid-cell-padding:4px 8px; min-width:0; }
vaadin-grid.tbg-standard-grid::part(cell) { min-height:28px; padding:4px 8px; }
vaadin-grid.tbg-standard-grid::part(header-cell) { font-size:12px; font-weight:600; background:#f3f6f8; }
vaadin-grid.tbg-standard-grid vaadin-grid-cell-content { font-size:12px; }
vaadin-grid.tbg-standard-grid vaadin-button { font-size:12px; min-height:26px; height:26px; margin:0; }
vaadin-grid.tbg-standard-grid vaadin-text-field { --lumo-size-m:28px; font-size:12px; min-width:0; }
.navigation-section { margin:2px 0; font-size:13px; }
.navigation-section::part(summary) { padding:7px 8px; font-size:13px; font-weight:600; }
.navigation-section::part(content) { padding:0 0 0 8px; }
.support-sidebar .navigation-section { color:var(--assetli-white); --lumo-body-text-color:var(--assetli-white); --lumo-secondary-text-color:var(--assetli-orange); }
.ticket-detail-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 20px; width:100%; }
.ticket-detail-fields > div { display:flex; flex-direction:column; gap:4px; border-bottom:1px solid #e4ebf1; padding:8px 0; overflow-wrap:anywhere; }
.ticket-detail-fields > div > span:first-child { font-size:12px; font-weight:600; color:#536277; }
.ticket-detail-text { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
.ticket-details-page h2 { font-size:20px; overflow-wrap:anywhere; }
.ticket-details-page h3 { font-size:16px; margin:12px 0 4px; }
.ticket-detail-fields span { white-space:pre-wrap; }
.ticket-details-footer { position:sticky; bottom:0; padding:10px 0; background:white; border-top:1px solid #dce4ee; z-index:2; }
.ticket-comment-row { display:flex; gap:12px; width:100%; margin:8px 0; }
.ticket-comment-avatar { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#dcecff; color:#073f12; font-weight:700; }
.ticket-comment-bubble { min-width:0; flex:1; background:#f3f6f8; padding:12px; border-radius:8px; }
.ticket-comment-bubble > span:first-child { font-weight:600; font-size:13px; }
.ticket-comment-bubble > span:last-child { color:#536277; font-size:12px; }
.ticket-comment-private { background:#fff3cd; border-left:4px solid #ffc107; }
.staff-header { box-sizing:border-box; display:flex; align-items:center; gap:14px; width:100%; min-height:72px; padding:6px 18px; background:var(--assetli-green-deep); color:#fff; font-family:Arial,Helvetica,sans-serif; border-bottom:1px solid #1f5e27; }
.staff-identity { display:flex; align-items:center; gap:12px; min-width:0; margin-right:auto; }
.staff-assetli-logo { box-sizing:border-box; width:58px; height:58px; flex:none; object-fit:contain; background:#fff; border-radius:2px; }
.staff-brand { color:#fff; font-size:24px; font-weight:750; white-space:nowrap; }
.staff-support-menu { --lumo-primary-text-color:var(--assetli-orange); --lumo-body-text-color:var(--assetli-orange); background:transparent; border-radius:6px; padding:2px 5px; font-size:18px; font-weight:700; }
.staff-settings-menu { background:transparent; border-radius:6px; padding:2px 5px; color:#fff; font-weight:600; }
.staff-profile-menu { margin-left:2px; background:transparent; border-radius:50%; padding:2px; }
.staff-header vaadin-menu-bar { background:transparent!important; box-shadow:none!important; border:0!important; --vaadin-button-background:transparent; --vaadin-button-background-hover:#ffffff17; --vaadin-button-border-color:transparent; --lumo-button-background-color:transparent; --lumo-contrast-5pct:transparent; --lumo-contrast-10pct:#ffffff17; }
.staff-header vaadin-menu-bar::part(container), .staff-header vaadin-menu-bar::part(menu-bar-button) { background:transparent!important; box-shadow:none!important; border:0!important; }
.staff-header vaadin-menu-bar-button { min-width:0; color:inherit!important; background:transparent!important; box-shadow:none!important; border:0!important; border-radius:4px; }
.staff-header vaadin-menu-bar-button::part(label), .staff-header vaadin-menu-bar-button::part(content) { background:transparent!important; }
.staff-header vaadin-menu-bar-button:hover { background:#ffffff17!important; }
.staff-support-menu, .staff-support-menu vaadin-menu-bar-button, .staff-support-trigger { --vaadin-button-text-color:var(--assetli-orange); --lumo-body-text-color:var(--assetli-orange); color:var(--assetli-orange)!important; background:transparent!important; }
.staff-settings-menu, .staff-settings-menu vaadin-menu-bar-button, .staff-settings-trigger { --vaadin-button-text-color:#fff; --lumo-body-text-color:#fff; color:#fff!important; background:transparent!important; }
.staff-profile-menu, .staff-profile-menu vaadin-menu-bar-button, .staff-profile-trigger { --vaadin-button-text-color:#fff; --lumo-body-text-color:#fff; color:#fff!important; background:transparent!important; }
.staff-page { box-sizing:border-box; width:min(100%,1000px); margin:30px auto; padding:0 24px 40px; font-family:Arial,Helvetica,sans-serif; }
.staff-page h1 { color:#df8100; margin:0 0 22px; }
.staff-card { background:white; border:1px solid #d9e3ed; border-top:5px solid var(--assetli-orange); border-radius:12px; padding:26px; box-shadow:0 8px 28px rgba(31,63,91,.08); }
.profile-card { background:linear-gradient(180deg,#fff6e6 0,#fff 145px); width:min(100%,660px); box-sizing:border-box; }
.profile-view .profile-detail span:first-child { color:#9b5c00; font-weight:700; }
.profile-detail { display:flex; gap:20px; padding:11px 0; border-bottom:1px solid #e4ebf1; }
.profile-detail span:first-child { min-width:120px; color:#617089; }
.staff-form { display:flex; flex-direction:column; gap:14px; width:min(100%,500px); }
.staff-message { padding:10px 12px; border-radius:7px; background:#fff0ef; color:#a53838; }
.staff-primary-button { background:var(--assetli-orange)!important; color:var(--assetli-green)!important; font-weight:700; }
.staff-page vaadin-button[theme~="primary"], .settings-content vaadin-button[theme~="primary"] { background:var(--assetli-orange); color:var(--assetli-green); font-weight:700; }
.staff-page vaadin-button[theme~="primary"]:hover, .settings-content vaadin-button[theme~="primary"]:hover { background:#ffad2e; }
.support-workspace { width:100%; min-height:calc(100vh - 76px); font-family:Arial,Helvetica,sans-serif; background:#fff; }
.support-page { width:100%; padding:0!important; margin:0; box-sizing:border-box; font-family:Arial,Helvetica,sans-serif; }
.support-form-content { box-sizing:border-box; min-width:0; flex:1; padding:18px!important; }
.support-form-content h1 { color:#df8100; margin:0 0 15px; }
.support-form-content .staff-form { width:100%; max-width:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 16px; align-items:end; padding:16px; box-shadow:none; }
.support-form-content .staff-form > vaadin-text-area { grid-column:1 / 3; }
.support-form-content .staff-form vaadin-text-field, .support-form-content .staff-form vaadin-combo-box, .support-form-content .staff-form vaadin-text-area { min-width:0; width:100%; }
.support-form-content { padding-bottom:92px!important; }
.support-ticket-upload { width:100%; border:1px dashed #cdd8e5; border-radius:8px; padding:10px; }
.support-sla-panel { box-sizing:border-box; border-top:1px solid #dce4ee; padding-top:12px!important; }
.support-sla-panel h3, .support-attachment-section h3 { color:#25384d; margin:8px 0; }
.support-sla-panel p { margin:6px 0 12px; color:#536277; }
.support-sla-panel > span { color:#315274; margin-bottom:12px; }
.support-sla-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 16px; width:100%; }
.support-sla-fields > * { min-width:0; width:100%; }
.support-sla-fields > vaadin-text-area { grid-column:1 / -1; }
.support-attachment-section { width:100%; min-width:0; }
.support-ticket-actions { position:fixed; left:300px; right:0; bottom:0; z-index:12; box-sizing:border-box; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:auto; padding:12px 16px; border-top:1px solid #d5dfe9; background:#fff; box-shadow:0 -4px 16px #1b34431c; }
.support-ticket-actions vaadin-button { width:100%; min-width:0; background:#0868dc; color:#fff; font-weight:700; }
.support-ticket-actions .support-view-button-main { background:#eef4ff; color:#0868dc; }
.support-sidebar { box-sizing:border-box; flex:0 0 300px!important; width:300px!important; min-width:300px!important; max-width:300px; min-height:calc(100vh - 72px); padding:18px 16px!important; background:var(--assetli-green); color:var(--assetli-white); overflow:auto; }
.support-workspace > .support-form-content, .support-workspace > .support-content { flex:1 1 0!important; width:0; min-width:0; }
.support-sidebar vaadin-text-field { width:100%; margin-bottom:20px; }
.support-side-search { background:#fff; border-radius:5px; }
.support-sidebar-title { display:block; color:var(--assetli-orange); font-size:27px; font-weight:700; margin:2px 0 22px; }
.support-status-button { width:100%; min-height:59px; justify-content:flex-start; gap:16px; margin:0 0 13px; border:1px solid #ff980073; border-radius:999px; color:var(--assetli-white); background:var(--assetli-green-mid); font-size:19px; font-weight:700; }
.support-status-button:hover { background:#176c28; }
.support-status-badge { width:39px; height:39px; display:inline-grid; place-items:center; border-radius:50%; color:var(--assetli-green); background:var(--assetli-orange); font-size:23px; font-weight:800; }
.support-nav-button { width:100%; min-height:32px; height:auto; justify-content:flex-start; gap:8px; margin:1px 0; padding:6px 10px; border-radius:6px; color:var(--assetli-white); background:transparent; font-size:13px; font-weight:500; text-align:left; white-space:normal; }
.support-nav-button vaadin-icon, .support-sidebar-views vaadin-icon { color:var(--assetli-orange); width:22px; height:22px; flex:none; }
.support-sidebar-views { display:flex; align-items:center; gap:13px; margin:12px 0 4px; font-size:17px; font-weight:700; }
.support-view-button { padding-left:27px; }
.support-nav-button:hover, .support-nav-selected { background:#145522; color:var(--assetli-orange); }
.support-nav-selected { box-shadow:inset 4px 0 0 var(--assetli-orange); }
.support-content { box-sizing:border-box; min-width:0; flex:1; padding:18px 24px!important; }
.support-tabs { width:100%; }
.support-data-tab { gap:16px; }
.support-toolbar { box-sizing:border-box; align-items:center; justify-content:space-between; gap:15px; padding:8px 8px 12px; }
.support-global-search { width:min(100%,540px); margin-right:auto; }
.support-clear-button { color:#0860c5; background:#f0f4f9; font-weight:700; }
.support-export-link { box-sizing:border-box; min-width:154px; padding:11px 17px; border-radius:5px; background:#eef2f7; color:#526171; text-align:center; text-decoration:none; font-weight:700; }
.support-edit-button { background:#0868dc; color:#fff; }
.support-data-tab vaadin-grid { --lumo-primary-color:#0868dc; }
.support-board { display:flex; align-items:flex-start; gap:16px; width:100%; overflow-x:auto; padding-bottom:15px; }
.support-board-lane { box-sizing:border-box; min-width:245px; width:245px; padding:14px; border-radius:9px; background:#f2f5f9; }
.support-board-lane h2 { margin:0 0 12px; font-size:17px; }
.support-board-lane span { display:block; margin:0 0 15px; color:#57677b; font-size:12px; }
.support-board-card { width:100%; justify-content:flex-start; white-space:normal; text-align:left; background:white; color:#223247; border-left:4px solid var(--assetli-orange); box-shadow:0 2px 8px #1b34431a; }
.support-metrics { display:flex; flex-wrap:wrap; gap:15px; }
.support-metric { min-width:180px; border:1px solid #d9e3ed; border-top:4px solid var(--assetli-orange); border-radius:8px; padding:18px; }
.support-metric span { color:#607185; }
.support-metric h2 { margin:8px 0 0; }
.portfolio-metrics { display:grid; width:100%; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.portfolio-metric { display:flex; flex-direction:column; gap:2px; padding:12px; border:1px solid #d9e3ed; border-radius:8px; }
.portfolio-metric span:first-child { color:#0860c5; font-size:24px; font-weight:700; }
.portfolio-metric span:nth-child(2) { font-weight:700; }
.portfolio-metric span:last-child { color:#687788; font-size:12px; }
.portfolio-filters { flex-wrap:wrap; gap:8px; }
.portfolio-filters vaadin-button { background:#eef3f8; color:#255078; }
.portfolio-filters vaadin-button:hover { background:#dbeafa; }
.tasks-page { box-sizing:border-box; padding:24px; width:100%; font-family:Arial,Helvetica,sans-serif; }
.tasks-page h2 { margin:0 0 14px; color:#df8100; }
.staff-settings-menu { order:1; }
.staff-support-menu { order:2; }
.staff-profile-menu { order:3; }
.settings-workspace { min-height:calc(100vh - 72px); font-family:Arial,Helvetica,sans-serif; }
.settings-sidebar { box-sizing:border-box; flex:0 0 300px!important; width:300px!important; min-width:300px!important; max-width:300px; padding:18px!important; background:#fff; color:#26394d; border-right:1px solid #dce4ee; overflow:auto; }
.settings-sidebar > span:nth-child(2) { color:var(--assetli-green); font-size:25px; font-weight:700; margin-bottom:14px; }
.settings-sidebar-heading { color:var(--assetli-orange); font-size:18px; font-weight:700; margin:17px 0 8px; padding-left:10px; }
.settings-sidebar-item { display:block; width:100%; min-height:32px; height:auto; justify-content:flex-start; gap:8px; padding:6px 10px; border-radius:5px; background:transparent; color:var(--assetli-green); text-align:left; font-size:13px; white-space:normal; }
.settings-sidebar-item vaadin-icon { width:21px; height:21px; flex:none; color:var(--assetli-green-mid); }
.settings-sidebar-item:hover { background:#edf5ee; color:var(--assetli-green); }
.settings-sidebar-selected { background:#dcecff; color:#0868dc; font-weight:700; }
.settings-sidebar-selected vaadin-icon { color:#0868dc; }
.settings-search { margin-bottom:14px; }
.settings-content { box-sizing:border-box; flex:1 1 0!important; width:0; min-width:0; padding:20px!important; }
.settings-content h2 { color:#df8100; }
.settings-content vaadin-button[theme~="primary"], vaadin-dialog-overlay vaadin-button[theme~="primary"], vaadin-confirm-dialog-overlay vaadin-button[theme~="primary"] { background:var(--assetli-orange); color:var(--assetli-green); font-weight:700; }
.settings-table-panel { min-width:0; width:100%; padding:0!important; }
.settings-table-panel vaadin-grid { min-width:0; }
.settings-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; width:100%; }
.calendar-day-heading { text-align:center; color:#526171; font-weight:700; padding:6px 0; }
.settings-calendar-grid .calendar-day-cell { min-width:0; min-height:58px; height:auto; overflow:hidden; white-space:normal; overflow-wrap:anywhere; justify-content:flex-start; align-items:flex-start; padding:7px; background:#f2f5f9; color:#223247; }
.settings-calendar-grid .calendar-holiday { background:#fff0d6; border:1px solid var(--assetli-orange); }
@media(max-width:800px) { .settings-workspace { flex-direction:column; }.settings-sidebar { flex:0 0 auto!important; width:100%!important; min-width:0!important; max-width:none; max-height:260px; }.settings-content { width:100%; padding:12px!important; } }
@media(max-width:700px) { .staff-header { min-height:62px; padding:5px 8px; gap:3px; }.staff-identity { gap:6px; }.staff-assetli-logo { width:48px; height:48px; }.staff-brand { max-width:135px; white-space:normal; line-height:1.05; font-size:16px; }.staff-settings-menu,.staff-support-menu { font-size:14px; padding:0; }.staff-page { margin:16px auto; padding:0 14px 30px; }.profile-detail { flex-direction:column; gap:2px; } }
@media(max-width:800px) { .support-workspace { flex-direction:column; }.support-sidebar { flex:0 0 auto!important; min-height:0; width:100%!important; min-width:0!important; max-width:none; }.support-workspace > .support-form-content, .support-workspace > .support-content { width:100%; }.support-form-content .staff-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.support-content { padding:12px!important; }.support-toolbar { flex-wrap:wrap; } }
@media(max-width:800px) { .support-sla-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }.support-ticket-actions { left:0; } }
@media(max-width:520px) { .support-form-content .staff-form { grid-template-columns:1fr; }.support-form-content .staff-form > vaadin-text-area { grid-column:auto; } }
@media(max-width:520px) { .support-sla-fields { grid-template-columns:1fr; }.support-ticket-actions { gap:5px; padding:8px; }.support-ticket-actions vaadin-button { font-size:12px; padding-inline:4px; } }