/* ========================================================================== Kodecraft — base design system Tokens, reset, typography, buttons, forms, badges, cards, tables, utils ========================================================================== */ :root { --kc-primary: #5B21F0; --kc-primary-dark: #4A18D0; --kc-primary-soft: #F0EBFE; --kc-primary-softer: #F7F4FF; --kc-primary-border: #DCD2FD; --kc-ink: #0F172A; --kc-ink-2: #1F2937; --kc-muted: #64748B; --kc-muted-2: #94A3B8; --kc-bg: #F7F8FC; --kc-surface: #FFFFFF; --kc-line: #E9EBF3; --kc-line-soft: #F1F3F9; --kc-green: #16A34A; --kc-green-soft: #DCFCE7; --kc-blue: #2563EB; --kc-blue-soft: #DBEAFE; --kc-orange: #D97706; --kc-orange-soft: #FEF3C7; --kc-red: #DC2626; --kc-red-soft: #FEE2E2; --kc-violet: #6D28D9; --kc-violet-soft: #EDE9FE; --kc-indigo: #4F46E5; --kc-indigo-soft: #E0E7FF; --kc-pink: #DB2777; --kc-pink-soft: #FCE7F3; --kc-teal: #0D9488; --kc-teal-soft: #CCFBF1; --kc-yellow: #CA8A04; --kc-yellow-soft: #FEF9C3; --kc-slate: #475569; --kc-slate-soft: #F1F5F9; --kc-radius: 12px; --kc-radius-sm: 10px; --kc-radius-lg: 16px; --kc-radius-pill: 999px; --kc-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --kc-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --kc-shadow-md: 0 8px 24px rgba(16, 24, 40, .08); --kc-shadow-lg: 0 18px 40px rgba(16, 24, 40, .12); --kc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --kc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --kc-font-scale: 100%; --kc-header-h: 68px; } /* * Typography — every font-size in this codebase is authored in rem, relative * to the browser's stable 16px reference (not to this scale). Scaling 's * font-size against that same 16px reference is what proportionally resizes * every rem value at once — text, buttons, badges, everything — from one * control, driven by Settings → Typography via [data-font-size] on . */ [data-font-size="small"] { --kc-font-scale: 92.9%; } [data-font-size="large"] { --kc-font-scale: 114.3%; } [data-font-size="xlarge"] { --kc-font-scale: 128.6%; } [data-font-family="serif"] { --kc-font: Georgia, "Times New Roman", Times, serif; } [data-font-family="rounded"] { --kc-font: "Trebuchet MS", Verdana, sans-serif; } /* * Dark theme — only ever applied when Settings → General → "Enable Dark * Mode" is on, via [data-theme] on set by the toggle in app.js. * Every component already reads these as var(--kc-*), so overriding the * tokens here is enough to re-theme the whole app without touching pages. */ :root[data-theme="dark"] { --kc-primary: #8B5CF6; --kc-primary-dark: #A78BFA; --kc-primary-soft: #2C1F52; --kc-primary-softer: #251A44; --kc-primary-border: #4C3A8A; --kc-ink: #F1F5F9; --kc-ink-2: #E2E8F0; --kc-muted: #94A3B8; --kc-muted-2: #64748B; --kc-bg: #0F172A; --kc-surface: #1A2436; --kc-line: #2C394E; --kc-line-soft: #212C3D; --kc-green-soft: #123123; --kc-blue-soft: #142544; --kc-orange-soft: #3A2A0E; --kc-red-soft: #3A1518; --kc-violet-soft: #2C1F52; --kc-indigo-soft: #201F4B; --kc-pink-soft: #3A1530; --kc-teal-soft: #0F2E2A; --kc-yellow-soft: #362B0B; --kc-slate-soft: #212C3D; --kc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --kc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3); --kc-shadow-md: 0 8px 24px rgba(0, 0, 0, .4); --kc-shadow-lg: 0 18px 40px rgba(0, 0, 0, .5); } /* * Maintenance page presets — set via [data-maintenance-theme] on the * public maintenance page and on its live preview in Settings → * Maintenance, driven by the "maintenance_theme" setting. Fixed presets * rather than an admin-typed hex value, so no page ever needs inline CSS. */ [data-maintenance-theme="light"] { --mt-bg: #F6F8FB; --mt-text: #1F2937; } [data-maintenance-theme="dark"] { --mt-bg: #111827; --mt-text: #F9FAFB; } [data-maintenance-theme="ocean"] { --mt-bg: #EFF6FF; --mt-text: #1E3A8A; } [data-maintenance-theme="sunset"] { --mt-bg: #FFF7ED; --mt-text: #7C2D12; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-size: var(--kc-font-scale); } body { margin: 0; background: var(--kc-bg); color: var(--kc-ink); font-family: var(--kc-font); font-size: 0.875rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--kc-ink); font-weight: 700; line-height: 1.25; } p { margin: 0; } a { color: var(--kc-primary); text-decoration: none; } a:hover { color: var(--kc-primary-dark); } img { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } table { border-collapse: collapse; width: 100%; } button { font-family: inherit; cursor: pointer; } hr { border: 0; border-top: 1px solid var(--kc-line); margin: 16px 0; } /* ------------------------------------------------------------------ icons */ .kc-i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .kc-i-sm { width: 15px; height: 15px; } /* brand mark is used by every surface, so it is sized here */ .ks-brand-mark { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: var(--kc-radius-sm); } .kc-i-lg { width: 22px; height: 22px; } .kc-i-xl { width: 28px; height: 28px; } .kc-i-fill { fill: currentColor; stroke: none; } /* ---------------------------------------------------------------- surfaces */ .kc-card { background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius); box-shadow: var(--kc-shadow-xs); } .kc-card-pad { padding: 20px; } .kc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--kc-line-soft); } .kc-card-head-plain { border-bottom: 0; padding-bottom: 0; } .kc-card-title { font-size: 1rem; font-weight: 700; } .kc-card-sub { color: var(--kc-muted); font-size: 0.8125rem; margin-top: 2px; } .kc-card-body { padding: 20px; } .kc-card-foot { padding: 14px 20px; border-top: 1px solid var(--kc-line-soft); } .kc-page-title { font-size: 1.875rem; letter-spacing: -.4px; } .kc-page-sub { color: var(--kc-muted); margin-top: 6px; } .kc-section-title { font-size: 1.125rem; font-weight: 700; } .kc-link-more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; } /* --------------------------------------------------------------- breadcrumb */ .kc-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--kc-muted); font-size: 0.8125rem; margin-bottom: 10px; } .kc-crumb a { color: var(--kc-muted); } .kc-crumb a:hover { color: var(--kc-primary); } .kc-crumb-sep { width: 14px; height: 14px; color: var(--kc-muted-2); } .kc-crumb-current { color: var(--kc-ink-2); font-weight: 500; } /* ----------------------------------------------------------------- buttons */ .kc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--kc-radius-sm); background: var(--kc-surface); color: var(--kc-ink-2); font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; } .kc-btn-primary { background: var(--kc-primary); border-color: var(--kc-primary); color: #FFF; } .kc-btn-primary:hover { background: var(--kc-primary-dark); border-color: var(--kc-primary-dark); color: #FFF; } .kc-btn-outline { background: var(--kc-surface); border-color: var(--kc-line); color: var(--kc-ink-2); } .kc-btn-outline:hover { border-color: var(--kc-primary-border); color: var(--kc-primary); } .kc-btn-tinted { background: var(--kc-primary-soft); border-color: transparent; color: var(--kc-primary); } .kc-btn-tinted:hover { background: var(--kc-primary-border); color: var(--kc-primary-dark); } .kc-btn-ghost { background: transparent; border-color: transparent; color: var(--kc-muted); } .kc-btn-ghost:hover { background: var(--kc-line-soft); color: var(--kc-ink); } .kc-btn-danger { background: var(--kc-surface); border-color: #FBD5D5; color: var(--kc-red); } .kc-btn-danger:hover { background: var(--kc-red-soft); color: var(--kc-red); } .kc-btn-warning { background: #F5B301; border-color: #F5B301; color: #3B2B00; } .kc-btn-warning:hover { background: #E0A400; color: #3B2B00; } .kc-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Generic form-submit loading state, applied automatically by app.js to any submit button. */ .kc-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .kc-btn.is-loading > * { visibility: hidden; } .kc-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #FFF; animation: kc-btn-spin .65s linear infinite; } .kc-btn-outline.is-loading::after, .kc-btn-ghost.is-loading::after, .kc-btn-tinted.is-loading::after { border-color: var(--kc-line); border-top-color: var(--kc-primary); } @keyframes kc-btn-spin { to { transform: rotate(360deg); } } /* Site-wide full-page navigation loader, shown by app.js on any real link click or form submit. */ .kc-page-loader { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--kc-bg); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .kc-page-loader.is-active { opacity: 1; visibility: visible; } .kc-page-loader-mark { width: 56px; height: 56px; animation: kc-page-loader-pulse 1.1s ease-in-out infinite; } @keyframes kc-page-loader-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .5; } } .kc-btn-sm { height: 34px; padding: 0 12px; font-size: 0.8125rem; border-radius: 8px; } .kc-btn-lg { height: 48px; padding: 0 24px; font-size: 0.9375rem; } .kc-btn-block { width: 100%; } .kc-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 9px; border-color: var(--kc-line); color: var(--kc-muted); } .kc-btn-icon:hover { border-color: var(--kc-primary-border); color: var(--kc-primary); background: var(--kc-primary-softer); } .kc-btn-icon-danger:hover { border-color: #FBD5D5; color: var(--kc-red); background: var(--kc-red-soft); } .kc-btn-icon-active { border-color: var(--kc-primary-border); color: var(--kc-primary); background: var(--kc-primary-softer); } .kc-btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* icon + text + action band, stacks on small screens */ .kc-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .kc-band-top { align-items: flex-start; } .kc-btn-row-end { justify-content: flex-end; } /* ------------------------------------------------------------------- forms */ .kc-field { margin-bottom: 16px; } .kc-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--kc-ink-2); margin-bottom: 6px; } .kc-req { color: var(--kc-red); } .kc-hint { color: var(--kc-muted); font-size: 0.75rem; margin-top: 6px; } .kc-error { display: block; color: var(--kc-red); font-size: 0.75rem; margin-top: 6px; } .kc-input-invalid, .kc-select-invalid { border-color: #F2B8B8; background: #FFFBFB; } .kc-input, .kc-select, .kc-textarea { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm); background: var(--kc-surface); color: var(--kc-ink); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .kc-textarea { height: auto; min-height: 104px; padding: 12px 14px; resize: vertical; } /* long-form fields: product descriptions, release notes, article bodies */ .kc-textarea-lg { min-height: 260px; } .kc-textarea-md { min-height: 160px; } .kc-input::placeholder, .kc-textarea::placeholder { color: var(--kc-muted-2); } .kc-input:focus, .kc-select:focus, .kc-textarea:focus { border-color: var(--kc-primary); box-shadow: 0 0 0 3px rgba(91, 33, 240, .12); } .kc-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .kc-input-icon { position: relative; } .kc-input-icon > .kc-i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--kc-muted-2); pointer-events: none; } .kc-input-icon .kc-input, .kc-input-icon .kc-select { padding-left: 42px; } .kc-input-icon-end > .kc-i { left: auto; right: 14px; } .kc-input-icon-end .kc-input { padding-left: 14px; padding-right: 42px; } .kc-input-affix { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--kc-muted-2); border-radius: 8px; } .kc-input-affix:hover { color: var(--kc-ink-2); background: var(--kc-line-soft); } .kc-input-affix:focus { outline: none; color: var(--kc-ink-2); background: var(--kc-line-soft); box-shadow: 0 0 0 3px rgba(91, 33, 240, .12); } .kc-grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .kc-grid-form-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; } .kc-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--kc-ink-2); cursor: pointer; } .kc-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--kc-primary); flex: none; } .kc-check-list { display: flex; flex-direction: column; gap: 12px; } .kc-radio-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm); cursor: pointer; } .kc-radio-card-active { border-color: var(--kc-primary); background: var(--kc-primary-softer); } .kc-radio-card input { margin-left: auto; accent-color: var(--kc-primary); width: 18px; height: 18px; } .kc-switch { position: relative; display: inline-flex; align-items: center; flex: none; width: 42px; height: 24px; cursor: pointer; } .kc-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .kc-switch-track { width: 42px; height: 24px; border-radius: var(--kc-radius-pill); background: #D8DEE9; transition: background .15s ease; } .kc-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFF; box-shadow: var(--kc-shadow-xs); transition: transform .15s ease; } .kc-switch input:checked + .kc-switch-track { background: var(--kc-primary); } .kc-switch input:checked + .kc-switch-track::after { transform: translateX(18px); } .kc-toggle-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; } .kc-toggle-row + .kc-toggle-row { border-top: 1px solid var(--kc-line-soft); } .kc-toggle-row-text { min-width: 0; flex: 1; } .kc-toggle-row-title { font-weight: 600; font-size: 0.875rem; } .kc-toggle-row-sub { color: var(--kc-muted); font-size: 0.7812rem; } .kc-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed var(--kc-primary-border); border-radius: var(--kc-radius); background: var(--kc-primary-softer); padding: 26px 20px; text-align: center; } .kc-dropzone-plain { border-color: var(--kc-line); background: var(--kc-line-soft); } .kc-dropzone-title { display: block; font-weight: 600; color: var(--kc-ink-2); } .kc-dropzone-hint { display: block; color: var(--kc-muted); font-size: 0.7812rem; margin-top: 4px; } .kc-dropzone-icon { display: block; color: var(--kc-primary); margin: 0 auto 10px; } /* ------------------------------------------------ rich text editor (Quill) */ .kc-editor { border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm); overflow: hidden; } .kc-editor .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--kc-line); background: var(--kc-line-soft); padding: 8px 10px; } .kc-editor .ql-container.ql-snow { border: none; font-family: inherit; font-size: 0.875rem; } .kc-editor .ql-editor { min-height: 220px; color: var(--kc-ink); line-height: 1.6; } .kc-editor .ql-editor.ql-blank::before { color: var(--kc-muted-2); font-style: normal; } .kc-editor .ql-snow .ql-stroke { stroke: var(--kc-muted); } .kc-editor .ql-snow .ql-fill { fill: var(--kc-muted); } .kc-editor .ql-snow.ql-toolbar button:hover, .kc-editor .ql-snow.ql-toolbar button.ql-active { background: var(--kc-primary-soft); } .kc-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .kc-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--kc-primary); } .kc-editor .ql-snow.ql-toolbar button:hover .ql-fill, .kc-editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--kc-primary); } .kc-editor .ql-snow .ql-picker { color: var(--kc-muted); } .kc-editor .ql-snow .ql-tooltip { border: 1px solid var(--kc-line); border-radius: var(--kc-radius-sm); box-shadow: var(--kc-shadow-md); } @media (max-width: 640px) { .kc-editor .ql-toolbar.ql-snow { padding: 6px; } .kc-editor .ql-editor { min-height: 160px; } } /* ------------------------------------------------------------------ badges */ .kc-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 5px; padding: 3px 10px; border-radius: 7px; font-size: 0.75rem; font-weight: 600; line-height: 1.6; white-space: nowrap; } .kc-badge-pill { border-radius: var(--kc-radius-pill); } .kc-badge-icon { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; } .kc-badge-green { background: var(--kc-green-soft); color: #15803D; } .kc-badge-blue { background: var(--kc-blue-soft); color: #1D4ED8; } .kc-badge-orange { background: var(--kc-orange-soft); color: #B45309; } .kc-badge-red { background: var(--kc-red-soft); color: #B91C1C; } .kc-badge-violet { background: var(--kc-violet-soft); color: #6D28D9; } .kc-badge-indigo { background: var(--kc-indigo-soft); color: #4338CA; } .kc-badge-pink { background: var(--kc-pink-soft); color: #BE185D; } .kc-badge-teal { background: var(--kc-teal-soft); color: #0F766E; } .kc-badge-yellow { background: var(--kc-yellow-soft); color: #A16207; } .kc-badge-slate { background: var(--kc-slate-soft); color: #475569; } .kc-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; } .kc-dot-violet { background: #8B5CF6; } .kc-dot-blue { background: #2563EB; } .kc-dot-green { background: #22C55E; } .kc-dot-orange { background: #F97316; } .kc-dot-red { background: #EF4444; } .kc-dot-indigo { background: #6366F1; } .kc-dot-pink { background: #EC4899; } .kc-dot-teal { background: #14B8A6; } .kc-dot-yellow { background: #EAB308; } .kc-dot-slate { background: #94A3B8; } /* soft tinted icon tiles */ .kc-tile { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .kc-tile-sm { width: 36px; height: 36px; border-radius: 10px; } .kc-tile-img { overflow: hidden; background: var(--kc-line-soft); } .kc-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .kc-tile-lg { width: 52px; height: 52px; border-radius: 14px; } .kc-tile-violet { background: var(--kc-violet-soft); color: var(--kc-violet); } .kc-tile-blue { background: var(--kc-blue-soft); color: var(--kc-blue); } .kc-tile-green { background: var(--kc-green-soft); color: var(--kc-green); } .kc-tile-orange { background: var(--kc-orange-soft); color: var(--kc-orange); } .kc-tile-red { background: var(--kc-red-soft); color: var(--kc-red); } .kc-tile-indigo { background: var(--kc-indigo-soft); color: var(--kc-indigo); } .kc-tile-pink { background: var(--kc-pink-soft); color: var(--kc-pink); } .kc-tile-teal { background: var(--kc-teal-soft); color: var(--kc-teal); } .kc-tile-yellow { background: var(--kc-yellow-soft); color: var(--kc-yellow); } .kc-tile-slate { background: var(--kc-slate-soft); color: var(--kc-slate); } .kc-tile-solid-violet { background: var(--kc-primary); color: #FFF; } .kc-tile-solid-blue { background: #3B82F6; color: #FFF; } .kc-tile-solid-green { background: #22C55E; color: #FFF; } .kc-tile-solid-orange { background: #F59E0B; color: #FFF; } .kc-tile-solid-red { background: #EF4444; color: #FFF; } .kc-tile-solid-indigo { background: #6366F1; color: #FFF; } .kc-tile-solid-pink { background: #EC4899; color: #FFF; } .kc-tile-solid-teal { background: #14B8A6; color: #FFF; } .kc-tile-solid-yellow { background: #EAB308; color: #FFF; } .kc-tile-solid-slate { background: #64748B; color: #FFF; } /* ------------------------------------------------------------------ avatar */ .kc-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kc-primary); color: #FFF; font-size: 0.7812rem; font-weight: 700; flex: none; overflow: hidden; letter-spacing: .3px; } .kc-avatar-img { width: 100%; height: 100%; object-fit: cover; } .kc-avatar-sm { width: 30px; height: 30px; font-size: 0.6875rem; } .kc-avatar-lg { width: 48px; height: 48px; font-size: 0.9375rem; } .kc-avatar-xl { width: 104px; height: 104px; font-size: 1.875rem; } .kc-avatar-2 { background: #2563EB; } .kc-avatar-3 { background: #DB2777; } .kc-avatar-4 { background: #0D9488; } .kc-avatar-5 { background: #D97706; } .kc-avatar-6 { background: #4F46E5; } .kc-avatar-7 { background: #16A34A; } .kc-avatar-8 { background: #9333EA; } /* ------------------------------------------------------------------ tables */ .kc-table-wrap { width: 100%; overflow-x: auto; } .kc-table { min-width: 560px; font-size: 0.8438rem; } .kc-table-wide { min-width: 860px; } .kc-table th { text-align: left; padding: 12px 14px; color: var(--kc-muted); font-size: 0.7188rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid var(--kc-line); white-space: nowrap; } .kc-table td { padding: 13px 14px; border-bottom: 1px solid var(--kc-line-soft); vertical-align: middle; } .kc-table tbody tr:last-child td { border-bottom: 0; } .kc-table tbody tr:hover { background: var(--kc-line-soft); } .kc-table-title { font-weight: 600; color: var(--kc-ink); } .kc-table-sub { color: var(--kc-muted); font-size: 0.7812rem; margin-top: 2px; } .kc-table-actions { display: flex; align-items: center; gap: 8px; } .kc-cell-media { display: flex; align-items: center; gap: 12px; min-width: 0; } .kc-nowrap { white-space: nowrap; } /* -------------------------------------------------------------- pagination */ .kc-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--kc-line-soft); } .kc-pager-info { color: var(--kc-muted); font-size: 0.8125rem; } .kc-pager-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kc-pager-list a, .kc-pager-list span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kc-line); border-radius: 8px; background: var(--kc-surface); color: var(--kc-ink-2); font-size: 0.8125rem; font-weight: 600; } .kc-pager-list a:hover { border-color: var(--kc-primary-border); color: var(--kc-primary); } .kc-pager-list .kc-pager-active { background: var(--kc-primary); border-color: var(--kc-primary); color: #FFF; } .kc-pager-list .kc-pager-disabled { color: var(--kc-muted-2); background: #FAFBFD; } /* ------------------------------------------------------------------- notes */ .kc-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--kc-radius-sm); background: var(--kc-primary-softer); color: var(--kc-ink-2); font-size: 0.8438rem; } .kc-note-icon { color: var(--kc-primary); flex: none; } .kc-note-title { font-weight: 700; margin-bottom: 2px; } .kc-note-yellow { background: #FFFBEB; } .kc-note-yellow .kc-note-icon { color: #D97706; } .kc-note-action { align-items: center; flex-wrap: wrap; } .kc-note-action form { flex: none; } @media (max-width: 640px) { .kc-note-action form { width: 100%; } .kc-note-action form .kc-btn { width: 100%; } } .kc-note-red { background: #FEF2F2; } .kc-note-red .kc-note-icon { color: var(--kc-red); } .kc-note-green { background: #F0FDF4; } .kc-note-green .kc-note-icon { color: var(--kc-green); } .kc-flash { margin-bottom: 18px; } /* ------------------------------------------------------------------- stats */ .kc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .kc-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kc-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kc-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-stat { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius); box-shadow: var(--kc-shadow-xs); } .kc-stat-value { font-size: 1.375rem; font-weight: 700; letter-spacing: -.3px; } .kc-stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--kc-ink-2); } .kc-stat-sub { color: var(--kc-muted); font-size: 0.7812rem; } .kc-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 700; } .kc-trend-up { color: var(--kc-green); } .kc-trend-down { color: var(--kc-red); } /* --------------------------------------------------------------- dropdowns */ .kc-menu { position: relative; } .kc-menu > .ks-user { border: 0; background: transparent; font-family: inherit; } .kc-menu > .ks-bell { border: 0; background: transparent; } .kc-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 268px; max-height: calc(100vh - 100px); padding: 8px; overflow-y: auto; background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius); box-shadow: var(--kc-shadow-md); } .kc-menu-panel[hidden] { display: none; } .kc-menu-panel-wide { width: 340px; } .kc-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--kc-line-soft); margin-bottom: 4px; } .kc-menu-user { display: flex; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid var(--kc-line-soft); margin-bottom: 4px; } .kc-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--kc-ink-2); font-family: inherit; font-size: 0.8438rem; font-weight: 500; text-align: left; } .kc-menu-item .kc-i { color: var(--kc-muted); } .kc-menu-item:hover { background: var(--kc-line-soft); color: var(--kc-ink); } .ka-menu-more-group { display: none; } .ka-menu-more-group.ks-user-menu-more-open { display: block; } .ka-menu-more-chevron { transition: transform .15s ease; } .ks-user-menu-more-open ~ .kc-menu-item .ka-menu-more-chevron { transform: rotate(180deg); } .kc-menu-title { display: block; font-weight: 600; font-size: 0.8438rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kc-menu-sub { display: block; color: var(--kc-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kc-menu-time { color: var(--kc-muted-2); font-size: 0.7188rem; white-space: nowrap; } .kc-menu-empty { padding: 18px 10px; text-align: center; color: var(--kc-muted); font-size: 0.8125rem; } .kc-menu-foot { padding: 8px 4px 4px; margin-top: 4px; border-top: 1px solid var(--kc-line-soft); } .kc-menu-danger { color: var(--kc-red); } .kc-menu-danger .kc-i { color: var(--kc-red); } .kc-menu-danger:hover { background: var(--kc-red-soft); color: var(--kc-red); } /* ------------------------------------------------------------ layout grids */ .va-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; } .va-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .va-grid-half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .va-stack { display: flex; flex-direction: column; gap: 20px; } /* ---------------------------------------------------------------- progress */ .kc-progress { height: 6px; border-radius: var(--kc-radius-pill); background: var(--kc-line-soft); overflow: hidden; } .kc-progress-bar { height: 100%; border-radius: var(--kc-radius-pill); background: var(--kc-primary); } .kc-progress-green .kc-progress-bar { background: var(--kc-green); } .kc-progress-orange .kc-progress-bar { background: #F59E0B; } .kc-progress-blue .kc-progress-bar { background: var(--kc-blue); } /* --------------------------------------------------------------- tab strip */ .kc-tabs { display: flex; align-items: center; gap: 26px; border-bottom: 1px solid var(--kc-line); overflow-x: auto; scrollbar-width: none; } .kc-tabs::-webkit-scrollbar { display: none; } .kc-tab { padding: 12px 0; color: var(--kc-muted); font-size: 0.875rem; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .kc-tab:hover { color: var(--kc-ink-2); } .kc-tab-active { color: var(--kc-primary); border-bottom-color: var(--kc-primary); } .kc-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kc-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--kc-line); border-radius: 9px; background: var(--kc-surface); color: var(--kc-ink-2); font-size: 0.8125rem; font-weight: 600; } .kc-chip:hover { border-color: var(--kc-primary-border); color: var(--kc-primary); } .kc-chip-active { background: var(--kc-primary); border-color: var(--kc-primary); color: #FFF; } .kc-chip-active:hover { color: #FFF; } .kc-chip-soft { height: 28px; padding: 0 10px; background: var(--kc-line-soft); border-color: transparent; font-size: 0.7812rem; font-weight: 600; color: var(--kc-slate); } /* -------------------------------------------------------------- empty rows */ .kc-empty { padding: 46px 20px; text-align: center; color: var(--kc-muted); } .kc-empty-icon { color: var(--kc-muted-2); margin: 0 auto 12px; } .kc-empty-title { font-weight: 700; color: var(--kc-ink-2); margin-bottom: 4px; } /* ------------------------------------------------------------------ prose */ .kc-prose { color: #334155; font-size: 0.9062rem; line-height: 1.75; } .kc-prose h3 { font-size: 1rem; margin: 22px 0 8px; } .kc-prose p { margin-bottom: 12px; } .kc-prose ul, .kc-prose ol { margin: 0 0 14px 20px; } .kc-prose li { list-style: disc; margin-bottom: 6px; } .kc-prose ol li { list-style: decimal; } .kc-prose code { font-family: var(--kc-mono); font-size: 0.7812rem; background: var(--kc-line-soft); padding: 2px 6px; border-radius: 6px; } .kc-check-line { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 0.875rem; } .kc-check-line .kc-i { color: var(--kc-green); margin-top: 2px; } .kc-check-line-violet .kc-i { color: var(--kc-primary); } .kc-check-line-red .kc-i { color: var(--kc-red); } /* --------------------------------------------------------------- utilities */ .kc-flex { display: flex; } .kc-flex-col { display: flex; flex-direction: column; } .kc-items-center { align-items: center; } .kc-items-start { align-items: flex-start; } .kc-justify-between { justify-content: space-between; } .kc-justify-end { justify-content: flex-end; } .kc-justify-center { justify-content: center; } .kc-wrap { flex-wrap: wrap; } .kc-grow { flex: 1; min-width: 0; } .kc-gap-4 { gap: 4px; } .kc-gap-6 { gap: 6px; } .kc-gap-8 { gap: 8px; } .kc-gap-10 { gap: 10px; } .kc-gap-12 { gap: 12px; } .kc-gap-14 { gap: 14px; } .kc-gap-16 { gap: 16px; } .kc-gap-20 { gap: 20px; } .kc-gap-24 { gap: 24px; } .kc-mt-4 { margin-top: 4px; } .kc-mt-6 { margin-top: 6px; } .kc-mt-8 { margin-top: 8px; } .kc-mt-12 { margin-top: 12px; } .kc-mt-16 { margin-top: 16px; } .kc-mt-20 { margin-top: 20px; } .kc-mt-24 { margin-top: 24px; } .kc-mb-4 { margin-bottom: 4px; } .kc-mb-8 { margin-bottom: 8px; } .kc-mb-12 { margin-bottom: 12px; } .kc-mb-16 { margin-bottom: 16px; } .kc-mb-20 { margin-bottom: 20px; } .kc-mb-24 { margin-bottom: 24px; } .kc-mb-0 { margin-bottom: 0; } .kc-text-sm { font-size: 0.8125rem; } .kc-text-xs { font-size: 0.75rem; } .kc-text-lg { font-size: 1rem; } .kc-muted { color: var(--kc-muted); } .kc-muted-2 { color: var(--kc-muted-2); } .kc-ink { color: var(--kc-ink); } .kc-primary { color: var(--kc-primary); } .kc-green { color: var(--kc-green); } .kc-red { color: var(--kc-red); } .kc-orange { color: var(--kc-orange); } .kc-bold { font-weight: 700; } .kc-semi { font-weight: 600; } .kc-center { text-align: center; } .kc-right { text-align: right; } .kc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kc-mono { font-family: var(--kc-mono); font-size: 0.8125rem; } .kc-uppercase { text-transform: uppercase; } .kc-hide-desktop { display: none; } .kc-divider { height: 1px; background: var(--kc-line); margin: 18px 0; } .kc-sep-text { display: flex; align-items: center; gap: 14px; color: var(--kc-muted); font-size: 0.8125rem; margin: 18px 0; } .kc-sep-text::before, .kc-sep-text::after { content: ""; height: 1px; background: var(--kc-line); flex: 1; } .kc-scroll-x { overflow-x: auto; scrollbar-width: none; } .kc-scroll-x::-webkit-scrollbar { display: none; } /* percentage width helpers (avoids inline styles for meters/charts) */ .kc-w-0 { width: 0%; } .kc-w-1 { width: 1%; } .kc-w-2 { width: 2%; } .kc-w-3 { width: 3%; } .kc-w-4 { width: 4%; } .kc-w-5 { width: 5%; } .kc-w-6 { width: 6%; } .kc-w-7 { width: 7%; } .kc-w-8 { width: 8%; } .kc-w-9 { width: 9%; } .kc-w-10 { width: 10%; } .kc-w-11 { width: 11%; } .kc-w-12 { width: 12%; } .kc-w-13 { width: 13%; } .kc-w-14 { width: 14%; } .kc-w-15 { width: 15%; } .kc-w-16 { width: 16%; } .kc-w-17 { width: 17%; } .kc-w-18 { width: 18%; } .kc-w-19 { width: 19%; } .kc-w-20 { width: 20%; } .kc-w-21 { width: 21%; } .kc-w-22 { width: 22%; } .kc-w-23 { width: 23%; } .kc-w-24 { width: 24%; } .kc-w-25 { width: 25%; } .kc-w-26 { width: 26%; } .kc-w-27 { width: 27%; } .kc-w-28 { width: 28%; } .kc-w-29 { width: 29%; } .kc-w-30 { width: 30%; } .kc-w-31 { width: 31%; } .kc-w-32 { width: 32%; } .kc-w-33 { width: 33%; } .kc-w-34 { width: 34%; } .kc-w-35 { width: 35%; } .kc-w-36 { width: 36%; } .kc-w-37 { width: 37%; } .kc-w-38 { width: 38%; } .kc-w-39 { width: 39%; } .kc-w-40 { width: 40%; } .kc-w-41 { width: 41%; } .kc-w-42 { width: 42%; } .kc-w-43 { width: 43%; } .kc-w-44 { width: 44%; } .kc-w-45 { width: 45%; } .kc-w-46 { width: 46%; } .kc-w-47 { width: 47%; } .kc-w-48 { width: 48%; } .kc-w-49 { width: 49%; } .kc-w-50 { width: 50%; } .kc-w-51 { width: 51%; } .kc-w-52 { width: 52%; } .kc-w-53 { width: 53%; } .kc-w-54 { width: 54%; } .kc-w-55 { width: 55%; } .kc-w-56 { width: 56%; } .kc-w-57 { width: 57%; } .kc-w-58 { width: 58%; } .kc-w-59 { width: 59%; } .kc-w-60 { width: 60%; } .kc-w-61 { width: 61%; } .kc-w-62 { width: 62%; } .kc-w-63 { width: 63%; } .kc-w-64 { width: 64%; } .kc-w-65 { width: 65%; } .kc-w-66 { width: 66%; } .kc-w-67 { width: 67%; } .kc-w-68 { width: 68%; } .kc-w-69 { width: 69%; } .kc-w-70 { width: 70%; } .kc-w-71 { width: 71%; } .kc-w-72 { width: 72%; } .kc-w-73 { width: 73%; } .kc-w-74 { width: 74%; } .kc-w-75 { width: 75%; } .kc-w-76 { width: 76%; } .kc-w-77 { width: 77%; } .kc-w-78 { width: 78%; } .kc-w-79 { width: 79%; } .kc-w-80 { width: 80%; } .kc-w-81 { width: 81%; } .kc-w-82 { width: 82%; } .kc-w-83 { width: 83%; } .kc-w-84 { width: 84%; } .kc-w-85 { width: 85%; } .kc-w-86 { width: 86%; } .kc-w-87 { width: 87%; } .kc-w-88 { width: 88%; } .kc-w-89 { width: 89%; } .kc-w-90 { width: 90%; } .kc-w-91 { width: 91%; } .kc-w-92 { width: 92%; } .kc-w-93 { width: 93%; } .kc-w-94 { width: 94%; } .kc-w-95 { width: 95%; } .kc-w-96 { width: 96%; } .kc-w-97 { width: 97%; } .kc-w-98 { width: 98%; } .kc-w-99 { width: 99%; } .kc-w-100 { width: 100%; } /* ------------------------------------------------------------- responsive */ @media (max-width: 1180px) { .kc-stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .kc-stats, .kc-stats-3, .kc-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .va-grid-2, .va-grid-3, .va-grid-half { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .kc-menu-panel, .kc-menu-panel-wide { position: fixed; left: 12px; right: 12px; top: 66px; width: auto; } .kc-page-title { font-size: 1.5rem; } .kc-card-pad, .kc-card-body { padding: 16px; } .kc-card-head { padding: 14px 16px; } .kc-stats, .kc-stats-2, .kc-stats-3, .kc-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kc-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .kc-stat-value { font-size: 1.1875rem; } .kc-grid-form, .kc-grid-form-3 { grid-template-columns: minmax(0, 1fr); } .ka-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } .ka-location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; } .ka-location-grid .kc-label { font-size: 0.75rem; } .ka-location-grid .kc-select, .ka-location-grid .kc-input { padding-left: 8px; font-size: 0.7812rem; } .ka-location-grid .kc-select { padding-right: 26px; background-position: right 6px center; } .kc-btn { height: 44px; } .kc-hide-mobile { display: none !important; } .kc-hide-desktop { display: block; } .kc-pager { flex-direction: column; align-items: stretch; gap: 12px; } .kc-pager-list { justify-content: center; } .kc-band { flex-direction: column; align-items: flex-start; gap: 12px; } .kc-band > .kc-btn, .kc-band > .kc-btn-row { width: 100%; } .kc-band > .kc-btn-row > .kc-btn { flex: 1; } .kc-btn-row-mobile-block { flex-direction: column; align-items: stretch; } .kc-btn-row-mobile-block .kc-btn { width: 100%; } } @media (max-width: 480px) { .kc-stat { padding: 12px; } .kc-stat-value { font-size: 1.125rem; } .kc-stat .kc-tile { width: 36px; height: 36px; border-radius: 10px; } } @media (max-width: 340px) { .kc-stats, .kc-stats-2, .kc-stats-3, .kc-stats-5 { grid-template-columns: minmax(0, 1fr); } } /* optional badge beside the wordmark, e.g. a domain suffix */ .ks-brand-badge { align-self: flex-start; margin-left: -4px; padding: 1px 6px; border-radius: 6px; background: var(--kc-primary-soft); color: var(--kc-primary); font-size: 0.625rem; font-weight: 700; letter-spacing: .3px; } /* inline illustrations that sit beside content */ .kc-art { flex: none; } .kc-art svg { width: 100%; max-width: 220px; height: auto; } /* ----------------------------------------------------------- sortable table */ .kc-th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; white-space: nowrap; } .kc-th-sort .kc-i { opacity: .35; } .kc-th-sort:hover { color: var(--kc-primary); } .kc-th-sort-active { color: var(--kc-primary); } .kc-th-sort-active .kc-i { opacity: 1; } /* a star beside a row title, marking featured records */ .kc-featured-mark { color: var(--kc-orange); vertical-align: -2px; } /* checkbox with a comfortable tap target on mobile record cards */ .kc-check-tap { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; flex: none; } /* ------------------------------------------------------------------ star rating */ .kc-stars { position: relative; display: inline-flex; } .kc-stars-track, .kc-stars-fill { display: flex; gap: 2px; color: var(--kc-line); } .kc-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--kc-yellow); } .kc-stars-fill-0 { width: 0%; } .kc-stars-fill-1 { width: 10%; } .kc-stars-fill-2 { width: 20%; } .kc-stars-fill-3 { width: 30%; } .kc-stars-fill-4 { width: 40%; } .kc-stars-fill-5 { width: 50%; } .kc-stars-fill-6 { width: 60%; } .kc-stars-fill-7 { width: 70%; } .kc-stars-fill-8 { width: 80%; } .kc-stars-fill-9 { width: 90%; } .kc-stars-fill-10 { width: 100%; }