/* ============================================================
 Collections Extensions — Stage 0, CEO, Approvals, Projects, Companies, Attachments
 Matches Hwadi RTL design system
 ============================================================ */

/* Sidebar extension links */
.side-nav-ext .side-link-ext {
 cursor: pointer;
}
.side-nav-ext .side-link-ext.is-active {
 background: var(--accent-soft);
 color: var(--accent);
}
.ext-pill {
 display: inline-block; min-width: 16px; padding: 0 6px;
 margin-right: 4px; font-size: 10px; line-height: 16px;
 background: var(--accent); color: #fff;
 border-radius: 9px; font-weight: 600; text-align: center;
}

/* Extended views */
.ext-view {
 background: var(--bg);
 padding: 24px;
 margin: 0 -8px;
 border-radius: 12px;
 border: 1px solid var(--border);
}
.ext-head {
 margin-bottom: 20px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--border);
}
.ext-head h2 {
 margin: 0 0 4px;
 font-size: 22px;
 font-weight: 700;
 color: var(--ink);
}
.ext-head p {
 margin: 0;
 color: var(--ink-3);
 font-size: 13px;
}
.ext-section-title {
 font-size: 15px;
 margin: 24px 0 10px;
 color: var(--ink);
 font-weight: 600;
}

/* Toolbar */
.ext-toolbar {
 display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
 margin-top: 14px;
}
.ext-toolbar .ext-spacer { flex: 1; }
.ext-input {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 8px 12px;
 font-family: inherit;
 font-size: 13px;
 color: var(--ink);
 min-width: 200px;
}
.ext-input:focus {
 outline: none;
 border-color: var(--accent);
}

/* KPIs */
.ext-kpis {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 10px;
 margin-bottom: 18px;
}
.ext-kpi {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 14px;
}
.ext-kpi .l {
 font-size: 11px;
 color: var(--ink-3);
 margin-bottom: 6px;
 font-weight: 500;
}
.ext-kpi .v {
 font-size: 22px;
 font-weight: 800;
 color: var(--ink);
}
.ext-kpi .v small {
 font-size: 11px;
 font-weight: 400;
 color: var(--ink-3);
 margin-right: 4px;
}
.ext-kpi.green .v { color: #15803d; }
.ext-kpi.red .v { color: #b91c1c; }
.ext-kpi.amber .v { color: #b45309; }
.ext-kpi.blue .v { color: #1d4ed8; }

/* Kanban Board */
.ext-board {
 display: flex;
 gap: 12px;
 overflow-x: auto;
 padding-bottom: 18px;
 min-height: 480px;
}
.ext-col {
 flex: 0 0 280px;
 min-height: 400px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 12px;
}
.ext-col.drag-over {
 border-color: var(--accent);
 background: var(--accent-soft);
}
.ext-col-head {
 display: flex;
 justify-content: space-between;
 align-items: start;
 padding: 4px 0 12px;
 border-bottom: 1px solid var(--border);
 margin-bottom: 10px;
}
.ext-col-head .title {
 font-size: 13px;
 font-weight: 700;
 color: var(--ink);
}
.ext-col-head .amt {
 font-size: 10px;
 color: var(--ink-3);
 margin-top: 3px;
 font-family: 'IBM Plex Mono', monospace;
}
.ext-col-head .count {
 background: var(--ink);
 color: var(--bg);
 padding: 2px 9px;
 border-radius: 10px;
 font-size: 11px;
 font-weight: 700;
}

/* Stage colors */
.ext-col[data-stage="stage0"] { border-top: 4px solid #6b7280; }
.ext-col[data-stage="day1"] { border-top: 4px solid #3b82f6; }
.ext-col[data-stage="day2"] { border-top: 4px solid #2563eb; }
.ext-col[data-stage="day3"] { border-top: 4px solid #d97706; }
.ext-col[data-stage="day4"] { border-top: 4px solid #ea580c; }
.ext-col[data-stage="day5"] { border-top: 4px solid #dc2626; }
.ext-col[data-stage="reconciliation"] { border-top: 4px solid #9333ea; }
.ext-col[data-stage="legal_notice"] { border-top: 4px solid #991b1b; }
.ext-col[data-stage="paid"] { border-top: 4px solid #15803d; }
.ext-col[data-stage="legal"] { border-top: 4px solid #450a0a; }

/* Card */
.ext-card {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 11px;
 margin-bottom: 8px;
 cursor: grab;
 position: relative;
 transition: all 0.12s;
}
.ext-card:hover {
 border-color: var(--accent);
 transform: translateY(-1px);
 box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ext-card:active { cursor: grabbing; }
.ext-card.dragging { opacity: 0.5; transform: rotate(1deg); }
.ext-card.has-pending { border-left: 4px solid #f59e0b; }
.ext-card.selected {
 border-color: var(--accent);
 box-shadow: 0 0 0 2px var(--accent-soft);
}
.ext-card .row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 4px;
}
.ext-card .name { font-weight: 700; font-size: 13px; color: var(--ink); }
.ext-card .num {
 font-family: 'IBM Plex Mono', monospace;
 font-size: 10px;
 color: var(--ink-3);
 background: var(--bg);
 border: 1px solid var(--border);
 padding: 1px 6px;
 border-radius: 6px;
}
.ext-card .amt {
 font-family: 'IBM Plex Mono', monospace;
 font-size: 14px;
 font-weight: 700;
 color: var(--accent);
}
.ext-card .meta { font-size: 11px; color: var(--ink-3); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ext-card .meta .pill {
 background: var(--border);
 padding: 1px 7px;
 border-radius: 6px;
 font-size: 10px;
}
.ext-card .pending-badge {
 position: absolute;
 top: 8px;
 left: 8px;
 background: #f59e0b;
 color: #fff;
 font-size: 9px;
 padding: 1px 6px;
 border-radius: 8px;
 font-weight: 700;
}
.ext-card .day-badge {
 display: inline-block;
 background: rgba(59, 130, 246, 0.15);
 color: #1d4ed8;
 padding: 1px 6px;
 border-radius: 6px;
 font-size: 10px;
 font-weight: 700;
}
.ext-card .day-badge.overdue {
 background: rgba(220, 38, 38, 0.15);
 color: #b91c1c;
}
.ext-card.sel-mode { padding-right: 30px; }
.ext-card .sel-box {
 position: absolute;
 top: 10px;
 right: 10px;
 width: 16px;
 height: 16px;
 border: 1px solid var(--border-2);
 border-radius: 4px;
 background: var(--bg);
 display: none;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: bold;
}
.ext-card.sel-mode .sel-box { display: flex; }
.ext-card.selected .sel-box {
 background: var(--accent);
 color: #fff;
 border-color: var(--accent);
}
.ext-card.selected .sel-box::after { content: ''; }

/* Modal (compatible with existing .modal pattern but extended) */
.ext-modal-bg {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 9999;
 backdrop-filter: blur(2px);
}
.ext-modal-bg.show { display: flex; }
.ext-modal {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 16px;
 width: 92vw;
 max-width: 720px;
 max-height: 90vh;
 overflow-y: auto;
 padding: 24px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ext-modal.wide { max-width: 980px; }
.ext-modal h2 {
 margin: 0 0 6px;
 font-size: 18px;
 color: var(--ink);
 font-weight: 700;
}
.ext-modal .sub {
 color: var(--ink-3);
 font-size: 12px;
 margin-bottom: 18px;
}
.ext-modal .field { margin-bottom: 12px; }
.ext-modal .field > label {
 display: block;
 font-size: 11px;
 color: var(--ink-3);
 margin-bottom: 5px;
 font-weight: 600;
}
.ext-modal .field input,
.ext-modal .field select,
.ext-modal .field textarea {
 width: 100%;
 box-sizing: border-box;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 9px 11px;
 color: var(--ink);
 font-family: inherit;
 font-size: 13px;
}
.ext-modal .field textarea {
 min-height: 70px;
 resize: vertical;
}
.ext-modal .field input:focus,
.ext-modal .field select:focus,
.ext-modal .field textarea:focus {
 outline: none;
 border-color: var(--accent);
}
.ext-modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ext-modal .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ext-modal .actions {
 display: flex;
 gap: 10px;
 justify-content: flex-end;
 margin-top: 20px;
 padding-top: 16px;
 border-top: 1px solid var(--border);
}
.ext-modal .actions button {
 padding: 9px 20px;
 border-radius: 8px;
 cursor: pointer;
 font-family: inherit;
 font-size: 13px;
 font-weight: 700;
 border: 1px solid var(--border);
 background: var(--bg);
 color: var(--ink);
}
.ext-modal .actions .save {
 background: var(--accent);
 color: #fff;
 border-color: var(--accent);
}
.ext-modal .actions .danger {
 background: #dc2626;
 color: #fff;
 border-color: #dc2626;
}

/* Modal sub-tabs */
.ext-modal-tabs {
 display: flex;
 gap: 4px;
 border-bottom: 1px solid var(--border);
 margin: -24px -24px 18px;
 padding: 0 24px;
 flex-wrap: wrap;
}
.ext-modal-tabs button {
 background: transparent;
 color: var(--ink-3);
 border: none;
 padding: 12px 14px;
 cursor: pointer;
 font-size: 12px;
 border-bottom: 2px solid transparent;
 font-family: inherit;
 font-weight: 600;
}
.ext-modal-tabs button.active {
 color: var(--accent);
 border-bottom-color: var(--accent);
}
.ext-modal-tab { display: none; }
.ext-modal-tab.active { display: block; }

/* Chips */
.ext-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}
.ext-chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 18px;
 cursor: pointer;
 font-size: 12px;
 user-select: none;
 transition: all 0.12s;
 color: var(--ink);
}
.ext-chip:hover { border-color: var(--accent); }
.ext-chip.selected {
 background: var(--accent);
 color: #fff;
 border-color: var(--accent);
 font-weight: 700;
}

/* Approval cards */
.ext-approval {
 background: var(--bg);
 border: 1px solid #f59e0b;
 border-radius: 12px;
 padding: 16px;
 margin-bottom: 12px;
}
.ext-approval.approved { border-color: #15803d; opacity: 0.65; }
.ext-approval.rejected { border-color: #b91c1c; opacity: 0.65; }
.ext-approval .head {
 display: flex;
 justify-content: space-between;
 margin-bottom: 10px;
}
.ext-approval .act {
 font-weight: 700;
 color: var(--ink);
 font-size: 14px;
}
.ext-approval .when {
 font-size: 11px;
 color: var(--ink-3);
}
.ext-approval .body {
 background: var(--border);
 padding: 10px;
 border-radius: 8px;
 font-size: 12px;
}
.ext-approval .body pre {
 white-space: pre-wrap;
 font-family: 'IBM Plex Mono', monospace;
 font-size: 11px;
 margin: 0;
 max-height: 200px;
 overflow-y: auto;
}
.ext-approval .acts {
 display: flex;
 gap: 8px;
 margin-top: 12px;
}
.ext-approval .acts button {
 padding: 8px 18px;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 700;
 font-size: 12px;
 font-family: inherit;
}
.ext-approval .acts .ok { background: #15803d; color: #fff; }
.ext-approval .acts .no { background: #b91c1c; color: #fff; }

/* Performance / Table cards */
.ext-card-row {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 14px;
 margin-bottom: 10px;
}
.ext-card-row .top {
 display: flex;
 justify-content: space-between;
 align-items: start;
}
.ext-card-row .name {
 font-weight: 700;
 color: var(--ink);
 font-size: 14px;
}
.ext-card-row .meta {
 color: var(--ink-3);
 font-size: 12px;
 margin-top: 3px;
}
.ext-card-row .info-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
 margin-top: 12px;
 font-size: 12px;
}
.ext-card-row .info-grid > div {
 border-right: 1px solid var(--border);
 padding-right: 10px;
}
.ext-card-row .info-grid > div span {
 display: block;
 color: var(--ink-3);
 font-size: 10px;
 margin-bottom: 2px;
}

.ext-perf-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 13px;
}
.ext-perf-table th,
.ext-perf-table td {
 padding: 10px;
 text-align: right;
 border-bottom: 1px solid var(--border);
}
.ext-perf-table th {
 background: var(--border);
 color: var(--ink-3);
 font-size: 11px;
 font-weight: 600;
}
.ext-perf-table .bar {
 display: inline-block;
 height: 6px;
 background: var(--border);
 border-radius: 3px;
 vertical-align: middle;
 margin-right: 8px;
 width: 80px;
 overflow: hidden;
}
.ext-perf-table .bar-fill {
 display: block;
 height: 100%;
 background: linear-gradient(90deg, #d97706, #15803d);
}

/* Stage chart */
.ext-stage-chart {
 display: flex;
 height: 32px;
 border-radius: 8px;
 overflow: hidden;
 margin: 14px 0;
}
.ext-stage-chart .seg {
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 color: #fff;
 min-width: 30px;
 font-weight: 600;
}

/* Drop zone */
.ext-drop-zone {
 border: 2px dashed var(--border-2);
 border-radius: 12px;
 padding: 40px 20px;
 text-align: center;
 color: var(--ink-3);
 font-size: 14px;
 cursor: pointer;
 transition: all 0.15s;
}
.ext-drop-zone:hover,
.ext-drop-zone.dragging {
 border-color: var(--accent);
 background: var(--accent-soft);
 color: var(--ink);
}

/* Attach list */
.ext-attach-list {
 display: grid;
 gap: 8px;
 margin-top: 18px;
}
.ext-attach-item {
 display: flex;
 gap: 12px;
 padding: 12px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 10px;
 align-items: center;
}
.ext-attach-item .ico {
 width: 38px;
 height: 38px;
 background: var(--border);
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
}
.ext-attach-item .body {
 flex: 1;
 min-width: 0;
}
.ext-attach-item .name {
 font-weight: 600;
 font-size: 13px;
 color: var(--ink);
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
.ext-attach-item .meta {
 font-size: 11px;
 color: var(--ink-3);
 margin-top: 3px;
}
.ext-attach-item .actions {
 display: flex;
 gap: 6px;
}
.ext-attach-item .actions button {
 padding: 4px 10px;
 font-size: 11px;
 border-radius: 6px;
 border: 1px solid var(--border);
 cursor: pointer;
 background: var(--bg);
 color: var(--ink);
 font-family: inherit;
}
.ext-attach-item .actions button:hover {
 border-color: var(--accent);
 background: var(--accent-soft);
}

/* Action history */
.ext-actions-list {
 max-height: 340px;
 overflow-y: auto;
 padding-right: 4px;
}
.ext-action-item {
 display: flex;
 gap: 12px;
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
 font-size: 12px;
}
.ext-action-item:last-child { border: none; }
.ext-action-item .ico {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--border);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-size: 13px;
}
.ext-action-item .body { flex: 1; }
.ext-action-item .body .top {
 display: flex;
 justify-content: space-between;
}
.ext-action-item .body .typ {
 font-weight: 700;
 color: var(--ink);
}
.ext-action-item .body .when {
 color: var(--ink-3);
 font-size: 10px;
}
.ext-action-item .body .note {
 color: var(--ink-3);
 margin-top: 3px;
}

/* Bulk bar */
.ext-bulk-bar {
 position: fixed;
 bottom: 24px;
 left: 50%;
 transform: translateX(-50%);
 background: var(--ink);
 color: var(--bg);
 padding: 14px 24px;
 border-radius: 32px;
 display: flex;
 gap: 14px;
 align-items: center;
 box-shadow: 0 12px 36px rgba(0,0,0,0.25);
 z-index: 9000;
}
.ext-bulk-bar[hidden] { display: none; }
.ext-bulk-bar button {
 background: var(--accent);
 color: #fff;
 border: none;
 border-radius: 18px;
 padding: 7px 16px;
}

/* Empty */
.ext-empty {
 text-align: center;
 padding: 50px 20px;
 color: var(--ink-3);
 font-size: 13px;
}

/* Mini buttons */
.ext-btn-mini {
 background: var(--bg);
 border: 1px solid var(--border);
 color: var(--ink);
 padding: 4px 10px;
 border-radius: 6px;
 font-size: 11px;
 cursor: pointer;
 font-family: inherit;
}
.ext-btn-mini:hover {
 border-color: var(--accent);
 background: var(--accent-soft);
}
.ext-btn-mini.danger { color: #b91c1c; }
.ext-btn-mini.danger:hover {
 background: rgba(220, 38, 38, 0.1);
 border-color: #b91c1c;
}

/* When extended view active, hide widget grid + KPI strip + hero */
body.ext-active .hero,
body.ext-active .kpi-strip,
body.ext-active #widgetGrid,
body.ext-active .hidden-tray { display: none !important; }

/* One-page scroll mode — show all ext sections continuously */
body.one-page-mode .ext-view {
 display: block !important;
 margin-bottom: 32px;
 scroll-margin-top: 80px;
}
body.one-page-mode .ext-view[hidden] { display: block !important; }
body.one-page-mode .ext-view .ext-head h2 {
 position: sticky;
 top: 0;
 background: var(--bg);
 padding: 12px 0;
 z-index: 5;
 border-bottom: 1px solid var(--border);
}

/* Side-link active state pop */
.side-link-ext.is-active svg { color: var(--accent); }

/* ====== COMPANY SIDE PANEL ====== */
.ext-side-panel {
 position: fixed;
 top: 0;
 right: -480px;
 width: 460px;
 max-width: 92vw;
 height: 100vh;
 background: var(--bg);
 border-left: 1px solid var(--border);
 box-shadow: -4px 0 30px rgba(0,0,0,0.15);
 z-index: 9500;
 overflow-y: auto;
 transition: right 0.25s ease;
 display: flex;
 flex-direction: column;
}
.ext-side-panel[hidden] { display: none; }
.ext-side-panel.open { right: 0; }
.ext-side-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 14px 18px;
 border-bottom: 1px solid var(--border);
 background: var(--bg);
 position: sticky;
 top: 0;
 z-index: 1;
}
.ext-side-head h3 {
 margin: 0;
 font-size: 16px;
 color: var(--ink);
 font-weight: 700;
}
.ext-side-close {
 background: transparent;
 border: 1px solid var(--border);
 border-radius: 50%;
 width: 30px;
 height: 30px;
 cursor: pointer;
 font-size: 18px;
 color: var(--ink-3);
}
.ext-side-close:hover {
 border-color: #b91c1c;
 color: #b91c1c;
}
.ext-side-body {
 padding: 18px;
 flex: 1;
}

/* Drag-over state for original kanban */
.kan-col.drag-over {
 background: var(--accent-soft);
 border: 1px dashed var(--accent);
}
.kan-card.dragging {
 opacity: 0.5;
 transform: rotate(1deg);
}
.kan-card[draggable="true"] {
 cursor: grab;
}
.kan-card[draggable="true"]:active {
 cursor: grabbing;
}

/* Help icon */
.ext-help-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: var(--accent-soft);
 color: var(--accent);
 border: 1px solid var(--accent);
 font-size: 11px;
 font-weight: bold;
 cursor: help;
 margin-right: 6px;
 vertical-align: middle;
 font-family: inherit;
}
.ext-help-btn:hover {
 background: var(--accent);
 color: #fff;
}
body.help-disabled .ext-help-btn { display: none !important; }

/* Help tooltip popover */
.ext-help-tip {
 position: absolute;
 background: var(--ink);
 color: var(--bg);
 padding: 10px 14px;
 border-radius: 8px;
 font-size: 12px;
 max-width: 280px;
 z-index: 10000;
 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
 line-height: 1.5;
}
.ext-help-tip::before {
 content: '';
 position: absolute;
 bottom: -6px;
 right: 14px;
 border: 6px solid transparent;
 border-top-color: var(--ink);
 border-bottom: 0;
}

/* Help overlay (first-visit tour) */
.ext-help-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.6);
 z-index: 10001;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
}
.ext-help-overlay[hidden] { display: none; }
.ext-help-card {
 background: var(--bg);
 border-radius: 16px;
 padding: 28px;
 max-width: 540px;
 width: 100%;
 box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ext-help-card h3 { margin: 0 0 12px; color: var(--ink); }
.ext-help-card p { line-height: 1.7; color: var(--ink-2); }

/* Login */
.ext-login-bg {
 position: fixed;
 inset: 0;
 background: var(--bg);
 z-index: 10002;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
}
.ext-login-bg[hidden] { display: none; }
.ext-login-card {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 32px;
 max-width: 380px;
 width: 100%;
 box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.ext-login-card h2 { margin: 0 0 6px; color: var(--ink); }
.ext-login-card .field { margin-bottom: 14px; }
.ext-login-card .field label {
 display: block;
 font-size: 11px;
 color: var(--ink-3);
 margin-bottom: 4px;
}
.ext-login-card .field input {
 width: 100%;
 box-sizing: border-box;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px 12px;
 font-size: 13px;
 color: var(--ink);
}

/* Suggestion card */
.ext-sugg-item {
 background: var(--bg);
 border: 1px solid var(--border);
 border-right: 4px solid var(--accent);
 border-radius: 8px;
 padding: 14px;
 margin-bottom: 10px;
}
.ext-sugg-item.for-claude { border-right-color: #9333ea; }
.ext-sugg-item.done { opacity: 0.6; border-right-color: #15803d; }
.ext-sugg-item .head {
 display: flex;
 justify-content: space-between;
 margin-bottom: 8px;
}
.ext-sugg-item .author {
 font-weight: 700;
 color: var(--ink);
 font-size: 13px;
}
.ext-sugg-item .meta { font-size: 11px; color: var(--ink-3); }
.ext-sugg-item .text {
 background: var(--border);
 padding: 10px;
 border-radius: 6px;
 font-size: 13px;
 color: var(--ink);
 line-height: 1.5;
 white-space: pre-wrap;
}
.ext-sugg-item .actions { display: flex; gap: 6px; margin-top: 10px; }

/* Notification bell */
.ext-notif-bell {
 position: relative;
 background: transparent;
 border: 1px solid var(--border);
 border-radius: 50%;
 width: 36px;
 height: 36px;
 cursor: pointer;
 font-size: 16px;
 margin: 0 8px;
}
.ext-notif-bell .dot {
 position: absolute;
 top: -4px;
 right: -4px;
 background: #b91c1c;
 color: #fff;
 font-size: 9px;
 font-weight: bold;
 padding: 1px 5px;
 border-radius: 9px;
 min-width: 16px;
}

/* Notification dropdown */
.ext-notif-dropdown {
 position: absolute;
 top: 50px;
 left: 20px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 12px;
 box-shadow: 0 10px 40px rgba(0,0,0,0.15);
 width: 360px;
 max-height: 480px;
 overflow-y: auto;
 z-index: 9000;
 padding: 8px;
}
.ext-notif-dropdown[hidden] { display: none; }
.ext-notif-row {
 padding: 10px;
 border-bottom: 1px solid var(--border);
 font-size: 12px;
 cursor: pointer;
}
.ext-notif-row:hover { background: var(--accent-soft); }
.ext-notif-row.unread { background: rgba(251, 146, 60, 0.06); }

/* Mobile */
@media (max-width: 768px) {
 .sidebar { transform: translateX(100%); transition: transform 0.25s; position: fixed; height: 100vh; z-index: 100; }
 .sidebar.open { transform: translateX(0); }
 .ext-side-panel { width: 100vw; }
 .ext-board { flex-direction: column; }
 .ext-col { flex: none; width: 100%; }
}

/* Sidebar mobile toggle */
.sidebar-mobile-toggle {
 display: none;
 background: var(--ink);
 color: var(--bg);
 border: none;
 border-radius: 8px;
 padding: 6px 10px;
 margin: 0 8px;
 cursor: pointer;
}
@media (max-width: 768px) {
 .sidebar-mobile-toggle { display: inline-flex; }
}

/* Multi-select on kanban */
body.kan-multi-mode .kan-card {
 position: relative;
}
body.kan-multi-mode .kan-card[draggable="true"] {
 cursor: pointer;
}
body.kan-multi-mode .kan-card[draggable="true"][data-id] {
 pointer-events: auto;
}
.kan-card.multi-selected {
 outline: 3px solid var(--accent);
 outline-offset: 2px;
 background: var(--accent-soft);
}
body.kan-multi-mode .kan-card::after {
 content: '';
 position: absolute;
 top: 6px;
 right: 6px;
 width: 16px;
 height: 16px;
 border: 2px solid var(--border-2);
 border-radius: 4px;
 background: var(--bg);
}
body.kan-multi-mode .kan-card.multi-selected::after {
 background: var(--accent);
 border-color: var(--accent);
 content: '';
 color: #fff;
 text-align: center;
 font-size: 11px;
 line-height: 14px;
 font-weight: bold;
}

/* Clickable company link */
[data-company-link] {
 cursor: pointer !important;
 text-decoration-line: underline;
 text-decoration-style: dotted;
 text-decoration-color: var(--accent);
 text-underline-offset: 3px;
}
[data-company-link]:hover {
 color: var(--accent);
}

/* ====== MODERN KPI PAGE ====== */
.kpi-gradient-row {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 14px;
 margin-bottom: 18px;
}
.kpi-grad-card {
 background: linear-gradient(135deg, var(--from), var(--to));
 color: #fff;
 padding: 18px;
 border-radius: 14px;
 box-shadow: 0 6px 20px rgba(0,0,0,0.08);
 position: relative;
 overflow: hidden;
}
.kpi-grad-card::before {
 content: '';
 position: absolute;
 top: -30px;
 left: -30px;
 width: 120px;
 height: 120px;
 background: rgba(255,255,255,0.1);
 border-radius: 50%;
}
.kpi-grad-blue { --from: #3b82f6; --to: #1d4ed8; }
.kpi-grad-green { --from: #15803d; --to: #166534; }
.kpi-grad-amber { --from: #f59e0b; --to: #b45309; }
.kpi-grad-red { --from: #dc2626; --to: #991b1b; }
.kpi-grad-label {
 font-size: 12px;
 opacity: 0.92;
 font-weight: 600;
 margin-bottom: 8px;
 display: flex;
 align-items: center;
 gap: 6px;
}
.kpi-grad-value {
 font-size: 28px;
 font-weight: 800;
 line-height: 1;
 margin-bottom: 8px;
}
.kpi-grad-value small { font-size: 13px; opacity: 0.8; }
.kpi-grad-spark { margin-top: 8px; }
.kpi-grad-meta { font-size: 11px; opacity: 0.85; margin-top: 4px; }
.kpi-grad-card .ext-help-btn {
 background: rgba(255,255,255,0.25);
 color: #fff;
 border-color: rgba(255,255,255,0.5);
}

/* 2-col layout */
.kpi-2col {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 margin-bottom: 14px;
}
@media (max-width: 900px) {
 .kpi-2col { grid-template-columns: 1fr; }
}

/* Per-person cards */
.kpi-team-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 12px;
}
.kpi-person-card {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 16px;
 cursor: pointer;
 transition: all 0.15s;
}
.kpi-person-card:hover {
 border-color: var(--accent);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.kpi-person-head {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 14px;
}
.kpi-person-avatar {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--accent), #b45309);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 18px;
}
.kpi-person-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.kpi-person-role { color: var(--ink-3); font-size: 11px; }
.kpi-person-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.kpi-person-stats > div { text-align: center; }
.kpi-person-stats .lbl { font-size: 10px; color: var(--ink-3); }
.kpi-person-stats .val { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 3px; }

/* Combined widget tabs */
.combined-tabs {
 display: flex;
 border-bottom: 1px solid var(--border);
 background: var(--bg);
}
.combined-tab {
 flex: 1;
 padding: 10px;
 background: transparent;
 border: none;
 cursor: pointer;
 font-family: inherit;
 font-size: 13px;
 color: var(--ink-3);
 border-bottom: 2px solid transparent;
}
.combined-tab.active {
 color: var(--accent);
 border-bottom-color: var(--accent);
 font-weight: 700;
}
.combined-body {
 padding: 12px;
 max-height: 320px;
 overflow-y: auto;
}

/* ============ USER BADGE (top-right) ============ */
.user-badge {
 position: relative;
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 4px 10px 4px 4px;
 background: var(--surface, #fff);
 border: 1px solid var(--border, #e5e1d8);
 border-radius: 999px;
 cursor: pointer;
 user-select: none;
 transition: all .15s ease;
 margin-inline-start: 6px;
}
.user-badge:hover { background: var(--surface-2, #f7f5f0); border-color: var(--accent, #c2410c); }
.user-badge-avatar {
 width: 28px; height: 28px;
 border-radius: 50%;
 background: var(--accent, #c2410c);
 color: #fff;
 display: flex; align-items: center; justify-content: center;
 font-weight: 700; font-size: 13px;
 flex-shrink: 0;
}
.user-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.user-badge-name { font-size: 13px; font-weight: 700; color: var(--ink-1, #1a1611); }
.user-badge-role { font-size: 10px; color: var(--ink-3, #908a7e); margin-top: 1px; }
.user-badge-menu {
 position: absolute;
 top: calc(100% + 6px);
 inset-inline-end: 0;
 min-width: 160px;
 background: var(--surface, #fff);
 border: 1px solid var(--border, #e5e1d8);
 border-radius: 8px;
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 padding: 6px;
 z-index: 1000;
}
.user-badge-menu-item {
 display: block; width: 100%;
 padding: 8px 12px;
 background: transparent;
 border: none;
 text-align: start;
 cursor: pointer;
 border-radius: 6px;
 font-family: inherit; font-size: 13px;
 color: var(--ink-1, #1a1611);
}
.user-badge-menu-item:hover { background: var(--surface-2, #f7f5f0); }

/* ============ PERMISSIONS PANEL (Settings) ============ */
.perms-panel { padding: 16px; }
.perms-panel h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.perms-panel .perms-help {
 background: var(--surface-2, #f7f5f0);
 border-inline-start: 3px solid var(--accent, #c2410c);
 padding: 10px 12px;
 border-radius: 6px;
 font-size: 13px; color: var(--ink-2, #4a4639);
 margin-bottom: 14px;
}
.perms-table { width: 100%; border-collapse: collapse; }
.perms-table th, .perms-table td {
 padding: 10px 8px; text-align: start;
 border-bottom: 1px solid var(--border, #e5e1d8);
 font-size: 13px;
}
.perms-table th { font-weight: 700; color: var(--ink-2, #4a4639); background: var(--surface-2, #f7f5f0); }
.perms-table .name-col { font-weight: 600; }
.perms-table .role-pill {
 display: inline-block; padding: 2px 10px;
 background: var(--accent-tint, #fef3ec); color: var(--accent, #c2410c);
 border-radius: 999px; font-size: 11px; font-weight: 700;
}
.perms-table .role-pill.collector { background: #eef6f1; color: #2d6a4f; }
.perms-table .role-pill.ceo { background: #f4ecff; color: #6f3cb6; }
.perms-table select, .perms-table input[type="text"] {
 padding: 5px 8px;
 border: 1px solid var(--border, #e5e1d8);
 border-radius: 6px;
 font-family: inherit; font-size: 13px;
 background: var(--surface, #fff);
}
.perms-pages { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.perms-pages label {
 font-size: 11px;
 background: var(--surface-2, #f7f5f0);
 padding: 3px 8px;
 border-radius: 4px;
 cursor: pointer;
 user-select: none;
 border: 1px solid transparent;
}
.perms-pages label:has(input:checked) {
 background: var(--accent-tint, #fef3ec);
 color: var(--accent, #c2410c);
 border-color: var(--accent, #c2410c);
 font-weight: 600;
}
.perms-pages input { display: none; }
.perms-actions {
 display: flex; gap: 8px; justify-content: flex-end;
 margin-top: 16px; padding-top: 12px;
 border-top: 1px solid var(--border, #e5e1d8);
}
.perms-saved {
 display: inline-flex; align-items: center; gap: 6px;
 color: #2d6a4f; font-size: 13px; font-weight: 600;
 margin-inline-end: auto;
}
.perms-saved::before { content: ""; }