:root {
  --ink: #202320;
  --ink-2: #303530;
  --muted: #747b73;
  --paper: #f4f1eb;
  --panel: #fff;
  --line: #e4e0d8;
  --accent: #bd8f57;
  --accent-dark: #8d6335;
  --accent-soft: #f4e8d8;
  --green: #2f704e;
  --green-soft: #e4f1e9;
  --red: #a33e3e;
  --red-soft: #f8e7e5;
  --orange: #b66a2e;
  --blue: #35678b;
  --shadow: 0 22px 60px rgba(25, 29, 25, .11);
  --radius: 18px;
  --sidebar: 264px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.eyebrow, .panel-kicker { margin: 0 0 8px; color: var(--accent-dark); font-size: .73rem; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }

/* Login */
.login-page { display: grid; grid-template-columns: minmax(380px, 1.1fr) minmax(420px, .9fr); min-height: 100vh; background: #f7f4ee; }
.login-visual { position: relative; min-height: 100vh; overflow: hidden; background: #242824; }
.login-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(18,20,18,.88), rgba(18,20,18,.28)), url('/assets/projects/kueche-arbeitsplatte.webp') center/cover; filter: saturate(.72); }
.login-stone { position: absolute; right: -130px; bottom: -140px; width: 520px; height: 520px; border-radius: 52% 48% 38% 62%; background: radial-gradient(circle at 35% 32%, #d1b38e, #8a6849 54%, #4c4238); opacity: .3; box-shadow: inset 0 0 80px rgba(255,255,255,.2); transform: rotate(-18deg); }
.login-visual-copy { position: absolute; z-index: 1; left: clamp(38px, 7vw, 105px); bottom: clamp(52px, 11vh, 115px); max-width: 610px; color: white; }
.login-visual-copy > span { display: block; margin-bottom: 20px; color: #e1ba87; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.login-visual-copy strong { display: block; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 500; line-height: 1.03; }
.login-visual-copy p { max-width: 470px; margin-top: 25px; color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.65; }
.login-panel { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; padding: 40px clamp(28px, 6vw, 90px); }
.login-brand { width: fit-content; }
.login-brand img { width: 210px; height: auto; }
.login-card { align-self: center; width: min(100%, 480px); margin: 30px auto 100px; }
.login-card h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.3rem); font-weight: 500; line-height: 1; }
.login-intro { margin: 18px 0 34px; color: var(--muted); }
.login-card form { display: grid; gap: 19px; }
.login-card label:not(.check), .stack-form label, .form-grid label { display: grid; gap: 8px; color: var(--ink-2); font-size: .84rem; font-weight: 740; }
input, select, textarea { width: 100%; border: 1px solid #d7d2c8; border-radius: 11px; background: #fff; color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; }
input, select { min-height: 49px; padding: 11px 13px; }
textarea { padding: 12px 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(189,143,87,.13); }
.check { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: .8rem; cursor: pointer; }
.check input { width: 18px; min-height: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-dark); }
.primary-button, .secondary-button, .text-button, .icon-button { border: 0; cursor: pointer; transition: transform .18s, background .18s, opacity .18s, box-shadow .18s; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 20px; border-radius: 11px; background: var(--ink); color: white; font-weight: 760; box-shadow: 0 10px 24px rgba(32,35,32,.15); }
.primary-button:hover { transform: translateY(-1px); background: #101210; }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button.compact { min-height: 42px; padding: 9px 16px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 10px; background: white; font-weight: 720; }
.secondary-button:hover { border-color: var(--accent); background: #fbf6ef; }
.text-button { padding: 6px 4px; background: transparent; color: var(--accent-dark); font-size: .82rem; font-weight: 780; }
.text-button.danger { color: var(--red); }
.icon-button { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 1.2rem; }
.form-error { padding: 11px 13px; border: 1px solid rgba(163,62,62,.22); border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: .82rem; font-weight: 680; }
.back-link { display: inline-block; margin-top: 25px; color: var(--muted); font-size: .82rem; text-decoration: none; }
.back-link:hover { color: var(--ink); }

/* App shell */
.admin-app { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar); padding: 25px 19px 20px; background: #202420; color: white; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 0 9px; }
.sidebar-head img { width: 185px; height: auto; }
.sidebar-close { display: none; border: 0; background: transparent; color: white; font-size: 1.8rem; }
.main-nav { display: grid; gap: 6px; margin-top: 36px; }
.nav-item { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 13px; border: 0; border-radius: 11px; background: transparent; color: rgba(255,255,255,.65); text-align: left; cursor: pointer; }
.nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.nav-item.is-active { background: linear-gradient(100deg, rgba(189,143,87,.24), rgba(189,143,87,.08)); color: white; box-shadow: inset 3px 0 var(--accent); }
.nav-icon { font-size: 1.2rem; text-align: center; }
.nav-item b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #202320; font-size: .7rem; }
.sidebar-service { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: center; margin-top: auto; padding: 14px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.035); }
.service-dot { width: 9px; height: 9px; border-radius: 50%; background: #61c487; box-shadow: 0 0 0 5px rgba(97,196,135,.1); }
.sidebar-service strong, .sidebar-service small { display: block; }
.sidebar-service strong { font-size: .78rem; }
.sidebar-service small { margin-top: 2px; color: rgba(255,255,255,.48); font-size: .68rem; }
.sidebar-user { display: grid; grid-template-columns: 38px 1fr 30px; gap: 10px; align-items: center; margin-top: 12px; padding: 13px 9px 0; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #202320; font-size: .74rem; font-weight: 850; }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.sidebar-user small { margin-top: 2px; color: rgba(255,255,255,.45); font-size: .68rem; }
.sidebar-user button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; }
.sidebar-user button:hover { background: rgba(255,255,255,.08); color: white; }
.app-shell { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 88px; padding: 14px 34px; border-bottom: 1px solid var(--line); background: rgba(244,241,235,.91); backdrop-filter: blur(18px); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title p { margin: 0 0 3px; color: var(--muted); font-size: .7rem; font-weight: 730; letter-spacing: .04em; text-transform: uppercase; }
.topbar-title h1 { margin: 0; font-size: 1.42rem; }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.global-search, .table-search { display: flex; align-items: center; gap: 8px; min-width: 245px; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--muted); }
.global-search input, .table-search input { min-height: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.workspace { padding: 33px 34px 70px; }
.view { max-width: 1600px; margin: auto; }
.welcome-row, .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.welcome-row h2, .section-head h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 3vw, 3.1rem); font-weight: 500; }
.welcome-row > div > p:last-child, .section-head > div > p:last-child { margin: 9px 0 0; color: var(--muted); }
.date-chip { padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.65); color: var(--muted); font-size: .79rem; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card { position: relative; min-height: 142px; padding: 19px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 8px 28px rgba(32,35,32,.045); }
.metric-card::after { content: ""; position: absolute; right: -30px; bottom: -48px; width: 120px; height: 120px; border-radius: 50%; background: var(--accent-soft); opacity: .55; }
.metric-card .metric-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f0ece5; color: var(--accent-dark); font-weight: 850; }
.metric-card strong { position: relative; z-index: 1; display: block; margin-top: 15px; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.metric-card span { position: relative; z-index: 1; color: var(--muted); font-size: .76rem; font-weight: 700; }
.metric-card.alert .metric-icon { background: var(--red-soft); color: var(--red); }
.metric-card.good .metric-icon { background: var(--green-soft); color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin-top: 16px; }
.dashboard-grid.lower { grid-template-columns: 1fr 1fr; }
.panel, .table-panel { border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 8px 30px rgba(32,35,32,.04); }
.panel { padding: 21px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.panel-head h3 { margin: 0; font-size: 1.06rem; }
.panel-kicker { display: block; margin-bottom: 5px; font-size: .64rem; }
.month-chart { display: flex; align-items: end; gap: 9px; min-height: 220px; padding: 20px 4px 0; border-bottom: 1px solid var(--line); }
.month-bar-wrap { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 7px; flex: 1; height: 205px; }
.month-bar-space { display: flex; align-items: end; width: 100%; height: 100%; }
.month-bar { width: 100%; min-height: 5px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, var(--accent), #d5b184); transition: height .4s ease; }
.month-bar-wrap strong { font-size: .69rem; }
.month-bar-wrap span { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.status-bars { display: grid; gap: 14px; }
.status-row { display: grid; gap: 7px; }
.status-row-head { display: flex; justify-content: space-between; gap: 10px; font-size: .77rem; }
.status-row-head span { color: var(--muted); }
.status-track { height: 7px; overflow: hidden; border-radius: 999px; background: #eeeae3; }
.status-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.compact-list { display: grid; }
.compact-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid #eeeae3; cursor: pointer; }
.compact-item:first-child { border-top: 0; }
.compact-item:hover .compact-title { color: var(--accent-dark); }
.compact-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #f1ece4; color: var(--accent-dark); font-size: .74rem; font-weight: 850; }
.compact-title { display: block; font-size: .82rem; font-weight: 760; }
.compact-sub { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.compact-side { text-align: right; }
.compact-side strong { display: block; font-size: .7rem; }
.compact-side span { color: var(--muted); font-size: .66rem; }

/* Tables */
.filter-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.filter-bar select { width: auto; min-width: 165px; min-height: 43px; }
.table-search { flex: 1; min-width: 220px; }
.table-panel { overflow: hidden; }
.table-meta { display: flex; justify-content: space-between; gap: 15px; padding: 16px 19px; border-bottom: 1px solid var(--line); font-size: .77rem; }
.table-meta span { color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 16px; border-bottom: 1px solid #eeeae3; text-align: left; vertical-align: middle; }
th { background: #faf8f4; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
td { font-size: .78rem; }
tbody tr { cursor: pointer; transition: background .15s; }
tbody tr:hover { background: #fcf8f2; }
tbody tr:last-child td { border-bottom: 0; }
.cell-ref { display: block; color: var(--muted); font-size: .67rem; font-weight: 760; }
.cell-date { display: block; margin-top: 3px; font-size: .64rem; color: #9a9e98; }
.cell-main { display: block; font-weight: 760; }
.cell-sub { display: block; margin-top: 3px; color: var(--muted); font-size: .69rem; }
.status-pill, .priority-pill, .tag { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; font-size: .65rem; font-weight: 760; white-space: nowrap; }
.status-pill { background: var(--accent-soft); color: var(--accent-dark); }
.status-pill.completed { background: var(--green-soft); color: var(--green); }
.status-pill.cancelled { background: #ececea; color: #686d68; }
.priority-pill { background: #efede8; color: #666b65; }
.priority-pill.urgent { background: var(--red-soft); color: var(--red); }
.priority-pill.high { background: #faeddf; color: var(--orange); }
.unread-dot { display: inline-grid; place-items: center; min-width: 21px; height: 21px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--red); color: white; font-size: .62rem; }
.row-arrow { color: var(--muted); font-size: 1rem; }
.empty-state { padding: 65px 20px; text-align: center; }
.empty-state > div { font-size: 2rem; color: var(--accent); }
.empty-state h3 { margin: 12px 0 5px; }
.empty-state p { margin: 0; color: var(--muted); }

/* Detail dialog */
dialog { padding: 0; border: 0; }
dialog::backdrop { background: rgba(18,21,18,.63); backdrop-filter: blur(6px); }
.detail-dialog { width: min(1420px, calc(100vw - 34px)); max-width: none; height: min(910px, calc(100vh - 28px)); border-radius: 22px; background: var(--paper); box-shadow: 0 35px 100px rgba(0,0,0,.32); }
.detail-shell { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.detail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 24px; border-bottom: 1px solid var(--line); background: white; }
.detail-header h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.75rem; font-weight: 500; }
.detail-header p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.detail-reference { color: var(--accent-dark); font-size: .7rem; font-weight: 820; letter-spacing: .1em; }
.dialog-close { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.dialog-close:hover { color: var(--ink); border-color: #bdb8ae; }
.detail-layout { display: grid; grid-template-columns: 330px 1fr; min-height: 0; }
.detail-side { overflow-y: auto; padding: 18px; border-right: 1px solid var(--line); background: #f7f4ee; }
.customer-card, .portal-link-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.customer-card h3 { margin: 0 0 4px; font-size: 1rem; }
.customer-card p { margin: 0 0 13px; color: var(--muted); font-size: .73rem; }
.contact-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.contact-buttons a { display: flex; align-items: center; justify-content: center; min-height: 37px; border: 1px solid var(--line); border-radius: 9px; background: #faf8f4; font-size: .72rem; font-weight: 740; text-decoration: none; }
.contact-buttons a:hover { border-color: var(--accent); }
.detail-controls { display: grid; gap: 13px; margin-top: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.detail-controls > label { display: grid; gap: 6px; color: var(--muted); font-size: .69rem; font-weight: 780; }
.detail-controls input, .detail-controls select { min-height: 40px; padding: 8px 10px; font-size: .76rem; }
.detail-controls textarea { font-size: .76rem; }
.portal-link-card { margin-top: 15px; }
.portal-link-card > span { font-size: .75rem; font-weight: 800; }
.portal-link-card p { color: var(--muted); font-size: .69rem; line-height: 1.5; }
.portal-link-card > div { display: flex; align-items: center; gap: 8px; }
.portal-link-card .secondary-button { min-height: 37px; font-size: .7rem; }
.detail-main { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; background: white; }
.detail-tabs { display: flex; gap: 3px; overflow-x: auto; padding: 11px 18px 0; border-bottom: 1px solid var(--line); }
.detail-tabs button { position: relative; min-height: 43px; padding: 9px 14px 12px; border: 0; background: transparent; color: var(--muted); font-size: .75rem; font-weight: 760; cursor: pointer; white-space: nowrap; }
.detail-tabs button.is-active { color: var(--ink); }
.detail-tabs button.is-active::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--accent); }
.detail-tabs b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; border-radius: 999px; background: var(--red); color: white; font-size: .58rem; }
.detail-tab { min-height: 0; overflow-y: auto; padding: 20px; }
.overview-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 15px; }
.detail-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.card-title { margin-bottom: 15px; padding-bottom: 11px; border-bottom: 1px solid #eeeae3; font-size: .78rem; font-weight: 810; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; margin: 0; }
.detail-list div { min-width: 0; }
.detail-list dt { color: var(--muted); font-size: .64rem; font-weight: 790; letter-spacing: .05em; text-transform: uppercase; }
.detail-list dd { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: .77rem; font-weight: 650; line-height: 1.45; }
.detail-list .wide { grid-column: 1 / -1; }
.file-grid { display: grid; gap: 8px; }
.file-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid #eeeae3; border-radius: 10px; text-decoration: none; }
.file-card:hover { border-color: var(--accent); background: #fcf7f0; }
.file-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #f0ece5; color: var(--accent-dark); font-size: .65rem; font-weight: 820; }
.file-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.file-card small { color: var(--muted); font-size: .63rem; }
.file-card > span:last-child { color: var(--muted); }
.chat-panel { display: grid; grid-template-rows: minmax(280px, 1fr) auto; gap: 15px; height: 100%; }
.chat-thread { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 3px 5px 20px; }
.chat-message { display: grid; max-width: 74%; }
.chat-message.admin { align-self: flex-end; justify-items: end; }
.chat-message.customer { align-self: flex-start; }
.chat-message.system { align-self: center; max-width: 86%; text-align: center; }
.chat-bubble { padding: 11px 13px; border-radius: 14px; background: #f1eee8; font-size: .78rem; line-height: 1.52; white-space: pre-wrap; }
.chat-message.admin .chat-bubble { background: var(--ink); color: white; border-bottom-right-radius: 4px; }
.chat-message.customer .chat-bubble { border-bottom-left-radius: 4px; }
.chat-message.system .chat-bubble { padding: 8px 12px; background: #faf7f1; color: var(--muted); font-size: .68rem; }
.chat-meta { margin: 5px 3px 0; color: var(--muted); font-size: .62rem; }
.chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chat-attachments a { padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.15); color: inherit; font-size: .63rem; text-decoration: none; }
.chat-message.customer .chat-attachments a { background: white; border: 1px solid var(--line); }
.chat-compose { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #faf8f4; }
.chat-compose textarea { border: 0; background: transparent; box-shadow: none; }
.compose-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.attach-button { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: .69rem; font-weight: 740; cursor: pointer; }
.compact-check { margin-right: auto; }
.compose-actions .primary-button { min-height: 38px; font-size: .72rem; }
.compose-files { display: flex; flex-wrap: wrap; gap: 6px; }
.compose-file { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: white; font-size: .64rem; }
.compose-file button { border: 0; background: transparent; color: var(--red); cursor: pointer; }
.note-form { display: grid; justify-items: end; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #faf8f4; }
.note-form .primary-button { min-height: 40px; font-size: .72rem; }
.notes-list { display: grid; gap: 10px; margin-top: 14px; }
.note-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.note-card p { margin: 0; white-space: pre-wrap; font-size: .76rem; line-height: 1.55; }
.note-card footer { margin-top: 9px; color: var(--muted); font-size: .63rem; }
.timeline { position: relative; display: grid; gap: 0; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; top: 10px; bottom: 15px; left: 6px; width: 1px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 20px 18px; }
.timeline-item::before { content: ""; position: absolute; top: 6px; left: -16px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.timeline-item strong { display: block; font-size: .77rem; }
.timeline-item p { margin: 4px 0; color: var(--muted); font-size: .71rem; }
.timeline-item time { color: #9b9f99; font-size: .62rem; }

/* Settings + dialogs */
.settings-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.team-list { display: grid; }
.team-member { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 13px 2px; border-top: 1px solid #eeeae3; }
.team-member:first-child { border-top: 0; }
.team-member .avatar { color: var(--ink); }
.team-member strong, .team-member small { display: block; }
.team-member strong { font-size: .79rem; }
.team-member small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.team-actions { display: flex; align-items: center; gap: 8px; }
.team-actions select { width: auto; min-height: 36px; padding: 6px 9px; font-size: .68rem; }
.team-actions button { min-height: 35px; padding: 6px 9px; font-size: .66rem; }
.settings-card { align-self: start; }
.stack-form { display: grid; gap: 14px; }
.stack-form small, .form-grid small { color: var(--muted); font-size: .66rem; font-weight: 500; }
.small-dialog { width: min(690px, calc(100vw - 28px)); max-width: none; border-radius: 20px; box-shadow: var(--shadow); }
.modal-card { padding: 23px; background: white; }
.modal-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 21px; }
.modal-card h2 { margin: 0; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.modal-card > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }
.credential-dialog { width: min(510px, calc(100vw - 28px)); border-radius: 20px; }
.credential-card { padding: 35px; background: white; text-align: center; }
.credential-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 1.3rem; font-weight: 900; }
.credential-card h2 { margin: 17px 0 8px; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.credential-card p { color: var(--muted); font-size: .8rem; line-height: 1.55; }
.credential-value { display: flex; align-items: center; gap: 8px; margin: 20px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: #faf8f4; }
.credential-value code { flex: 1; overflow-wrap: anywhere; text-align: left; font-size: .8rem; }
.credential-value button { border: 0; background: transparent; color: var(--accent-dark); font-size: .72rem; font-weight: 770; cursor: pointer; }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 420px; padding: 13px 15px; border-left: 4px solid var(--green); border-radius: 10px; background: #202320; color: white; box-shadow: 0 14px 40px rgba(0,0,0,.25); font-size: .78rem; animation: toastIn .25s ease; }
.toast.error { border-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .topbar-actions .secondary-button { display: none; }
  .global-search { min-width: 210px; }
  .overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; }
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .sidebar.is-open { transform: none; }
  .sidebar-close, .menu-button { display: grid; place-items: center; }
  .app-shell { margin-left: 0; }
  .topbar { padding: 13px 18px; }
  .workspace { padding: 25px 18px 60px; }
  .dashboard-grid, .dashboard-grid.lower, .settings-grid { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 285px 1fr; }
}
@media (max-width: 720px) {
  .topbar { align-items: flex-start; }
  .topbar-actions { gap: 6px; }
  .global-search { display: none; }
  .topbar-actions .primary-button { padding: 9px 11px; font-size: 0; }
  .topbar-actions .primary-button::after { content: "+"; font-size: 1.2rem; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card { min-height: 126px; }
  .welcome-row, .section-head { align-items: flex-start; flex-direction: column; }
  .date-chip { display: none; }
  .filter-bar { flex-wrap: wrap; }
  .table-search { flex-basis: 100%; }
  .filter-bar select { flex: 1; min-width: 130px; }
  .detail-dialog { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .detail-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .detail-side { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-main { min-height: 620px; }
  .detail-header { position: sticky; z-index: 4; top: 0; }
  .chat-message { max-width: 88%; }
  .compose-actions { flex-wrap: wrap; }
  .compact-check { order: 3; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
}
@media (max-width: 480px) {
  .login-panel { padding: 25px 20px; }
  .login-card { margin-bottom: 40px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { padding: 14px; }
  .workspace { padding-inline: 12px; }
  .panel { padding: 16px; }
  .month-chart { gap: 5px; }
  .month-bar-wrap span { transform: rotate(-45deg); }
  .table-meta span { display: none; }
  th, td { padding: 12px 10px; }
  .detail-header { padding: 14px; }
  .detail-side, .detail-tab { padding: 13px; }
}

/* System settings */
.system-settings-form { display: block; }
.settings-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-section { align-self: start; }
.settings-section.wide { grid-column: 1 / -1; }
.settings-section .panel-head { margin-bottom: 18px; }
.settings-state { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: #f1eee8; color: #68645e; font-size: .75rem; font-weight: 800; }
.settings-state.is-success { background: #e6f2e9; color: #287247; }
.settings-state.is-error { background: #fbe8e5; color: #a13c2e; }
.settings-section label { display: grid; gap: 7px; color: var(--text); font-size: .83rem; font-weight: 750; }
.settings-section label small { color: var(--muted); font-size: .72rem; font-weight: 500; line-height: 1.45; }
.settings-section input, .settings-section select, .settings-section textarea { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 11px 13px; color: var(--text); font: inherit; font-weight: 550; }
.settings-section input:focus, .settings-section select:focus, .settings-section textarea:focus { outline: 3px solid rgba(185,138,80,.16); border-color: #b98a50; }
.switch-row { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 11px !important; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #faf9f6; cursor: pointer; }
.switch-row input { width: 18px !important; min-height: 18px !important; margin-top: 2px; accent-color: #9b6c38; }
.switch-row span { display: grid; gap: 3px; }
.switch-row strong { font-size: .84rem; }
.switch-row small { color: var(--muted); line-height: 1.4; }
.toggle-list { display: grid; gap: 9px; }
.setting-check { align-self: end; min-height: 46px; }
.compact-stack { gap: 12px; }
.live-url-preview { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 14px; border-radius: 12px; background: #202420; color: #fff; }
.live-url-preview span { color: rgba(255,255,255,.62); font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.live-url-preview code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f0cf9f; }
.live-url-preview .secondary-button { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.08); }
.test-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 1fr); align-items: end; gap: 11px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.test-result { align-self: center; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.test-result.is-success { color: #287247; }
.test-result.is-error { color: #a13c2e; }
.status-label-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.status-label-grid label { padding: 10px; border-radius: 11px; background: #faf9f6; border: 1px solid var(--line); }
.status-label-grid input { min-height: 40px; }
.diagnostics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.diagnostic-item { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #faf9f6; }
.diagnostic-item span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.diagnostic-item strong, .diagnostic-item code { display: block; overflow-wrap: anywhere; font-size: .82rem; }
.diagnostic-item.is-good strong { color: #287247; }
.diagnostic-item.is-warning strong { color: #a75c21; }
.diagnostics-note { margin: 14px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.settings-save-bar { position: sticky; z-index: 5; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; padding: 13px 15px; border: 1px solid rgba(185,138,80,.35); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 14px 40px rgba(30,35,31,.13); backdrop-filter: blur(12px); }
.settings-save-bar span { color: var(--muted); font-size: .8rem; }
.portal-url-field { width: 100%; margin: 10px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #595650; font: 500 .73rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.portal-link-card > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.portal-link-card a.secondary-button { text-decoration: none; }

@media (max-width: 980px) {
  .settings-dashboard-grid { grid-template-columns: 1fr; }
  .settings-section.wide { grid-column: auto; }
  .diagnostics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .test-row { grid-template-columns: 1fr auto; }
  .test-result { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .settings-dashboard-grid { gap: 11px; }
  .status-label-grid, .diagnostics-grid { grid-template-columns: 1fr; }
  .live-url-preview { grid-template-columns: 1fr auto; }
  .live-url-preview span { grid-column: 1 / -1; }
  .test-row { grid-template-columns: 1fr; }
  .settings-save-bar { bottom: 8px; flex-direction: column; align-items: stretch; }
  .settings-save-bar .primary-button { width: 100%; }
}

.delivery-monitor {
  display: grid;
  gap: .35rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line, #dedbd3);
  border-radius: 14px;
  background: #faf9f6;
}
.delivery-monitor strong { font-size: .86rem; }

/* WhatsApp, mobile handover and PDF export */
.settings-intro { margin: -6px 0 16px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.whatsapp-settings-card { border-top: 4px solid #25d366; }
.whatsapp-config-grid { margin-top: 15px; }
.whatsapp-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.whatsapp-webhook-preview { margin-bottom: 16px; }
.whatsapp-button { min-height: 42px; padding: 10px 16px; border: 0; border-radius: 999px; background: #1f9f55; color: #fff; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 22px rgba(31,159,85,.18); }
.whatsapp-button:hover { background: #198a49; }
.whatsapp-button:disabled { cursor: not-allowed; opacity: .46; box-shadow: none; }
.communication-monitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.mobile-handover-card, .portal-link-card { margin-top: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #faf9f6; }
.mobile-handover-card { border-color: rgba(31,159,85,.28); background: linear-gradient(145deg, #f5fbf7, #faf9f6); }
.mobile-handover-card > span, .portal-link-card > span { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 850; }
.mobile-handover-card p, .portal-link-card p { margin: 0 0 12px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.mobile-handover-card label { display: grid; gap: 5px; margin-top: 9px; font-size: .72rem; font-weight: 800; }
.mobile-handover-card select { width: 100%; min-height: 41px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; font: inherit; }
.handover-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.handover-actions button { width: 100%; }
.mobile-handover-card > small { display: block; margin-top: 10px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.channel-badge { display: inline-flex; margin-right: 6px; padding: 2px 6px; border-radius: 999px; background: #dcf8e7; color: #187641; font-size: .62rem; font-weight: 850; }
.contact-buttons { flex-wrap: wrap; }
.contact-buttons a[href*="wa.me"] { background: #e7f8ed; color: #187641; }

@media (max-width: 760px) {
  .whatsapp-toggle-grid, .communication-monitor-grid { grid-template-columns: 1fr; }
  .handover-actions { grid-template-columns: 1fr; }
}

/* Unmatched WhatsApp inbox */
.whatsapp-inbox-info { margin-bottom: 15px; border-left: 4px solid #25d366; }
.whatsapp-inbox-info p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.whatsapp-inbox { display: grid; gap: 12px; }
.whatsapp-inbox-item { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(31,34,31,.05); }
.whatsapp-inbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.whatsapp-inbox-head > div { display: grid; gap: 3px; }
.whatsapp-inbox-head span { color: var(--muted); font-size: .72rem; }
.whatsapp-inbox-item p { margin: 14px 0; padding: 12px; border-radius: 12px; background: #f4f8f5; white-space: pre-wrap; line-height: 1.5; }
.whatsapp-inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.whatsapp-mini-link { padding: 7px 10px; border-radius: 999px; background: #e7f8ed; color: #187641; font-size: .7rem; font-weight: 800; text-decoration: none; }
@media (max-width: 620px) { .whatsapp-inbox-head { flex-direction: column; } }