:root {
  --ink: #111747;
  --muted: #69738f;
  --line: #e4e8f1;
  --surface: #ffffff;
  --canvas: #f7f9fc;
  --violet: #6d2bf4;
  --violet-2: #8b21f8;
  --violet-soft: #f1eaff;
  --blue: #1769e8;
  --blue-soft: #e8f2ff;
  --green: #0aaf55;
  --green-soft: #e8f8ee;
  --orange: #efa510;
  --orange-soft: #fff3d7;
  --red: #f12553;
  --red-soft: #ffe8ee;
  --shadow: 0 8px 28px rgba(34, 40, 78, .06);
  --auth-bg: radial-gradient(circle at 75% 15%,#efe6ff 0,transparent 34%),linear-gradient(135deg,#f8f9fd,#eef1f8);
  --sidebar-bg: rgba(255,255,255,.96);
  --watch-bg: #f7f8fb;
  color-scheme: light;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
}
html[data-theme="dark"] {
  --ink: #e8ecf8;
  --muted: #9aa3bd;
  --line: #2c3348;
  --surface: #171c2c;
  --canvas: #0f1320;
  --violet: #9b6cff;
  --violet-2: #b48bff;
  --violet-soft: #2a2140;
  --blue: #5b9bff;
  --blue-soft: #1a2740;
  --green: #3dcf7a;
  --green-soft: #163325;
  --orange: #f0b84a;
  --orange-soft: #3a2c12;
  --red: #ff6b8a;
  --red-soft: #3a1822;
  --shadow: 0 8px 28px rgba(0, 0, 0, .35);
  --auth-bg: radial-gradient(circle at 75% 15%,#2a2140 0,transparent 34%),linear-gradient(135deg,#121726,#0f1320);
  --sidebar-bg: rgba(23,28,44,.98);
  --watch-bg: #1c2233;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --ink: #e8ecf8;
    --muted: #9aa3bd;
    --line: #2c3348;
    --surface: #171c2c;
    --canvas: #0f1320;
    --violet: #9b6cff;
    --violet-2: #b48bff;
    --violet-soft: #2a2140;
    --blue: #5b9bff;
    --blue-soft: #1a2740;
    --green: #3dcf7a;
    --green-soft: #163325;
    --orange: #f0b84a;
    --orange-soft: #3a2c12;
    --red: #ff6b8a;
    --red-soft: #3a1822;
    --shadow: 0 8px 28px rgba(0, 0, 0, .35);
    --auth-bg: radial-gradient(circle at 75% 15%,#2a2140 0,transparent 34%),linear-gradient(135deg,#121726,#0f1320);
    --sidebar-bg: rgba(23,28,44,.98);
    --watch-bg: #1c2233;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); min-width: 320px; color: var(--ink); }
.role-requester [data-admin-only] { display:none !important; }
.auth-screen { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:var(--auth-bg); }
.auth-screen[hidden] { display:none; }
body.auth-locked .app-shell,
.app-shell[hidden] { display:none !important; }
body.auth-locked { overflow:hidden; }
.login-card { width:min(430px,100%); padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 28px 90px rgba(26,31,74,.18); }
.login-brand { width:190px; height:70px; overflow:hidden; margin:-8px 0 12px; }
.login-brand img { width:190px; height:106px; object-fit:contain; object-position:49% 50%; transform:translateY(-18px); }
.login-card h1 { margin:5px 0 8px; font-size:28px; letter-spacing:-.7px; }
.login-card > p { margin:0 0 20px; color:var(--muted); line-height:1.55; font-size:13px; }
.login-card form { display:grid; gap:14px; }
.entra-button { text-decoration:none; border-color:#cfd5e2; color:#172252; margin-top:16px; }
.entra-button[hidden],.login-separator[hidden] { display:none; }
.entra-button:hover { background:#f8f9fc; }
.microsoft-mark { width:18px; height:18px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.microsoft-mark i:nth-child(1) { background:#f25022; }.microsoft-mark i:nth-child(2) { background:#7fba00; }.microsoft-mark i:nth-child(3) { background:#00a4ef; }.microsoft-mark i:nth-child(4) { background:#ffb900; }
.login-separator { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.login-separator::before,.login-separator::after { content:""; height:1px; flex:1; background:var(--line); }
.login-card > small { display:block; margin-top:18px; color:var(--muted); text-align:center; line-height:1.45; }
.login-error { min-height:18px; color:var(--red); font-size:12px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(109,43,244,.28); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: flex; }
.mobile-nav { display: none; }
.sidebar { width: 272px; position: fixed; inset: 0 auto 0 0; background: var(--sidebar-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 20; }
.brand { height: 82px; border-bottom: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; }
.brand img { width: 228px; height: 128px; object-fit: contain; object-position: 49% 50%; margin-left: 20px; }
.workspace-switcher { margin: 0 14px; height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 14px; font-size: 15px; }
.chevron { margin-left: auto; font-size: 22px; color: #24315e; }
nav { padding: 12px; display: grid; gap: 4px; }
.nav-item { width: 100%; border: 0; background: transparent; min-height: 46px; padding: 0 14px; border-radius: 9px; display: flex; align-items: center; gap: 14px; color: #172252; text-align: left; }
.nav-item:hover { background: #f7f4ff; }
.nav-item.active { background: linear-gradient(90deg,#eee7ff,#f6f1ff); color: var(--violet); font-weight: 600; }
.nav-icon { width: 22px; height: 22px; display: inline-flex; flex: 0 0 22px; }
.nav-badge, .count { margin-left: auto; background: #edf0f6; color: #2b3558; border-radius: 999px; min-width: 29px; height: 25px; padding: 0 8px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; }
.sidebar-bottom { margin-top: auto; }
.sidebar-bottom > .nav-item { margin: 0 12px 14px; width: calc(100% - 24px); }
.profile { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 20px 28px; }
.profile-button { width:100%; border-right:0; border-bottom:0; border-left:0; background:white; text-align:left; }
.profile-button:hover { background:#faf8ff; }
.profile small, .avatar + div small { display: block; color: var(--muted); margin-top: 3px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #edf0f7; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.avatar-dark { width: 43px; height: 43px; color: white; background: #253564; }
.main { margin-left: 272px; width: calc(100% - 272px); }
.topbar { height: 76px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px 0 28px; gap: 18px; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.global-search { height: 47px; max-width: 724px; min-width:0; flex: 1; border: 1px solid #dce1eb; border-radius: 9px; display: flex; align-items: center; gap: 12px; padding: 0 17px; background: #fff; color: #405076; }
.global-search > [data-icon] { width: 21px; height: 21px; display: inline-flex; flex: 0 0 21px; }
.global-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 80px; }
kbd { background: #eef1f7; border-radius: 6px; padding: 4px 7px; font: 500 12px inherit; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); background: white; border-radius: 10px; display: grid; place-items: center; font-size: 22px; position: relative; }
.menu-button { display: none; }
.notification-button > i { position: absolute; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #f21855; top: 5px; right: 6px; }
.timer-chip { height: 48px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; padding-left: 14px; gap: 7px; font-size: 13px; }
.timer-chip > i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px var(--green-soft); margin-right: 6px; }
.timer-chip strong { color: var(--green); }
.timer-chip button { align-self: stretch; min-width: 48px; border: 0; border-left: 1px solid var(--line); background: #fff; }
.content { padding: 24px 28px 40px; max-width: 1600px; margin: 0 auto; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.page-header h1 { margin: 0 0 2px; font-size: 30px; letter-spacing: -.9px; }
.page-header p { margin: 0; color: var(--muted); }
.header-actions { display: flex; gap: 10px; }
.button { min-height: 43px; border-radius: 9px; padding: 0 17px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; background: white; }
.button.primary { color: white; border: 0; background: linear-gradient(110deg,var(--violet),var(--violet-2)); box-shadow: 0 7px 16px rgba(111,43,244,.2); }
.button.danger { color:#b42318; border-color:#f3b7b2; background:#fff5f4; box-shadow:none; }
.button.primary.danger,.button.danger:not(.secondary) { color:#fff; border-color:#c92a2a; background:#c92a2a; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; padding:16px; border:1px solid #f2c2bd; border-radius:12px; background:#fff7f6; }
.danger-zone div { display:grid; gap:3px; }
.danger-zone b { color:#9f1c14; font-size:13px; }
.danger-zone small { color:#7b5551; font-size:11px; }
.confirmation-card { display:flex; align-items:flex-start; gap:14px; padding:16px; border:1px solid #f2c2bd; border-radius:12px; background:#fff7f6; }
.confirmation-card > span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%; color:#b42318; background:#ffe4e1; }
.confirmation-card svg { width:19px; height:19px; }
.confirmation-card b { color:#841b14; }
.confirmation-card p { margin:5px 0 0; color:#7b5551; font-size:12px; line-height:1.5; }
.confirmation-check { display:flex; align-items:center; gap:9px; margin-top:15px; color:#3e2c2a; font-size:12px; font-weight:600; }
.confirmation-check input { accent-color:#c92a2a; }
.button.secondary:hover { border-color: #cab5ff; background: #fbf9ff; }
.button.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.button:disabled { opacity:.62; cursor:not-allowed; box-shadow:none; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.metric { padding: 18px 17px; min-height: 124px; display: flex; align-items: flex-start; gap: 14px; }
.metric-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; flex: 0 0 auto; }
.metric-icon.red { background: var(--red-soft); color: var(--red); }
.metric-icon.blue { background: var(--blue-soft); color: #2843ef; }
.metric-copy { min-width: 0; }
.metric-copy span { color: #47557c; font-size: 14px; }
.metric-copy strong { display: block; font-size: 29px; line-height: 1.15; margin: 7px 0; }
.trend { font-size: 12px; color: var(--muted); white-space: nowrap; }
.trend b { color: var(--green); margin-right: 6px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(280px,1fr); gap: 18px; }
.dashboard-grid > *, .right-column { min-width:0; }
.panel-header { min-height: 55px; padding: 0 17px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.panel-header h2 { font-size: 18px; margin: 0; }
.panel-header .link { margin-left: auto; }
.link { border: 0; background: transparent; color: var(--violet); text-decoration: underline; font-size: 13px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 17px; }
.tab { position: relative; border: 0; background: transparent; padding: 15px 14px; color: #536081; font-weight: 600; font-size: 13px; }
.tab.active { color: var(--violet); }
.tab.active::after { content:""; position: absolute; height: 3px; background: var(--violet); inset: auto 0 -1px; }
.tab .count { display: inline-grid; margin-left: 6px; height: 22px; min-width: 22px; padding: 0 5px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { background: #fafbfe; color: #536081; text-align: left; font-size: 12px; font-weight: 500; padding: 11px 17px; }
td { border-top: 1px solid var(--line); padding: 12px 17px; font-size: 13px; vertical-align: middle; }
tbody tr[data-ticket] { cursor: pointer; transition: background .15s ease; }
tbody tr[data-ticket]:hover { background: #faf8ff; }
td strong { display: block; }
td small { color: var(--muted); }
.person { display: flex; gap: 10px; align-items: center; min-width: 150px; }
.status { display: inline-flex; align-items: center; gap: 7px; border-radius: 6px; padding: 6px 9px; font-size: 12px; white-space: nowrap; background: var(--violet-soft); color: var(--violet); }
.status::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.blue { color: var(--blue); background: var(--blue-soft); }
.status.orange { color: #c98100; background: var(--orange-soft); }
.status.green { color: var(--green); background: var(--green-soft); }
.status.gray { color: #69738f; background: #eef0f5; }
.priority { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.priority i { width: 15px; height: 3px; border-radius: 4px; background: var(--orange); }
.priority.high i, .priority.critical i { height: 15px; width: 3px; background: var(--red); }
.priority.low i { height: 15px; width: 3px; background: var(--green); }
.more { border: 0; background: none; font-weight: 700; letter-spacing: 2px; color: #385077; }
.right-column { display: grid; gap: 14px; align-content: start; }
.assistant-card { padding: 15px; }
.assistant-title { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.assistant-title .metric-icon { width: 44px; height: 44px; }
.assistant-title h3 { margin: 0; font-size: 17px; }
.assistant-title p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.suggestion { display: flex; gap: 12px; align-items: center; padding: 14px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; }
.suggestion .metric-icon { width: 38px; height: 38px; }
.suggestion p { margin: 0; font-size: 12px; color: var(--muted); }
.suggestion b { font-size: 13px; }
.wide { width: 100%; margin-top: 10px; }
.knowledge-list { padding: 0 15px 8px; }
.knowledge-item { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid var(--line); }
.knowledge-item { width:100%; border-right:0; border-bottom:0; border-left:0; background:transparent; text-align:left; color:inherit; }
.knowledge-item:first-child { border-top: 0; }
.knowledge-item > span:first-child { color: var(--violet); }
.knowledge-item b { font-size: 13px; display: block; }
.knowledge-item small { color: var(--muted); }
.knowledge-item .arrow { margin-left: auto; }
.lower-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }
.chart-card { padding: 15px 18px; min-height: 175px; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-title-row h3 { margin: 0; font-size: 17px; }
.legend { font-size: 11px; color: #566284; display: flex; gap: 16px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); margin-right: 5px; }
.legend span:last-child i { background: #baa3fa; }
.bar-chart { height: 110px; display: flex; gap: 22px; align-items: end; border-bottom: 1px solid var(--line); padding: 0 16px; }
.bar-group { flex: 1; height: 100%; display: flex; align-items: end; justify-content: center; gap: 5px; position: relative; }
.bar { width: 20px; background: linear-gradient(var(--violet),#7c3cf3); border-radius: 3px 3px 0 0; }
.bar.light { background: #c7b8fa; }
.bar-label { position: absolute; bottom: -24px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.horizontal-bars { display: grid; gap: 16px; padding-top: 8px; }
.hbar { display: grid; grid-template-columns: 74px 1fr 48px; gap: 10px; align-items: center; font-size: 12px; }
.hbar-track { height: 11px; background: #e9ecf2; border-radius: 4px; overflow: hidden; }
.hbar-track i { display: block; height: 100%; background: linear-gradient(90deg,var(--violet),#8625f6); border-radius: inherit; }
.toolbar { display: flex; gap: 10px; padding: 14px 17px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.toolbar-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; height: 39px; }
.toolbar-search input { border: 0; outline: 0; width: 100%; }
.select-compact { height: 39px; border: 1px solid var(--line); background: white; border-radius: 8px; padding: 0 12px; }
.section-card { padding: 20px; }
.section-card h2 { margin-top: 0; font-size: 19px; }
.item-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.item-card { border: 1px solid var(--line); border-radius: 10px; padding: 17px; background: white; transition: .2s ease; }
.item-card.article-card { display:block; width:100%; text-align:left; color:inherit; }
.item-card.equipment-card { display:block; width:100%; text-align:left; color:inherit; font:inherit; }
.item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.item-card h3 { font-size: 15px; margin: 12px 0 6px; }
.item-card p { color: var(--muted); font-size: 13px; margin: 0 0 14px; line-height: 1.45; }
.item-card p small { display:block; margin-top:3px; color:#78829c; }
.item-card-footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.equip-icon { width: 42px; height: 42px; border-radius: 9px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; }
.progress-ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--violet) calc(var(--p)*1%), #eceef4 0); position: relative; }
.progress-ring::before { content:""; position:absolute; inset:8px; background:white; border-radius:50%; }
.progress-ring span { z-index:1; font-weight:700; }
.report-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.report-card { padding: 20px; display:flex; gap:16px; align-items:center; }
.report-card strong { display:block; font-size:25px; }
.report-card small { color:var(--muted); }
.settings-grid { display:grid; grid-template-columns: 220px 1fr; gap:18px; }
.settings-menu { padding: 8px; align-self:start; }
.settings-menu button { width:100%; border:0; background:transparent; text-align:left; padding:11px 12px; border-radius:7px; }
.settings-menu button.active { color:var(--violet); background:var(--violet-soft); font-weight:600; }
.settings-stack { display:grid; gap:18px; }
.settings-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.section-description { margin:-8px 0 18px; color:var(--muted); font-size:13px; }
.reference-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.reference-section { min-width:0; border:1px solid var(--line); border-radius:12px; padding:14px; background:#fbfcff; }
.reference-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.reference-heading h3 { margin:0 0 4px; font-size:15px; }
.reference-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
.reference-list { display:grid; gap:7px; }
.reference-row { width:100%; border:1px solid var(--line); border-radius:9px; background:white; padding:10px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; color:var(--ink); }
.reference-row:hover { border-color:#bfa7fa; box-shadow:0 4px 14px rgba(88,43,185,.08); }
.reference-row span:first-child { min-width:0; display:grid; gap:2px; }
.reference-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reference-row small,.reference-row>span:last-child { color:var(--muted); font-size:11px; }
.reference-row.is-archived { opacity:.62; background:#f3f4f7; }
.field { display:grid; gap:7px; font-size:13px; font-weight:600; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:11px 12px; outline:none; font-weight:400; color:var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field.full { grid-column:1/-1; }
.custom-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.custom-fields-grid:empty { display:none; }
.template-select { width:100%; margin:12px 0 0; border:1px solid var(--line); border-radius:8px; background:#faf9ff; padding:9px 11px; color:var(--ink); }
.modal-backdrop { position:fixed; inset:0; background:rgba(17,23,71,.42); display:grid; place-items:center; z-index:50; padding:20px; backdrop-filter:blur(3px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(720px,100%); max-height:calc(100vh - 40px); overflow-x:hidden; overflow-y:auto; background:#fff; border-radius:15px; box-shadow:0 24px 80px rgba(17,23,71,.25); }
.modal > header { display:flex; align-items:center; justify-content:space-between; padding:22px 24px 15px; }
.modal h2 { margin:3px 0 0; }
.eyebrow { color:var(--violet); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:700; }
.modal form { padding:0 24px 24px; }
.modal form footer { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.modal-intro { margin:0 0 16px; padding:12px 14px; border-radius:8px; background:#f7f4ff; color:#536081; font-size:13px; line-height:1.45; }
.modal-check { grid-template-columns:auto 1fr; align-items:center; margin-top:14px; font-weight:500; }
.modal-check input { width:17px; height:17px; margin:0; accent-color:var(--violet); }
.option-checks { display:flex; flex-wrap:wrap; gap:8px 14px; }
.option-check { display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); }
.option-check input { width:16px; height:16px; margin:0; accent-color:var(--violet); }
.equipment-custom-fields { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.measured-time { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; margin-bottom:16px; border-radius:9px; background:linear-gradient(110deg,#f2ecff,#f8f5ff); color:#526080; }
.measured-time strong { color:var(--violet); font-size:24px; }
.dropzone { margin-top:16px; min-height:86px; border:1px dashed #c8cfe0; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:12px; color:#607090; cursor:pointer; transition:border-color .18s,background .18s,transform .18s; }
.dropzone:hover,.dropzone.is-dragging { border-color:var(--violet); background:#faf7ff; }
.dropzone.is-dragging { transform:translateY(-1px); }
.dropzone:focus-visible { outline:3px solid rgba(109,43,244,.24); outline-offset:2px; }
.dropzone-icon { width:24px; height:24px; flex-basis:24px; color:var(--violet); }
.dropzone b { font-size:13px; display:block; color:var(--ink); }
.dropzone small { display:block; max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast { position:fixed; right:24px; bottom:24px; z-index:210; background:#162251; color:#fff; padding:13px 17px; border-radius:9px; box-shadow:0 12px 35px rgba(15,20,60,.25); opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:none; }
.empty { padding:45px; text-align:center; color:var(--muted); }
.ticket-cards { display:none; }

/* Ticket detail */
.ticket-detail-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; margin-bottom:20px; }
.ticket-detail-header h1 { margin:3px 0 4px; font-size:28px; letter-spacing:-.6px; }
.ticket-detail-header p { margin:0; color:var(--muted); font-size:13px; }
.ticket-kicker { color:var(--violet); font-size:12px; font-weight:700; }
.back-button { width:40px; height:40px; border:1px solid var(--line); border-radius:9px; background:white; font-size:21px; }
.ticket-detail-actions { display:flex; gap:10px; align-items:center; }
.status-select { min-width:190px; font-weight:600; }
.ticket-detail-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(290px,.75fr); gap:18px; align-items:start; }
.ticket-thread { padding:22px; }
.thread-message { display:flex; gap:12px; align-items:flex-start; }
.thread-message + .thread-message { margin-top:22px; }
.message-bubble { flex:1; background:#f7f8fc; border:1px solid var(--line); border-radius:4px 12px 12px 12px; padding:15px 16px; }
.agent-message .message-bubble { background:#f5f0ff; border-color:#e2d6ff; }
.message-meta { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); }
.message-meta b { color:var(--ink); font-size:13px; }
.message-bubble p { margin:10px 0 0; line-height:1.6; font-size:14px; }
.visibility-pill { margin-left:auto; background:white; border:1px solid var(--line); border-radius:999px; padding:3px 7px; }
.thread-event { display:flex; align-items:center; gap:9px; margin:18px 0 18px 46px; color:var(--muted); font-size:12px; }
.thread-event > span { width:24px; height:24px; display:inline-flex; padding:4px; border-radius:50%; background:#eef0f6; }
.thread-event p { margin:0; }
.composer { margin-top:24px; border:1px solid #ccd3e2; border-radius:10px; overflow:hidden; transition:.2s; }
.composer.internal { border-color:#f0b94d; background:#fffaf0; }
.composer-tabs { display:flex; background:#fafbfe; border-bottom:1px solid var(--line); padding:0 8px; }
.composer-tabs button { border:0; background:transparent; padding:12px 10px; font-size:12px; font-weight:600; color:var(--muted); position:relative; }
.composer-tabs button.active { color:var(--violet); }
.composer-tabs button.active::after { content:""; position:absolute; height:2px; left:10px; right:10px; bottom:-1px; background:currentColor; }
.composer.internal .composer-tabs button.active { color:#b97100; }
.composer textarea { border:0; padding:14px; resize:vertical; width:100%; outline:0; background:transparent; min-height:110px; }
.composer-footer { display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid var(--line); flex-wrap:wrap; }
.composer-notify { display:inline-flex; align-items:center; gap:8px; margin-right:auto; font-size:12px; font-weight:600; color:#526080; cursor:pointer; }
.composer-notify input { width:15px; height:15px; margin:0; accent-color:var(--violet); }
.composer.internal .composer-notify { display:none; }
.watch-card .watch-list { display:grid; gap:12px; margin-bottom:14px; }
.watch-item { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:10px; background:var(--watch-bg); }
.logo-preview { display:flex; align-items:center; gap:16px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--watch-bg); }
.logo-preview img { width:140px; height:52px; object-fit:contain; background:var(--surface); border-radius:8px; border:1px solid var(--line); }
.logo-preview .logo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ops-table { width:100%; border-collapse:collapse; font-size:12px; }
.ops-table th,.ops-table td { padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.ops-table th { color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.ops-meta { color:var(--muted); font-size:11px; display:block; margin-top:4px; }
.state-pill { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:600; background:var(--violet-soft); color:var(--violet); }
.state-pill.failed,.state-pill.gray { background:var(--red-soft); color:var(--red); }
.state-pill.sent,.state-pill.green { background:var(--green-soft); color:var(--green); }
.state-pill.pending,.state-pill.orange { background:var(--orange-soft); color:var(--orange); }
.ops-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.watch-item .nav-icon { width:34px; height:34px; border-radius:10px; background:#efe7ff; color:var(--violet); display:grid; place-items:center; flex:0 0 auto; }
.watch-item b { display:block; font-size:13px; }
.watch-item p { margin:4px 0 0; color:#6b7288; font-size:12px; }
.report-scope.compact { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12px; color:#526080; }
.composer-hint { margin-left:auto; color:var(--muted); font-size:11px; }
.ticket-side { display:grid; gap:14px; }
.detail-card .panel-header h2 { font-size:15px; }
.detail-card dl { margin:0; padding:5px 16px 13px; }
.detail-card dl > div { display:grid; grid-template-columns:100px 1fr; align-items:center; min-height:44px; border-top:1px solid var(--line); font-size:12px; }
.detail-card dl > div:first-child { border-top:0; }
.detail-card dt { color:var(--muted); }
.detail-card dd { margin:0; display:flex; align-items:center; gap:8px; font-weight:600; }
.time-summary { padding:18px; display:flex; align-items:end; gap:8px; }
.time-summary strong { font-size:28px; }
.time-summary span { color:var(--muted); font-size:11px; padding-bottom:4px; }
.mini-timeline { padding:0 18px 18px; }
.mini-timeline > span { display:grid; grid-template-columns:12px 1fr; column-gap:8px; font-size:12px; }
.mini-timeline i { width:9px; height:9px; margin-top:3px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-soft); grid-row:1/3; }
.mini-timeline small { color:var(--muted); }
.time-entry-list { padding:0 16px 14px; display:grid; gap:8px; }
.time-entry { display:grid; grid-template-columns:auto 1fr; gap:2px 9px; padding-top:9px; border-top:1px solid var(--line); font-size:11px; }
.time-entry b { color:var(--violet); }
.time-entry span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.time-entry small { grid-column:2; color:var(--muted); }
.history-event { padding-left:8px; border-left:2px solid #e7defb; }
.history-event p small { display:block; margin-top:2px; color:#8a93a8; }
.internal-message .message-bubble { background:#fff8e8; border-color:#f1ce83; }
.attachments-block { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.attachments-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:12px; }
.attachments-heading span,.attachments-empty { color:var(--muted); font-size:11px; }
.attachments-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.attachment-item { display:grid; grid-template-columns:28px 1fr 20px; align-items:center; gap:8px; min-width:0; padding:9px; border:1px solid var(--line); border-radius:9px; color:var(--ink); text-decoration:none; background:#fafbfe; }
.attachment-item > span:first-child,.attachment-item > span:last-child { display:flex; color:var(--violet); }
.attachment-item .nav-icon { width:18px; height:18px; }
.attachment-item b,.attachment-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-item b { font-size:11px; }
.attachment-item small { color:var(--muted); font-size:10px; margin-top:2px; }
.directory-status { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-5px 0 14px; padding:13px 15px; border:1px solid #bfe7cd; border-radius:10px; background:#effaf3; }
.directory-status.not-configured { border-color:#ead8aa; background:#fff9e9; }
.directory-status div { display:grid; gap:3px; }
.directory-status b { font-size:13px; }
.directory-status span,.sync-caption { color:var(--muted); font-size:11px; }
.directory-status small { color:#6b7280; font-size:10px; }
.directory-status code { max-width:48%; overflow:hidden; text-overflow:ellipsis; padding:6px 8px; border-radius:6px; background:rgba(255,255,255,.7); color:#4f5977; font-size:10px; white-space:nowrap; }
.source-pill { display:inline-flex; padding:4px 7px; border-radius:999px; background:#edf3ff; color:#2758a5; font-size:10px; font-weight:700; }
.source-pill.local { background:#f0f1f5; color:#68718a; }
.clickable-row { cursor:pointer; transition:background .16s ease,box-shadow .16s ease; }
.clickable-row:hover,.clickable-row:focus-visible { background:#faf8ff; outline:none; box-shadow:inset 3px 0 0 var(--violet); }
.row-chevron { color:var(--violet); font-size:18px; text-align:right; }
.users-table td small { display:block; margin-top:3px; color:var(--muted); }
.user-profile-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.user-profile-summary > div { display:grid; gap:4px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fafbfe; }
.user-profile-summary span,.user-profile-summary small { color:var(--muted); font-size:10px; }
.user-profile-summary b { overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.toolbar-wrap { align-items:flex-start; }
.requester-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:14px; align-items:start; }
.metrics-requester .metric { min-height:112px; }
.user-detail-grid { display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); gap:14px; align-items:start; }
.user-detail-grid .user-tickets-card { grid-column:1/-1; }
.user-linked-list { padding:10px 12px 14px; }
.user-linked-list .reference-row { width:100%; text-align:left; }
.detail-card dd small { display:block; font-weight:500; color:var(--muted); }

/* Operational reports */
.report-period { height:42px; display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.report-period .nav-icon { width:17px; height:17px; }
.report-period select { border:0; outline:0; background:transparent; color:var(--ink); font-weight:600; }
.report-scope { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-6px 0 14px; color:var(--muted); font-size:12px; }
.report-scope b { color:var(--ink); }
.report-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.chart-population { color:var(--muted); font-size:10px; }
.report-bars { padding-top:12px; }
.report-bars .hbar { grid-template-columns:110px 1fr 24px; }
.report-duration-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.report-duration-list > div { display:grid; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fafbfe; }
.report-duration-list span,.report-duration-list small { color:var(--muted); font-size:10px; }
.report-duration-list b { margin:4px 0; font-size:18px; }

/* Knowledge base */
.knowledge-stats { display:flex; gap:10px; margin:-4px 0 18px; }
.knowledge-stats span { display:flex; align-items:baseline; gap:5px; padding:8px 11px; border-radius:8px; background:#f7f5fc; color:var(--muted); font-size:11px; }
.knowledge-stats b { color:var(--ink); font-size:15px; }
.article-card-top { display:flex; align-items:center; justify-content:space-between; }
.article-state { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; background:#eef0f5; color:#65708d; font-size:10px; font-weight:700; }
.article-state.publié { background:var(--green-soft); color:#087f40; }
.article-state.brouillon { background:var(--orange-soft); color:#a86b00; }
.article-state.archivé { background:#eef0f5; color:#667089; }
.article-detail-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; margin-bottom:20px; }
.article-detail-header h1 { margin:3px 0 4px; font-size:29px; letter-spacing:-.6px; }
.article-detail-header p { margin:0; color:var(--muted); font-size:13px; }
.article-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,.7fr); gap:18px; align-items:start; }
.article-content { padding:26px 30px; }
.article-badges { display:flex; gap:8px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.article-badges span { padding:5px 8px; border-radius:6px; background:#f2edff; color:var(--violet); font-size:10px; font-weight:700; }
.prose { max-width:760px; padding:8px 0 24px; color:#303a5e; line-height:1.7; }
.prose h1,.prose h2 { color:var(--ink); margin:26px 0 8px; letter-spacing:-.25px; }
.prose h2 { font-size:19px; }
.prose p { margin:0; }
.prose li { margin:6px 0 6px 18px; }
.article-feedback { border-top:1px solid var(--line); padding-top:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.article-feedback button { border:1px solid var(--line); background:white; border-radius:7px; padding:7px 13px; }
.article-feedback small { width:100%; color:var(--muted); }
.article-meta dl { margin:0; padding:8px 16px 16px; }
.article-meta dl div { display:grid; grid-template-columns:85px 1fr; gap:10px; padding:12px 0; border-top:1px solid var(--line); font-size:12px; }
.article-meta dl div:first-child { border-top:0; }
.article-meta dt { color:var(--muted); }
.article-meta dd { margin:0; font-weight:600; }
.markdown-editor { font-family:ui-monospace,Consolas,monospace; line-height:1.55; }
[data-icon] { width:22px; height:22px; display:inline-flex; flex:0 0 22px; }
svg { width:100%; height:100%; stroke:currentColor; }

@media (max-width: 1150px) {
  .metrics { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid,.requester-dashboard-grid { grid-template-columns: 1fr; }
  .right-column { grid-template-columns:1fr 1fr; }
  .item-grid { grid-template-columns: repeat(2,1fr); }
  .ticket-detail-grid { grid-template-columns:minmax(0,1fr) 300px; }
  .article-layout { grid-template-columns:minmax(0,1fr) 280px; }
  .report-grid-four { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px) {
  .sidebar { transform:translateX(-100%); transition:.25s; box-shadow:8px 0 32px rgba(17,23,71,.16); }
  .sidebar.open { transform:none; }
  .main { margin-left:0; width:100%; }
  .menu-button { display:grid; }
  .timer-chip { position:static; box-shadow:none; }
  .content { padding:20px 16px 30px; }
  .lower-grid, .settings-grid { grid-template-columns:1fr; }
  .settings-menu { display:flex; overflow:auto; }
  .settings-menu button { white-space:nowrap; }
  body.nav-open::after { content:""; position:fixed; inset:0; z-index:18; background:rgba(17,23,71,.3); backdrop-filter:blur(2px); }
  .ticket-detail-grid { grid-template-columns:1fr; }
  .ticket-side { grid-template-columns:repeat(2,1fr); }
  .ticket-side .detail-card:last-child { grid-column:1/-1; }
  .article-layout { grid-template-columns:1fr; }
  .reference-columns { grid-template-columns:1fr; }
}
@media (max-width: 580px) {
  .topbar { padding:0 12px; gap:8px; }
  .custom-fields-grid { grid-template-columns:1fr; }
  .menu-button { display:none; }
  .global-search { padding:0 11px; height:40px; }
  .global-search input { min-width:0; }
  .global-search kbd, .topbar-actions .icon-button:first-of-type { display:none; }
  .content { padding:18px 14px 110px; }
  .page-header { flex-direction:column; margin-bottom:16px; }
  .page-header h1 { font-size:26px; }
  .header-actions, .header-actions .button { width:100%; }
  .metrics, .item-grid, .report-grid, .right-column, .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .metric { min-height:105px; }
  .lower-grid { display:none; }
  .report-scope + .report-grid + .lower-grid { display:grid; }
  .report-scope { align-items:flex-start; flex-direction:column; gap:4px; }
  .report-duration-list { grid-template-columns:1fr; }
  .report-period { width:100%; justify-content:center; }
  .directory-status { align-items:flex-start; flex-direction:column; }
  .directory-status code { max-width:100%; width:100%; }
  .user-profile-summary { grid-template-columns:1fr; }
  .user-detail-grid { grid-template-columns:1fr; }
  .danger-zone { align-items:stretch; flex-direction:column; }
  .danger-zone .button { width:100%; }
  .users-table th:nth-child(2),.users-table td:nth-child(2),.users-table th:nth-child(3),.users-table td:nth-child(3),.users-table th:nth-child(5),.users-table td:nth-child(5) { display:none; }
  .users-table { min-width:460px; }
  .users-table th:first-child,.users-table td:first-child { min-width:180px; }
  .users-table th:nth-child(4),.users-table td:nth-child(4) { min-width:180px; }
  .modal-backdrop { padding:0; align-items:end; }
  .modal { border-radius:15px 15px 0 0; max-height:92vh; }
  .dropzone { min-height:82px; padding:12px 16px; justify-content:flex-start; }
  .dropzone small { max-width:calc(100vw - 104px); }
  .mobile-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; inset:auto 0 0; height:66px; z-index:30; border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); box-shadow:0 -8px 25px rgba(17,23,71,.06); padding:5px 6px 4px; }
  .mobile-nav .nav-item { min-height:auto; padding:4px; display:flex; flex-direction:column; justify-content:center; gap:3px; border-radius:8px; font-size:10px; }
  .mobile-nav .nav-icon { width:20px; height:20px; flex-basis:20px; }
  .timer-chip { height:40px; padding-left:9px; gap:5px; }
  .timer-chip > b, .timer-chip > span { display:none; }
  .timer-chip > i { margin-right:4px; width:9px; height:9px; box-shadow:0 0 0 4px var(--green-soft); }
  .timer-chip strong { font-size:11px; }
  .timer-chip button { display:none; }
  .timer-chip #timerStop { display:block; min-width:34px; width:34px; padding:0; font-size:10px; }
  .toolbar { display:grid; grid-template-columns:1fr 1fr; padding:12px; gap:8px; }
  .toolbar-search { grid-column:1/-1; min-width:0; }
  .select-compact { width:100%; min-width:0; }
  .export-button { grid-column:1/-1; }
  .tickets-table { display:none; }
  .ticket-cards { display:grid; gap:0; }
  .ticket-card { border:0; border-top:1px solid var(--line); padding:15px 14px; background:white; text-align:left; display:grid; gap:9px; width:100%; }
  .ticket-card:first-child { border-top:0; }
  .ticket-card > strong { font-size:14px; }
  .ticket-card-top, .ticket-card-bottom, .ticket-card-meta { display:flex; align-items:center; gap:8px; }
  .ticket-card-top .status { margin-left:auto; }
  .ticket-card-meta { color:var(--muted); font-size:12px; }
  .ticket-card-meta .avatar { width:26px; height:26px; font-size:10px; }
  .ticket-card-bottom { justify-content:space-between; font-size:11px; color:var(--muted); }
  .ticket-detail-header { grid-template-columns:auto 1fr; }
  .ticket-detail-header h1 { font-size:23px; }
  .ticket-detail-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .ticket-detail-actions .button { padding:0 10px; font-size:12px; }
  .ticket-thread { padding:14px; }
  .message-meta { flex-wrap:wrap; }
  .visibility-pill { margin-left:0; }
  .thread-event { margin-left:38px; }
  .composer-footer { flex-wrap:wrap; }
  .composer-hint { display:none; }
  .composer-footer .button { flex:1; padding:0 9px; font-size:11px; }
  .attachments-list { grid-template-columns:1fr; }
  .ticket-side { grid-template-columns:1fr; }
  .ticket-side .detail-card:last-child { grid-column:auto; }
  .knowledge-stats { overflow-x:auto; }
  .knowledge-stats span { white-space:nowrap; }
  .article-detail-header { grid-template-columns:auto 1fr; }
  .article-detail-header h1 { font-size:23px; }
  .article-detail-header .ticket-detail-actions { grid-column:1/-1; }
  .article-content { padding:18px; }
  .topbar-actions { gap:7px; }
  .topbar-actions .icon-button { width:40px; height:40px; }
}