/* Dashboard module — list + builder shell */ .cb-dash-btn-primary { background: #fff; color: #0f172a; font-weight: 700; border: none; border-radius: 12px; padding: 10px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .cb-dash-btn-primary:hover { background: #f1f5f9; color: #0f172a; } .cb-dash-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #9aa0b4; margin-bottom: 14px; } .cb-dash-empty { background: #fff; border-radius: 20px; border: 1px dashed #cbd5e1; } .cb-dash-empty-icon { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(145deg, #e0e7ff, #f8fafc); display: flex; align-items: center; justify-content: center; color: #4338ca; } .cb-dash-empty-icon .material-symbols-outlined { font-size: 36px; } .cb-dash-card { position: relative; background: #fff; border-radius: 16px; border: 1px solid #e8ecf1; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; } .cb-dash-card:hover { box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .cb-dash-card-accent { height: 4px; background: linear-gradient(90deg, #7c3aed, #ec4899); } .cb-dash-card-body { padding: 20px 20px 18px; } .cb-dash-list-page .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; } .cb-dash-card-body .btn-dark { background: #1a1d23; border-color: #1a1d23; border-radius: 6px; font-size: 12px; font-weight: 500; padding: 6px 14px; } .cb-dash-card-body .btn-outline-secondary { border-color: #e2e4e9; color: #5a6072; border-radius: 6px; font-size: 12px; font-weight: 500; padding: 6px 14px; } .cb-dash-card-title { font-weight: 800; font-size: 1.05rem; color: #0f172a; letter-spacing: -0.02em; } .cb-dash-card-title:hover { color: #4338ca; } .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cb-dash-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #eff4ff; color: #1a56db; } .cb-dash-badge-live { background: #ecfdf5; color: #059669; } .cb-dash-badge-muted { background: #f3f4f6; color: #6b7280; } .cb-dash-badge-shared { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } .cb-dash-meta-row { gap: 8px !important; } .cb-dash-modal { border-radius: 16px; } .cb-dash-pin { color: #64748b; } .cb-dash-pin:hover { color: #4338ca; background: #eef2ff !important; } /* —— Builder canvas —— */ .cb-dash-shell { /* * Do not use negative horizontal margins here: they widen the box past the main column and * force overflow-x on an ancestor. Pairing overflow-x with visible overflow-y makes that * ancestor gain a second vertical scrollbar (CSS overflow rules). */ margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: calc(var(--page-padding-top) + 10px) var(--page-padding-x) 32px; min-height: calc(100vh - var(--topbar-height)); } .cb-dash-shell.cb-theme-dark { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); color: #e2e8f0; } .cb-dash-shell.cb-theme-dark .cb-dash-toolbar { background: rgba(30, 41, 59, 0.85); border-color: rgba(148, 163, 184, 0.2); } .cb-dash-shell.cb-theme-dark .cb-dash-widget-card { background: rgba(30, 41, 59, 0.9); border-color: rgba(148, 163, 184, 0.15); color: #e2e8f0; } .cb-dash-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06); } .cb-dash-toolbar-head { min-width: 220px; max-width: 460px; } .cb-dash-toolbar h1 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.25; } .cb-dash-toolbar .cb-dash-meta { font-size: 12px; color: #64748b; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cb-dash-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-left: auto; } .cb-dash-toolbar-primary, .cb-dash-toolbar-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cb-dash-toolbar-primary { padding-right: 10px; border-right: 1px solid #e5e7eb; } .cb-dash-toolbar .btn { border-radius: 9px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; line-height: 1.1; min-height: 34px; padding-inline: 11px; } /* Compact icon-only controls in dashboard toolbar */ .cb-dash-toolbar .btn.cb-dash-icon-btn { padding-inline: 0; min-width: 34px; justify-content: center; gap: 0; } .cb-dash-toolbar .btn.cb-dash-icon-btn .cb-btn-icon { margin: 0; } .cb-dash-toolbar .dropdown-toggle-hide-caret::after { display: none; } .cb-dash-toolbar .cb-dash-fs-btn .cb-btn-icon { font-size: 19px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; } .cb-dash-pdf-dd { min-width: 220px; } .cb-dash-shell.cb-theme-dark .cb-dash-pdf-dd { background: rgba(30, 41, 59, 0.98); border: 1px solid rgba(148, 163, 184, 0.2) !important; } .cb-dash-shell.cb-theme-dark .cb-dash-pdf-dd .dropdown-item { color: #e2e8f0; } .cb-dash-shell.cb-theme-dark .cb-dash-pdf-dd .dropdown-item:hover, .cb-dash-shell.cb-theme-dark .cb-dash-pdf-dd .dropdown-item:focus { background: rgba(148, 163, 184, 0.12); color: #f8fafc; } .cb-dash-shell.cb-theme-dark .cb-dash-pdf-dd .dropdown-divider { border-color: rgba(148, 163, 184, 0.2); } .cb-dash-shell.cb-theme-dark .cb-dash-pdf-dd .form-check-label { color: #cbd5e1; } .cb-dash-shell.cb-theme-dark .cb-dash-toolbar a.btn.btn-light.border.cb-dash-icon-btn { background: rgba(30, 41, 59, 0.65); border-color: rgba(148, 163, 184, 0.28) !important; color: #e2e8f0; } .cb-dash-shell.cb-theme-dark .cb-dash-toolbar a.btn.btn-light.border.cb-dash-icon-btn:hover { background: rgba(51, 65, 85, 0.9); color: #f8fafc; } .cb-dash-toolbar .btn.btn-primary { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24); } .cb-btn-icon { font-size: 17px; line-height: 1; } .cb-dash-shell.cb-theme-dark .cb-dash-toolbar .cb-dash-meta { color: #94a3b8; } .cb-dash-shell.cb-theme-dark .cb-dash-toolbar-primary { border-right-color: rgba(148, 163, 184, 0.25); } /* No overflow-x/y hidden here: overflow-x:hidden makes overflow-y compute to auto → scrollbar on THIS div. */ .cb-dash-grid-wrap { min-height: 400px; border-radius: 14px; transition: background 0.18s ease, box-shadow 0.18s ease; width: 100%; max-width: 100%; overflow: visible; } .cb-dash-global-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 14px; } .cb-dash-global-vars .cb-dash-var-item { display: flex; flex-direction: column; gap: 5px; } .cb-dash-global-vars .cb-dash-var-pill { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 10px; border: 1px solid #dbe5f1; border-radius: 10px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cb-dash-global-vars .cb-dash-var-pill:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); } .cb-dash-global-vars .cb-dash-var-key { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #334155; white-space: nowrap; max-width: 42%; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: 0.03em; } .cb-dash-global-vars .cb-dash-var-input { flex: 1 1 auto; min-width: 60px; border: 0; outline: 0; background: transparent; font-size: 14px; color: #0f172a; padding: 0; } .cb-dash-global-vars .cb-dash-var-input::placeholder { color: #94a3b8; } .cb-dash-global-vars .cb-dash-var-pill.is-filled .cb-dash-var-input { color: #2563eb; font-weight: 600; } .cb-dash-global-vars .cb-dash-var-select { padding-right: 18px; } .cb-dash-global-vars .cb-dash-var-clear { flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .cb-dash-global-vars .cb-dash-var-clear:hover { background: #eff6ff; color: #2563eb; } .cb-dash-global-vars .cb-dash-var-clear .material-symbols-outlined { font-size: 16px; line-height: 1; } .cb-dash-global-vars .cb-dash-var-label { font-size: 11px; font-weight: 700; color: #475569; letter-spacing: 0.03em; text-transform: uppercase; } .cb-dash-global-vars .cb-dash-var-range { display: flex; gap: 6px; } .cb-dash-shell.cb-theme-dark .cb-dash-global-vars { background: rgba(30, 41, 59, 0.85); border-color: rgba(148, 163, 184, 0.2); } .cb-dash-shell.cb-theme-dark .cb-dash-global-vars .cb-dash-var-label { color: #cbd5e1; } .cb-dash-shell.cb-theme-dark .cb-dash-global-vars .cb-dash-var-pill { background: rgba(15, 23, 42, 0.7); border-color: rgba(148, 163, 184, 0.35); } .cb-dash-shell.cb-theme-dark .cb-dash-global-vars .cb-dash-var-key { color: #cbd5e1; } .cb-dash-shell.cb-theme-dark .cb-dash-global-vars .cb-dash-var-input { color: #e2e8f0; } .cb-dash-shell.cb-theme-dark .cb-dash-global-vars .cb-dash-var-pill.is-filled .cb-dash-var-input { color: #93c5fd; } .cb-dash-grid-wrap .grid-stack { width: 100%; min-width: 0; } /* * GridStack’s CSS sets overflow-y: auto on every .grid-stack-item-content (second scrollbar). * #cbGridStack bumps specificity so this always wins after gridstack.min.css. */ #cbGridStack.grid-stack > .grid-stack-item > .grid-stack-item-content { height: 100%; display: flex; flex-direction: column; overflow: hidden !important; } .cb-dash-grid-wrap .cb-dash-widget-mount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .grid-stack-item-content { overflow: hidden; } .cb-dash-widget-card { height: calc(100% - 12px); margin: 6px; background: #fff; border: 1px solid #e8ecf1; border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); display: flex; flex-direction: column; } .cb-dash-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13px; font-weight: 700; color: #0f172a; } .cb-dash-widget-head-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .cb-dash-widget-var-hint { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; color: #d97706; background: #fffbeb; border: 1px solid #fde68a; } .cb-dash-widget-var-hint .material-symbols-outlined { font-size: 16px; line-height: 1; } .cb-dash-shell.cb-theme-dark .cb-dash-widget-head { border-bottom-color: rgba(148, 163, 184, 0.15); color: #f1f5f9; } .cb-dash-shell.cb-theme-dark .cb-dash-widget-var-hint { color: #fbbf24; background: rgba(120, 53, 15, 0.35); border-color: rgba(251, 191, 36, 0.35); } .cb-dash-widget-body { flex: 1 1 auto; min-height: 0; position: relative; padding: 10px 12px 14px; display: flex; flex-direction: column; } .cb-dash-widget-body .cb-dash-chart-inner { flex: 1 1 auto; min-height: 180px; height: auto; display: flex; flex-direction: column; } .cb-dash-widget-body .cb-dash-chart-inner > div[id^="cb-chart-"] { flex: 1 1 auto; min-height: 180px; width: 100%; } /* Table chart inside dashboard widgets: keep controls visible and scroll rows inside tile. */ .cb-dash-table-host { display: flex; flex-direction: column; min-height: 0; height: 100%; } .cb-dash-table-host .cb-dash-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; } .cb-dash-widget-body .cb-dash-chart-inner > div[id^="cb-chart-"].cb-ranked-progress-host { overflow: auto; min-height: 0; } .cb-ranked-progress-host .cb-ranked-progress--dash { padding-right: 2px; } .cb-dash-shell.cb-theme-dark .cb-ranked-progress { color: #f1f5f9; } .cb-dash-shell.cb-theme-dark .cb-ranked-row { border-bottom-color: rgba(148, 163, 184, 0.2); } .cb-dash-shell.cb-theme-dark .cb-ranked-label { color: #e2e8f0; } .cb-dash-shell.cb-theme-dark .cb-ranked-val { color: #f8fafc; } .cb-dash-shell.cb-theme-dark .cb-ranked-bar-track { background: rgba(148, 163, 184, 0.25); } .cb-dash-shell.cb-theme-dark .cb-ranked-pill { background: rgba(30, 41, 59, 0.85); border-color: rgba(148, 163, 184, 0.35); } .cb-dash-widget-edit, .cb-dash-widget-remove { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: #94a3b8; padding: 2px; line-height: 1; border-radius: 6px; text-decoration: none; } .cb-dash-widget-edit:hover { background: #eef2ff; color: #4f46e5; } .cb-dash-widget-remove:hover { background: #fef2f2; color: #dc2626; } .cb-dash-widget-export { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: #94a3b8; padding: 2px; line-height: 1; border-radius: 6px; text-decoration: none; } .cb-dash-widget-export:hover { background: #eef2ff; color: #4f46e5; } .cb-dash-prose { font-size: 14px; line-height: 1.65; color: #334155; padding: 8px 10px; background: #fcfdff; border: 1px solid #edf1f6; border-radius: 10px; height: 100%; overflow: hidden; } /* Text widget: no header row — actions float over the card so short heights still show content */ .cb-dash-widget-card--text { position: relative; overflow: hidden; } .cb-dash-widget-text-actions--overlay { position: absolute; top: 4px; right: 6px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08); pointer-events: auto; } .cb-dash-shell.cb-theme-dark .cb-dash-widget-text-actions--overlay { background: rgba(30, 41, 59, 0.94); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .cb-dash-widget-body--text { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 12px; } /* While editing layout, keep space so floating icons don’t cover the first characters */ .grid-stack.cb-dash-editing .cb-dash-widget-card--text .cb-dash-widget-body--text { padding-right: 52px; padding-top: 8px; } /* Compact date-range filter widget (headerless like text widget) */ .cb-dash-widget-card--filter-date { position: relative; overflow: hidden; } .cb-dash-widget-filter-actions--overlay { position: absolute; top: 4px; right: 6px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08); pointer-events: auto; } .cb-dash-shell.cb-theme-dark .cb-dash-widget-filter-actions--overlay { background: rgba(30, 41, 59, 0.94); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .cb-dash-widget-body--filter-date { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 7px 10px 8px; gap: 6px; } .cb-dash-filter-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin: 0; } .cb-dash-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cb-dash-filter-row--compact { gap: 6px; } .cb-dash-filter-col { min-width: 0; } .cb-dash-filter-col--compact label { font-size: 11px; line-height: 1.1; } .cb-dash-widget-body--filter-date label { display: block; margin-bottom: 4px; } .cb-fdate--compact { height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: 12px; } .grid-stack.cb-dash-editing .cb-dash-widget-card--filter-date .cb-dash-widget-body--filter-date { padding-right: 52px; } @media (max-width: 768px) { .cb-dash-filter-row { grid-template-columns: 1fr; } } /* Compact dropdown filter widget (headerless) */ .cb-dash-widget-card--filter-dropdown { position: relative; overflow: hidden; } .cb-dash-widget-body--filter-dropdown { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 7px 10px 8px; gap: 6px; } .cb-fdrop--compact { height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: 12px; } .grid-stack.cb-dash-editing .cb-dash-widget-card--filter-dropdown .cb-dash-widget-body--filter-dropdown { padding-right: 52px; } .cb-dash-prose.cb-dash-prose--bare { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; height: auto; } .cb-dash-shell.cb-theme-dark .cb-dash-prose.cb-dash-prose--bare { background: transparent; border: none; } .cb-dash-shell.cb-theme-dark .cb-dash-prose { color: #cbd5e1; background: rgba(15, 23, 42, 0.4); border-color: rgba(148, 163, 184, 0.2); } .cb-dash-prose h1, .cb-dash-prose h2, .cb-dash-prose h3 { font-size: 1.02rem; font-weight: 800; margin: 0.45em 0 0.3em; } .cb-dash-prose p { margin: 0 0 0.65em; } .cb-dash-prose p:last-child { margin-bottom: 0; } .cb-dash-prose ul, .cb-dash-prose ol { margin: 0 0 0.7em 1.15rem; padding: 0; } .cb-dash-prose li { margin-bottom: 0.3em; } .cb-dash-img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; border-radius: 10px; } .cb-dash-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 6px; } .cb-dash-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.65); font-size: 12px; font-weight: 600; color: #64748b; z-index: 2; } .cb-dash-shell.cb-theme-dark .cb-dash-loading { background: rgba(15, 23, 42, 0.55); color: #94a3b8; } /* Fullscreen: toggled on body */ body.cb-dash-fs .cb-topbar { display: none !important; } body.cb-dash-fs .cb-content { margin-left: 0 !important; padding-top: 0 !important; } body.cb-dash-fs .cb-dash-shell { min-height: 100vh; margin: 0; padding: 16px; } /* Native Fullscreen API mode: keep dashboard scrollable */ #cbDashShell:fullscreen, #cbDashShell:-webkit-full-screen { width: 100%; height: 100vh; min-height: 100vh; margin: 0; padding: 16px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; background: #f8fafc; } #cbDashShell.cb-theme-dark:fullscreen, #cbDashShell.cb-theme-dark:-webkit-full-screen { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); } .grid-stack.cb-dash-editing .grid-stack-item { cursor: grab; } .grid-stack.cb-dash-editing.cb-dash-dragging { background-image: linear-gradient(to right, rgba(148, 163, 184, 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 184, 0.22) 1px, transparent 1px); background-size: calc(100% / 12) var(--cb-grid-cell-h, 56px); background-position: 0 0; background-color: rgba(248, 250, 252, 0.7); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28); } .cb-dash-shell.cb-theme-dark .grid-stack.cb-dash-editing.cb-dash-dragging { background-image: linear-gradient(to right, rgba(148, 163, 184, 0.28) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 184, 0.28) 1px, transparent 1px); background-color: rgba(15, 23, 42, 0.35); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.32); } .grid-stack .ui-resizable-handle.ui-resizable-se { right: 12px !important; bottom: 12px !important; z-index: 5; } @media (max-width: 992px) { .cb-dash-toolbar { align-items: stretch; } .cb-dash-toolbar-head, .cb-dash-toolbar-actions { width: 100%; max-width: none; } .cb-dash-toolbar-actions { justify-content: flex-start; margin-left: 0; } .cb-dash-toolbar-primary { border-right: 0; padding-right: 0; } }