/* KOS Classify (/pointcloud) — full-width, dense workbench UI. Light-glass cards + purple accent. Every element id/class the page JS hooks into is preserved; this file only owns layout + styling. */ :root { --kc-purple: #7c3aed; --kc-purple-dark: #6d28d9; --kc-purple-soft: rgba(124, 58, 237, .10); --kc-teal: #0d9488; --kc-teal-soft: rgba(13, 148, 136, .10); --kc-ink: #1c1c28; --kc-ink-2: #4a4a5a; --kc-muted: #8a8a9a; --kc-line: #e9e9f1; --kc-line-2: #f0f0f6; --kc-field: #f7f7fb; --kc-card: #fff; --kc-bg: #f4f4f9; --kc-danger: #e5484d; --kc-green: #16a34a; --kc-amber: #d97706; --kc-radius: 14px; --kc-shadow: 0 1px 2px rgba(16, 16, 40, .04), 0 6px 18px rgba(16, 16, 40, .05); --kc-shadow-lg: 0 2px 6px rgba(16, 16, 40, .06), 0 16px 40px rgba(16, 16, 40, .09); } /* Dark theme — the dashboard toggles data-theme on (default 'dark'), so the page follows the app theme instead of always rendering light-on-dark. */ :root[data-theme="dark"] { --kc-purple: #8b6df0; --kc-purple-dark: #7c3aed; --kc-purple-soft: rgba(124, 58, 237, .18); --kc-teal: #2dd4bf; --kc-teal-soft: rgba(45, 212, 191, .12); --kc-ink: #e8e8ed; --kc-ink-2: #b6bccb; --kc-muted: #8791a6; --kc-line: rgba(255, 255, 255, .09); --kc-line-2: rgba(255, 255, 255, .05); --kc-field: rgba(255, 255, 255, .045); --kc-card: #141a2b; --kc-bg: transparent; --kc-danger: #f4645a; --kc-green: #34d399; --kc-amber: #fbbf24; --kc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .35); --kc-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5); } /* ── Full-page ground ────────────────────────────────────────────────────── This page loads material-dashboard.css (light `bg-gray-100`) + this file only — NOT dashboard-theme.css — so the dark body ground was never painted and the empty area below the cards showed WHITE (with the footer stranded on it). Paint it here, mirroring the KOS Docs (documents.css) navy→purple gradient so the whole page reads as one continuous dark surface. Light theme keeps a soft light gradient. Only this page loads this file, so these rules are page-local. */ body.g-sidenav-show { background: linear-gradient(122deg, #eaf5f8 0%, #eef1f9 40%, #f3ecfa 72%, #faeef8 100%) fixed !important; min-height: 100vh; } :root[data-theme="dark"] body.g-sidenav-show, [data-theme="dark"] body.bg-gray-100 { background: radial-gradient(1100px 560px at 84% -10%, rgba(124, 58, 237, .18), transparent 60%), linear-gradient(122deg, #0c303e 0%, #14243f 40%, #331653 72%, #55195d 100%) fixed !important; } /* Let the ground show through the dashboard content wrappers. */ .main-content, .container-fluid { background: transparent !important; } /* Fill the whole content area — the app sidebar already bounds the left. */ .kc-wrap { width: 100%; max-width: 1760px; margin: 0 auto; font-family: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--kc-ink); } .kc-wrap * { box-sizing: border-box; } /* ── Header hero banner + stat strip ── A gradient hero (mirrors the KOS Docs "My Documents" banner) so the page opens with the same identity as the rest of the workspace. Saturated ground → white text works in both light and dark themes. */ .kc-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; position: relative; overflow: hidden; padding: 26px 30px; border-radius: 18px; background: linear-gradient(115deg, #3a1d78 0%, #5b21b6 42%, #4c1d95 66%, #133b57 100%); border: 1px solid rgba(255, 255, 255, .10); box-shadow: var(--kc-shadow-lg); } .kc-head::after { /* soft cyan glow, top-right — same accent as the docs hero */ content: ''; position: absolute; top: -45%; right: -4%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(6, 182, 212, .34), transparent 62%); pointer-events: none; } .kc-head > div, .kc-head .kc-stats { position: relative; z-index: 1; } .kc-head h1 { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; color: #fff; } .kc-head h1 .material-symbols-rounded { color: #c4b5fd; font-size: 30px; } .kc-head p { color: rgba(255, 255, 255, .82); margin: 0; font-size: .88rem; max-width: 820px; line-height: 1.55; } .kc-stats { display: flex; gap: 10px; flex-wrap: wrap; } .kc-stat { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 10px 16px; min-width: 96px; backdrop-filter: blur(6px); box-shadow: none; text-align: center; } .kc-stat .n { font-size: 1.3rem; font-weight: 800; line-height: 1; display: block; color: #fff; } .kc-stat .l { font-size: .68rem; color: rgba(255, 255, 255, .72); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; display: block; } .kc-stat.accent .n { color: #d6bbff; } /* ── Tabs (segmented) ── */ .kc-tabs { display: inline-flex; gap: 2px; background: var(--kc-field); border: 1px solid var(--kc-line); border-radius: 12px; padding: 4px; margin-bottom: 22px; flex-wrap: wrap; } .kc-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; color: var(--kc-ink-2); font-family: inherit; font-size: .86rem; font-weight: 600; padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; } .kc-tab .material-symbols-rounded { font-size: 19px; } .kc-tab:hover { color: var(--kc-ink); } .kc-tab.is-active { background: var(--kc-card); color: var(--kc-purple); box-shadow: var(--kc-shadow); } .kc-badge { font-size: .66rem; font-weight: 800; background: var(--kc-purple-soft); color: var(--kc-purple); padding: 1px 7px; border-radius: 999px; } /* ── Panels + layout grids ── */ .kc-panel { display: none; animation: kcfade .25s ease; } .kc-panel.is-active { display: block; } @keyframes kcfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .kc-grid-2 { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; align-items: start; } .kc-grid-even { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 1100px) { .kc-grid-2, .kc-grid-even { grid-template-columns: 1fr; } } /* ── Cards ── */ .kc-card { background: var(--kc-card); border: 1px solid var(--kc-line); border-radius: var(--kc-radius); padding: 22px; box-shadow: var(--kc-shadow); margin-bottom: 18px; } .kc-card:hover { box-shadow: var(--kc-shadow-lg); } /* Force the readable ink colour: material-dashboard's default dark `h3` colour otherwise wins on this dark page (the page doesn't load dashboard-theme.css), leaving these card titles nearly invisible. */ .kc-card-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--kc-ink) !important; } .kc-card-title .material-symbols-rounded { color: var(--kc-purple); font-size: 21px; } .kc-card-sub { color: var(--kc-muted); font-size: .82rem; margin: 0 0 16px; line-height: 1.55; } .kc-card-sub code { background: var(--kc-field); border: 1px solid var(--kc-line); border-radius: 5px; padding: 1px 5px; font-size: .78rem; color: var(--kc-purple); } .kc-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kc-muted); font-weight: 700; margin: 24px 0 12px; } /* ── Dropzone ── */ .kc-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--kc-line); border-radius: 14px; background: var(--kc-field); color: var(--kc-muted); padding: 34px 24px; cursor: pointer; transition: border-color .2s, background .2s; gap: 6px; } .kc-dropzone:hover, .kc-dropzone.dragover { border-color: var(--kc-purple); background: var(--kc-purple-soft); } .kc-dropzone i { font-size: 2rem; color: var(--kc-purple); margin-bottom: 6px; } .kc-dropzone strong { color: var(--kc-ink); } .kc-formats { font-size: .74rem; } .kc-filename { font-size: .82rem; color: var(--kc-ink-2); margin: 10px 0; font-weight: 600; } .kc-filename:empty { display: none; } /* ── Fields / rows / inputs ── */ .kc-row { display: flex; gap: 12px; align-items: flex-end; } .kc-row-wrap { flex-wrap: wrap; } .kc-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; } .kc-field > span { font-size: .74rem; font-weight: 600; color: var(--kc-ink-2); } .kc-field select, .kc-field input, .kc-input, .kc-ds-actions select, .kc-ds-actions input { background: var(--kc-field); border: 1px solid var(--kc-line); color: var(--kc-ink); border-radius: 9px; padding: 10px 12px; font-size: .85rem; font-family: inherit; outline: none; width: 100%; transition: border-color .15s, box-shadow .15s; } .kc-field select:focus, .kc-field input:focus, .kc-input:focus { border-color: var(--kc-purple); box-shadow: 0 0 0 3px var(--kc-purple-soft); } /* The open dropdown popup is drawn by the OS/browser: without explicit option colours the