/* 2026 @ Ali Abdallah */
:root {
    --bg: #f6f7f9;
    --text: #17202a;
    --muted: #667085;
    --line: #d9dee7;
    --surface: #ffffff;
    --primary: #176b52;
    --primary-dark: #0f4d3b;
    --primary-soft: #edf7f3;
    --danger: #b42318;
    --orange: #b54708;
    --blue: #175cd3;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
}

.topbar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 18px;
    min-height: 68px;
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    align-items: center;
    color: var(--primary-dark);
    display: inline-flex;
    font-size: 20px;
    font-weight: 800;
    gap: 9px;
    text-decoration: none;
    white-space: nowrap;
}
.brand-mark { align-items: center; background: var(--primary); border-radius: 9px; color: #fff; display: inline-flex; font-size: 13px; font-weight: 900; height: 32px; justify-content: center; letter-spacing: -.4px; min-width: 32px; padding: 0 5px; }
.brand-image { background:#fff; border-radius:9px; height:32px; object-fit:contain; width:32px; }
.warning-bar { align-items:center; background:#fff6dd; border-bottom:1px solid #f1cf73; color:#7a4b00; display:flex; gap:16px; min-height:48px; padding:8px 48px; }
.warning-bar > strong { white-space:nowrap; }
.warning-bar-items { display:flex; flex:1; flex-wrap:wrap; gap:8px; }
.warning-bar a { background:#fff; border:1px solid #f1cf73; border-radius:7px; color:inherit; display:flex; gap:7px; max-width:500px; padding:4px 8px; text-decoration:none; }
.warning-bar a:hover { background:#ffedb4; }
.warning-bar a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.branding-preview { border:1px solid var(--line); border-radius:12px; max-height:110px; max-width:240px; object-fit:contain; padding:8px; }

.nav {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 4px;
}

.nav-primary { display: flex; flex-wrap: wrap; gap: 4px; }
.global-search { display: flex; margin-left: 0; min-width: 150px; }
.global-search input { border-radius: 8px 0 0 8px; font-size: .9rem; min-width: 0; padding: 8px 10px; width: 150px; }
.global-search button { border-radius: 0 8px 8px 0; margin: 0; padding: 7px 10px; }
.search-form { display: flex; gap: 10px; max-width: 760px; }
.search-form input { flex: 1; }
.search-result { align-items: baseline; border-top: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding: 13px 0; text-decoration: none; }
.search-result span { color: var(--muted); }
.nav-menu { position: relative; }
.nav-menu summary {
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    list-style: none;
    padding: 10px 13px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { border: solid currentColor; border-width: 0 2px 2px 0; content: ""; display: inline-block; height: 7px; margin: 0 1px 3px 9px; transform: rotate(45deg); width: 7px; }
.nav-menu.has-alert summary { position: relative; }
.nav-menu.has-alert summary::before { background: #c5271b; border: 2px solid #fff; border-radius: 50%; content: ""; height: 10px; position: absolute; right: 5px; top: 4px; width: 10px; }
.nav-menu[open] summary, .nav-menu summary:hover, .nav-menu summary.active { background: var(--primary-soft); color: var(--primary-dark); }
.nav-dropdown { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.16); display: grid; min-width: 220px; padding: 6px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; }
.nav-dropdown a { white-space: nowrap; }
.mobile-menu-toggle,.mobile-nav-account,.mobile-menu-overlay { display:none; }

.nav a,
.button,
button {
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    justify-content: center;
    padding: 10px 13px;
    text-decoration: none;
}

.nav a {
    color: var(--muted);
    position: relative;
}

.nav a.active,
.nav a:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.nav a.has-alert::after {
    background: var(--danger);
    border: 2px solid var(--surface);
    border-radius: 999px;
    content: "";
    height: 10px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 10px;
}

.logout button {
    background: #f2f4f7;
    color: var(--text);
}

.account-link { color: var(--muted); font-size: 14px; font-weight: 700; padding: 10px 4px; text-decoration: none; white-space: nowrap; }
.account-link:hover, .account-link.active { color: var(--primary-dark); text-decoration: underline; }
.notification-bell { position:relative; }
.notification-trigger { align-items:center; background:#f2f4f7; border:0; border-radius:50%; cursor:pointer; display:flex; font-size:20px; height:40px; justify-content:center; margin:0; min-height:0; padding:0; position:relative; width:40px; }
.notification-trigger:hover,.notification-bell.open .notification-trigger { background:var(--primary-soft); }
.notification-trigger b { align-items:center; background:var(--danger); border:2px solid #fff; border-radius:999px; color:#fff; display:flex; font-size:10px; height:18px; justify-content:center; min-width:18px; padding:0 4px; position:absolute; right:-4px; top:-4px; }
.notification-dropdown { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(16,24,40,.16); display:none; gap:4px; max-height:480px; overflow:auto; padding:8px; position:absolute; right:0; top:calc(100% + 8px); width:360px; z-index:50; }.notification-bell.open .notification-dropdown { display:grid; }
.notification-head { align-items:center; display:flex; justify-content:space-between; padding:5px 7px 8px; }.notification-head form { margin:0; }.notification-head button { font-size:12px; min-height:30px; padding:5px 8px; }
.notification-dropdown a { border-top:1px solid var(--line); display:grid; gap:2px; padding:9px 7px; text-decoration:none; }.notification-dropdown a:hover { background:#f4f8f7; }.notification-dropdown span,.notification-dropdown small { color:var(--muted); font-size:12px; }.notification-dropdown .empty { padding:8px; }

.shell {
    min-width: 0;
    padding: 20px;
}

.page-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 300px;
    margin: 0 auto;
    max-width: 1540px;
    padding: 0 18px;
}

.auth-card,
.panel,
.hero {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.auth-card {
    margin: 48px auto;
    max-width: 480px;
    padding: 28px;
}

.hero {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 20px 22px;
}

.eyebrow {
    color: var(--primary);
    font-weight: 800;
    margin: 0 0 4px;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 8px;
}

h2 {
    font-size: 22px;
}

.stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.stats div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
}

.stats a {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: inherit;
    padding: 10px 12px;
    text-decoration: none;
}

.stats.small {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stats.small strong {
    font-size: 20px;
}

.stats strong {
    display: block;
    font-size: 24px;
}

.stats span,
.meta,
.empty {
    color: var(--muted);
}

.panel {
    margin-bottom: 14px;
    padding: 18px;
}

.panel.narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
}

.panel-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.task {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: 100px 1fr auto;
    padding: 14px 0;
}

.task-compact {
    grid-template-columns: 92px 1fr 150px;
    padding: 10px 0;
}

.task-time {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 800;
}

.task h3 {
    font-size: 17px;
    margin-bottom: 4px;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
}

.employee-chip {
    border-radius: 999px;
    color: white;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    padding: 4px 8px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
}

.green {
    background: #dcfae6;
    color: #067647;
}

.red {
    background: #fee4e2;
    color: var(--danger);
}

.orange {
    background: #fef0c7;
    color: var(--orange);
}

.blue {
    background: #d1e9ff;
    color: var(--blue);
}

.gray {
    background: #eef2f6;
    color: #344054;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.actions button,
.actions .button,
.comment-form button,
.quick-comment summary {
    font-size: 14px;
    padding: 8px 10px;
}

.primary {
    background: var(--primary);
    color: white;
}

.primary:hover {
    background: var(--primary-dark);
}

.danger {
    background: var(--danger);
    color: white;
}

.form {
    display: grid;
    gap: 14px;
}

.filters {
    align-items: end;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto auto;
    margin: 10px 0;
    padding: 10px;
}

.form.grid {
    align-items: end;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 22px;
}

label {
    color: #344054;
    display: grid;
    font-weight: 700;
    gap: 6px;
}

input,
select,
textarea {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    padding: 9px 10px;
    width: 100%;
}

input[type="color"] {
    min-height: 42px;
    padding: 4px;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border-top: 1px solid var(--line);
    padding: 12px;
    text-align: left;
}

th {
    color: #344054;
}

td small {
    color: var(--muted);
}

.notice {
    border-radius: 8px;
    font-weight: 700;
    margin-bottom: 16px;
    padding: 12px 14px;
}

.notice .notice-icon {
    margin-right: 8px;
}

.notice.error .notice-icon {
    font-size: 1.1em;
    vertical-align: -0.1em;
}

.notice.success {
    background: #dcfae6;
    color: #067647;
}

.notice.error {
    background: #fee4e2;
    color: var(--danger);
}

.done {
    color: #067647;
    font-weight: 700;
    margin: 8px 0 0;
}

.comment {
    background: #f8fafc;
    border-left: 3px solid var(--line);
    font-size: 14px;
    margin: 8px 0 0;
    padding: 7px 9px;
}
.comment small { color:var(--muted); display:block; margin-top:3px; }.comment-actions { align-items:center; display:flex; gap:8px; margin-top:9px; }.comment-actions details { flex:1 1 auto; }.comment-actions summary { color:var(--primary-dark); cursor:pointer; font-weight:800; }.comment-actions details form { margin-top:8px; }.comment-actions textarea { min-height:80px; width:100%; }.comment-actions button { font-size:13px; min-height:34px; padding:6px 9px; }
.comment-image-link { display:block; margin-top:10px; width:max-content; }.comment-image-link img { border:1px solid var(--line); border-radius:9px; display:block; max-height:260px; max-width:min(100%,420px); object-fit:contain; }

.comment-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.comment-form input {
    min-width: 0;
    padding: 8px 10px;
}

.comment-form button {
    background: #eef2f6;
    color: #344054;
}

.complete-form {
    display: grid;
    gap: 6px;
}

.complete-form select {
    padding: 8px 10px;
}

.quick-comment {
    margin-top: 8px;
}

.quick-comment summary {
    background: #eef2f6;
    border-radius: 8px;
    color: #344054;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    list-style: none;
}

.quick-comment summary::-webkit-details-marker {
    display: none;
}

.steps {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding: 10px 12px 10px 34px;
    width: 100%;
}

.steps li {
    line-height: 1.45;
    padding: 4px 6px;
    white-space: normal;
}

.process-item {
    border-top: 1px solid var(--line);
    display: block;
    padding: 14px 0;
    width: 100%;
}

.process-item h3 {
    font-size: 17px;
    margin-bottom: 4px;
}

.process-item p {
    color: var(--muted);
    margin-bottom: 8px;
}

.process-images { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }.process-images figure { background:#f8fafc; border:1px solid var(--line); border-radius:9px; margin:0; overflow:hidden; width:min(100%,280px); }.process-images img { display:block; height:170px; object-fit:cover; width:100%; }.process-images figcaption { color:var(--muted); font-size:13px; font-weight:800; padding:7px 9px; }.process-images figure form { margin:0; padding:0 8px 8px; }.process-images figure button { font-size:12px; min-height:30px; padding:4px 7px; }.process-image-upload { background:#f7faf9; border:1px solid var(--line); border-radius:9px; margin-top:14px; padding:0 12px; }.process-image-upload summary { cursor:pointer; font-weight:800; padding:11px 0; }.process-image-upload .form { margin:0 0 12px; }
.checklist-item.is-overdue { background:#fff1f0; border-color:#f1b4af; }.checklist-item.is-overdue strong { color:#b42318; }
.employee-dot { border:2px solid #fff; border-radius:50%; display:inline-block; height:11px; margin-left:5px; vertical-align:middle; width:11px; }

.checklist {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.checklist-item {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 9px 10px;
}

.checklist-item > span { flex:1 1 auto; min-width:0; }
.checklist-item > button { flex:0 0 24px; }
.checklist-item button.step-start, .checklist-item button.step-stop { border:0; color:#fff; flex:0 0 auto; height:auto; padding:7px 10px; white-space:nowrap; width:auto; }
.checklist-item button.step-start { background:var(--primary); }
.checklist-item button.step-stop { background:var(--danger); }
.checklist-assignee { color:var(--text); flex:0 0 210px; font-size:13px; font-weight:800; }
.checklist-assignee select { display:block; margin-top:4px; min-width:170px; width:100%; }
@media (max-width: 700px) { .checklist-item { align-items:flex-start; flex-wrap:wrap; }.checklist-item > span { flex:1 1 calc(100% - 40px); }.checklist-assignee { flex:1 1 190px; margin-left:40px; }.checklist-assignee select { min-width:0; }.checklist-item button.step-start, .checklist-item button.step-stop { margin-left:auto; } }

.checklist-item button {
    align-items: center;
    background: var(--surface);
    border: 1px solid #98a2b3;
    border-radius: 6px;
    color: var(--primary);
    display: inline-flex;
    font-size: 14px;
    height: 24px;
    justify-content: center;
    padding: 0;
    width: 24px;
}

.checklist-item button.checked {
    background: #dcfae6;
    border-color: #067647;
}

.checklist-item strong,
.checklist-item small {
    display: block;
}

.checklist-item small {
    color: var(--muted);
    margin-top: 2px;
}

.planning-form .wide {
    grid-column: span 3;
}

.planning-board {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.planning-area {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 220px;
    padding: 14px;
}

.planning-area h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

.planning-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
}

.planning-card-head {
    display: grid;
    gap: 2px;
    margin-bottom: 8px;
}

.planning-card-head span {
    color: var(--muted);
    font-size: 14px;
}

.planning-card p {
    white-space: pre-wrap;
}

.planning-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planning-actions button,
.planning-actions select {
    min-height: 40px;
}

.planning-panel {
    overflow: hidden;
}

.planning-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.planning-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planning-form {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 12px;
}

.planning-form-head { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:12px; grid-column:1 / -1; justify-content:space-between; padding-bottom:12px; }
.planning-form-head div { display:grid; gap:2px; }.planning-form-head strong { color:var(--primary-dark); font-size:18px; }.planning-form-head span { color:var(--muted); font-size:13px; }.planning-form.is-editing { border-color:#9bcfc0; box-shadow:0 0 0 3px rgba(23,107,82,.08); }

.week-planner {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 58px repeat(7, minmax(132px, 1fr));
    overflow-x: auto;
}

.planner-corner,
.planner-day-head {
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    min-height: 48px;
    padding: 10px;
}

.planner-corner {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.planner-day-head {
    text-align: center;
}

.planner-day-head strong {
    font-size: 14px;
}

.planner-times {
    background: #f8fafc;
    border-right: 1px solid var(--line);
    display: grid;
    grid-template-rows: 74px repeat(13, 58px);
}

.planner-times div {
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    padding: 5px 7px;
}

.planner-times .all-day-label {
    align-items: center;
    display: flex;
    font-weight: 800;
}

.planner-day {
    background: white;
    border-right: 1px solid var(--line);
    display: grid;
    grid-template-rows: 74px repeat(13, 58px);
    min-width: 132px;
    position: relative;
}

.planner-day > span {
    border-bottom: 1px solid #edf0f5;
}

.planner-entry {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(16, 24, 40, 0.14);
    color: white;
    display: grid;
    gap: 3px;
    left: 5px;
    overflow: auto;
    padding: 7px;
    position: absolute;
    right: 5px;
    z-index: 2;
}

.all-day-row {
    align-content: start;
    border-bottom: 1px solid #d8dee8;
    display: grid;
    gap: 4px;
    overflow: visible;
    padding: 5px;
}

.planner-entry.all-day-entry {
    box-shadow: none;
    min-height: 44px;
    overflow: visible;
    position: static;
}

.planner-entry strong,
.planner-entry span {
    font-size: 12px;
    line-height: 1.25;
}

.planner-entry span {
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: normal;
}

.planner-entry form {
    align-self: end;
}

.planner-entry button {
    background: rgba(255, 255, 255, 0.22);
    color: white;
    font-size: 11px;
    padding: 4px 6px;
}

.planner-edit {
    display: grid;
    gap: 5px;
}

.planner-edit summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.planner-edit form,
.color-form {
    display: flex;
    gap: 6px;
}

.planner-edit form {
    align-items: stretch;
    flex-direction: column;
}

.planner-edit textarea {
    font-size: 12px;
    min-height: 58px;
    padding: 6px;
}

.planner-edit input[type="color"] {
    min-height: 32px;
}

.color-form {
    align-items: center;
}

.color-form input[type="color"] {
    height: 36px;
    min-height: 36px;
    width: 58px;
}

.color-form button {
    font-size: 13px;
    padding: 7px 9px;
}

.chat-panel {
    display: grid;
    gap: 18px;
}

.chat-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.chat-list {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    justify-items: start;
    max-height: 620px;
    overflow: auto;
    padding: 18px;
}

.chat-message {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05);
    max-width: 720px;
    padding: 12px 14px;
    width: 100%;
}

.chat-message div {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.chat-message small {
    color: var(--muted);
    white-space: nowrap;
}

.chat-message p {
    margin: 6px 0 0;
    white-space: pre-wrap;
}

.chat-form {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
    position: sticky;
    top: 86px;
}

.chat-form textarea {
    min-height: 150px;
}

.side-chat {
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    display: grid;
    gap: 10px;
    margin-top: 20px;
    max-height: calc(100vh - 96px);
    padding: 12px;
    position: sticky;
    top: 84px;
}

.side-chat-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
}

.side-chat-head a {
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.side-chat-list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
}

.side-chat-message {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 9px;
}

.side-chat-message strong {
    display: block;
    font-size: 13px;
}

.side-chat-message p {
    font-size: 14px;
    margin: 3px 0;
    white-space: pre-wrap;
}

.side-chat-message small {
    color: var(--muted);
    font-size: 12px;
}

.side-chat-form {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

.side-chat-form textarea {
    min-height: 82px;
}

.side-chat-form button {
    width: 100%;
}

.log {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 3px;
    padding: 12px 0;
}

.log small {
    color: var(--muted);
}

@media (max-width: 820px) {
    .topbar,
    .hero {
        align-items: stretch;
        flex-direction: column;
    }

    .shell {
        padding: 14px 0;
    }

    .page-layout {
        grid-template-columns: 1fr;
        padding: 0 14px;
    }

    .side-chat {
        margin-top: 0;
        max-height: none;
        position: static;
    }

    .stats,
    .stats.small,
    .filters,
    .planning-board,
    .chat-layout,
    .chat-form,
    .form.grid {
        grid-template-columns: 1fr;
    }

    .chat-form {
        position: static;
    }

    .planning-form .wide {
        grid-column: auto;
    }

    .planning-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .task {
        grid-template-columns: 1fr;
    }

    .actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .comment-form {
        flex-direction: column;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        border-top: 1px solid var(--line);
        padding: 10px 0;
    }

    td {
        border: 0;
        padding: 5px 0;
    }
}

.knowledge-panel { max-width: 960px; }
.knowledge-panel textarea { min-height: 110px; }
.assistant-launcher { align-items: center; background: var(--primary); border: 3px solid #fff; border-radius: 18px; bottom: 26px; box-shadow: 0 10px 28px rgba(15,77,59,.28); color: #fff; display: flex; font-weight: 800; gap: 9px; left: 22px; padding: 8px 13px 8px 8px; position: fixed; text-decoration: none; z-index: 50; }
.assistant-launcher:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); }
.assistant-logo { align-items: center; background: #fff; border-radius: 12px; color: var(--primary-dark); display: inline-flex; font-size: 14px; font-weight: 900; height: 38px; justify-content: center; letter-spacing: -.5px; width: 38px; }
.assistant-logo img { border-radius:9px; height:100%; object-fit:contain; width:100%; }
.assistant-launcher-text { font-size: 14px; line-height: 1.05; }
.assistant-launcher-text small { font-size: 11px; font-weight: 700; }
.answer-box { margin: 24px 0; padding: 22px; border: 1px solid #bdd7df; border-radius: 12px; background: #f5fafb; overflow-wrap: anywhere; }
.approved-answer { line-height: 1.8; }
.answer-box form { display: inline-block; margin: 8px; }
.knowledge-questions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.knowledge-questions button { text-align: start; white-space: normal; }

.knowledge-image-manager { margin: 24px 0; padding: 22px; border: 1px solid #bdd7df; border-radius: 12px; background: #f5fafb; }
.knowledge-image-manager h2 { margin-top: 0; }
.knowledge-image-manager .empty { color: var(--muted); }
.knowledge-images { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.knowledge-images figure { margin: 0; width: 160px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.knowledge-images img { display: block; width: 100%; height: 120px; object-fit: cover; background: #eef3f2; }
.knowledge-images figcaption { padding: 6px 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.knowledge-images figure form { margin: 0; padding: 0 8px 8px; }
.knowledge-images figure .danger { width: 100%; font-size: 12px; padding: 6px 8px; }
.knowledge-images figure .insert-image-tag { width: calc(100% - 16px); margin: 0 8px 6px; font-size: 12px; padding: 6px 8px; }
.answer-box .knowledge-images img { height: 140px; }
.knowledge-image-link { cursor: zoom-in; }
.knowledge-image-inline { display: block; margin: 14px 0; }
.knowledge-image-inline img { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; border: 1px solid var(--line); }
.approved-answer code, .knowledge-image-manager code { background: #eef3f2; border-radius: 4px; padding: 1px 5px; font-size: 12px; }

.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 20, 20, 0.88); z-index: 1000; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; }
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }

.overview-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:18px 0 26px; width:100%; }
.overview-stat { align-items:center; border:1px solid var(--line); border-radius:10px; background:#f7faf9; display:flex; gap:10px; min-height:66px; padding:11px 13px; text-decoration:none; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.overview-stat:hover { background:#eef6f2; border-color:var(--primary); box-shadow:0 5px 14px rgba(19, 102, 75, .12); transform:translateY(-1px); }
.overview-stat strong { color:var(--primary-dark); font-size:26px; line-height:1; }
.overview-stat span { color:var(--muted); font-size:13px; line-height:1.25; }
.filter-note { color:var(--muted); font-size:14px; margin:-2px 0 16px; }
.task-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin:24px 0; }
.inline-form { display:inline-block; margin-left:8px; }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
.edit-section { border-top:1px solid var(--line); margin-top:30px; padding-top:20px; }
.edit-section summary { cursor:pointer; font-weight:700; padding:12px 0; }
button:disabled { opacity:.6; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #329dbe; outline-offset:3px; }
@media(max-width:700px) { .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .task-toolbar form,.task-toolbar a { flex:1 1 45%; } .task-toolbar button { width:100%; } }
@media(max-width:700px) { .assistant-launcher { border-radius:50%; bottom:18px; left:14px; padding:6px; } .assistant-launcher-text { display:none; } .assistant-logo { height:40px; width:40px; } }
@media(max-width:900px) { .nav { order: 3; width: 100%; } .topbar { flex-wrap: wrap; } .nav-dropdown { left: 0; right: auto; } .global-search { margin-left: 0; } }
@media print { .topbar,.warning-bar,.chat-panel,.assistant-launcher,.no-print { display:none!important; } body { background:#fff; } .panel { border:0; box-shadow:none; max-width:none; } }
.planning-print-wrap { overflow-x:auto; }
.planning-print-table { border-collapse:collapse; font-size:.82rem; min-width:100%; table-layout:fixed; }
.planning-print-table th,.planning-print-table td { border:1px solid var(--line); padding:7px; text-align:left; vertical-align:top; }
.planning-print-table thead th { background:#edf6f2; min-width:92px; }
.planning-print-table tbody th { background:#f7faf9; min-width:150px; }
.planning-print-table td div { border-left:3px solid var(--primary); margin:0 0 5px; padding-left:5px; }
.planning-print-table .holiday { background:#fff7df; }
.planning-print-table small { display:block; font-size:.68rem; font-weight:600; }
.print-note { color:var(--muted); font-size:.85rem; margin-top:12px; }
.chat-sender { background:#edf6f2; border-radius:8px; color:var(--primary-dark); font-size:.9rem; margin:0; padding:9px 11px; }
@media print { @page { size:landscape; margin:10mm; } .planning-print-table { font-size:7pt; } .planning-print-table th,.planning-print-table td { padding:3px; } .planning-print-table thead th { min-width:0; } .planning-print-table tbody th { min-width:85px; } .planning-print-table td div { margin-bottom:3px; } }
@media(max-width:700px) { .warning-bar { align-items:flex-start; flex-direction:column; gap:5px; padding:9px 16px; } .warning-bar a { max-width:100%; } }
@media(max-width:700px) {
    body { font-size:16px; padding-bottom:78px; }
    .topbar { align-items:center; flex-direction:row; flex-wrap:nowrap; gap:10px; min-height:0; padding:9px 12px; z-index:60; }
    .brand { font-size:18px; max-width:calc(100% - 54px); overflow:hidden; }
    .brand > span:last-child { overflow:hidden; text-overflow:ellipsis; }
    .brand-mark,.brand-image { height:34px; min-width:34px; width:34px; }
    .mobile-menu-toggle { align-items:center; background:var(--primary)!important; border:0; display:flex; flex:0 0 44px; flex-direction:column; gap:5px; justify-content:center; margin:0 0 0 auto; min-height:44px; padding:10px; width:44px; }
    .mobile-menu-toggle span { background:#fff!important; border-radius:2px; display:block; flex:none; height:2px; margin:0; padding:0; width:20px; }
    .global-search { flex:0 0 auto; margin:0; order:0; width:100%; }
    .global-search input { font-size:16px; width:100%; }
    .global-search button { min-width:50px; }
    .nav { background:var(--surface); box-shadow:14px 0 34px rgba(16,24,40,.22); display:flex; flex-direction:column; flex-wrap:nowrap; gap:8px; height:100dvh; left:0; overflow-y:auto; padding:20px 16px 34px; position:fixed; top:0; transform:translateX(-105%); transition:transform .2s ease; width:min(84vw,340px); z-index:60; }
    body.mobile-menu-open { overflow:hidden; }
    body.mobile-menu-open .nav { transform:translateX(0); }
    .mobile-menu-overlay { background:rgba(15,25,35,.48); inset:0; position:fixed; touch-action:none; z-index:1; }
    body.mobile-menu-open .mobile-menu-overlay { display:block; }
    body.mobile-menu-open .assistant-launcher { pointer-events:none; z-index:0; }
    .nav-primary { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; }
    .nav a,.nav-menu summary { font-size:16px; padding:12px; white-space:nowrap; }
    .nav-primary a { align-items:center; justify-content:flex-start; }
    .nav-menu { width:100%; }
    .nav-menu summary { background:#f3f7f6; width:100%; }
    .nav-dropdown { box-shadow:none; margin-top:4px; max-width:none; min-width:0; position:static; width:100%; }
    .nav-dropdown a { display:block; padding:12px; }
    .mobile-nav-account { border-top:1px solid var(--line); display:grid; gap:8px; margin-top:auto; padding-top:16px; }
    .mobile-nav-account a,.mobile-nav-account button { width:100%; }
    .mobile-nav-account form { margin:0; }
    .account-link,.logout { display:none; }
    .shell { padding:14px 0 0; }
    .page-layout { padding:0 10px; }
    .panel,.hero { border-radius:12px; padding:18px 14px; }
    .hero h1,.panel h1 { font-size:28px; line-height:1.15; }
    .panel h2 { font-size:22px; }
    .stats { gap:9px; }
    .stats > *, .overview-stat { min-height:95px; padding:14px; }
    .stats strong,.overview-stat strong { font-size:28px; }
    .task { gap:10px; padding:16px 0; }
    .task-main h3 { font-size:19px; }
    .meta { gap:6px; }
    .meta span { font-size:13px; }
    input,select,textarea,button,.button { font-size:16px; min-height:44px; }
    textarea { min-height:112px; }
    .filters,.form.grid { gap:12px; }
    .filters button,.filters .button,.form.grid > button { width:100%; }
    .actions { gap:8px; width:100%; }
    .actions .button,.actions form { flex:1 1 100%; }
    .actions button { width:100%; }
    .search-form { flex-direction:column; }
    .search-form button { width:100%; }
    .search-result { align-items:flex-start; flex-direction:column; gap:3px; }
    .side-chat { border-radius:12px; }
    .assistant-launcher { bottom:14px; left:14px; }
}
.chat-mention { color: var(--blue); font-weight: 700; text-decoration: underline; }
.chat-person-mention { background:#e6f4ef; border-radius:5px; color:var(--primary-dark); font-weight:800; padding:1px 4px; }
.chat-suggestion-menu { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 18px rgba(16,24,40,.12); margin:5px 0 8px; max-height:220px; overflow:auto; padding:5px; width:100%; }
.chat-suggestion-menu button { align-items:flex-start; background:transparent; color:var(--text); display:flex; flex-direction:column; gap:1px; min-height:0; padding:8px 10px; text-align:left; width:100%; }
.chat-suggestion-menu button:hover,.chat-suggestion-menu button:focus { background:#edf7f3; outline:none; }
.chat-suggestion-menu strong { color:var(--primary-dark); font-size:14px; }.chat-suggestion-menu small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
.chat-message form { margin-top: 8px; }
.permission-row { display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--line); }
.generated-password { background:#fff; border:1px dashed var(--primary); border-radius:6px; color:var(--text); font-size:18px; font-weight:800; letter-spacing:.06em; padding:5px 8px; }
.design-color-picker { border:1px solid var(--line); border-radius:12px; margin:4px 0 2px; padding:14px; }
.design-color-picker legend { color:var(--primary-dark); font-weight:800; padding:0 6px; }.design-color-picker p { color:var(--muted); font-size:14px; margin:0 0 12px; }
.design-color-swatches { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }.design-color-swatches label { align-items:center; background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer; display:flex; gap:9px; margin:0; min-height:44px; padding:8px 10px; position:relative; }.design-color-swatches input { height:1px; margin:0; opacity:0; position:absolute; width:1px; }.design-color-swatches span { border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--line); display:block; flex:0 0 auto; height:18px; width:18px; }.design-color-swatches label:has(input:checked) { background:var(--primary-soft); border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent); }.design-color-swatches input:checked + span { box-shadow:0 0 0 3px var(--primary); }.design-color-swatches small { color:var(--text); font-size:14px; font-weight:800; }.design-custom-color { align-items:center; background:#f8fafc; border:1px solid var(--line); border-radius:9px; display:flex; font-size:14px; gap:10px; margin-top:14px; padding:8px 10px; width:max-content; }.design-custom-color input { height:36px; padding:2px; width:62px; }@media(max-width:620px){.design-color-swatches{grid-template-columns:repeat(2,minmax(120px,1fr));}}
.planning-readonly { align-items:center; background:#eef7f4; border:1px solid #c2ded4; border-radius:10px; color:var(--primary-dark); display:flex; gap:10px; margin:18px 0; padding:12px 16px; }
.holiday-panel { background:#fff8e8; border:1px solid #f0d38a; border-radius:10px; margin:18px 0; padding:0 14px; }
.weekday-checks { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }.weekday-checks label { align-items:center; background:#f4f8f7; border:1px solid var(--line); border-radius:8px; display:flex; gap:7px; margin:0; padding:8px 10px; }
.holiday-panel summary { color:#805400; cursor:pointer; font-weight:800; padding:13px 0; }
.holiday-form { align-items:end; display:grid; gap:10px; grid-template-columns:150px 160px 160px minmax(220px,1fr) auto; padding:4px 0 14px; }
.holiday-form label { margin:0; }
.holiday-list { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 14px; }
.holiday-chip { align-items:center; background:#fff; border:1px solid #eccb79; border-radius:999px; display:inline-flex; gap:6px; padding:4px 6px 4px 10px; }
.holiday-chip form { margin:0; }.holiday-chip button { background:transparent; color:#9b6800; min-height:26px; padding:2px 7px; }
.planner-day-head.is-holiday { background:#fff0c7; color:#7a4b00; }.planner-day-head small { display:block; font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-week-planner { display:grid; grid-template-columns:190px repeat(7,minmax(145px,1fr)); margin-top:20px; min-width:1200px; overflow:hidden; border:1px solid var(--line); border-radius:12px; }
.employee-week-head,.employee-name-head { background:#f3f8f6; border-bottom:1px solid var(--line); font-weight:800; min-height:58px; padding:12px; }.employee-week-head.is-holiday,.employee-week-cell.is-holiday { background:#fff8e7; }.employee-week-head small { display:block; color:#7a4b00; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-week-name { align-items:center; background:#fbfcfc; border-bottom:1px solid var(--line); display:flex; padding:12px; }.employee-week-cell { border-bottom:1px solid var(--line); border-left:1px solid var(--line); min-height:110px; padding:7px; }.employee-plan-entry { border-left:5px solid var(--entry-color); background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(16,24,40,.10); display:block; margin-bottom:6px; padding:6px 7px; }.employee-plan-entry strong,.employee-plan-entry span { display:block; }.employee-plan-entry strong { font-size:12px; }.employee-plan-entry span { font-size:13px; overflow-wrap:anywhere; }.employee-plan-entry a { color:var(--primary-dark); display:inline-block; font-size:12px; font-weight:800; margin-top:5px; }.plan-empty { color:#a2acb7; display:block; padding:28px 0; text-align:center; }
.employee-entry-actions { align-items:center; display:flex; gap:6px; margin-top:5px; }.employee-entry-actions form { margin:0; }.employee-entry-actions button { font-size:11px; min-height:28px; padding:3px 6px; }
.planning-legend { align-items:center; background:#f7faf9; border:1px solid var(--line); border-radius:10px; display:flex; justify-content:space-between; margin:16px 0 22px; padding:10px 14px; }
.legend-dot { background:var(--primary); border-radius:50%; display:inline-block; height:10px; margin-right:6px; width:10px; }
.year-planner { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.year-month { border:1px solid var(--line); border-radius:12px; min-height:170px; overflow:hidden; }
.year-month h2 { background:#f3f8f6; color:var(--primary-dark); font-size:18px; margin:0; padding:12px 13px 0; }
.year-month > small { background:#f3f8f6; color:var(--muted); display:block; padding:0 13px 12px; }
.year-month-list { display:grid; gap:7px; padding:10px; }
.year-entry { border-left:5px solid var(--entry-color); border-radius:5px; background:#fafcfc; padding:7px 8px; }
.year-holiday { background:#fff0c7; border-radius:5px; color:#7a4b00; font-size:12px; font-weight:700; padding:6px 8px; }
.year-entry strong,.year-entry span { display:block; }
.year-entry span { color:var(--muted); font-size:12px; }
.year-entry p { font-size:13px; margin:4px 0 0; overflow-wrap:anywhere; }
@media(max-width:900px) { .year-planner { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .year-planner { grid-template-columns:1fr; } .planning-legend { align-items:flex-start; flex-direction:column; } .annual-planning .planning-nav { display:grid; grid-template-columns:1fr 1fr; width:100%; } .annual-planning .planning-nav .primary { grid-column:span 2; } }
@media(max-width:700px) { .holiday-form { grid-template-columns:1fr; } .holiday-form button { width:100%; } }
@media(max-width:700px) { .employee-week-planner { grid-template-columns:130px repeat(7,145px); } .planning-panel { overflow-x:auto; } .planning-nav { flex-wrap:wrap; } }
@media(max-width:700px) { .planning-form-head { align-items:flex-start; flex-direction:column; }.planning-form-head .button { width:100%; text-align:center; } }
.permission-row input { margin-left:auto; order:2; }
.license-panel .notice { margin:0 0 18px; }.license-details { display:grid; gap:8px 18px; grid-template-columns:160px 1fr; margin:18px 0 28px; }.license-details dt { color:var(--muted); font-weight:700; }.license-details dd { margin:0; overflow-wrap:anywhere; }.license-details code { font-size:13px; }
.license-summary { align-items:center; background:#eef7f4; border:1px solid #c2ded4; border-radius:10px; display:flex; gap:16px; justify-content:space-between; margin:0 0 22px; padding:13px 15px; }.license-summary div { display:grid; gap:2px; }.license-summary span { color:var(--muted); font-size:14px; }.license-summary.is-expired { background:#fff0ef; border-color:#f3c4c0; }@media(max-width:700px) { .license-summary { align-items:stretch; flex-direction:column; }.license-summary .button { text-align:center; } .license-details { grid-template-columns:1fr; gap:2px; } }
.developer-license { border-top:1px solid var(--line); margin-top:30px; padding-top:14px; }.developer-license summary { color:#667085; cursor:pointer; font-size:13px; font-weight:700; list-style:none; }.developer-license summary::-webkit-details-marker { display:none; }.developer-license summary::after { content:'›'; display:inline-block; font-size:18px; margin-inline-start:7px; transition:transform .15s ease; }.developer-license[open] summary::after { transform:rotate(90deg); }.developer-license .license-summary { margin:13px 0 0; }.developer-license.is-expired summary { color:#b42318; }
.permission-form { align-items:stretch; display:flex; flex-direction:column; gap:0; }.permission-form .permission-row { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; }.permission-form .permission-row input { margin:0; }.permission-form > button { align-self:flex-start; margin-top:16px; }
.problem-card { display: block; padding: 22px 0; }
.problem-card .task-main { max-width: 100%; }
.problem-card .meta { margin-bottom: 12px; }
.problem-card h3 { font-size: 20px; margin: 0 0 10px; }
.problem-description { max-width: 900px; margin: 0 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.problem-resolution, .problem-resolution-form { max-width: 720px; padding: 16px; border-radius: 10px; background: #f4f8f7; border: 1px solid #c8ddd5; }
.problem-resolution p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.problem-resolution-form textarea { min-height: 130px; }
.calendar-day { margin-top:24px; }.calendar-day h2 { border-bottom:1px solid var(--line); margin:0; padding:0 0 10px; }.calendar-day-items { display:grid; gap:10px; padding-top:10px; }
.calendar-day-items > .task { background:#fbfcfd; border:1px solid #dce3ea; border-radius:10px; margin:0; padding:15px; }.calendar-day-items > .task:nth-child(even) { background:#f1f5f8; border-color:#d2dbe4; }.calendar-day-items > .task:nth-child(odd) { background:#fff; }
.calendar-event { background:#edf4ff !important; border-color:#b8cff5 !important; border-left:5px solid var(--blue) !important; padding-left:12px !important; }.calendar-day-items > .calendar-event:nth-child(even) { background:#e5efff !important; }.calendar-event-time,.calendar-event-label { color:#174ea6; }.calendar-event-label { font-size:12px; font-weight:800; text-transform:uppercase; }.calendar-event h3 { margin:2px 0 5px; }.calendar-event p { margin:0 0 8px; white-space:pre-wrap; }.calendar-event-open { text-align:center; white-space:nowrap; }@media(max-width:700px){.calendar-event .actions{width:100%;}.calendar-event-open{width:100%;}}
.process-documents { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.process-document-item { align-items:center; background:#f6f8fa; border:1px solid var(--line); border-radius:8px; display:flex; flex-wrap:wrap; gap:8px; padding:8px 10px; }
.process-document-item form { margin:0; }.process-document-item button { font-size:12px; min-height:30px; padding:4px 8px; }
.process-print-documents { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }.process-print-button { font-size:13px; min-height:32px; padding:5px 9px; }
.rich-text-editor { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }.rich-text-toolbar { align-items:center; background:#f4f7f6; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px; padding:7px; }.rich-text-toolbar button { min-height:32px; padding:3px 9px; }.rich-text-toolbar label { align-items:center; display:flex; font-size:13px; gap:4px; margin:0; }.rich-text-toolbar input,.rich-text-toolbar select { min-height:32px; padding:2px 5px; width:auto; }.rich-text-toolbar input[type="color"] { height:32px; padding:1px; width:38px; }.rich-text-area { min-height:150px; outline:0; padding:12px; }.rich-text-area:empty::before { color:var(--muted); content:'Beschreibung mit Formatierung schreiben …'; pointer-events:none; }.process-rich-description { line-height:1.55; margin:0 0 12px; overflow-wrap:anywhere; }.process-rich-description p { margin:0 0 9px; }.process-rich-description ul,.process-rich-description ol { margin:0 0 10px; padding-inline-start:24px; }
.rich-field { display:grid; gap:6px; }.rich-field > span { font-weight:700; }
.process-edit-bottom { margin-top:10px; }.process-step-editor { border:1px solid var(--line); border-radius:9px; display:grid; gap:9px; padding:12px; }.process-step-editor legend { font-weight:800; padding:0 5px; }.process-step-edit-row { display:grid; gap:9px; grid-template-columns:150px minmax(0,1fr); }.process-step-edit-row label { margin:0; }@media(max-width:650px){.process-step-edit-row{grid-template-columns:1fr;}}
.rich-text-area-small { min-height:64px; }.process-step-rich .rich-text-toolbar { padding:5px; }.process-step-rich .rich-text-toolbar button { min-height:29px; }.process-step-rich .rich-text-toolbar label { font-size:12px; }
/* Keep assignment actions separate from the completion checkbox. */
.checklist-item { flex-wrap:wrap; }
.checklist-item > span { flex:1 1 280px; }
.checklist-assignee { flex:0 1 190px; min-width:140px; }
.checklist-item button.step-assign,.checklist-item button.step-start,.checklist-item button.step-stop { flex:0 0 auto; width:auto; height:auto; min-height:38px; padding:8px 12px; white-space:normal; max-width:100%; border:0; color:#fff; background:var(--primary); }
.checklist-item button.step-stop { background:var(--danger); }
.checklist-item.active-event-step { outline:3px solid var(--primary); scroll-margin-top:160px; }
/* Wide employee tables must scroll inside the content column, never under chat. */
.page-layout > .shell { min-width:0; }
.employee-table-scroll { width:100%; max-width:100%; overflow-x:auto; }
.employee-table-scroll table { width:100%; min-width:1050px; }
.employee-table-scroll th,.employee-table-scroll td { overflow-wrap:anywhere; }
/* Keep period navigation usable above the scrollable calendar at every size. */
.planning-panel { min-width:0; overflow:visible; }
.planning-period-nav { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0; }
.planning-period-buttons,.planning-view-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.planning-period-nav .button { min-height:44px; padding:10px 13px; }
.planning-calendar-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.planning-month-grid { display:grid; grid-template-columns:repeat(7,minmax(145px,1fr)); min-width:1015px; gap:1px; background:var(--line); border:1px solid var(--line); }
.planning-month-heading { background:#eef5f2; padding:12px; }
.planning-month-day { background:#fff; min-height:130px; padding:8px; }
.planning-month-day > strong { display:block; margin-bottom:8px; }
.planning-month-day.is-empty { background:#f6f8fa; }
@media(max-width:700px){ .planning-period-nav { display:grid; gap:10px; }.planning-period-buttons { display:grid; grid-template-columns:repeat(3,1fr); }.planning-view-buttons { display:grid; grid-template-columns:repeat(4,1fr); }.planning-period-nav .button { text-align:center; padding:10px 8px; }.planning-panel { overflow:visible; } }
.private-chat-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; }
.private-chat-contacts { display:flex; flex-direction:column; gap:6px; max-height:65vh; overflow-y:auto; }
.private-chat-contacts .button { display:grid; gap:3px; }
.private-chat-contacts small { font-size:12px; font-weight:normal; }
.private-chat-layout .chat-list { max-height:60vh; overflow-y:auto; }
@media(max-width:700px){ .private-chat-layout{grid-template-columns:1fr}.private-chat-contacts{flex-direction:row;overflow-x:auto;max-width:100%}.private-chat-contacts .button{flex:0 0 auto;min-height:44px} }
.private-chat-layout { grid-template-columns:290px minmax(0,1fr); }
.private-contact { display:grid; gap:7px; border:1px solid var(--line); border-radius:10px; background:#fff; padding:12px; text-decoration:none; color:var(--text); min-width:0; }
.private-contact:hover,.private-contact.is-selected { background:var(--primary-soft); border-color:var(--primary); }
.private-contact-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.private-contact-heading strong { font-size:15px; }
.private-contact small { display:flex; justify-content:space-between; gap:6px; font-size:11px; color:var(--muted); }
.private-unread { border-radius:20px; background:#d92d20; color:white; min-width:23px; padding:3px 6px; text-align:center; font-size:12px; }
.private-unread[hidden] { display:none; }
.private-contact-preview { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
@media(max-width:700px){.private-chat-layout{grid-template-columns:1fr}.private-chat-contacts .private-contact{flex:0 0 240px}}

.site-copyright { color:var(--muted); font-size:13px; text-align:center; padding:28px 12px 18px; margin-top:16px; }