/* Explicit layout rules: these components do not depend on generated utility classes. */
.attachment-preview { width:min(1000px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; margin:auto; border:1px solid var(--work-border); border-radius:14px; background:var(--work-panel); color:var(--work-text); }
.attachment-preview::backdrop { background:rgba(0,0,0,.65); }
.attachment-preview-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-bottom:1px solid var(--work-border); }
.attachment-preview-header > div:first-child { min-width:0; }
.attachment-preview-header span,.attachment-preview-help { color:var(--work-muted); font-size:12px; }
.attachment-preview-header h2 { font-size:14px; font-weight:600; overflow-wrap:anywhere; margin-top:5px; }
.attachment-preview-actions { display:flex; gap:8px; flex:none; }
.attachment-preview-body { height:min(65dvh,720px); overflow:auto; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--work-bg); }
.attachment-preview-body > img { max-width:100%; max-height:100%; object-fit:contain; }
.attachment-preview-body > iframe { width:100%; height:100%; border:0; background:#fff; }
.attachment-preview-body > pre { align-self:stretch; width:100%; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.7; }
.attachment-preview-body > p { text-align:center; font-size:14px; line-height:1.7; }
.attachment-preview-help { padding:12px 22px; line-height:1.6; }
@media (max-width:640px) { .attachment-preview-header { align-items:flex-start; flex-direction:column; padding:16px; gap:12px; } .attachment-preview-body { height:55dvh; padding:8px; } }
.support-page { display:flex; flex-direction:column; gap:20px; }
.support-page .work-heading,.support-page .work-tabs { margin-bottom:0; }
.support-filters { display:grid; grid-template-columns:minmax(200px,2fr) repeat(3,minmax(120px,1fr)) auto; align-items:end; gap:14px; padding:20px; border:1px solid var(--work-border); border-radius:12px; background:var(--work-panel); }
.support-filters label { display:flex; flex-direction:column; gap:8px; min-width:0; }
.support-filters label > span { font-size:12px; font-weight:500; color:var(--work-muted); }
.support-filters :is(input,select) { width:100%; }
@media (max-width:1100px) { .support-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .support-filters label:first-child { grid-column:1 / -1; } }
@media (max-width:640px) { .support-filters { padding:16px; grid-template-columns:minmax(0,1fr); } }
.requester-page { display:flex; flex-direction:column; gap:24px; }
.requester-welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px; border:1px solid var(--work-border); border-radius:14px; background:var(--work-panel); }
.requester-welcome > div { min-width:0; max-width:650px; }
.requester-welcome h1 { font-size:26px; line-height:1.3; font-weight:600; color:var(--work-text); overflow-wrap:anywhere; }
.requester-welcome p { margin-top:10px; color:var(--work-muted); font-size:14px; line-height:1.7; }
.requester-welcome > a { flex:none; }
.requester-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.requester-metric { padding:22px 24px; border:1px solid var(--work-border); border-radius:12px; background:var(--work-panel); }
.requester-metric > span { font-size:13px; font-weight:500; color:var(--work-text); }
.requester-metric strong { display:block; margin:12px 0 6px; font-size:30px; line-height:1.2; color:var(--work-text); font-weight:600; }
.requester-metric p { color:var(--work-muted); font-size:12px; line-height:1.5; }
.requester-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; align-items:start; gap:24px; }
.requester-requests { min-width:0; background:var(--work-panel); border:1px solid var(--work-border); border-radius:12px; overflow:hidden; }
.requester-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:24px; }
.requester-section-heading h2,.requester-guide h2 { font-size:16px; font-weight:600; line-height:1.5; color:var(--work-text); }
.requester-section-heading p { font-size:12px; color:var(--work-muted); margin-top:5px; line-height:1.5; }
.requester-ticket { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-top:1px solid var(--work-border); }
.requester-ticket:hover { background:var(--work-hover); }
.requester-ticket:focus-visible { outline-offset:-3px !important; }
.requester-ticket-content { min-width:0; }
.requester-ticket-reference { color:var(--work-muted); font-size:11px; overflow-wrap:anywhere; }
.requester-ticket h3 { color:var(--work-text); font-size:14px; font-weight:600; line-height:1.6; margin:5px 0 8px; overflow-wrap:anywhere; }
.requester-ticket-meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--work-muted); line-height:1.6; }
.requester-ticket-trailing { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:0 0 170px; }
.requester-status { display:inline-flex; align-items:center; gap:8px; max-width:100%; border:1px solid var(--work-border); border-radius:6px; padding:5px 8px; font-size:11px; color:var(--work-text); background:var(--work-panel); overflow-wrap:anywhere; }
.requester-status > span { width:7px; height:7px; border-radius:50%; flex:none; }
.requester-conversation { font-size:11px; color:var(--work-accent); }
.requester-guide { padding:24px; border:1px solid var(--work-border); border-radius:12px; background:var(--work-panel); }
.requester-guide ol { margin-top:24px; list-style:decimal; padding-left:20px; }
.requester-guide li { padding-left:5px; margin-bottom:22px; font-size:12px; color:var(--work-accent); }
.requester-guide strong { color:var(--work-text); font-size:13px; font-weight:500; }
.requester-guide p { font-size:12px; color:var(--work-muted); line-height:1.8; margin-top:7px; }
.requester-guide-footer { padding-top:18px; border-top:1px solid var(--work-border); }
.requester-empty { border:0; border-top:1px solid var(--work-border); border-radius:0; margin:0; }
@media (max-width:1100px) { .requester-layout { grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px) {
    .requester-page { gap:16px; }
    .requester-welcome { align-items:flex-start; flex-direction:column; padding:22px 18px; }
    .requester-welcome h1 { font-size:23px; }
    .requester-metrics { grid-template-columns:1fr; gap:10px; }
    .requester-metric { padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; }
    .requester-metric strong { grid-column:2; grid-row:1 / 3; margin:0; }
    .requester-ticket { align-items:stretch; flex-direction:column; gap:12px; padding:18px; }
    .requester-ticket-trailing { flex:auto; flex-direction:row; align-items:center; justify-content:space-between; }
    .requester-section-heading,.requester-guide { padding:18px; }
}
.internal-notes { overflow:hidden; scroll-margin-top:90px; }
.internal-notes-heading { display:flex; align-items:center; gap:12px; padding:20px; }
.internal-notes-icon { display:flex; align-items:center; justify-content:center; flex:0 0 36px; height:36px; border-radius:10px; background:var(--work-hover); color:var(--work-accent); font-size:18px; }
.internal-notes-heading h2 { font-size:14px; font-weight:600; color:var(--work-text); line-height:1.4; }
.internal-notes-heading p { margin-top:4px; font-size:11px; color:var(--work-muted); line-height:1.5; }
.internal-notes-privacy { padding:0 20px 16px; color:var(--work-muted); font-size:12px; line-height:1.6; border-bottom:1px solid var(--work-border); }
.internal-notes-history { max-height:420px; max-height:min(420px,50dvh); overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--work-input-border) var(--work-panel); padding:0 20px; }
.internal-notes-history:focus-visible { outline:2px solid var(--work-accent); outline-offset:-3px; }
.internal-note { padding:18px 0; }
.internal-note + .internal-note { border-top:1px solid var(--work-border); }
.internal-note-author { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.internal-note-author > div { min-width:0; }
.internal-note-author .conversation-avatar { width:30px; height:30px; flex:0 0 30px; font-size:10px; }
.internal-note-author strong { display:block; color:var(--work-text); font-size:12px; font-weight:600; line-height:1.5; }
.internal-note-author time { display:block; color:var(--work-muted); font-size:10px; margin-top:2px; }
.internal-note-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.7; color:var(--work-text); }
.internal-note-files { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.internal-note-files a { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--work-border); border-radius:6px; color:var(--work-accent); font-size:11px; }
.internal-note-files span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.internal-note-files a:hover { background:var(--work-hover); }
.internal-notes-empty { padding:28px 4px; text-align:center; }
.internal-notes-empty strong { font-weight:500; font-size:13px; color:var(--work-text); }
.internal-notes-empty p { font-size:12px; line-height:1.7; color:var(--work-muted); margin-top:8px; }
.internal-notes-composer { display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; border-top:1px solid var(--work-border); background:var(--work-bg); }
.internal-notes-composer label { font-size:12px; font-weight:500; color:var(--work-text); }
.internal-notes-composer textarea { width:100%; min-height:100px; max-height:220px; resize:vertical; font-size:13px; line-height:1.6; }
.internal-notes-composer button { align-self:flex-end; }
.ticket-conversation-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:24px; align-items:start; }
.ticket-conversation-layout > .card { grid-column:auto; min-width:0; }
.conversation-body { padding:24px 30px; }
.conversation-state { margin-bottom:16px; color:var(--work-muted); font-size:13px; }
.conversation-state strong { color:var(--work-text); }
.conversation-timeline { position:relative; }
.conversation-timeline::before { content:''; position:absolute; left:18px; top:18px; bottom:0; width:1px; background:var(--work-border); }
.conversation-entry { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding-bottom:28px; }
.conversation-avatar { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--work-hover); color:var(--work-accent); font-size:12px; font-weight:600; overflow:hidden; z-index:1; }
.conversation-avatar img { width:100%; height:100%; object-fit:cover; }
.conversation-entry-content { min-width:0; }
.conversation-composer .conversation-entry-content { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.conversation-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.conversation-composer textarea { min-height:112px; resize:vertical; width:100%; }
.conversation-composer .file-input { width:100%; min-width:0; }
.conversation-help { color:var(--work-muted); font-size:12px; line-height:1.6; }
.conversation-actions { display:flex; flex-wrap:wrap; gap:6px; }
.conversation-message-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:8px 0 5px; }
.conversation-message-heading strong { color:var(--work-text); font-size:14px; font-weight:600; }
.conversation-message-heading time, .conversation-event time { color:var(--work-muted); font-size:11px; }
.conversation-message-heading time::before { content:'– '; }
.conversation-message-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.65; color:var(--work-text); }
.conversation-attachments { display:flex; flex-wrap:wrap; gap:16px; padding:18px; margin-top:12px; border:1px solid var(--work-border); border-radius:12px; }
.conversation-attachment { display:flex; flex-direction:column; align-items:center; gap:8px; width:120px; min-width:0; padding:4px; color:var(--work-muted); border-radius:6px; }
.conversation-attachment:hover { background:var(--work-hover); color:var(--work-accent); }
.conversation-attachment > i { font-size:30px; }
.conversation-attachment > span { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:var(--work-hover); padding:3px 6px; border-radius:4px; font-size:11px; }
.conversation-attachment small { font-size:10px; }
.conversation-event { padding-bottom:22px; color:var(--work-muted); font-size:12px; line-height:1.6; }
.conversation-event-marker { display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin:0 6px; border:1px solid var(--work-border); border-radius:50%; background:var(--work-panel); z-index:1; }
.conversation-closed { padding:0 0 24px 48px; }
@media (max-width:1000px) { .ticket-conversation-layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .conversation-body { padding:18px 14px; } .conversation-entry { gap:10px; grid-template-columns:32px minmax(0,1fr); } .conversation-avatar { width:32px; height:32px; } .conversation-timeline::before { left:16px; } .conversation-event-marker { margin:0 4px; } .conversation-attachments { padding:12px; } }
:root { --work-bg:#f6f7fb; --work-panel:#fff; --work-text:#20293b; --work-muted:#738097; --work-border:#e5e9f1; --work-hover:#f1f5fc; --work-accent:#2563eb; }
html.dark { --work-bg:#12151d; --work-panel:#1b1f2a; --work-text:#edf1fa; --work-muted:#9ca8bf; --work-border:#303747; --work-hover:#242c3e; --work-accent:#8bb4ff; }
body.demo1 { background:var(--work-bg); }
#header { background:var(--work-panel); border-bottom:1px solid var(--work-border); }
#header_container { gap:20px; }
.wrapper { min-width:0; }
.wrapper .container-fixed { max-width:1560px; width:100%; }
.work-page { padding-top:12px; padding-bottom:40px; color:var(--work-text); }
.work-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.work-heading h1 { margin:5px 0 8px; letter-spacing:-.035em; font-size:27px; line-height:1.25; }
.work-heading > .flex { flex-wrap:wrap; }
.work-eyebrow { display:block; color:var(--work-muted); font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; margin-bottom:6px; }
.work-page .card { box-shadow:none; background:var(--work-panel); border-color:var(--work-border); }
.work-tabs { display:flex; gap:26px; border-bottom:1px solid var(--work-border); margin-bottom:20px; overflow:auto; }
.work-tabs a { padding:12px 0; color:var(--work-muted); white-space:nowrap; font-weight:500; font-size:13px; border-bottom:2px solid transparent; }
.work-tabs a.is-active { color:var(--work-accent); border-color:var(--work-accent); }
.work-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 190px 155px auto; align-items:end; gap:14px; padding:16px; border:1px solid var(--work-border); background:var(--work-panel); border-radius:12px; margin-bottom:24px; }
.work-toolbar .form-label, .workflow-row .form-label { font-size:11px; color:var(--work-muted); margin-bottom:6px; display:block; }
.work-group { display:block; margin-bottom:2px; border-radius:10px; }
.work-group summary { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:0; list-style:none; }
.work-group summary::-webkit-details-marker { display:none; }
.work-group[open] summary { border-bottom:1px solid var(--work-border); }
.work-group summary > i { margin-left:auto; transition:transform .15s; transform:rotate(-90deg); }
.work-group[open] summary > i { transform:rotate(0); }
.work-group summary .badge { border:0; background:var(--work-hover); color:var(--work-muted); border-radius:6px; min-width:24px; }
.work-table { table-layout:fixed; min-width:1060px; width:100%; }
.work-table th:first-child { width:28%; }
.work-table th:nth-child(2) { width:13%; }
.work-table th:nth-child(3) { width:7%; }
.work-table th:nth-child(4) { width:9%; }
.work-table th:nth-child(5) { width:13%; }
.work-table th:nth-child(6) { width:16%; }
.work-table th:nth-child(7) { width:14%; }
.work-table thead { background:var(--work-bg); }
.work-table th { font-size:11px; font-weight:500; color:var(--work-muted); padding:10px 14px; }
.work-table td { padding:14px; font-size:12px; overflow-wrap:anywhere; }
.work-table td:first-child a { font-size:13px; }
.work-table tr:hover td { background:var(--work-hover); }
.work-table select { width:100%; max-width:100%; border-color:transparent; background-color:transparent; }
.work-table select:hover, .work-table select:focus { border-color:var(--work-border); background-color:var(--work-panel); }
.work-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
.work-metrics .card { padding:22px; border-radius:12px; transition:border-color .15s; }
.work-metrics .card:hover { border-color:var(--work-accent); }
.work-metrics .card > span { display:block; margin-top:14px; }
.work-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.work-empty-state { padding:56px 24px; text-align:center; border:1px dashed var(--work-border); border-radius:14px; background:var(--work-panel); }
.work-empty-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:18px; background:var(--work-hover); color:var(--work-accent); font-size:27px; margin-bottom:16px; }
.work-empty-state h2 { font-size:20px; font-weight:600; margin-bottom:10px; }
.work-empty-state p { max-width:430px; margin:0 auto 22px; color:var(--work-muted); line-height:1.7; font-size:13px; }
.workflow-layout { display:grid; grid-template-columns:280px minmax(0,1fr); align-items:start; gap:24px; }
.workflow-create { position:sticky; top:100px; }
.workflow-list { display:flex; flex-direction:column; gap:14px; }
.workflow-item { background:var(--work-panel); border:1px solid var(--work-border); border-radius:12px; overflow:hidden; }
.workflow-row { display:grid; grid-template-columns:minmax(150px,1.5fr) minmax(140px,1fr) 54px 76px auto; align-items:end; gap:12px; padding:18px; }
.workflow-row label { min-width:0; }
.workflow-row input, .workflow-row select { width:100%; }
.workflow-row input[type=color], .workflow-create input[type=color] { width:44px; height:38px; padding:4px; cursor:pointer; }
.workflow-state { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 18px; border-top:1px solid var(--work-border); background:var(--work-bg); color:var(--work-muted); font-size:11px; }
.workflow-state .btn { font-size:11px; min-height:28px; }
.workflow-item.is-inactive { opacity:.7; }
.search-launcher { display:flex; align-items:center; gap:12px; width:min(480px,100%); padding:10px 14px; border:1px solid var(--work-border); background:var(--work-bg); border-radius:9px; color:var(--work-muted); font-size:13px; text-align:left; }
.search-launcher:hover { border-color:var(--work-accent); }
.search-launcher kbd { margin-left:auto; white-space:nowrap; }
kbd { border:1px solid var(--work-border); background:var(--work-panel); padding:2px 5px; border-radius:4px; font-size:10px; color:var(--work-muted); font-family:inherit; }
.search-dialog { position:fixed; margin:10vh auto auto; padding:0; width:min(680px,calc(100% - 32px)); max-height:80vh; border:1px solid var(--work-border); border-radius:16px; color:var(--work-text); background:var(--work-panel); box-shadow:0 30px 100px #0004; overflow:hidden; }
.search-dialog[open] { display:flex; flex-direction:column; }
.search-dialog::backdrop { background:#10182780; backdrop-filter:blur(4px); }
.search-is-open { overflow:hidden; }
.search-dialog-bar { display:flex; align-items:center; gap:16px; padding:20px; border-bottom:1px solid var(--work-border); }
.search-dialog-bar > i { color:var(--work-accent); font-size:23px; }
.search-dialog-bar input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--work-text); font-size:16px; }
.search-dialog-bar input::placeholder { color:var(--work-muted); }
.search-dialog .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.search-results { overflow-y:auto; min-height:220px; padding:12px; }
.search-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:42px 28px; color:var(--work-muted); font-size:13px; }
.search-empty strong { color:var(--work-text); font-size:15px; }
.search-empty p { max-width:380px; line-height:1.7; }
.search-empty > i { font-size:30px; }
.search-section + .search-section { margin-top:16px; }
.search-section h2 { padding:8px 12px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--work-muted); }
.search-section h2 span { margin-left:6px; }
.search-result { display:flex; align-items:center; gap:14px; padding:12px; border-radius:8px; }
a.search-result:hover, a.search-result:focus { background:var(--work-hover); outline:2px solid var(--work-accent); outline-offset:-2px; }
.search-result > span:nth-child(2) { min-width:0; }
.search-result strong { display:block; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.search-result small { display:block; margin-top:4px; font-size:11px; color:var(--work-muted); overflow-wrap:anywhere; }
.search-result-icon { display:flex; align-items:center; justify-content:center; flex:0 0 34px; height:34px; border-radius:8px; background:var(--work-hover); color:var(--work-accent); font-size:13px; }
.search-result-arrow { margin-left:auto; color:var(--work-muted); }
.search-dialog-footer { display:flex; justify-content:space-between; gap:12px; padding:12px 20px; background:var(--work-bg); border-top:1px solid var(--work-border); color:var(--work-muted); font-size:10px; }
.status-dot { display:inline-block; flex:none; width:9px; height:9px; border-radius:50%; }
.project-overview-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:24px; align-items:start; }
.project-heading-container { padding-bottom:0; }
.project-summary { padding:26px; background:var(--work-panel); border:1px solid var(--work-border); border-radius:12px; }
.project-summary-heading { display:flex; gap:16px; align-items:center; margin-bottom:20px; }
.project-summary-heading img { width:44px; height:44px; border-radius:10px; object-fit:contain; }
.project-summary h2 { font-size:20px; font-weight:600; }
.project-description { color:var(--work-muted); font-size:14px; line-height:1.8; margin-bottom:28px; white-space:pre-line; }
.project-team { border-top:1px solid var(--work-border); padding-top:20px; }
.project-team h3 { font-size:12px; font-weight:600; margin-bottom:14px; }
.project-team-member { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:20px; background:var(--work-hover); font-size:12px; margin:0 8px 8px 0; }
.project-team-member img { width:24px; height:24px; border-radius:50%; }
.project-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.project-stat { background:var(--work-panel); border:1px solid var(--work-border); border-radius:12px; padding:20px; }
.project-stat strong { display:block; font-size:28px; margin-bottom:6px; }
.project-stat span { font-size:12px; color:var(--work-muted); }
.project-stats > a { grid-column:1/-1; justify-content:center; margin-top:6px; }
@media (max-width:1200px) { .workflow-layout { grid-template-columns:240px minmax(0,1fr); } .workflow-row { grid-template-columns:1fr 1fr 54px 70px; } .workflow-row > button { grid-column:1/-1; justify-content:center; } }
@media (max-width:800px) { .work-heading { align-items:flex-start; flex-direction:column; } .work-toolbar { grid-template-columns:1fr 1fr; } .work-toolbar > label:first-child { grid-column:1/-1; } .work-dashboard-grid, .project-overview-layout, .workflow-layout { grid-template-columns:1fr; } .workflow-create { position:static; } .search-launcher { width:auto; flex:1; } .search-launcher kbd { display:none; } .work-heading h1 { font-size:24px; } }
@media (max-width:480px) { .work-toolbar, .workflow-row { grid-template-columns:1fr 1fr; } .workflow-row label:first-of-type, .workflow-row label:nth-of-type(2) { grid-column:1/-1; } .work-toolbar > button { grid-column:1/-1; justify-content:center; } .work-metrics { grid-template-columns:1fr 1fr; gap:10px; } .search-launcher span { font-size:0; } .search-launcher span::after { content:'Rechercher'; font-size:12px; } .search-dialog-footer span:first-child { display:none; } }

/* A single palette for both the legacy components and the workspace. */
html:not(.dark) {
    color-scheme:light;
    --work-muted:#606c80;
    --work-input-border:#8c98aa;
    --work-warning:#854d0e;
    --work-warning-bg:#fff6db;
    --work-success:#166534;
    --work-danger:#b91c1c;
    --work-info:#6d28d9;
    --work-shadow:0 12px 36px #17243b26;
    --tw-gray-100:#f3f5f9;
    --tw-gray-200:#e5e9f1;
    --tw-gray-300:#c6cedb;
    --tw-gray-400:#8c98aa;
    --tw-gray-500:#606c80;
    --tw-gray-600:#606c80;
    --tw-gray-700:#4b586d;
    --tw-gray-800:#344054;
    --tw-gray-900:#20293b;
}
html.dark {
    color-scheme:dark;
    --work-muted:#a6b0c3;
    --work-input-border:#69768e;
    --work-warning:#f6cd70;
    --work-warning-bg:#332b1d;
    --work-success:#86efac;
    --work-danger:#fda4af;
    --work-info:#c4b5fd;
    --work-shadow:0 16px 48px #0008;
    --tw-gray-100:#242c3e;
    --tw-gray-200:#303747;
    --tw-gray-300:#485268;
    --tw-gray-400:#69768e;
    --tw-gray-500:#a6b0c3;
    --tw-gray-600:#a6b0c3;
    --tw-gray-700:#bcc5d6;
    --tw-gray-800:#d4dbea;
    --tw-gray-900:#edf1fa;
}
html, html.dark, html.light {
    --tw-card-background-color:var(--work-panel);
    --tw-dropdown-background-color:var(--work-panel);
    --tw-modal-background-color:var(--work-panel);
    --tw-popover-background-color:var(--work-panel);
    --tw-drawer-background-color:var(--work-panel);
    --tw-card-border:1px solid var(--work-border);
    --tw-table-border:1px solid var(--work-border);
    --tw-dropdown-border:1px solid var(--work-border);
    --tw-popover-border:1px solid var(--work-border);
    --tw-dropdown-box-shadow:var(--work-shadow);
    --tw-light:var(--work-panel);
    --tw-light-active:var(--work-bg);
    --tw-light-light:var(--work-panel);
    --tw-light-inverse:var(--work-text);
    --tw-secondary:var(--work-hover);
    --tw-secondary-active:var(--work-hover);
    --tw-secondary-inverse:var(--work-text);
    --tw-table-head-background-color:var(--work-bg);
    --tw-primary:#2563eb;
    --tw-primary-active:#1d4ed8;
    --tw-primary-light:var(--work-hover);
    --tw-success:#15803d;
    --tw-success-active:#166534;
    --tw-danger:#be123c;
    --tw-danger-active:#9f1239;
    --tw-warning:#facc15;
    --tw-warning-active:#eab308;
    --tw-warning-inverse:#382807;
    --tw-warning-light:var(--work-warning-bg);
    --tw-coal-100:var(--work-border);
    --tw-coal-300:var(--work-hover);
    --tw-coal-500:var(--work-bg);
    --tw-coal-600:var(--work-panel);
}
body.demo1 { color:var(--work-text); }
body.demo1 :is(.input,.select,.textarea,.file-input) { color:var(--work-text); background-color:var(--work-panel); border-color:var(--work-input-border); min-width:0; }
body.demo1 :is(input,textarea)::placeholder { color:var(--work-muted); opacity:1; }
body.demo1 select option { background:var(--work-panel); color:var(--work-text); }
body.demo1 :is(.text-primary,.link,.btn-link) { color:var(--work-accent); }
body.demo1 .text-warning { color:var(--work-warning); }
body.demo1 .text-success { color:var(--work-success); }
body.demo1 .text-danger { color:var(--work-danger); }
body.demo1 .text-info { color:var(--work-info); }
body.demo1 :is(.btn-warning,.badge-warning) { color:#382807; }
body.demo1 .bg-warning-light { color:var(--work-text); background:var(--work-warning-bg); }
body.demo1 .btn-light { color:var(--work-text); border-color:var(--work-border); }
body.demo1 .btn-light:hover { background:var(--work-hover); color:var(--work-text); }
body.demo1 :is(a,button,summary,input,select,textarea):focus-visible { outline:2px solid var(--work-accent); outline-offset:3px; }
body.demo1 .swal2-popup { color:var(--work-text); background:var(--work-panel); border:1px solid var(--work-border); }
.workflow-item.is-inactive { opacity:1; border-style:dashed; }
.work-page > .flex:first-child { margin-bottom:24px; gap:20px; }
.work-page :is(.card-body,.card-header,.card-footer) { padding-left:24px; padding-right:24px; }
.work-page .card-body { padding-top:20px; padding-bottom:20px; }
.ticket-conversation-layout > aside { min-width:0; gap:24px; }
.ticket-conversation-layout aside :is(p,article) { overflow-wrap:anywhere; }
.work-heading > div { min-width:0; }
.work-heading h1, .profile-identity { overflow-wrap:anywhere; }
.work-toolbar > label { min-width:0; }
.work-toolbar :is(input,select) { width:100%; }
.work-table select { border-color:transparent; }
#sidebar { background:var(--work-panel); border-color:var(--work-border); }
#sidebar .menu-link { gap:12px; }
#sidebar .menu-title { min-width:0; overflow-wrap:anywhere; }
/* Keep the sidebar's overhanging collapse button above the header. */
#header { z-index:10; }
#header_container { min-width:0; gap:16px; }
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.header-disclosure { position:relative; flex:none; }
.header-disclosure > summary { display:flex; align-items:center; justify-content:center; width:38px; height:38px; cursor:pointer; list-style:none; }
.header-disclosure > summary::-webkit-details-marker { display:none; }
.header-disclosure[open] > summary { background:var(--work-hover); }
.header-disclosure > .notification-toggle { position:relative; overflow:visible; color:var(--work-muted); }
.notification-bell { display:block; width:22px; height:22px; flex:none; }
.notification-count { position:absolute; top:-3px; right:-3px; display:flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 3px; border:2px solid var(--work-panel); border-radius:999px; background:#be123c; color:#fff; font-size:10px; font-weight:600; line-height:1; pointer-events:none; }
.notification-toggle:hover,.header-disclosure[open] > .notification-toggle { color:var(--work-text); }
.profile-toggle img { width:34px; height:34px; object-fit:cover; border:1px solid var(--work-border); }
.header-panel { position:absolute; top:calc(100% + 12px); right:0; border:1px solid var(--work-border); border-radius:12px; background:var(--work-panel); color:var(--work-text); box-shadow:var(--work-shadow); overflow:auto; max-height:calc(100dvh - 100px); z-index:50; }
.profile-panel { width:288px; max-width:calc(100vw - 32px); padding:6px; }
.profile-identity { display:flex; flex-direction:column; gap:6px; padding:16px 12px; border-bottom:1px solid var(--work-border); }
.profile-identity strong { font-size:14px; line-height:1.4; }
.profile-identity span { font-size:12px; line-height:1.5; color:var(--work-muted); }
.profile-links { display:flex; flex-direction:column; gap:4px; padding:8px 0; }
.profile-links a,.profile-logout button { display:flex; align-items:center; width:100%; gap:12px; padding:11px 12px; border-radius:7px; font-size:13px; line-height:1.4; text-align:left; color:var(--work-text); }
.profile-links i,.profile-logout i { width:18px; flex:none; font-size:18px; color:var(--work-muted); }
.profile-links a:hover,.profile-logout button:hover { background:var(--work-hover); }
.profile-logout { border-top:1px solid var(--work-border); padding-top:6px; }
.profile-logout button,.profile-logout i { color:var(--work-danger); }
.notification-panel { width:380px; max-width:calc(100vw - 32px); }
.notification-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:16px; border-bottom:1px solid var(--work-border); }
.notification-list { max-height:min(420px,60dvh); overflow-y:auto; }
.notification-item { padding:16px; border-bottom:1px solid var(--work-border); }
.notification-item:last-child { border-bottom:0; }
.notification-item button { display:block; width:100%; text-align:left; overflow-wrap:anywhere; }
.notification-item.is-unread { background:var(--work-hover); border-left:3px solid var(--work-accent); padding-left:13px; }
.notification-item:hover { background:var(--work-hover); }
.search-launcher { min-width:0; }
.search-launcher > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px) {
    #header_container { gap:8px; }
    .header-actions { gap:4px; }
    .header-panel { position:fixed; top:72px; right:12px; max-width:calc(100vw - 24px); }
    .work-page :is(.card-body,.card-header,.card-footer) { padding-left:16px; padding-right:16px; }
    .work-heading { gap:16px; }
    .work-page > .flex:first-child { gap:16px; }
    .search-launcher { padding:9px; gap:8px; }
}