/* ============================================================================ MaylaONE — Design System A modern, enterprise-grade ERP UI. Class names are kept stable so every existing page inherits the new look with no markup changes. Ships with a first-class dark theme (auto + manual override via [data-theme]). ============================================================================ */ /* ─── Design tokens ──────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg: #eef1f6; --bg-soft: #f6f8fb; --panel: #ffffff; --panel-2: #f8fafc; --panel-hover: #f4f7fb; /* Text */ --ink: #16202e; --ink-soft: #3a465a; --muted: #6a7689; --muted-2: #93a0b5; /* Lines */ --line: #e4e9f2; --line-strong: #d3dbe8; /* Brand — a confident, modern indigo/blue */ --brand: #3557f0; --brand-strong: #2742d6; --brand-ink: #ffffff; --brand-soft: #e9eeff; --brand-soft-2: #dbe3ff; --ring: rgba(53, 87, 240, 0.35); /* Semantic */ --good: #12855a; --good-soft: #d9f3e6; --danger: #d23f38; --danger-soft: #fde3e1; --danger-strong: #b02f28; --warn: #b5731a; --warn-soft: #fceccf; --info: #1f6fb2; --info-soft: #dcecfb; /* Top bar (dark chrome) */ --topbar-bg: #131a2b; --topbar-bg-2: #1b2540; --topbar-ink: #eef2fb; --topbar-ink-dim:#9aa8c7; --topbar-hover: rgba(255, 255, 255, 0.08); --topbar-active: rgba(255, 255, 255, 0.14); --topbar-border: rgba(255, 255, 255, 0.09); --topbar-h: 56px; /* Elevation */ --shadow-xs: 0 1px 1px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05); --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.09), 0 2px 4px rgba(16, 24, 40, 0.05); --shadow-lg: 0 18px 44px rgba(16, 24, 40, 0.18); /* Radii */ --radius-xs: 5px; --radius-sm: 7px; --radius-md: 11px; --radius-lg: 16px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.16s; /* Search glyph (light theme) — stroke matches --muted. */ --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236a7689' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); color-scheme: light; } /* Auto dark mode */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* Manual dark toggle (data-theme="dark" set on ) */ :root[data-theme="dark"] { --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238b97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); --bg: #0d1117; --bg-soft: #10151d; --panel: #161c26; --panel-2: #1b222e; --panel-hover: #1e2632; --ink: #e8edf5; --ink-soft: #c1cad8; --muted: #8b97ab; --muted-2: #6b7688; --line: #262f3d; --line-strong: #33404f; --brand: #6f8bff; --brand-strong: #5573f5; --brand-ink: #0d1117; --brand-soft: #1c2740; --brand-soft-2: #24325a; --ring: rgba(111, 139, 255, 0.4); --good: #4cc78a; --good-soft: #143728; --danger: #f27a72; --danger-soft: #3a1e1c; --danger-strong: #f27a72; --warn: #e0a44a; --warn-soft: #362a12; --info: #64b0e8; --info-soft: #14293a; --topbar-bg: #0a0e15; --topbar-bg-2: #131b2e; --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238b97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); --bg: #0d1117; --bg-soft: #10151d; --panel: #161c26; --panel-2: #1b222e; --panel-hover: #1e2632; --ink: #e8edf5; --ink-soft: #c1cad8; --muted: #8b97ab; --muted-2: #6b7688; --line: #262f3d; --line-strong: #33404f; --brand: #6f8bff; --brand-strong: #5573f5; --brand-ink: #0d1117; --brand-soft: #1c2740; --brand-soft-2: #24325a; --ring: rgba(111, 139, 255, 0.4); --good: #4cc78a; --good-soft: #143728; --danger: #f27a72; --danger-soft: #3a1e1c; --danger-strong: #f27a72; --warn: #e0a44a; --warn-soft: #362a12; --info: #64b0e8; --info-soft: #14293a; --topbar-bg: #0a0e15; --topbar-bg-2: #131b2e; --shadow-xs: 0 1px 1px rgba(0,0,0,.3); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 20px 48px rgba(0,0,0,.6); color-scheme: dark; } } /* ─── Reset & base ───────────────────────────────────────────────────────── */ * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; text-rendering: optimizeLegibility; } ::selection { background: var(--brand-soft-2); color: var(--ink); } a { color: var(--brand); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--brand-strong); text-decoration: underline; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Custom scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ─── Page chrome ────────────────────────────────────────────────────────── */ .page { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; padding: 26px 30px 56px; animation: page-in 0.28s var(--ease); } .content { max-width: 1440px; margin: 0 auto; } @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ─── Top bar ────────────────────────────────────────────────────────────── */ .topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; background: linear-gradient(180deg, var(--topbar-bg-2), var(--topbar-bg)); color: var(--topbar-ink); min-height: var(--topbar-h); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--topbar-border); padding: 0 16px; box-shadow: 0 1px 0 rgba(0,0,0,0.2), var(--shadow-sm); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; } .topbar-right { gap: 6px; } .topbar a, .topbar a:visited { color: var(--topbar-ink); } .topbar a:hover { text-decoration: none; color: #fff; } .topbar-brand { font-size: 1.05rem; letter-spacing: 0.2px; padding: 0 4px; color: var(--topbar-ink) !important; display: inline-flex; align-items: center; gap: 8px; } .topbar-brand::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #6f8bff, #3557f0 60%, #7b3ff0); box-shadow: 0 2px 8px -1px rgba(53,87,240,0.7); flex: 0 0 auto; } .topbar-brand strong { color: #fff; font-weight: 800; } .topbar-sep { color: var(--topbar-ink-dim); font-weight: 300; user-select: none; margin: 0 1px; opacity: 0.7; } .topbar-appname { font-weight: 650; font-size: 0.95rem; padding: 6px 11px; border-radius: var(--radius-sm); transition: background var(--dur) var(--ease); } .topbar-appname:hover { background: var(--topbar-hover); } .topbar .user { color: var(--topbar-ink-dim); font-size: 0.9rem; padding: 0 8px 0 4px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .topbar .user::before { content: attr(data-initial); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #7b3ff0); color: #fff; font-weight: 700; font-size: 0.8rem; flex: 0 0 auto; } .topbar-iconlink { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: transparent; border: 0; cursor: pointer; color: var(--topbar-ink-dim); padding: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .topbar-iconlink svg { width: 18px; height: 18px; display: block; } .topbar-iconlink:hover { background: var(--topbar-hover); color: #fff; } .logout-form { margin: 0; display: inline-flex; } /* Theme toggle: show the moon (switch-to-dark) in light mode, sun in dark mode. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* ─── App switcher (waffle dropdown) ─────────────────────────────────────── */ .app-switcher { position: relative; } .app-switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); color: var(--topbar-ink); transition: background var(--dur) var(--ease); } .app-switcher > summary::-webkit-details-marker, .app-switcher > summary::marker { display: none; content: ""; } .app-switcher > summary:hover { background: var(--topbar-hover); } .app-switcher[open] > summary { background: var(--topbar-active); } .waffle-svg { width: 22px; height: 22px; display: block; color: var(--topbar-ink); } .app-switcher-panel { position: absolute; top: calc(100% + 10px); left: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; min-width: 580px; z-index: 60; animation: pop-in 0.16s var(--ease); } @keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } } .app-switcher-header { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .app-switcher-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8rem; } .app-switcher-footer-label { color: var(--muted); } .app-switcher-footer a { color: var(--muted) !important; } .app-switcher-footer a:hover { color: var(--brand) !important; text-decoration: underline; } /* ─── Company switcher (multi-company mode) ─────────────────────────────── */ .company-switcher { position: relative; } .company-switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--topbar-ink); font-size: 0.85rem; font-weight: 600; white-space: nowrap; transition: background var(--dur) var(--ease); } .company-switcher > summary::-webkit-details-marker, .company-switcher > summary::marker { display: none; content: ""; } .company-switcher > summary:hover { background: var(--topbar-hover); } .company-switcher[open] > summary { background: var(--topbar-active); } .company-switcher > summary svg { width: 16px; height: 16px; flex: none; } .company-switcher > summary .company-caret { width: 12px; height: 12px; opacity: 0.7; } .company-current-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .company-switcher-panel { position: absolute; top: calc(100% + 10px); right: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; min-width: 272px; max-width: 340px; z-index: 60; animation: pop-in 0.16s var(--ease); } .company-switcher-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px 8px; } .company-switcher-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 0.68rem; text-align: center; } /* The list scrolls; header and footer stay put — long company lists stay usable. */ .company-switcher-list { display: flex; flex-direction: column; gap: 2px; max-height: min(56vh, 384px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-right: 2px; } .company-switcher-list::-webkit-scrollbar { width: 8px; } .company-switcher-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .company-switcher-list::-webkit-scrollbar-track { background: transparent; } .company-switch-form { margin: 0; flex: none; } .company-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; transition: background var(--dur) var(--ease); } .company-option:hover:not(:disabled), .company-option:focus-visible { background: var(--topbar-hover, rgba(125, 125, 125, 0.12)); } .company-option.active { font-weight: 600; cursor: default; background: color-mix(in srgb, var(--brand) 10%, transparent); } .company-avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-size: 0.82rem; font-weight: 700; } .company-option.active .company-avatar { background: var(--brand); color: #fff; } .company-option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; } .company-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-option-code { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-option-check { width: 15px; height: 15px; color: var(--brand); flex: none; } .company-switcher-footer { margin-top: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 0.8rem; } .company-switcher-footer a { color: var(--muted) !important; text-decoration: none; } .company-switcher-footer a:hover { color: var(--brand) !important; text-decoration: underline; } @media (max-width: 860px) { .company-current-name { max-width: 90px; } } /* ─── Top submenu (horizontal) ───────────────────────────────────────────── */ .topbar-submenu { display: flex; align-items: stretch; gap: 2px; min-height: var(--topbar-h); overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 0 8px; scrollbar-width: none; -ms-overflow-style: none; } .topbar-submenu::-webkit-scrollbar { height: 0; } .topbar-submenu .topbar-link { display: inline-flex; align-items: center; padding: 0 14px; color: var(--topbar-ink-dim); font-size: 0.9rem; font-weight: 550; border-bottom: 2px solid transparent; position: relative; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .topbar-submenu .topbar-link:hover { color: #fff; background: var(--topbar-hover); } .topbar-submenu .topbar-link.active { color: #fff; border-bottom-color: var(--brand); background: linear-gradient(180deg, transparent 60%, rgba(53,87,240,0.16) 100%); } /* ─── Apps grid (home + switcher panel) ──────────────────────────────────── */ .apps-grid-title { margin: 0 0 4px; font-size: 1.7rem; font-weight: 750; letter-spacing: -0.02em; } .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; margin-top: 22px; } .app-tile { --app-color: var(--brand); position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 14px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; color: var(--ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); overflow: hidden; isolation: isolate; } .app-tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; background: radial-gradient(120px 60px at 50% -10px, color-mix(in srgb, var(--app-color) 22%, transparent), transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease); z-index: -1; } .app-tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--app-color) 45%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-3px); } .app-tile:hover::after { opacity: 1; } .app-tile-icon { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--app-color) 82%, #fff 18%), var(--app-color)); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--app-color) 70%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform var(--dur) var(--ease); } .app-tile:hover .app-tile-icon { transform: scale(1.05); } .app-tile-icon .app-svg { width: 28px; height: 28px; display: block; } .app-tile-title { font-weight: 650; font-size: 0.94rem; line-height: 1.25; color: var(--ink); } .app-tile-badge { font-size: 0.66rem; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 2px 8px; letter-spacing: 0.03em; text-transform: uppercase; } /* Compact tiles inside the switcher panel */ .app-switcher-panel .apps-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); margin-top: 0; gap: 10px; } .app-switcher-panel .app-tile { padding: 14px 10px; border-radius: var(--radius-md); } .app-switcher-panel .app-tile-icon { width: 44px; height: 44px; border-radius: 12px; } .app-switcher-panel .app-tile-icon .app-svg { width: 22px; height: 22px; } .app-switcher-panel .app-tile-title { font-size: 0.86rem; } /* ─── Typography ─────────────────────────────────────────────────────────── */ h1 { font-size: 1.55rem; font-weight: 720; margin: 0 0 10px; letter-spacing: -0.02em; } h2 { font-size: 1.2rem; font-weight: 680; margin: 0 0 10px; letter-spacing: -0.01em; } h3 { font-size: 1rem; font-weight: 660; margin: 20px 0 8px; } .lead { color: var(--muted); font-size: 0.98rem; } .muted { color: var(--muted); } .page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-header h1, .page-header h2 { margin: 0; } .header-actions { display: flex; gap: 8px; align-items: center; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-weight: 550; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); } .button:hover { border-color: var(--muted-2); background: var(--panel-hover); text-decoration: none; } .button:active { transform: translateY(1px); box-shadow: none; } .button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .button.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 8%), var(--brand)); color: var(--brand-ink); border-color: var(--brand-strong); box-shadow: 0 1px 2px rgba(16,24,40,0.14), inset 0 1px 0 rgba(255,255,255,0.2); } .button.primary:hover { background: linear-gradient(180deg, var(--brand), var(--brand-strong)); border-color: var(--brand-strong); } .button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .button.small { padding: 4px 10px; font-size: 0.83rem; border-radius: var(--radius-xs); } .button.danger { background: var(--danger); color: #fff; border-color: var(--danger-strong); box-shadow: 0 1px 2px rgba(16,24,40,0.14); } .button.danger:hover { background: var(--danger-strong); } .button.danger-outline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--panel); } .button.danger-outline:hover { border-color: var(--danger); background: var(--danger-soft); } .button.ghost { background: transparent; border-color: transparent; box-shadow: none; } .button.ghost:hover { background: var(--panel-hover); border-color: var(--line); } .link-button { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font: inherit; font-weight: 550; } .link-button:hover { color: var(--brand-strong); text-decoration: underline; } .link-button.danger { color: var(--danger); } /* ─── Toolbar / filters ──────────────────────────────────────────────────── */ .toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; flex-wrap: wrap; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } /* Search: a compact pill that grows a little on focus, not a full-width slab. */ .toolbar input[type=search] { flex: 0 1 250px; min-width: 170px; height: 34px; padding: 0 14px 0 34px; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: 0.9rem; background: var(--panel-2) var(--search-icon) no-repeat 12px center; background-size: 15px; color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), flex-basis 0.2s var(--ease); } .toolbar input[type=search]:hover { border-color: var(--muted-2); } .toolbar input[type=search]:focus { outline: none; border-color: var(--brand); background-color: var(--panel); box-shadow: 0 0 0 3px var(--ring); flex-basis: 320px; } .toolbar input[type=search]::placeholder { color: var(--muted-2); } .toolbar input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; } /* Plain text inputs in toolbars (inline panels etc.) — no search affordance. */ .toolbar input[type=text] { flex: 0 1 220px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--panel-2); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .toolbar input[type=text]:focus { outline: none; border-color: var(--brand); background-color: var(--panel); box-shadow: 0 0 0 3px var(--ring); } .toolbar select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; } .toolbar select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .toolbar label.inline { display: flex; align-items: center; gap: 6px; color: var(--muted); } /* ─── Data table ─────────────────────────────────────────────────────────── */ /* NOTE: no `overflow: hidden` here — any overflow value other than visible turns the table into the containing scrollport for the sticky header, which then permanently offsets the header 56px into the table and covers the first data row. Corner clipping is done per-cell below instead. */ table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-size: 0.9rem; } table.grid thead th:first-child { border-top-left-radius: var(--radius-md); } table.grid thead th:last-child { border-top-right-radius: var(--radius-md); } table.grid tbody:last-child tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); } table.grid tbody:last-child tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); } table.grid tfoot tr:last-child > *:first-child { border-bottom-left-radius: var(--radius-md); } table.grid tfoot tr:last-child > *:last-child { border-bottom-right-radius: var(--radius-md); } table.grid th, table.grid td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } table.grid thead th { background: var(--panel-2); font-weight: 640; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); position: sticky; top: var(--topbar-h); z-index: 1; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } table.grid tbody tr { transition: background var(--dur) var(--ease); } table.grid tbody tr:hover { background: var(--panel-hover); } table.grid tbody tr:last-child td { border-bottom: 0; } /* Keep .actions a real table cell — display:flex on a breaks table layout (the cell escapes its row: buttons render outside the table and a phantom row appears above the header). Space the buttons with margins instead. */ table.grid td.actions { text-align: right; white-space: nowrap; } table.grid td.actions > * { display: inline-flex; vertical-align: middle; } table.grid td.actions > * + * { margin-left: 6px; } table.grid th.num, table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; } table.grid tfoot th, table.grid tfoot td { background: var(--panel-2); font-weight: 640; border-top: 1px solid var(--line-strong); border-bottom: 0; } table.grid td .muted, table.grid tbody tr td.muted { color: var(--muted); } .pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 0.88rem; } /* Empty-state row helper */ table.grid tbody tr td[colspan] { color: var(--muted); text-align: center; padding: 34px 14px; font-style: normal; } /* ─── Forms ──────────────────────────────────────────────────────────────── */ .form { max-width: 720px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); } .form fieldset { border: 0; padding: 0; margin: 0 0 16px; } .form legend { font-weight: 650; padding-bottom: 6px; } .form label { display: block; margin-bottom: 12px; } .form label span { display: block; font-size: 0.82rem; font-weight: 550; color: var(--ink-soft); margin-bottom: 4px; } .form label em { color: var(--danger); font-style: normal; } .form input, .form select, .form textarea, .form-card input, .form-card select, .form-card textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--panel-2); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } .form input:focus, .form select:focus, .form textarea:focus, .form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 3px var(--ring); } .form input::placeholder, .form-card input::placeholder, .form textarea::placeholder { color: var(--muted-2); } .form input:disabled, .form-card input:disabled, .form select:disabled { opacity: 0.6; cursor: not-allowed; } .form label.inline { display: flex; align-items: center; gap: 8px; } .form label.inline input { width: auto; } .form-actions { display: flex; gap: 8px; margin-top: 16px; } input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 16px; height: 16px; } /* Inline create/edit form card shown above the list tables */ .form-card { max-width: 1000px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 18px 20px; margin: 0 0 18px; box-shadow: var(--shadow-md); animation: pop-in 0.18s var(--ease); position: relative; } .form-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); border-radius: var(--radius-md) 0 0 var(--radius-md); } .form-card h3 { margin: 0 0 14px; font-size: 1.05rem; } .form-card label { display: block; } .form-card label span { display: block; font-size: 0.8rem; font-weight: 550; color: var(--ink-soft); margin-bottom: 4px; } .form-card label.inline { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .form-card label.inline input { width: auto; } .form-card label.inline span { margin: 0; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; margin-bottom: 14px; } .form-grid .span-2 { grid-column: span 2; } /* Dynamic line editors inside the form card */ table.lines { width: 100%; border-collapse: collapse; margin: 8px 0 12px; } table.lines th, table.lines td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9rem; } table.lines th { color: var(--muted); font-weight: 640; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; } table.lines td.num input { text-align: right; } table.lines input, table.lines select { width: 100%; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); font: inherit; background: var(--panel-2); color: var(--ink); } table.lines input:focus, table.lines select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--ring); } .imbalance { font-weight: 650; } .imbalance.off { color: var(--danger); } .imbalance.ok { color: var(--good); } /* ─── Cards ──────────────────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .card dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; } .card dt { color: var(--muted); font-size: 0.9rem; } .card dd { margin: 0; } .card h3 { margin-top: 0; } /* ─── Alerts ─────────────────────────────────────────────────────────────── */ .alert { padding: 11px 14px 11px 42px; border-radius: var(--radius-sm); margin: 10px 0; position: relative; border: 1px solid transparent; font-size: 0.92rem; } .alert::before { content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; } .alert.error { background: var(--danger-soft); color: var(--danger-strong); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .alert.error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d23f38' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); } .alert.success { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); } .alert.success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2312855a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); } .alert.info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); } .alert.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } /* ─── Status badges ──────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 640; background: var(--panel-2); color: var(--muted); white-space: nowrap; border: 1px solid var(--line); line-height: 1.3; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; } .badge.is-good, .badge-ok { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 28%, transparent); } .badge.is-active { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 28%, transparent); } .badge.is-bad { background: var(--danger-soft); color: var(--danger-strong); border-color: color-mix(in srgb, var(--danger) 28%, transparent); } .badge-off { background: var(--panel-2); color: var(--muted); border-color: var(--line); } .badge-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .badge.is-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); } /* ─── Reports / stat cards ───────────────────────────────────────────────── */ .report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; } .report-grid .card dd.num { text-align: right; font-variant-numeric: tabular-nums; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 4px 0 22px; } .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat-card .stat-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .stat-card .stat-value { font-size: 1.7rem; font-weight: 720; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; } .stat-card .stat-delta { font-size: 0.82rem; font-weight: 600; margin-top: 4px; } .stat-card .stat-delta.up { color: var(--good); } .stat-card .stat-delta.down { color: var(--danger); } .stat-card::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--brand-soft), transparent 70%); opacity: 0.6; } /* ─── Empty state ────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 24px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); } .empty-state svg { width: 40px; height: 40px; opacity: 0.5; margin-bottom: 12px; } .empty-state h3 { margin: 0 0 4px; color: var(--ink); } /* ─── Loading ────────────────────────────────────────────────────────────── */ .spinner { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-hover) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--radius-xs); } @keyframes shimmer { to { background-position: -200% 0; } } /* ─── Login ──────────────────────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 500px at 15% -5%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), radial-gradient(800px 500px at 90% 110%, color-mix(in srgb, #7b3ff0 14%, transparent), transparent 60%), var(--bg); padding: 24px; } .login-card { width: 100%; max-width: 400px; } .login-card h1 { text-align: center; } .login-brand { display: inline-flex; align-items: center; gap: 10px; justify-content: center; width: 100%; font-size: 1.4rem; color: var(--ink) !important; margin-bottom: 8px; } .login-brand::before { content: ""; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #6f8bff, #3557f0 60%, #7b3ff0); box-shadow: 0 4px 14px -2px rgba(53,87,240,0.6); } .login-brand strong { font-weight: 800; } .login-brand:hover { text-decoration: none; } .form.login { max-width: 380px; margin: 18px auto 0; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); padding: 26px; } .form.login .button { width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 0.95rem; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .topbar { grid-template-columns: auto 1fr auto; padding: 0 12px; column-gap: 8px; } .topbar .user { display: none; } .topbar-submenu { grid-column: 1 / -1; min-height: 46px; padding: 0 6px; border-top: 1px solid var(--topbar-border); } .app-switcher-panel { min-width: 90vw; left: -8px; } .app-switcher-panel .apps-grid { grid-template-columns: repeat(2, 1fr); } main { padding: 18px 14px 40px; } table.grid thead th { top: 0; } .card dl { grid-template-columns: 1fr; } } /* ─── Kanban board ───────────────────────────────────────────────────────── */ .kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 18px; min-height: 420px; } .kanban-col { flex: 0 0 292px; max-width: 292px; background: color-mix(in srgb, var(--panel) 55%, var(--bg)); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; max-height: calc(100vh - 220px); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .kanban-col.drag-over { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: var(--brand-soft); } .kanban-col-head { --col-color: var(--brand); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 14px 10px; border-bottom: 2px solid var(--col-color); position: relative; } .kanban-col-title { font-weight: 680; font-size: 0.92rem; } .kanban-col-count { font-size: 0.72rem; font-weight: 700; background: color-mix(in srgb, var(--col-color) 14%, var(--panel)); color: var(--col-color); border-radius: 999px; padding: 1px 8px; } .kanban-col-total { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 80px; } .kanban-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 13px; box-shadow: var(--shadow-xs); cursor: grab; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); } .kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--line-strong); } .kanban-card:active { cursor: grabbing; } .kanban-card.dragging { opacity: 0.45; transform: rotate(1.5deg) scale(0.98); } .kanban-card-title { font-weight: 640; font-size: 0.92rem; line-height: 1.3; margin-bottom: 6px; } .kanban-card-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; } .kanban-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .kanban-card-foot .spacer { flex: 1; } .kanban-card-amount { font-weight: 680; font-size: 0.9rem; font-variant-numeric: tabular-nums; } .kanban-card-actions { display: flex; gap: 4px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); } .kanban-empty { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 22px 10px; text-align: center; color: var(--muted-2); font-size: 0.83rem; } /* ─── View switcher ──────────────────────────────────────────────────────── */ .view-switcher { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; margin-left: auto; background: var(--panel-2); } .view-switcher-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border: 0; background: transparent; cursor: pointer; color: var(--muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .view-switcher-btn + .view-switcher-btn { border-left: 1px solid var(--line); } .view-switcher-btn svg { width: 17px; height: 17px; } .view-switcher-btn:hover { color: var(--ink); background: var(--panel-hover); } .view-switcher-btn.active { background: var(--brand); color: #fff; } /* ─── Workflow status bar ────────────────────────────────────────────────── */ .statusbar { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--panel); } .statusbar-step { border: 0; background: transparent; font: inherit; font-size: 0.82rem; font-weight: 600; padding: 6px 16px; cursor: pointer; color: var(--muted); position: relative; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .statusbar-step + .statusbar-step { border-left: 1px solid var(--line); } .statusbar-step:hover:not(:disabled) { background: var(--panel-hover); color: var(--ink); } .statusbar-step.done { color: var(--brand); background: var(--brand-soft); } .statusbar-step.current { color: #fff; background: var(--brand); cursor: default; } .statusbar-step:disabled { cursor: default; } /* ─── Priority stars ─────────────────────────────────────────────────────── */ .stars { display: inline-flex; gap: 1px; } .star { border: 0; background: transparent; cursor: pointer; padding: 0 1px; font-size: 1rem; line-height: 1; color: var(--line-strong); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .star.on { color: #f0b429; } .stars:not(.readonly) .star:hover { transform: scale(1.25); } .stars.readonly .star { cursor: default; } /* ─── Avatars ────────────────────────────────────────────────────────────── */ .avatar { --avatar-color: var(--brand); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--avatar-color) 18%, var(--panel)); color: var(--avatar-color); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.02em; border: 1px solid color-mix(in srgb, var(--avatar-color) 32%, transparent); flex: 0 0 auto; } /* ─── Toasts ─────────────────────────────────────────────────────────────── */ .toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); } .toast { display: flex; align-items: center; gap: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-lg); font-size: 0.9rem; cursor: pointer; animation: toast-in 0.22s var(--ease); border-left-width: 3px; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .toast.leaving { opacity: 0; transform: translateX(16px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .toast-icon { display: inline-flex; flex: 0 0 auto; } .toast-icon svg { width: 18px; height: 18px; } .toast-success { border-left-color: var(--good); } .toast-success .toast-icon { color: var(--good); } .toast-error { border-left-color: var(--danger); } .toast-error .toast-icon { color: var(--danger); } .toast-info { border-left-color: var(--info); } .toast-info .toast-icon { color: var(--info); } /* ─── Command palette ────────────────────────────────────────────────────── */ .topbar-search { display: inline-flex; align-items: center; gap: 9px; min-width: 230px; height: 36px; padding: 0 8px 0 12px; margin-right: 6px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--topbar-ink-dim); font: inherit; font-size: 0.86rem; cursor: pointer; text-align: left; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .topbar-search:hover { background: rgba(255,255,255,0.09); color: #fff; border-color: rgba(255,255,255,0.22); } .topbar-search:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .topbar-search svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.85; } .topbar-search-hint { flex: 1; font-weight: 450; letter-spacing: 0.01em; } .topbar-search kbd { font-family: inherit; font-size: 0.68rem; font-weight: 650; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; color: var(--topbar-ink-dim); line-height: 1.2; } .topbar-search:hover kbd { color: #fff; } .palette-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(10, 14, 25, 0.45); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .palette-backdrop.open { display: flex; animation: fade-in 0.14s var(--ease); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .palette { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop-in 0.16s var(--ease); } .palette-inputwrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); } .palette-inputwrap svg { width: 18px; height: 18px; flex: 0 0 auto; } .palette-inputwrap kbd { font-family: inherit; font-size: 0.7rem; font-weight: 600; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px; color: var(--muted); } .palette-input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); } .palette-input::placeholder { color: var(--muted-2); } .palette-list { max-height: 330px; overflow-y: auto; padding: 8px; } .palette-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink) !important; text-decoration: none !important; } .palette-item.selected { background: var(--brand-soft); } .palette-chip { --chip: var(--brand); width: 10px; height: 10px; border-radius: 3px; background: var(--chip); flex: 0 0 auto; } .palette-label { font-weight: 600; font-size: 0.92rem; } .palette-app { margin-left: auto; font-size: 0.78rem; color: var(--muted); } .palette-empty { padding: 26px; text-align: center; color: var(--muted); } @media (max-width: 860px) { .topbar-search-hint, .topbar-search kbd { display: none; } .topbar-search { min-width: 0; width: 36px; padding: 0; justify-content: center; border-radius: var(--radius-sm); } .kanban-col { flex-basis: 260px; } .toolbar input[type=search] { flex: 1 1 100%; } } /* ─── Admin: Apps (install/uninstall) ────────────────────────────────────── */ .apps-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 18px; } .apps-admin-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .apps-admin-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .apps-admin-card.is-uninstalled { opacity: 0.7; background: var(--panel-2); } .apps-admin-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); } .apps-admin-icon svg { width: 24px; height: 24px; } .apps-admin-body { flex: 1 1 auto; min-width: 0; } .apps-admin-title { font-weight: 650; display: flex; align-items: baseline; gap: 8px; } .apps-admin-ver { font-size: 0.75rem; color: var(--muted); font-weight: 400; } .apps-admin-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .apps-admin-count { font-size: 0.78rem; color: var(--muted); } .apps-admin-actions { flex: 0 0 auto; } /* ─── Admin: Settings hub ────────────────────────────────────────────────── */ .settings-shell { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; } .settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 78px; } .settings-nav h3 { margin: 0 0 8px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .settings-nav-item { text-align: left; padding: 9px 13px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-weight: 550; color: var(--ink-soft); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .settings-nav-item:hover { background: var(--panel-hover); color: var(--ink); } .settings-nav-item.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .settings-pane { min-width: 0; } .settings-group { margin: 0 0 14px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 650; } .settings-field { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); } .settings-field:first-of-type { border-top: 0; } .settings-label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; } .settings-help { font-size: 0.8rem; color: var(--muted); font-weight: 400; } .settings-input input[type=text], .settings-input input[type=number], .settings-input input[type=password], .settings-input select { width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--panel-2); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .settings-input input:focus, .settings-input select:focus { outline: none; border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 3px var(--ring); } .settings-input input[type=checkbox] { width: 18px; height: 18px; } @media (max-width: 860px) { .settings-shell { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } .settings-field { grid-template-columns: 1fr; gap: 8px; } } /* ---- File drop zone (drag documents onto a grid, Odoo journal-upload style) ---- */ .dropzone-host { position: relative; } .dropzone-host .dropzone-input { display: none; } .dropzone-overlay { display: none; position: absolute; inset: 0; z-index: 5; border: 2px dashed var(--brand); border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand) 10%, transparent); align-items: center; justify-content: center; pointer-events: none; } .dropzone-host.dragging .dropzone-overlay { display: flex; } .dropzone-overlay-inner { background: var(--panel); color: var(--ink); border: 1px solid var(--brand); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px 20px; font-weight: 600; } .dropzone-hint { border: 1px dashed var(--line, var(--muted)); border-radius: var(--radius-md); color: var(--muted); padding: 8px 14px; margin: 10px 0; font-size: 0.9em; }