/* WorkBlock 5.5 — unified client panel */
:root[data-theme="black"] {
  color-scheme: dark;
  --bg: #080c16;
  --canvas: #0b1120;
  --panel: rgba(15, 23, 42, .96);
  --panel-solid: #0f172a;
  --panel2: #151f34;
  --panel3: #1d2940;
  --surface: var(--panel);
  --surface-raised: #111b2f;
  --surface-soft: rgba(27, 39, 62, .86);
  --surface-hover: #1b2942;
  --input-bg: #0b1324;
  --overlay: rgba(0, 0, 0, .68);
  --text: #f8fafc;
  --text-soft: #d8e1ee;
  --muted: #91a0b5;
  --faint: #64748b;
  --border: rgba(148, 163, 184, .16);
  --border-strong: rgba(148, 163, 184, .28);
  --accent: #4f8cff;
  --accent2: #76a5ff;
  --accent3: #a7c4ff;
  --accent-soft: rgba(79, 140, 255, .13);
  --accent-soft-strong: rgba(79, 140, 255, .22);
  --accent-border: rgba(79, 140, 255, .38);
  --accent-glow: rgba(79, 140, 255, .23);
  --sidebar-bg: rgba(9, 14, 26, .97);
  --topbar-bg: rgba(8, 12, 22, .9);
  --shadow-xs: 0 4px 16px rgba(0, 0, 0, .24);
  --shadow-sm: 0 12px 34px rgba(0, 0, 0, .32);
  --shadow-md: 0 24px 70px rgba(0, 0, 0, .42);
  --shadow-lg: 0 40px 110px rgba(0, 0, 0, .56);
}
:root[data-theme="black"] body,
:root[data-theme="black"] .layout { background: var(--bg); color: var(--text); }
:root[data-theme="black"] img { opacity: .96; }
:root[data-theme="black"] .btn.primary { color: #fff; }
:root[data-theme="black"] input,
:root[data-theme="black"] select,
:root[data-theme="black"] textarea { color-scheme: dark; }

.theme-toggle { background: var(--surface-soft); }
.density-button,.appearance-control { display:none!important; }

/* Shared page rhythm */
.client-page { min-width:0; }
.client-page-head,.projects-page-head { margin-bottom:24px!important; padding:8px 2px 0!important; }
.client-page-head h1,.projects-page-head h1 { font-size:clamp(34px,3vw,48px); }
.client-page-head .actions { display:flex; flex-wrap:wrap; gap:9px; }
.client-surface { padding:22px; border:1px solid var(--border); border-radius:22px; background:var(--panel-solid); box-shadow:var(--shadow-xs); }
.surface-head { margin-bottom:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.surface-head h2 { margin:0; font-size:23px; letter-spacing:-.035em; }
.surface-head p { margin:5px 0 0; color:var(--muted); }
.client-tabs { margin:0 0 18px; padding:5px; display:flex; width:max-content; max-width:100%; gap:4px; overflow:auto; border:1px solid var(--border); border-radius:15px; background:var(--surface-soft); }
.client-tabs button { min-height:39px; padding:8px 13px; border:0; border-radius:11px; display:flex; align-items:center; gap:7px; white-space:nowrap; color:var(--muted); background:transparent; cursor:pointer; font-weight:800; }
.client-tabs button.active { color:var(--text); background:var(--panel-solid); box-shadow:var(--shadow-xs); }
.client-tabs button span { min-width:22px; height:22px; padding:0 6px; border-radius:999px; display:grid; place-items:center; font-size:11px; background:var(--panel2); }
.btn.soft { border-color:var(--border); background:var(--surface-soft); }
.danger-soft { color:var(--danger)!important; background:color-mix(in srgb,var(--danger) 10%,transparent)!important; }

/* Projects */
.view-projects { padding-top:30px!important; }
.project-grid-modern { gap:16px!important; }
.project-card-modern { min-height:260px; border-color:var(--border)!important; box-shadow:0 6px 24px rgba(33,61,96,.06)!important; }
.project-card-modern:hover { transform:translateY(-2px); border-color:var(--accent-border)!important; box-shadow:var(--shadow-sm)!important; }
.project-list-modern { border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--panel-solid); }
.project-list-row { min-height:78px; padding:14px 18px!important; border-bottom:1px solid var(--border)!important; }

/* Board */
.view-board { max-width:none; padding-inline:26px; }
.board-page-header { margin:0 0 15px; padding:22px 24px; border-radius:22px; background:var(--panel-solid); box-shadow:none; }
.project-header-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.project-pulse { margin-bottom:14px; border:1px solid var(--border); border-radius:19px; background:var(--panel-solid); box-shadow:none; }
.board-toolbar-modern { position:sticky; top:calc(var(--topbar-height) + 8px); z-index:16; margin-bottom:14px; padding:9px; border:1px solid var(--border); border-radius:17px; background:color-mix(in srgb,var(--panel-solid) 94%,transparent); backdrop-filter:blur(18px); box-shadow:var(--shadow-xs); }
.kanban { gap:13px!important; padding:2px 2px 14px; overflow-x:auto; scroll-snap-type:x proximity; }
.kanban-column { min-width:310px!important; max-width:360px; border:1px solid var(--border)!important; border-radius:18px!important; background:var(--surface-soft)!important; scroll-snap-align:start; }
.kanban-column-head { padding:14px!important; }
.task-card-modern,.task-card { border:1px solid var(--border)!important; border-radius:15px!important; background:var(--panel-solid)!important; box-shadow:0 4px 14px rgba(20,45,78,.05)!important; }
.task-card-modern:hover,.task-card:hover { border-color:var(--accent-border)!important; box-shadow:var(--shadow-xs)!important; }
.task-assignee { white-space:normal!important; }

/* Visual project access */
.access-editor-intro { margin-bottom:15px; padding:14px; border:1px solid var(--accent-border); border-radius:16px; display:flex; align-items:center; gap:12px; background:var(--accent-soft); }
.access-editor-intro>span { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--accent); background:var(--panel-solid); }
.access-editor-intro>div { flex:1; }
.access-editor-intro p { margin:3px 0 0; color:var(--muted); }
.access-grant-list { display:grid; gap:9px; }
.access-grant-row { display:grid; grid-template-columns:150px minmax(180px,1fr) 160px 42px; gap:8px; align-items:center; }
.access-grant-row select { width:100%; }

/* Workflow and editor scrolling */
.modal { overscroll-behavior:contain; scrollbar-gutter:stable; }
.modal-type-workflow,.modal-type-document,.modal-type-company-group,.modal-type-meeting,.modal-type-project-access { max-height:min(92dvh,980px)!important; overflow-y:auto!important; }
.modal-type-workflow .workflow-builder { min-height:0; overflow:visible; }
.modal-type-workflow .visual-builder-panel { min-width:0; }
.modal-type-workflow .workflow-state-card { grid-template-columns:42px minmax(150px,1.25fr) minmax(105px,.75fr) auto auto 42px; }
.modal-type-document .markdown-editor { min-height:42dvh; resize:vertical; }
.modal-actions.sticky { z-index:8; }

/* Chats */
.view-chats { max-width:none; padding:20px 24px 26px; }
.communications-shell { height:calc(100dvh - var(--topbar-height) - 48px); min-height:600px; grid-template-columns:310px minmax(420px,1fr) 290px; border:1px solid var(--border); border-radius:22px; background:var(--panel-solid); box-shadow:none; }
.chat-rooms-panel,.chat-details { background:var(--surface-soft); }
.chat-rooms-panel { border-right:1px solid var(--border); }
.chat-details { border-left:1px solid var(--border); }
.chat-panel-head,.chat-conversation-head { min-height:72px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--panel-solid); }
.chat-room-list { padding:8px; }
.chat-room-list>button { min-height:62px; margin-bottom:4px; padding:9px 10px; border:1px solid transparent; border-radius:13px; }
.chat-room-list>button:hover { background:var(--surface-hover); }
.chat-room-list>button.active { border-color:var(--accent-border); background:var(--accent-soft); }
.chat-head-actions { display:flex; gap:6px; }
.chat-head-actions .icon-button { width:40px; height:40px; border:1px solid var(--border); background:var(--surface-soft); }
.chat-message-scroll { padding:22px clamp(15px,3vw,48px); background:linear-gradient(180deg,var(--canvas),var(--panel-solid)); }
.chat-message { max-width:780px; gap:10px; }
.chat-message>div { padding:11px 13px; border:1px solid var(--border); border-radius:6px 16px 16px 16px; background:var(--panel-solid); box-shadow:none; }
.chat-message.mine { margin-left:auto; flex-direction:row-reverse; }
.chat-message.mine>div { border-radius:16px 6px 16px 16px; border-color:var(--accent-border); background:var(--accent-soft); }
.chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-message-reply { opacity:.65; }
.chat-composer { padding:12px 14px calc(12px + var(--safe-bottom)); border-top:1px solid var(--border); background:var(--panel-solid); }
.chat-composer textarea { min-height:44px; max-height:160px; }

/* Documents */
.knowledge-strip { margin-bottom:16px; padding:14px 16px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; border:1px solid var(--border); border-radius:17px; background:var(--panel-solid); }
.knowledge-strip>div { margin-right:auto; display:grid; }
.knowledge-strip small { color:var(--muted); }
.knowledge-chip { padding:7px 10px; border:1px solid var(--border); border-radius:999px; color:var(--text-soft); background:var(--surface-soft); }
.knowledge-chip span { color:var(--muted); font-size:10px; }
.document-grid-modern { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.document-card-modern { min-height:260px; padding:18px; border:1px solid var(--border); border-radius:19px; display:flex; flex-direction:column; background:var(--panel-solid); box-shadow:none; }
.document-card-modern>header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.document-type-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.document-card-modern h2 { margin:17px 0 7px; font-size:21px; }
.document-card-modern p { flex:1; color:var(--muted); line-height:1.55; }
.document-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:11px; }
.document-card-modern footer { margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; }

/* Company */
.company-summary-grid,.meeting-overview { margin-bottom:16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.company-summary-grid article,.meeting-overview article { min-height:88px; padding:15px; border:1px solid var(--border); border-radius:17px; display:flex; align-items:center; gap:12px; background:var(--panel-solid); }
.company-summary-grid article>span,.meeting-overview article>span { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.company-summary-grid article>div,.meeting-overview article>div { display:grid; }
.company-summary-grid b,.meeting-overview b { font-size:24px; }
.company-summary-grid small,.meeting-overview small { color:var(--muted); }
.member-directory { display:grid; }
.member-directory-row { min-height:74px; padding:12px 4px; border-bottom:1px solid var(--border); display:grid; grid-template-columns:48px minmax(200px,1fr) auto auto; align-items:center; gap:12px; }
.member-directory-row:last-child { border:0; }
.avatar.large { width:44px; height:44px; }
.member-directory-main { display:grid; gap:2px; }
.member-directory-main small,.member-directory-main span { color:var(--muted); font-size:11px; }
.member-directory-meta { display:flex; align-items:center; gap:8px; }
.member-directory-actions { display:flex; align-items:center; gap:7px; }
.group-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.company-group-card { min-height:245px; padding:17px; border:1px solid var(--border); border-radius:18px; display:flex; flex-direction:column; background:var(--panel-solid); }
.company-group-card header { display:flex; align-items:center; gap:11px; }
.company-group-card header>div { flex:1; }
.company-group-card h3 { margin:0; }
.company-group-card p { flex:1; color:var(--muted); }
.group-color { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; }
.group-member-stack { display:flex; padding:8px 0; }
.group-member-stack .avatar { margin-right:-7px; border:2px solid var(--panel-solid); }
.company-group-card>small { color:var(--muted); }
.company-group-card footer { margin-top:13px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:11px; }
.link-danger { margin-left:auto; border:0; color:var(--danger); background:transparent; cursor:pointer; }
.invite-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.invite-card { padding:14px; border:1px solid var(--border); border-radius:15px; display:flex; align-items:center; gap:12px; }
.invite-card>span { color:var(--accent); }
.invite-card>div { display:grid; }
.invite-card small,.invite-card em { color:var(--muted); font-size:11px; }
.member-choice-grid { max-height:280px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.member-choice { padding:9px; border:1px solid var(--border); border-radius:13px; display:flex; align-items:center; gap:9px; cursor:pointer; }
.member-choice input { position:absolute; opacity:0; }
.member-choice.active { border-color:var(--accent-border); background:var(--accent-soft); }
.member-choice>span:last-child { min-width:0; display:grid; }
.member-choice small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.group-editor-section { margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:16px; }
.group-editor-section>header { margin-bottom:10px; display:flex; justify-content:space-between; gap:12px; }
.group-editor-section>header div { display:grid; }
.group-editor-section>header small { color:var(--muted); }

/* Meetings */
.meeting-overview { grid-template-columns:repeat(3,minmax(0,1fr)); }
.meeting-list { display:grid; gap:11px; }
.meeting-card { padding:16px; border:1px solid var(--border); border-radius:19px; display:grid; grid-template-columns:84px minmax(0,1fr) 170px; gap:17px; background:var(--panel-solid); }
.meeting-card.live { border-color:color-mix(in srgb,var(--success) 50%,var(--border)); }
.meeting-date { padding:10px; border-radius:14px; display:grid; align-content:center; text-align:center; background:var(--surface-soft); }
.meeting-date b { font-size:18px; }
.meeting-date span { color:var(--accent); font-weight:900; }
.meeting-main h2 { margin:8px 0 5px; font-size:21px; }
.meeting-main p { margin:0 0 10px; color:var(--muted); }
.meeting-details { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:12px; }
.meeting-details span { display:flex; align-items:center; gap:5px; }
.meeting-agenda-preview { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.meeting-agenda-preview b { width:100%; font-size:11px; }
.meeting-agenda-preview span { padding:5px 8px; border-radius:9px; font-size:11px; background:var(--surface-soft); }
.meeting-card>aside { display:grid; align-content:center; gap:7px; }
.meeting-avatars { display:flex; justify-content:flex-end; }
.meeting-avatars .avatar { margin-left:-7px; border:2px solid var(--panel-solid); }
.meeting-agenda { min-height:130px; }

/* Account */
.account-hero-card { margin-bottom:16px; padding:22px; border:1px solid var(--border); border-radius:22px; display:grid; grid-template-columns:82px minmax(0,1fr) 250px; gap:18px; align-items:center; background:linear-gradient(135deg,var(--panel-solid),var(--accent-soft)); }
.account-avatar { width:78px; height:78px; border-radius:24px; display:grid; place-items:center; color:#fff; font-size:25px; font-weight:900; background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.account-hero-card h2 { margin:8px 0 4px; font-size:28px; }
.account-hero-card p,.account-hero-card small { color:var(--muted); }
.account-theme-card { padding:10px; border:1px solid var(--border); border-radius:15px; background:var(--panel-solid); }
.account-theme-card>small { display:block; margin:0 0 6px 5px; }
.account-theme-card button { width:100%; padding:9px; border:0; border-radius:11px; display:flex; align-items:center; gap:10px; text-align:left; color:var(--text); background:var(--surface-soft); cursor:pointer; }
.account-theme-card button span { display:grid; }
.account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.account-panel { min-height:220px; padding:18px; border:1px solid var(--border); border-radius:18px; display:flex; gap:13px; background:var(--panel-solid); }
.account-panel>span { width:42px; height:42px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.account-panel h3 { margin:0 0 8px; }
.account-panel p { color:var(--muted); line-height:1.55; }
.security-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.security-option-grid article { padding:15px; border:1px solid var(--border); border-radius:15px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:11px; }
.security-option-grid p { margin:3px 0 0; color:var(--muted); }
.notification-setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.notification-setting-grid label { padding:14px; border:1px solid var(--border); border-radius:15px; display:flex; gap:10px; cursor:pointer; }
.notification-setting-grid label span { display:grid; }
.notification-setting-grid small { color:var(--muted); }
.session-row { padding:13px 4px; border-bottom:1px solid var(--border); display:grid; grid-template-columns:42px 1fr auto auto; align-items:center; gap:10px; }
.session-row>span:first-child { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.session-row>div { display:grid; }
.session-row small { color:var(--muted); }

@media (max-width: 1200px) {
  .document-grid-modern,.group-card-grid,.account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .communications-shell { grid-template-columns:280px minmax(0,1fr); }
  .chat-details { display:none; }
  .meeting-card { grid-template-columns:76px minmax(0,1fr) 150px; }
}
@media (max-width: 900px) {
  .view-board,.view-chats { padding-inline:16px; }
  .company-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-directory-row { grid-template-columns:44px 1fr auto; }
  .member-directory-actions { grid-column:2/-1; }
  .access-grant-row { grid-template-columns:1fr 1fr; }
  .access-grant-row .icon-button { justify-self:end; }
  .meeting-card { grid-template-columns:70px minmax(0,1fr); }
  .meeting-card>aside { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-hero-card { grid-template-columns:72px 1fr; }
  .account-theme-card { grid-column:1/-1; }
  .workflow-state-card { grid-template-columns:36px 1fr!important; }
}
@media (max-width: 720px) {
  .client-page-head,.projects-page-head { padding-top:0!important; }
  .client-page-head h1,.projects-page-head h1 { font-size:32px; }
  .client-page-head .actions { width:100%; }
  .client-page-head .actions .btn,.client-page-head>button { flex:1; }
  .document-grid-modern,.group-card-grid,.account-grid,.invite-grid,.security-option-grid,.notification-setting-grid { grid-template-columns:1fr; }
  .company-summary-grid,.meeting-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-directory-row { grid-template-columns:42px 1fr; }
  .member-directory-meta,.member-directory-actions { grid-column:2; justify-content:flex-start; }
  .member-choice-grid { grid-template-columns:1fr; }
  .meeting-card { grid-template-columns:1fr; }
  .meeting-date { grid-template-columns:auto auto; justify-content:start; gap:8px; text-align:left; }
  .meeting-card>aside { grid-column:1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .meeting-avatars { grid-column:1/-1; justify-content:flex-start; }
  .account-hero-card { padding:17px; grid-template-columns:58px 1fr; }
  .account-avatar { width:58px; height:58px; border-radius:18px; font-size:19px; }
  .account-hero-card h2 { font-size:23px; }
  .session-row { grid-template-columns:40px 1fr auto; }
  .communications-shell { height:calc(100dvh - var(--topbar-height) - var(--dock-height) - 18px); min-height:0; border-radius:17px; }
  .chat-conversation { height:100%; }
  .chat-message-scroll { padding:14px 10px; }
  .chat-message { max-width:92%; }
  .chat-composer { padding:9px; }
  .modal-type-workflow,.modal-type-document,.modal-type-company-group,.modal-type-meeting,.modal-type-project-access { width:100%!important; max-height:94dvh!important; border-radius:22px 22px 0 0!important; }
}