/* ========================================================================== Missz — Tokens d'estil inspirats en el sistema NPAW (/home/ferran/ui). Tres temes: light (per defecte), dark, darker. Activats com a classe sobre l'element . Tots els components consumeixen exclusivament tokens --npaw-* perquè canviar de tema es redueixi a canviar la classe del root. ========================================================================== */ /* ── Tokens compartits (estructura, radis, motion, z-index) ─────────────── */ :root { --npaw-radius-xs: 2px; --npaw-radius-sm: 4px; --npaw-radius-md: 6px; --npaw-radius-lg: 10px; --npaw-radius-xl: 14px; --npaw-radius-pill: 9999px; --npaw-transition-fast: 120ms ease-out; --npaw-transition-base: 180ms ease-out; --npaw-transition-slow: 320ms ease-out; --npaw-z-sticky: 1020; --npaw-z-modal-backdrop: 1040; --npaw-z-modal: 1050; --npaw-z-toast: 1080; --npaw-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ── NpawButton — geometry tokens (ported from /home/ferran/ui) ── Theme-agnostic sizing scale. Colour-bearing tokens live in the per-theme blocks below so each theme can drive primary / danger surfaces with its own accent / phoenix tokens. */ --npaw-button-radius: var(--npaw-radius-lg, 0.5rem); --npaw-button-border-width: 1px; --npaw-button-font-weight: 500; --npaw-button-letter-spacing: 0; --npaw-button-transition: 120ms ease-out; --npaw-button-icon-gap: 0.5rem; --npaw-button-disabled-opacity: 0.55; --npaw-button-height-xs: 24px; --npaw-button-height-sm: 32px; --npaw-button-height-md: 38px; --npaw-button-height-lg: 44px; --npaw-button-padding-x-xs: 0.5rem; --npaw-button-padding-x-sm: 0.625rem; --npaw-button-padding-x-md: 0.875rem; --npaw-button-padding-x-lg: 1.125rem; --npaw-button-font-size-xs: 0.75rem; --npaw-button-font-size-sm: 0.8125rem; --npaw-button-font-size-md: 0.875rem; --npaw-button-font-size-lg: 0.9375rem; --npaw-button-icon-size-xs: 12px; --npaw-button-icon-size-sm: 14px; --npaw-button-icon-size-md: 16px; --npaw-button-icon-size-lg: 18px; /* NpawButton palette — cascades from per-theme accent / phoenix / surface tokens, so a single declaration produces the right look in every theme. */ --npaw-button-focus-ring: 0 0 0 3px var(--npaw-accent-glow); --npaw-button-focus-ring-danger: 0 0 0 3px var(--npaw-accent-glow); --npaw-button-primary-bg: var(--npaw-accent); --npaw-button-primary-fg: var(--npaw-on-accent); --npaw-button-primary-bg-hover: var(--npaw-accent-strong); --npaw-button-primary-bg-active: color-mix(in srgb, var(--npaw-accent) 70%, #000); --npaw-button-secondary-bg: var(--npaw-surface-subtle); --npaw-button-secondary-fg: var(--npaw-text-primary); --npaw-button-secondary-bg-hover: var(--npaw-surface-hover); --npaw-button-secondary-bg-active: var(--npaw-surface-active); --npaw-button-secondary-border: var(--npaw-border-color); --npaw-button-tertiary-bg: transparent; --npaw-button-tertiary-fg: var(--npaw-text-secondary); --npaw-button-tertiary-bg-hover: var(--npaw-surface-hover); --npaw-button-tertiary-bg-active: var(--npaw-surface-active); --npaw-button-danger-bg: var(--phoenix-danger); --npaw-button-danger-fg: #ffffff; --npaw-button-danger-bg-hover: color-mix(in srgb, var(--phoenix-danger) 85%, #000); --npaw-button-danger-bg-active: color-mix(in srgb, var(--phoenix-danger) 70%, #000); --npaw-button-success-bg: var(--phoenix-success); --npaw-button-success-fg: #ffffff; --npaw-button-success-bg-hover: color-mix(in srgb, var(--phoenix-success) 85%, #000); --npaw-button-success-bg-active: color-mix(in srgb, var(--phoenix-success) 70%, #000); --npaw-button-warning-bg: var(--phoenix-warning); --npaw-button-warning-fg: #1c2536; --npaw-button-warning-bg-hover: color-mix(in srgb, var(--phoenix-warning) 85%, #000); --npaw-button-warning-bg-active: color-mix(in srgb, var(--phoenix-warning) 70%, #000); /* Brand-mark gradient + glow — used by the auth shell, brand badges, etc. Cascades from per-theme --npaw-accent + --npaw-brand-mark-accent-2 so each theme paints a distinct dual-tone halo. */ --npaw-brand-mark-gradient: linear-gradient(135deg, var(--npaw-accent) 0%, color-mix(in srgb, var(--npaw-accent) 55%, var(--npaw-brand-mark-accent-2, var(--npaw-accent))) 50%, var(--npaw-brand-mark-accent-2, var(--npaw-accent)) 100%); --npaw-brand-mark-glow: radial-gradient(ellipse at center, color-mix(in srgb, var(--npaw-accent) 30%, transparent) 0%, color-mix(in srgb, var(--npaw-brand-mark-accent-2, var(--npaw-accent)) 18%, transparent) 45%, transparent 70%); } /* ────────────────────────────────────────────────────────────────────────── LIGHT (per defecte) — Linear / Notion. Canvas blanc-grisós, cards blancs. Accent indigo-violeta refinat. ────────────────────────────────────────────────────────────────────────── */ :root, :root.light { --npaw-color-scheme: light; --npaw-body-bg: #f5f7fa; --npaw-body-color: #131a2a; --npaw-primary: #5e6ad2; --npaw-border-color: rgba(15, 23, 42, 0.08); --npaw-border-subtle: rgba(15, 23, 42, 0.04); --npaw-surface: #ffffff; --npaw-surface-hover: rgba(15, 23, 42, 0.035); --npaw-surface-active: rgba(15, 23, 42, 0.06); --npaw-surface-header: #eef1f6; --npaw-surface-alt: #f0f3f8; --npaw-surface-subtle: #f6f7fa; --npaw-surface-stripe: #fafbfd; --npaw-surface-card-bg: #ffffff; --npaw-surface-card-border: rgba(15, 23, 42, 0.06); --npaw-surface-input-bg: rgba(255, 255, 255, 0.96); --npaw-surface-input-bg-hover: #ffffff; --npaw-surface-input-border: rgba(15, 23, 42, 0.12); --npaw-surface-input-border-focus: var(--npaw-accent); --npaw-surface-floating-bg: rgba(255, 255, 255, 0.98); --npaw-surface-floating-border: rgba(15, 23, 42, 0.08); --npaw-surface-modal-bg: #ffffff; --npaw-surface-modal-border: rgba(15, 23, 42, 0.08); --npaw-topbar-bg: rgba(255, 255, 255, 0.85); --npaw-topbar-text: #131a2a; --npaw-topbar-border: rgba(15, 23, 42, 0.08); --npaw-text-primary: #131a2a; --npaw-text-secondary: #525e78; --npaw-text-muted: #8b95ab; --npaw-accent: #5e6ad2; --npaw-accent-soft: color-mix(in srgb, var(--npaw-accent) 12%, transparent); --npaw-accent-hover: color-mix(in srgb, var(--npaw-accent) 6%, transparent); --npaw-accent-strong: color-mix(in srgb, var(--npaw-accent) 85%, #000); --npaw-on-accent: #ffffff; --npaw-accent-glow: color-mix(in srgb, var(--npaw-accent) 22%, transparent); --npaw-brand-mark-accent-2: #f3a4d0; --npaw-selected-bg: var(--npaw-accent-soft); --npaw-selected-color: var(--npaw-accent); --npaw-bg-aura-base: radial-gradient(1200px 600px at 85% -10%, #e8ecff 0%, transparent 55%), radial-gradient(900px 500px at -10% 110%, #ffe8f6 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%); --npaw-bg-aura-grid-color: rgba(15, 23, 42, 0.03); --npaw-bg-aura-grid-size: 80px; --npaw-surface-highlight-top: transparent; --npaw-surface-halo: rgba(15, 20, 35, 0.10); --npaw-elevation-sm: 0 0 0 1px var(--npaw-border-color), 0 1px 2px rgba(15, 20, 35, 0.04), 0 4px 10px -4px var(--npaw-surface-halo); --npaw-elevation-md: 0 0 0 1px var(--npaw-border-color), 0 2px 6px rgba(15, 20, 35, 0.06), 0 12px 28px -8px var(--npaw-surface-halo); --npaw-elevation-lg: 0 0 0 1px var(--npaw-border-color), 0 6px 14px rgba(15, 20, 35, 0.08), 0 24px 48px -12px var(--npaw-surface-halo); --npaw-priority-critical: #c33935; --npaw-priority-major: #f17426; --npaw-priority-warning: #eab308; --npaw-priority-minor: #599237; --npaw-priority-info: #4a90e2; --npaw-status-pendent: #64748b; /* Alies semàntics estàndard NPAW (per badge / taula) */ --npaw-success: var(--npaw-priority-minor); --npaw-warning: var(--npaw-priority-warning); --npaw-danger: var(--npaw-priority-critical); --npaw-info: var(--npaw-priority-info); --phoenix-success: var(--npaw-success); --phoenix-warning: var(--npaw-warning); --phoenix-danger: var(--npaw-danger); --phoenix-gray-500: var(--npaw-text-muted); --npaw-status-pendent-bg: color-mix(in srgb, var(--npaw-status-pendent) 14%, transparent); --npaw-status-pendent-fg: var(--npaw-status-pendent); --npaw-status-bloquejada-bg: color-mix(in srgb, var(--npaw-priority-critical) 14%, transparent); --npaw-status-bloquejada-fg: var(--npaw-priority-critical); --npaw-status-en_curs-bg: color-mix(in srgb, var(--npaw-accent) 14%, transparent); --npaw-status-en_curs-fg: var(--npaw-accent); --npaw-status-acabada-bg: color-mix(in srgb, var(--npaw-priority-minor) 14%, transparent); --npaw-status-acabada-fg: var(--npaw-priority-minor); --npaw-scrollbar-thumb: rgba(15, 23, 42, 0.18); --npaw-scrollbar-thumb-hover: rgba(15, 23, 42, 0.32); color-scheme: light; } /* ────────────────────────────────────────────────────────────────────────── DARK — Navy slate-blue family + cyan accent. Cards s'aixequen del body (mai més fosques que el bg). ────────────────────────────────────────────────────────────────────────── */ :root.dark { --npaw-color-scheme: dark; --npaw-body-bg: #060a14; --npaw-body-color: #e6ecf8; --npaw-primary: #00f5ff; --npaw-border-color: rgba(255, 255, 255, 0.10); --npaw-border-subtle: rgba(255, 255, 255, 0.06); --npaw-surface: #0c1b2e; --npaw-surface-hover: rgba(255, 255, 255, 0.05); --npaw-surface-active: rgba(255, 255, 255, 0.10); --npaw-surface-header: #112338; --npaw-surface-alt: #060a14; --npaw-surface-subtle: rgba(255, 255, 255, 0.04); --npaw-surface-stripe: rgba(255, 255, 255, 0.02); --npaw-surface-card-bg: #0c1b2e; --npaw-surface-card-border: rgba(255, 255, 255, 0.08); --npaw-surface-input-bg: rgba(7, 14, 28, 0.88); --npaw-surface-input-bg-hover: rgba(12, 22, 40, 0.95); --npaw-surface-input-border: rgba(255, 255, 255, 0.10); --npaw-surface-floating-bg: rgba(15, 28, 52, 0.97); --npaw-surface-floating-border: rgba(255, 255, 255, 0.08); --npaw-surface-modal-bg: #122140; --npaw-surface-modal-border: rgba(255, 255, 255, 0.06); --npaw-topbar-bg: rgba(38, 69, 111, 0.72); --npaw-topbar-text: #e6ecf8; --npaw-topbar-border: rgba(255, 255, 255, 0.10); --npaw-text-primary: #e6ecf8; --npaw-text-secondary: #aebcdc; --npaw-text-muted: #7886a6; --npaw-accent: #00f5ff; --npaw-accent-soft: color-mix(in srgb, var(--npaw-accent) 14%, transparent); --npaw-accent-hover: color-mix(in srgb, var(--npaw-accent) 8%, transparent); --npaw-accent-strong: #00d0d8; --npaw-on-accent: #001025; --npaw-accent-glow: color-mix(in srgb, var(--npaw-accent) 30%, transparent); --npaw-brand-mark-accent-2: #b08cff; --npaw-selected-bg: var(--npaw-accent-soft); --npaw-selected-color: var(--npaw-accent); --npaw-bg-aura-base: radial-gradient(1200px 600px at 85% -10%, rgba(0, 245, 255, 0.18) 0%, transparent 55%), radial-gradient(900px 500px at -10% 110%, rgba(176, 140, 255, 0.16) 0%, transparent 55%), linear-gradient(180deg, #0a1020 0%, #060a16 100%); --npaw-bg-aura-grid-color: rgba(0, 245, 255, 0.07); --npaw-bg-aura-grid-size: 60px; --npaw-surface-highlight-top: rgba(255, 255, 255, 0.06); --npaw-surface-halo: rgba(2, 8, 22, 0.75); --npaw-elevation-sm: inset 0 1px 0 0 var(--npaw-surface-highlight-top), 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 28px -6px var(--npaw-surface-halo); --npaw-elevation-md: inset 0 1px 0 0 var(--npaw-surface-highlight-top), 0 6px 14px rgba(0, 0, 0, 0.55), 0 22px 52px -8px var(--npaw-surface-halo); --npaw-elevation-lg: 0 12px 26px rgba(0, 0, 0, 0.60), 0 38px 80px -12px var(--npaw-surface-halo); --npaw-priority-critical: #fc9491; --npaw-priority-major: #f17426; --npaw-priority-warning: #facc15; --npaw-priority-minor: #8bcb69; --npaw-priority-info: #8abcf5; --npaw-status-pendent: #94a3b8; --npaw-success: var(--npaw-priority-minor); --npaw-warning: var(--npaw-priority-warning); --npaw-danger: var(--npaw-priority-critical); --npaw-info: var(--npaw-priority-info); --phoenix-success: var(--npaw-success); --phoenix-warning: var(--npaw-warning); --phoenix-danger: var(--npaw-danger); --phoenix-gray-500: var(--npaw-text-muted); --npaw-status-pendent-bg: color-mix(in srgb, var(--npaw-status-pendent) 18%, transparent); --npaw-status-pendent-fg: var(--npaw-status-pendent); --npaw-status-bloquejada-bg: color-mix(in srgb, var(--npaw-priority-critical) 18%, transparent); --npaw-status-bloquejada-fg: var(--npaw-priority-critical); --npaw-status-en_curs-bg: color-mix(in srgb, var(--npaw-accent) 18%, transparent); --npaw-status-en_curs-fg: var(--npaw-accent); --npaw-status-acabada-bg: color-mix(in srgb, var(--npaw-priority-minor) 18%, transparent); --npaw-status-acabada-fg: var(--npaw-priority-minor); --npaw-scrollbar-thumb: rgba(255, 255, 255, 0.20); --npaw-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35); color-scheme: dark; } /* ────────────────────────────────────────────────────────────────────────── DARKER — Pure black ramp. Sense to de blau, sense gris-frame. Estil Linear / Raycast. Borders quasi invisibles; elevació via shadow + highlight. ────────────────────────────────────────────────────────────────────────── */ :root.darker { --npaw-color-scheme: dark; --npaw-body-bg: #050505; --npaw-body-color: #e8eaf0; --npaw-primary: #00f5ff; --npaw-border-color: rgba(255, 255, 255, 0.04); --npaw-border-subtle: rgba(255, 255, 255, 0.025); --npaw-surface: #0a0a0a; --npaw-surface-hover: rgba(255, 255, 255, 0.04); --npaw-surface-active: rgba(255, 255, 255, 0.08); --npaw-surface-header: #0d0d0d; --npaw-surface-alt: #000000; --npaw-surface-subtle: rgba(255, 255, 255, 0.025); --npaw-surface-stripe: rgba(255, 255, 255, 0.012); --npaw-surface-card-bg: #0f0f0f; --npaw-surface-card-border: transparent; --npaw-surface-input-bg: #0a0a0a; --npaw-surface-input-bg-hover: rgba(255, 255, 255, 0.03); --npaw-surface-input-border: rgba(255, 255, 255, 0.08); --npaw-surface-floating-bg: rgba(20, 20, 20, 0.96); --npaw-surface-floating-border: rgba(255, 255, 255, 0.04); --npaw-surface-modal-bg: #171717; --npaw-surface-modal-border: rgba(255, 255, 255, 0.05); --npaw-topbar-bg: rgba(10, 10, 10, 0.86); --npaw-topbar-text: #e8eaf0; --npaw-topbar-border: rgba(255, 255, 255, 0.04); --npaw-text-primary: #e8eaf0; --npaw-text-secondary: #b3b6c0; --npaw-text-muted: #6e7280; --npaw-accent: #00f5ff; --npaw-accent-soft: color-mix(in srgb, var(--npaw-accent) 12%, transparent); --npaw-accent-hover: color-mix(in srgb, var(--npaw-accent) 7%, transparent); --npaw-accent-strong: #00d0d8; --npaw-on-accent: #001025; --npaw-accent-glow: color-mix(in srgb, var(--npaw-accent) 28%, transparent); --npaw-brand-mark-accent-2: #785aff; --npaw-selected-bg: var(--npaw-accent-soft); --npaw-selected-color: var(--npaw-accent); --npaw-bg-aura-base: radial-gradient(1300px 700px at 88% -10%, rgba(0, 245, 255, 0.10) 0%, transparent 55%), radial-gradient(900px 500px at -10% 110%, rgba(120, 90, 255, 0.10) 0%, transparent 55%), linear-gradient(180deg, #060606 0%, #020202 100%); --npaw-bg-aura-grid-color: rgba(255, 255, 255, 0.025); --npaw-bg-aura-grid-size: 60px; --npaw-surface-highlight-top: rgba(255, 255, 255, 0.04); --npaw-surface-halo: rgba(0, 0, 0, 0.85); --npaw-elevation-sm: inset 0 1px 0 0 var(--npaw-surface-highlight-top), 0 1px 2px rgba(0, 0, 0, 0.55), 0 14px 30px -8px var(--npaw-surface-halo); --npaw-elevation-md: inset 0 1px 0 0 var(--npaw-surface-highlight-top), 0 6px 14px rgba(0, 0, 0, 0.65), 0 24px 56px -10px var(--npaw-surface-halo); --npaw-elevation-lg: 0 14px 30px rgba(0, 0, 0, 0.7), 0 40px 90px -14px var(--npaw-surface-halo); --npaw-priority-critical: #fc9491; --npaw-priority-major: #f17426; --npaw-priority-warning: #fde047; --npaw-priority-minor: #8bcb69; --npaw-priority-info: #8abcf5; --npaw-status-pendent: #cbd5e1; --npaw-success: var(--npaw-priority-minor); --npaw-warning: var(--npaw-priority-warning); --npaw-danger: var(--npaw-priority-critical); --npaw-info: var(--npaw-priority-info); --phoenix-success: var(--npaw-success); --phoenix-warning: var(--npaw-warning); --phoenix-danger: var(--npaw-danger); --phoenix-gray-500: var(--npaw-text-muted); --npaw-status-pendent-bg: color-mix(in srgb, var(--npaw-status-pendent) 16%, transparent); --npaw-status-pendent-fg: var(--npaw-status-pendent); --npaw-status-bloquejada-bg: color-mix(in srgb, var(--npaw-priority-critical) 16%, transparent); --npaw-status-bloquejada-fg: var(--npaw-priority-critical); --npaw-status-en_curs-bg: color-mix(in srgb, var(--npaw-accent) 18%, transparent); --npaw-status-en_curs-fg: var(--npaw-accent); --npaw-status-acabada-bg: color-mix(in srgb, var(--npaw-priority-minor) 18%, transparent); --npaw-status-acabada-fg: var(--npaw-priority-minor); --npaw-scrollbar-thumb: rgba(255, 255, 255, 0.16); --npaw-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30); color-scheme: dark; } /* ── Reset bàsic ────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; min-height: 100vh; color: var(--npaw-body-color); font-family: var(--npaw-font-sans); font-size: 14px; line-height: 1.5; background: var(--npaw-body-bg); } /* Capa d'aura + graella arquitectònica al canvas. Es renderitza sota tot el contingut perquè cada tema imprimeixi la seva atmosfera pròpia. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(var(--npaw-bg-aura-grid-color) 1px, transparent 1px) 0 0 / var(--npaw-bg-aura-grid-size) var(--npaw-bg-aura-grid-size), linear-gradient(90deg, var(--npaw-bg-aura-grid-color) 1px, transparent 1px) 0 0 / var(--npaw-bg-aura-grid-size) var(--npaw-bg-aura-grid-size), var(--npaw-bg-aura-base); } a { color: var(--npaw-accent-strong); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--npaw-scrollbar-thumb); border-radius: var(--npaw-radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--npaw-scrollbar-thumb-hover); } ::-webkit-scrollbar-track { background: transparent; } /* ────────────────────────────────────────────────────────────────────────── Login / Auth layout — inspired by /home/ferran/ui/src/layouts/AuthSimpleLayout.tsx + .css. Premium glass shell sitting on top of the global body aura, with: · a brand-tinted spotlight behind the card, · two large drifting brand orbs in opposite corners, · an animated gradient border around the card, · a top specular highlight, · a coloured bloom underneath the shell. Everything reads from `--npaw-*` tokens, so light / dark / darker all produce a distinct, on-brand atmosphere without per-theme code here. ────────────────────────────────────────────────────────────────────────── */ .login-body { position: relative; width: 100vw; min-height: 100vh; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); overflow: hidden; background-color: var(--npaw-body-bg); color: var(--npaw-text-primary); } /* Soft radial brand-glow that backlights the card. */ .login-spotlight { position: absolute; top: 50%; left: 50%; width: min(60rem, 92vw); height: min(50rem, 90vh); transform: translate(-50%, -50%); background: var(--npaw-brand-mark-glow); pointer-events: none; z-index: 1; opacity: 0.85; filter: blur(8px); animation: login-spotlight-pulse 14s ease-in-out infinite; } /* Two oversized drifting halos in opposite corners. */ .login-orb { position: absolute; width: min(46rem, 75vw); height: min(46rem, 75vh); background: var(--npaw-brand-mark-glow); border-radius: 50%; pointer-events: none; z-index: 1; filter: blur(18px); opacity: 0.7; } .login-orb--top-right { top: -18%; right: -14%; animation: login-orb-drift-a 22s ease-in-out infinite; } .login-orb--bottom-left { bottom: -20%; left: -16%; animation: login-orb-drift-b 26s ease-in-out infinite; } /* Dedicated login card. Deliberately not a
, so app-level layout rules cannot stretch it vertically like the task/operator modals. */ .login-card { position: relative; isolation: isolate; z-index: 2; width: min(460px, 100%); min-height: 0; border-radius: 24px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 44px); background: var(--npaw-surface-floating-bg); border: 1px solid var(--npaw-surface-floating-border); box-shadow: var(--npaw-elevation-lg), 0 30px 90px -28px color-mix(in srgb, var(--npaw-accent) 28%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: var(--npaw-text-primary); animation: login-card-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; transition: transform 350ms ease, box-shadow 350ms ease; } .login-card:hover { transform: translateY(-1px); box-shadow: var(--npaw-elevation-lg), 0 38px 110px -28px color-mix(in srgb, var(--npaw-accent) 36%, transparent); } /* Coloured bloom under the card. */ .login-card::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -2.5rem; height: 6rem; border-radius: 50%; background: var(--npaw-brand-mark-glow); filter: blur(28px); opacity: 0.55; z-index: -1; pointer-events: none; } /* Animated gradient border around the shell. */ .login-card__border { position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--npaw-brand-mark-gradient); background-size: 200% 200%; -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0); mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.55; animation: login-border-flow 14s ease-in-out infinite; z-index: 0; } /* Specular top highlight catching the rim. */ .login-card__highlight { position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: var(--npaw-brand-mark-gradient); opacity: 0.6; pointer-events: none; z-index: 0; } .login-card__inner { position: relative; z-index: 1; display: grid; gap: 20px; } /* Brand block — mark + name + sub. */ .login-brand { display: flex; align-items: center; gap: 14px; } .login-brand__mark { position: relative; width: 48px; height: 48px; border-radius: 14px; background: var(--npaw-brand-mark-gradient); background-size: 200% 200%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px -8px color-mix(in srgb, var(--npaw-accent) 55%, transparent); display: grid; place-items: center; flex-shrink: 0; animation: login-border-flow 14s ease-in-out infinite; } .login-brand__mark::after { content: ''; position: absolute; inset: 6px; border-radius: 9px; background: var(--npaw-surface-floating-bg); } .login-brand__mark-glyph { position: relative; z-index: 1; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--npaw-text-primary); } .login-brand__text { display: grid; gap: 2px; min-width: 0; } .login-brand__name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--npaw-text-primary); line-height: 1.2; } .login-brand__sub { font-size: 12px; color: var(--npaw-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; } .login-headline { display: grid; gap: 6px; } .login-welcome { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; color: var(--npaw-text-primary); line-height: 1.15; } .login-tagline { margin: 0; color: var(--npaw-text-secondary); font-size: 14px; line-height: 1.45; } /* Form. */ .login-form { display: grid; gap: 14px; margin: 0; } .login-field { display: grid; gap: 6px; } .login-field__label { font-size: 11px; color: var(--npaw-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .login-field__control { position: relative; display: flex; align-items: center; } .login-field__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--npaw-text-secondary); pointer-events: none; transition: color var(--npaw-transition-fast); } .login-field__icon > svg { width: 16px; height: 16px; } .login-field input { width: 100%; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); padding: 12px 14px 12px 40px; border-radius: var(--npaw-radius-lg); font: inherit; font-size: 14px; outline: none; transition: border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast), background var(--npaw-transition-fast); } .login-field input::placeholder { color: var(--npaw-text-muted); } .login-field input:hover { background: var(--npaw-surface-input-bg-hover); } .login-field input:focus { border-color: var(--npaw-accent); box-shadow: 0 0 0 3px var(--npaw-accent-glow); background: var(--npaw-surface-input-bg-hover); } .login-field:focus-within .login-field__icon { color: var(--npaw-accent); } .login-error { margin: 0; padding: 10px 12px; border-radius: var(--npaw-radius-md); background: color-mix(in srgb, var(--npaw-priority-critical) 12%, transparent); border: 1px solid color-mix(in srgb, var(--npaw-priority-critical) 32%, transparent); color: var(--npaw-priority-critical); font-size: 13px; display: flex; align-items: center; gap: 8px; } .login-error[hidden] { display: none; } .login-footer { margin: 0; text-align: center; color: var(--npaw-text-muted); font-size: 12px; letter-spacing: 0.02em; } /* Older `.error` class kept around for legacy template parity. */ .error { color: var(--npaw-priority-critical); font-size: 13px; margin-top: 12px; } /* Animations — ported as-is from /home/ferran/ui AuthSimpleLayout.css. */ @keyframes login-card-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes login-border-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes login-spotlight-pulse { 0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.04); } } @keyframes login-orb-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 2.5%, 0) scale(1.05); } } @keyframes login-orb-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2.5%, 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .login-card, .login-card__border, .login-spotlight, .login-orb, .login-brand__mark { animation: none !important; } .login-card:hover { transform: none; } } /* ── Brand ──────────────────────────────────────────────────────────────── */ .brand { display: flex; align-items: center; gap: 10px; } .brand-dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--npaw-accent) 90%, white), var(--npaw-accent)); box-shadow: 0 0 14px var(--npaw-accent-glow); } .brand-name { font-weight: 700; letter-spacing: 0.4px; } /* ── Top bar ────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: var(--npaw-z-sticky); display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--npaw-topbar-bg); color: var(--npaw-topbar-text); border-bottom: 1px solid var(--npaw-topbar-border); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } .tabs { display: flex; gap: 6px; margin-left: 12px; } .tab { display: inline-flex; align-items: center; height: 32px; padding: 0 0.75rem; gap: 0.375rem; background: var(--npaw-topbar-btn-bg, var(--npaw-surface-card-bg)); border: 1px solid var(--npaw-topbar-btn-border, var(--npaw-border-color)); color: var(--npaw-text-primary); border-radius: 0.375rem; cursor: pointer; font: inherit; font-size: 0.8125rem; line-height: 1; white-space: nowrap; transition: background var(--npaw-transition-fast), color var(--npaw-transition-fast), border-color var(--npaw-transition-fast), transform var(--npaw-transition-fast); } .tab:hover { background: var(--npaw-topbar-btn-bg-hover, var(--npaw-surface-hover)); } .tab:active { transform: scale(0.98); } .tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--npaw-accent-glow); border-color: color-mix(in srgb, var(--npaw-accent) 55%, transparent); } .tab.is-active { color: var(--npaw-on-accent); background: var(--npaw-accent); border-color: color-mix(in srgb, var(--npaw-accent) 75%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--npaw-accent) 28%, transparent); } .user-area { margin-left: auto; display: flex; gap: 10px; align-items: center; } /* Segment control used inside the profile dropdown for theme / language. */ .npaw-segment { display: inline-flex; padding: 3px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-radius-pill); gap: 2px; } .npaw-segment button { background: transparent; border: 0; color: var(--npaw-text-secondary); font: inherit; font-size: 12px; padding: 5px 10px; border-radius: var(--npaw-radius-pill); cursor: pointer; text-transform: capitalize; } .npaw-segment button:hover { color: var(--npaw-text-primary); } .npaw-segment button.is-active { background: var(--npaw-surface-card-bg); color: var(--npaw-text-primary); box-shadow: var(--npaw-elevation-sm); } .npaw-segment[data-kind='lang'] button, #lang-segment button { text-transform: none; } /* The lang/theme segments inside the profile dropdown stretch full width so each option gets equal real estate and the row reads cleanly. */ .npaw-profile-card-expanded .npaw-segment { display: flex; width: 100%; } .npaw-profile-card-expanded .npaw-segment button { flex: 1 1 0; text-align: center; } /* ── Topbar profile (avatar + dropdown), ported from /home/ferran/ui ──── */ .npaw-topbar-profile { position: relative; display: inline-flex; align-items: center; height: 100%; } .npaw-topbar-profile-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; line-height: 1; } .npaw-topbar-profile-trigger:focus-visible { outline: none; } .npaw-topbar-profile-trigger:focus-visible .npaw-topbar-profile-avatar { box-shadow: 0 0 0 2px var(--npaw-accent-glow); border-color: color-mix(in srgb, var(--npaw-accent) 55%, transparent); } .npaw-topbar-profile-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--npaw-surface); border: 1px solid var(--npaw-border-color); color: var(--npaw-text-primary); font-size: 14px; font-weight: 600; line-height: 1; user-select: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; } .npaw-topbar-profile-trigger:hover .npaw-topbar-profile-avatar { background: var(--npaw-surface-hover); border-color: color-mix(in srgb, var(--npaw-accent) 30%, transparent); } .npaw-topbar-profile.is-open .npaw-topbar-profile-avatar { background: color-mix(in srgb, var(--npaw-accent) 14%, transparent); border-color: color-mix(in srgb, var(--npaw-accent) 35%, transparent); color: var(--npaw-accent); } .npaw-profile-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 88px); display: flex; flex-direction: column; background: var(--npaw-surface-card-bg); border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-radius-lg); box-shadow: var(--npaw-elevation-lg); overflow: hidden; z-index: calc(var(--npaw-z-sticky) + 20); } .npaw-profile-menu[hidden] { display: none; } .npaw-profile-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; background: radial-gradient( 120% 80% at 50% 0%, color-mix(in srgb, var(--npaw-accent) 14%, transparent) 0%, transparent 70% ); border-bottom: 1px solid var(--npaw-border-color); } .npaw-profile-hero__avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: linear-gradient( 135deg, var(--npaw-accent) 0%, color-mix(in srgb, var(--npaw-accent) 60%, white) 100% ); box-shadow: 0 0 0 4px var(--npaw-accent-glow, color-mix(in srgb, var(--npaw-accent) 18%, transparent)); display: flex; align-items: center; justify-content: center; } .npaw-profile-hero__avatar-initial { width: 100%; height: 100%; border-radius: 50%; background: var(--npaw-surface-card-bg); color: var(--npaw-text-primary); font-weight: 700; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; user-select: none; } .npaw-profile-hero__name { margin: 0; color: var(--npaw-text-primary); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; word-break: break-word; } .npaw-profile-hero__meta { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--npaw-text-secondary, var(--npaw-text-muted)); font-size: 11px; line-height: 1; } .npaw-profile-hero__meta-item { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .npaw-profile-section { padding: 10px 12px 0; } .npaw-profile-hero + .npaw-profile-section { padding-top: 14px; } .npaw-profile-section + .npaw-profile-section { padding-top: 10px; } .npaw-profile-action-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; background: color-mix(in srgb, var(--npaw-accent) 5%, var(--npaw-surface, transparent)); border: 1px solid color-mix(in srgb, var(--npaw-accent) 12%, var(--npaw-border-color)); border-radius: 12px; color: var(--npaw-text-primary); text-align: left; cursor: pointer; font: inherit; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .npaw-profile-action-card:hover { background: color-mix(in srgb, var(--npaw-accent) 10%, var(--npaw-surface, transparent)); border-color: color-mix(in srgb, var(--npaw-accent) 25%, var(--npaw-border-color)); } .npaw-profile-action-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--npaw-accent-glow, color-mix(in srgb, var(--npaw-accent) 25%, transparent)); } .npaw-profile-action-card__icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--npaw-accent); background: color-mix(in srgb, var(--npaw-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--npaw-accent) 18%, transparent); overflow: hidden; } .npaw-profile-theme-swatch { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient( 90deg, var(--npaw-accent) 0%, color-mix(in srgb, var(--npaw-accent) 55%, white) 100% ); pointer-events: none; } .npaw-profile-action-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .npaw-profile-action-card__label { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--npaw-text-secondary, var(--npaw-text-muted)); line-height: 1; } .npaw-profile-action-card__value { font-size: 13px; font-weight: 600; color: var(--npaw-text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .npaw-profile-action-card__chevron { flex-shrink: 0; color: var(--npaw-text-secondary, var(--npaw-text-muted)); transition: transform 0.18s ease; } .npaw-profile-action-card[aria-expanded='true'] .npaw-profile-action-card__chevron { transform: rotate(180deg); } .npaw-profile-card-expanded { padding: 8px 0 0; } .npaw-profile-card-expanded[hidden] { display: none; } .npaw-profile-footer { margin-top: 12px; border-top: 1px solid var(--npaw-border-color); background: var(--npaw-surface-card-bg); } .npaw-profile-footer__signout { padding: 12px; margin: 0; } .npaw-profile-signout { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-color); color: var(--npaw-text-primary); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; border-radius: var(--npaw-radius-lg); padding: 9px 12px; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), color var(--npaw-transition-fast); } .npaw-profile-signout:hover, .npaw-profile-signout:focus-visible { color: var(--npaw-danger, #d83a52); border-color: color-mix(in srgb, var(--npaw-danger, #d83a52) 35%, var(--npaw-border-color)); background: color-mix(in srgb, var(--npaw-danger, #d83a52) 8%, transparent); } /* ────────────────────────────────────────────────────────────────────────── NpawButton — themed button primitive, ported as-is from /home/ferran/ui/src/npaw-components/shared/ui/npaw-button/NpawButton.css. Variant = semantic intent (primary | secondary | tertiary | danger | success | warning) Appearance = visual prominence (solid | outline | subtle | ghost) Size = xs | sm | md | lg All visuals come from `--npaw-button-*` tokens declared above so the single shared declaration produces the right look in every theme. ────────────────────────────────────────────────────────────────────────── */ .npaw-button { --_color: var(--npaw-button-secondary-bg); --_fg: var(--npaw-button-secondary-fg); --_color-hover: var(--npaw-button-secondary-bg-hover); --_color-active: var(--npaw-button-secondary-bg-active); --_border: var(--npaw-button-secondary-border, var(--_color)); display: inline-flex; align-items: center; justify-content: center; gap: var(--npaw-button-icon-gap); border-radius: var(--npaw-button-radius); border-style: solid; border-width: var(--npaw-button-border-width); border-color: transparent; font-family: inherit; font-weight: var(--npaw-button-font-weight); letter-spacing: var(--npaw-button-letter-spacing); line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; user-select: none; cursor: pointer; position: relative; transition: background-color var(--npaw-button-transition), color var(--npaw-button-transition), border-color var(--npaw-button-transition), box-shadow var(--npaw-button-transition), opacity var(--npaw-button-transition); height: var(--npaw-button-height-md); padding: 0 var(--npaw-button-padding-x-md); font-size: var(--npaw-button-font-size-md); } .npaw-button:focus { outline: none; } .npaw-button:focus-visible { outline: none; box-shadow: var(--npaw-button-focus-ring); } .npaw-button--variant-danger:focus-visible { box-shadow: var(--npaw-button-focus-ring-danger); } .npaw-button--full-width { width: 100%; } /* ── Variant slots — write per-variant colour into private slots ───────── */ .npaw-button--variant-primary { --_color: var(--npaw-button-primary-bg); --_fg: var(--npaw-button-primary-fg); --_color-hover: var(--npaw-button-primary-bg-hover); --_color-active: var(--npaw-button-primary-bg-active); --_border: var(--npaw-button-primary-bg); } .npaw-button--variant-secondary { --_color: var(--npaw-button-secondary-bg); --_fg: var(--npaw-button-secondary-fg); --_color-hover: var(--npaw-button-secondary-bg-hover); --_color-active: var(--npaw-button-secondary-bg-active); --_border: var(--npaw-button-secondary-border); } .npaw-button--variant-tertiary { --_color: var(--npaw-button-tertiary-bg); --_fg: var(--npaw-button-tertiary-fg); --_color-hover: var(--npaw-button-tertiary-bg-hover); --_color-active: var(--npaw-button-tertiary-bg-active); --_border: transparent; } .npaw-button--variant-danger { --_color: var(--npaw-button-danger-bg); --_fg: var(--npaw-button-danger-fg); --_color-hover: var(--npaw-button-danger-bg-hover); --_color-active: var(--npaw-button-danger-bg-active); --_border: var(--npaw-button-danger-bg); } .npaw-button--variant-success { --_color: var(--npaw-button-success-bg); --_fg: var(--npaw-button-success-fg); --_color-hover: var(--npaw-button-success-bg-hover); --_color-active: var(--npaw-button-success-bg-active); --_border: var(--npaw-button-success-bg); } .npaw-button--variant-warning { --_color: var(--npaw-button-warning-bg); --_fg: var(--npaw-button-warning-fg); --_color-hover: var(--npaw-button-warning-bg-hover); --_color-active: var(--npaw-button-warning-bg-active); --_border: var(--npaw-button-warning-bg); } /* ── Appearance — reads private slots, ignorant of the variant ─────────── */ .npaw-button--appearance-solid { background-color: var(--_color); color: var(--_fg); border-color: var(--_border); } .npaw-button--appearance-solid:hover:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: var(--_color-hover); border-color: var(--_color-hover); } .npaw-button--appearance-solid:active:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: var(--_color-active); border-color: var(--_color-active); } .npaw-button--appearance-outline { background-color: transparent; color: var(--_color); border-color: var(--_border); } .npaw-button--appearance-outline:hover:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: color-mix(in srgb, var(--_color) 8%, transparent); } .npaw-button--appearance-outline:active:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: color-mix(in srgb, var(--_color) 14%, transparent); } .npaw-button--appearance-subtle { background-color: color-mix(in srgb, var(--_color) 12%, transparent); color: var(--_color); border-color: transparent; } .npaw-button--appearance-subtle:hover:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: color-mix(in srgb, var(--_color) 18%, transparent); } .npaw-button--appearance-subtle:active:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: color-mix(in srgb, var(--_color) 24%, transparent); } .npaw-button--appearance-ghost { background-color: transparent; color: var(--_color); border-color: transparent; } .npaw-button--appearance-ghost:hover:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: color-mix(in srgb, var(--_color) 8%, transparent); } .npaw-button--appearance-ghost:active:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: color-mix(in srgb, var(--_color) 14%, transparent); } /* Variant-specific overrides where the generic appearance rule doesn't pick the right colour for outline / subtle / ghost. */ .npaw-button--variant-secondary.npaw-button--appearance-outline, .npaw-button--variant-secondary.npaw-button--appearance-subtle, .npaw-button--variant-secondary.npaw-button--appearance-ghost { color: var(--npaw-text-primary); } .npaw-button--variant-secondary.npaw-button--appearance-outline:hover:not(.npaw-button--disabled):not(.npaw-button--loading), .npaw-button--variant-secondary.npaw-button--appearance-subtle:hover:not(.npaw-button--disabled):not(.npaw-button--loading), .npaw-button--variant-secondary.npaw-button--appearance-ghost:hover:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: var(--npaw-surface-hover); } .npaw-button--variant-secondary.npaw-button--appearance-subtle { background-color: var(--npaw-surface-subtle); border-color: transparent; } .npaw-button--variant-tertiary.npaw-button--appearance-outline, .npaw-button--variant-tertiary.npaw-button--appearance-subtle, .npaw-button--variant-tertiary.npaw-button--appearance-ghost { color: var(--npaw-button-tertiary-fg); } .npaw-button--variant-tertiary.npaw-button--appearance-outline:hover:not(.npaw-button--disabled):not(.npaw-button--loading), .npaw-button--variant-tertiary.npaw-button--appearance-subtle:hover:not(.npaw-button--disabled):not(.npaw-button--loading), .npaw-button--variant-tertiary.npaw-button--appearance-ghost:hover:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: var(--npaw-button-tertiary-bg-hover); color: var(--npaw-text-primary); } .npaw-button--variant-tertiary.npaw-button--appearance-outline:active:not(.npaw-button--disabled):not(.npaw-button--loading), .npaw-button--variant-tertiary.npaw-button--appearance-subtle:active:not(.npaw-button--disabled):not(.npaw-button--loading), .npaw-button--variant-tertiary.npaw-button--appearance-ghost:active:not(.npaw-button--disabled):not(.npaw-button--loading) { background-color: var(--npaw-button-tertiary-bg-active); } .npaw-button--variant-tertiary.npaw-button--appearance-subtle { background-color: var(--npaw-surface-subtle); } .npaw-button--variant-tertiary.npaw-button--appearance-outline { border-color: var(--npaw-surface-card-border); } /* ── Sizes ─────────────────────────────────────────────────────────────── */ .npaw-button--size-xs { height: var(--npaw-button-height-xs); padding: 0 var(--npaw-button-padding-x-xs); font-size: var(--npaw-button-font-size-xs); gap: 0.375rem; } .npaw-button--size-sm { height: var(--npaw-button-height-sm); padding: 0 var(--npaw-button-padding-x-sm); font-size: var(--npaw-button-font-size-sm); } .npaw-button--size-md { height: var(--npaw-button-height-md); padding: 0 var(--npaw-button-padding-x-md); font-size: var(--npaw-button-font-size-md); } .npaw-button--size-lg { height: var(--npaw-button-height-lg); padding: 0 var(--npaw-button-padding-x-lg); font-size: var(--npaw-button-font-size-lg); } /* ── Icon slots ────────────────────────────────────────────────────────── */ .npaw-button__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .npaw-button__icon > svg, .npaw-button__icon > img { display: block; } .npaw-button--size-xs .npaw-button__icon > svg, .npaw-button--size-xs .npaw-button__icon > img { width: var(--npaw-button-icon-size-xs); height: var(--npaw-button-icon-size-xs); } .npaw-button--size-sm .npaw-button__icon > svg, .npaw-button--size-sm .npaw-button__icon > img { width: var(--npaw-button-icon-size-sm); height: var(--npaw-button-icon-size-sm); } .npaw-button--size-md .npaw-button__icon > svg, .npaw-button--size-md .npaw-button__icon > img { width: var(--npaw-button-icon-size-md); height: var(--npaw-button-icon-size-md); } .npaw-button--size-lg .npaw-button__icon > svg, .npaw-button--size-lg .npaw-button__icon > img { width: var(--npaw-button-icon-size-lg); height: var(--npaw-button-icon-size-lg); } .npaw-button__label { display: inline-flex; align-items: center; min-width: 0; } /* ── States ────────────────────────────────────────────────────────────── */ .npaw-button:disabled, .npaw-button.npaw-button--disabled, .npaw-button.npaw-button--loading { cursor: not-allowed; } .npaw-button:disabled, .npaw-button.npaw-button--disabled { opacity: var(--npaw-button-disabled-opacity); } .npaw-button--loading .npaw-button__label, .npaw-button--loading .npaw-button__icon { visibility: hidden; } .npaw-button__spinner { position: absolute; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: npaw-button-spin 0.75s linear infinite; } @keyframes npaw-button-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .npaw-button { transition: none; } .npaw-button__spinner { animation-duration: 1.5s; } } /* ── Layout ─────────────────────────────────────────────────────────────── */ main { width: 100%; min-height: calc(100vh - 57px); padding: 12px; display: flex; flex-direction: column; } .tasks-shell { flex: 1 1 auto; min-height: calc(100vh - 81px); display: flex; flex-direction: column; } .tasks-shell > .section-toolbar, .tasks-shell > .task-filters { flex: 0 0 auto; } #tasks-view-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .section-toolbar-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .page-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--npaw-text-primary); } .page-subtitle { margin: 4px 0 0; color: var(--npaw-text-secondary); font-size: 13px; } .admin-shell { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: calc(100vh - 81px); } .admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .admin-stat-card { padding: 16px; border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-card-radius); background: var(--npaw-surface-card-bg); box-shadow: var(--npaw-elevation-sm); } .admin-stat-value { font-size: 24px; line-height: 1.1; font-weight: 750; letter-spacing: -0.03em; color: var(--npaw-text-primary); } .admin-stat-label { margin-top: 6px; color: var(--npaw-text-secondary); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; } .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: stretch; flex: 1 1 auto; min-height: 0; } .admin-section { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .admin-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex: 0 0 auto; } .admin-panel-head h2 { margin: 0; font-size: 16px; font-weight: 750; color: var(--npaw-text-primary); } .admin-access-table { flex: 1 1 auto; min-height: 0; } .admin-access-table .npaw-table__scroll { flex: 1 1 auto; } .admin-filter-toolbar { min-height: 44px; } .admin-search { width: min(360px, 46vw); } .admin-search:focus-within { width: min(440px, 54vw); } .admin-access-grid { min-width: 760px; } .admin-user-panel { padding: 14px; border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-card-radius); background: var(--npaw-surface-card-bg); box-shadow: var(--npaw-elevation-sm); overflow: hidden; } .admin-user-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; padding-right: 2px; } .admin-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-button-radius); background: var(--npaw-surface-subtle); } .admin-user-row.is-online { border-color: color-mix(in srgb, var(--npaw-success, #22c55e) 34%, var(--npaw-border-color)); box-shadow: inset 3px 0 0 var(--npaw-success, #22c55e); } .admin-user-name { font-size: 14px; font-weight: 700; color: var(--npaw-text-primary); } .admin-user-meta { margin-top: 2px; color: var(--npaw-text-tertiary); font-size: 12px; } .admin-user-stats { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; } .admin-last-seen-label { color: var(--npaw-text-tertiary); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .admin-last-seen-value { color: var(--npaw-text-secondary); font-size: 12px; line-height: 1.1; font-variant-numeric: tabular-nums; } .view-switch { display: inline-flex; padding: 3px; height: var(--npaw-button-height-sm); background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-button-radius); gap: 2px; } .view-switch button { height: calc(var(--npaw-button-height-sm) - 8px); padding: 0 10px; border: 0; border-radius: calc(var(--npaw-button-radius) - 2px); background: transparent; color: var(--npaw-text-secondary); font: inherit; font-size: var(--npaw-button-font-size-sm); cursor: pointer; } .view-switch button:hover { color: var(--npaw-text-primary); } .view-switch button.is-active { background: var(--npaw-surface-card-bg); color: var(--npaw-text-primary); box-shadow: var(--npaw-elevation-sm); } .task-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(6, minmax(130px, 1fr)) auto; gap: 8px; align-items: center; margin-bottom: 12px; } .task-filter-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 0; padding: 0 12px; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); border-radius: 8px; } .task-filter-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--npaw-text-primary); font: inherit; font-size: 13px; } .task-filters select { height: 34px; min-width: 0; padding: 0 12px; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); border-radius: 8px; color: var(--npaw-text-primary); font: inherit; font-size: 13px; outline: 0; } .task-filter-search:focus-within, .task-filters select:focus { border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .task-filter-multi { position: relative; min-width: 0; } .task-filter-multi__button { height: 34px; min-width: 150px; max-width: 240px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 10px 0 12px; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); border-radius: 8px; color: var(--npaw-text-primary); font: inherit; font-size: 13px; cursor: pointer; } .task-filter-multi__button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-filter-multi__button:hover { background: var(--npaw-surface-hover); } .task-filter-multi__button[aria-expanded='true'], .task-filter-multi.has-value .task-filter-multi__button { border-color: color-mix(in srgb, var(--npaw-accent) 40%, var(--npaw-border-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--npaw-accent) 12%, transparent); } .task-filter-multi.has-value .task-filter-multi__button { color: var(--npaw-accent); background: var(--npaw-accent-soft); } .task-filter-multi__menu { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: max(220px, 100%); max-height: min(340px, 52vh); overflow: auto; padding: 6px; background: var(--npaw-surface-card-bg); border: 1px solid var(--npaw-border-color); border-radius: 12px; box-shadow: var(--npaw-elevation-lg); } .task-filter-multi__menu[hidden] { display: none; } .task-filter-multi__option { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 8px; border-radius: 8px; color: var(--npaw-text-primary); font-size: 13px; cursor: pointer; } .task-filter-multi__option:hover { background: var(--npaw-surface-hover); } .task-filter-multi__option input { margin: 0; accent-color: var(--npaw-accent); } .task-filter-quick.is-active { background: color-mix(in srgb, var(--npaw-warning) 18%, transparent); border-color: color-mix(in srgb, var(--npaw-warning) 45%, var(--npaw-border-color)); color: var(--npaw-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--npaw-warning) 16%, transparent); } .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--npaw-text-muted); margin: 0 0 12px; } /* ── Overview ───────────────────────────────────────────────────────────── */ .panel { background: var(--npaw-surface-card-bg); border: 1px solid var(--npaw-surface-card-border); border-radius: var(--npaw-radius-xl); padding: 12px; box-shadow: var(--npaw-elevation-sm); } .panel h2 { font-size: 14px; margin: 0; color: var(--npaw-text-primary); font-weight: 600; } .hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr); gap: 20px; background: var(--npaw-surface-card-bg); border: 1px solid var(--npaw-surface-card-border); border-radius: var(--npaw-radius-xl); padding: 12px; box-shadow: var(--npaw-elevation-sm); } .hero-progress { display: flex; flex-direction: column; gap: 10px; justify-content: center; } .hero-progress-head { display: flex; align-items: baseline; justify-content: space-between; } .hero-progress-head .section-title { margin: 0; } .hero-pct { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: var(--npaw-text-primary); font-variant-numeric: tabular-nums; } .hero-bar { height: 10px; border-radius: var(--npaw-radius-pill); background: var(--npaw-surface-subtle); overflow: hidden; } .hero-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--npaw-status-acabada-fg) 0%, color-mix(in srgb, var(--npaw-status-acabada-fg) 75%, var(--npaw-accent)) 100%); border-radius: inherit; transition: width 0.6s ease-out; } .hero-progress-meta { font-size: 12px; } .hero-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hero-count { background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hero-count-value { display: inline-flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--npaw-text-primary); } .hero-count-percent { font-size: 12px; font-weight: 700; color: var(--npaw-text-muted); } .hero-count-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--npaw-text-muted); } .hero-count-pendent .hero-count-value { color: var(--npaw-status-pendent-fg); } .hero-count-en_curs .hero-count-value { color: var(--npaw-status-en_curs-fg); } .hero-count-bloquejada .hero-count-value { color: var(--npaw-status-bloquejada-fg); } .hero-count-acabada .hero-count-value { color: var(--npaw-status-acabada-fg); } .hero-count-delayed .hero-count-value { color: var(--npaw-priority-warning); } .hero-count-no-date .hero-count-value { color: var(--npaw-text-secondary); } /* Overview grid: compact summary strip + activity filling the page. */ .ov-overview-shell { min-height: calc(100vh - 300px); display: flex; flex-direction: column; gap: 16px; margin-top: 18px; } .overview-filter-bar { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; } .overview-filter-bar select { height: var(--npaw-button-height-sm); min-width: 220px; max-width: min(320px, 60vw); padding: 0 12px; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); border-radius: var(--npaw-button-radius); color: var(--npaw-text-primary); font: inherit; font-size: var(--npaw-button-font-size-sm); font-weight: 500; outline: 0; } .overview-filter-bar select:focus { border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .ov-summary-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; flex: 0 0 auto; } .ov-panel { padding: 12px; } .ov-activity { flex: 1 1 auto; min-height: 360px; display: flex; flex-direction: column; } .ov-activity #ov-activity { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px; } .ov-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; } .ov-compact { min-height: 58px; display: flex; align-items: center; padding: 12px; } .ov-compact .ov-head { margin: 0; width: 100%; justify-content: space-between; min-width: 0; } .ov-compact .ov-head h2 { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: visible; } .ov-info-tip { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--npaw-info) 42%, var(--npaw-border-color)); background: color-mix(in srgb, var(--npaw-info) 10%, transparent); color: var(--npaw-info); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; overflow: visible; } .ov-info-tip::after { content: attr(data-tooltip); position: absolute; z-index: calc(var(--npaw-z-sticky) + 5); right: 0; bottom: calc(100% + 8px); width: max-content; max-width: 260px; padding: 8px 10px; border-radius: var(--npaw-radius-md); border: 1px solid var(--npaw-border-color); background: var(--npaw-surface-card-bg); color: var(--npaw-text-primary); box-shadow: var(--npaw-elevation-md); font-size: 12px; font-weight: 500; line-height: 1.35; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity var(--npaw-transition-fast), transform var(--npaw-transition-fast); } .ov-info-tip:hover::after, .ov-info-tip:focus-visible::after { opacity: 1; transform: translateY(0); } .ov-info-tip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .ov-compact > div { min-width: 0; } .ov-compact-line { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; text-align: right; cursor: pointer; } .ov-compact-line:hover .ov-compact-title { color: var(--npaw-accent); } .ov-compact-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--npaw-text-primary); font-size: 13px; font-weight: 600; } .ov-compact-empty { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .ov-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: var(--npaw-radius-pill); background: var(--npaw-surface-subtle); color: var(--npaw-text-secondary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .ov-badge-danger { background: color-mix(in srgb, var(--npaw-priority-critical) 14%, transparent); color: var(--npaw-priority-critical); } .ov-badge-warning { background: color-mix(in srgb, var(--npaw-priority-warning) 16%, transparent); color: var(--npaw-priority-warning); } .ov-task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .ov-task { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: var(--npaw-radius-md); cursor: pointer; transition: background var(--npaw-transition-fast); } .ov-task:hover { background: var(--npaw-surface-hover); } .ov-task-main { min-width: 0; } .ov-task-title { font-size: 13.5px; color: var(--npaw-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-task-meta { font-size: 11px; margin-top: 2px; } .ov-task-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .assignee-list { display: grid; gap: 8px; } .assignee { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 6px 4px; } .assignee-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--npaw-accent-soft); color: var(--npaw-accent); font-weight: 700; font-size: 13px; text-transform: uppercase; } .assignee-name { font-size: 13.5px; color: var(--npaw-text-primary); font-weight: 500; } /* Activity grid */ .activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-content: start; } .activity-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 132px; padding: 12px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-lg); cursor: pointer; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), transform var(--npaw-transition-fast); } .activity-card:hover { background: var(--npaw-surface-hover); border-color: color-mix(in srgb, var(--npaw-accent) 24%, var(--npaw-border-subtle)); transform: translateY(-1px); } .activity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .activity-card-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .activity-card-title { min-width: 0; color: var(--npaw-text-primary); font-size: 13.5px; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .task-copy-link-btn--activity { width: 26px; height: 24px; border-radius: 6px; } .activity-card-detail { color: var(--npaw-text-secondary); font-size: 12.5px; line-height: 1.35; min-height: 34px; } .activity-card-meta, .activity-card-cats { display: flex; flex-wrap: wrap; gap: 5px; } .activity-card-cats:empty { display: none; } .small { font-size: 12px; } /* ── Board ──────────────────────────────────────────────────────────────── */ .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; flex: 1 1 auto; min-height: 0; } .column { background: var(--npaw-surface-card-bg); border: 1px solid var(--npaw-surface-card-border); border-radius: var(--npaw-radius-xl); padding: 12px; min-height: 0; box-shadow: var(--npaw-elevation-sm); display: flex; flex-direction: column; } .column header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; } .column h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; } .column .count { color: var(--npaw-text-muted); font-size: 12px; } .column-pendent h3 { color: var(--npaw-status-pendent-fg); } .column-bloquejada h3 { color: var(--npaw-status-bloquejada-fg); } .column-en_curs h3 { color: var(--npaw-status-en_curs-fg); } .column-acabada h3 { color: var(--npaw-status-acabada-fg); } .card { background: var(--npaw-surface); border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-radius-lg); padding: 12px; margin-bottom: 10px; cursor: grab; transition: transform var(--npaw-transition-fast), border-color var(--npaw-transition-fast), background var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast), opacity var(--npaw-transition-fast); } .card:hover { border-color: color-mix(in srgb, var(--npaw-accent) 55%, transparent); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--npaw-accent-glow), var(--npaw-elevation-sm); } .card--status-pendent { box-shadow: inset 3px 0 0 var(--npaw-status-pendent-fg); } .card--status-bloquejada { box-shadow: inset 3px 0 0 var(--npaw-status-bloquejada-fg); } .card--status-en_curs { box-shadow: inset 3px 0 0 var(--npaw-status-en_curs-fg); } .card--status-acabada { box-shadow: inset 3px 0 0 var(--npaw-status-acabada-fg); } .card:active { cursor: grabbing; } .card:has(.card-edit:hover), .card:has(.card-edit:focus-visible), .card:has(.card-copy:hover), .card:has(.card-copy:focus-visible), .card:has(.card-title-input:focus) { cursor: default; } .card.is-dragging { opacity: 0.4; transform: rotate(1.5deg) scale(0.98); cursor: grabbing; } .column-body { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: var(--npaw-radius-lg); transition: background var(--npaw-transition-fast), outline-color var(--npaw-transition-fast); outline: 2px dashed transparent; outline-offset: -4px; padding: 2px; } .board-empty { min-height: 100%; display: grid; place-items: center; padding: 20px; text-align: center; } .column-body.drag-over { background: var(--npaw-accent-soft); outline-color: color-mix(in srgb, var(--npaw-accent) 55%, transparent); } .column-body.drag-over .card { pointer-events: none; } .card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; } .card-actions { display: inline-flex; align-items: center; gap: 6px; } .card-title, .card-title-input { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--npaw-text-primary); min-width: 0; } .card-title-input { width: 100%; border: 1px solid transparent; border-radius: var(--npaw-radius-md); background: transparent; padding: 3px 5px; margin: -3px -5px; font-family: inherit; outline: none; cursor: text; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .card-title-input:hover { background: var(--npaw-surface-hover); } .card-title-input:focus { background: var(--npaw-surface-input-bg); border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .card-title-input:disabled { opacity: 0.65; } .card-copy, .card-edit, .card-delete { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 26px; padding: 0 8px; border: 1px solid var(--npaw-border-color); border-radius: var(--npaw-radius-md); background: var(--npaw-surface-subtle); color: var(--npaw-text-secondary); font: inherit; font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .card-copy:hover, .card-copy:focus-visible, .card-edit:hover, .card-edit:focus-visible { background: var(--npaw-accent-soft); border-color: color-mix(in srgb, var(--npaw-accent) 35%, var(--npaw-border-color)); color: var(--npaw-accent); outline: none; box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .card-copy svg, .card-edit svg { flex: 0 0 auto; } .card-delete { color: var(--npaw-danger); border-color: color-mix(in srgb, var(--npaw-danger) 28%, var(--npaw-border-color)); background: color-mix(in srgb, var(--npaw-danger) 8%, transparent); } .card-delete:hover, .card-delete:focus-visible { background: color-mix(in srgb, var(--npaw-danger) 14%, transparent); border-color: color-mix(in srgb, var(--npaw-danger) 45%, var(--npaw-border-color)); color: var(--npaw-danger); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--npaw-danger) 18%, transparent); } .card-delete svg { flex: 0 0 auto; } .card-meta { display: grid; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--npaw-text-muted); } .card-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .card-meta-row:empty { display: none; } .card-meta-row--categories { align-items: flex-start; } .card-meta-row--warnings { padding-top: 2px; } /* ── NpawBadge (canonical chip / pill / count primitive, portat de /home/ferran/ui) */ .npaw-badge { --npaw-badge-padding-x: 0.5rem; --npaw-badge-padding-y: 0.125rem; --npaw-badge-font-size: 0.6875rem; --npaw-badge-line-height: 1.2; --npaw-badge-radius: 4px; --npaw-badge-icon-gap: 0.25rem; --npaw-badge-color-fg: var(--npaw-text-primary); --npaw-badge-color-accent: var(--npaw-text-secondary); --npaw-badge-bg-mix: 12%; display: inline-flex; align-items: center; gap: var(--npaw-badge-icon-gap); padding: var(--npaw-badge-padding-y) var(--npaw-badge-padding-x); border-radius: var(--npaw-badge-radius); font-size: var(--npaw-badge-font-size); font-weight: 600; line-height: var(--npaw-badge-line-height); letter-spacing: 0.01em; color: var(--npaw-badge-color-fg); background-color: transparent; border: 1px solid transparent; white-space: nowrap; vertical-align: baseline; flex-shrink: 0; } button.npaw-badge { appearance: none; margin: 0; font-family: inherit; cursor: pointer; text-align: inherit; transition: filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .npaw-badge--interactive:hover { filter: brightness(1.08); } .npaw-badge--interactive:active { filter: brightness(0.95); } .npaw-badge--pill { --npaw-badge-radius: 999px; } .npaw-badge--uppercase { text-transform: uppercase; letter-spacing: 0.04em; } .npaw-badge--size-sm { --npaw-badge-padding-x: 0.375rem; --npaw-badge-padding-y: 0.0625rem; --npaw-badge-font-size: 0.625rem; } .npaw-badge--size-md { --npaw-badge-padding-x: 0.5rem; --npaw-badge-padding-y: 0.125rem; --npaw-badge-font-size: 0.6875rem; } .npaw-badge--size-lg { --npaw-badge-padding-x: 0.625rem; --npaw-badge-padding-y: 0.25rem; --npaw-badge-font-size: 0.75rem; } /* Tones */ .npaw-badge--tone-neutral { --npaw-badge-color-accent: var(--npaw-text-muted); --npaw-badge-bg-mix: 14%; } .npaw-badge--tone-info { --npaw-badge-color-accent: var(--npaw-info); --npaw-badge-bg-mix: 12%; } .npaw-badge--tone-success { --npaw-badge-color-accent: var(--npaw-success); --npaw-badge-bg-mix: 14%; } .npaw-badge--tone-warning { --npaw-badge-color-accent: var(--npaw-warning); --npaw-badge-bg-mix: 18%; } .npaw-badge--tone-danger { --npaw-badge-color-accent: var(--npaw-danger); --npaw-badge-bg-mix: 14%; } .npaw-badge--tone-accent { --npaw-badge-color-accent: var(--npaw-accent); --npaw-badge-bg-mix: 14%; } /* Appearance — subtle (default) */ .npaw-badge--appearance-subtle { background-color: color-mix(in srgb, var(--npaw-badge-color-accent) var(--npaw-badge-bg-mix), var(--npaw-surface-card-bg)); color: var(--npaw-badge-color-accent); border-color: color-mix(in srgb, var(--npaw-badge-color-accent) 22%, transparent); } /* Appearance — solid */ .npaw-badge--appearance-solid { background-color: var(--npaw-badge-color-accent); color: #fff; border-color: color-mix(in srgb, var(--npaw-badge-color-accent) 60%, transparent); } .npaw-badge--appearance-solid.npaw-badge--tone-neutral { background-color: var(--npaw-text-muted); color: #fff; } /* Appearance — outline */ .npaw-badge--appearance-outline { background-color: transparent; color: var(--npaw-badge-color-accent); border-color: color-mix(in srgb, var(--npaw-badge-color-accent) 45%, transparent); } /* Appearance — chip (canonical "filter-chip" look) */ .npaw-badge--appearance-chip { --npaw-badge-radius: 6px; font-weight: 475; background-color: var(--npaw-badge-color-accent); color: #fff; border-color: rgba(255, 255, 255, 0.15); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10); transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .npaw-badge--appearance-chip.npaw-badge--tone-neutral { background-color: var(--npaw-surface-input-bg); color: var(--npaw-text-primary); border-color: var(--npaw-border-subtle); background-image: none; box-shadow: none; } .npaw-badge--appearance-chip.npaw-badge--tone-warning { color: #1a1a1a; } .npaw-badge--appearance-chip.npaw-badge--tone-accent { color: var(--npaw-on-accent); } .npaw-badge--appearance-chip.npaw-badge--size-sm { --npaw-badge-padding-x: 0.5rem; --npaw-badge-padding-y: 0; height: 18px; } .npaw-badge--appearance-chip.npaw-badge--size-md { --npaw-badge-padding-x: 0.5rem; --npaw-badge-padding-y: 0; --npaw-badge-font-size: 0.6875rem; height: 22px; } .npaw-badge--appearance-chip.npaw-badge--size-lg { --npaw-badge-padding-x: 0.625rem; --npaw-badge-padding-y: 0; --npaw-badge-font-size: 0.75rem; height: 26px; } .npaw-badge--appearance-chip.npaw-badge--interactive:hover { filter: brightness(1.12); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .npaw-badge--appearance-chip.npaw-badge--interactive:active { filter: brightness(0.95); transform: scale(0.98); } @media (prefers-reduced-motion: reduce) { button.npaw-badge, .npaw-badge--appearance-chip { transition: none; } .npaw-badge--appearance-chip.npaw-badge--interactive:active { transform: none; } } /* ── NpawTable (portat de /home/ferran/ui) ─────────────────────────────── */ .npaw-table { /* tokens locals: deriven dels globals --npaw-* perquè canviar de tema els re-mapeja automàticament */ --npaw-table-container-bg: var(--npaw-surface-card-bg); --npaw-table-container-border: var(--npaw-surface-card-border); --npaw-table-container-shadow: var(--npaw-elevation-sm); --npaw-table-container-radius: 12px; --npaw-table-toolbar-padding-y: 12px; --npaw-table-toolbar-padding-x: 12px; --npaw-table-toolbar-gap: 12px; --npaw-table-header-bg: var(--npaw-surface-card-bg); --npaw-table-header-text: var(--npaw-text-muted); --npaw-table-header-text-active:var(--npaw-text-primary); --npaw-table-header-divider: var(--npaw-border-subtle); --npaw-table-header-height: 44px; --npaw-table-header-font-size: 12px; --npaw-table-header-font-weight:500; --npaw-table-row-height: 44px; --npaw-table-row-text: var(--npaw-text-primary); --npaw-table-row-text-muted: var(--npaw-text-muted); --npaw-table-row-bg: transparent; --npaw-table-row-bg-hover: color-mix(in srgb, var(--npaw-accent) 6%, transparent); --npaw-table-row-bg-selected: color-mix(in srgb, var(--npaw-accent) 12%, transparent); --npaw-table-row-divider: color-mix(in srgb, var(--npaw-text-primary) 6%, transparent); --npaw-table-row-accent: var(--npaw-accent); --npaw-table-row-accent-width: 2px; --npaw-table-cell-padding-x: 12px; --npaw-table-cell-padding-y: 0; --npaw-table-action-icon-size: 14px; --npaw-table-action-color: var(--npaw-text-secondary); --npaw-table-action-color-hover: var(--npaw-text-primary); --npaw-table-action-bg-hover: var(--npaw-surface-hover); --npaw-table-action-strip-gap: 4px; --npaw-table-action-button-size: 26px; --npaw-table-action-button-radius: 6px; --npaw-table-input-bg: var(--npaw-surface-input-bg); --npaw-table-input-bg-hover: var(--npaw-surface-input-bg-hover, var(--npaw-surface-hover)); --npaw-table-input-border: var(--npaw-surface-input-border); --npaw-table-input-border-focus: var(--npaw-surface-input-border-focus, var(--npaw-accent)); --npaw-table-input-radius: 8px; --npaw-table-input-height: 32px; --npaw-table-input-text: var(--npaw-text-primary); --npaw-table-input-placeholder: var(--npaw-text-muted); --npaw-table-input-focus-ring: var(--npaw-accent-glow, color-mix(in srgb, var(--npaw-accent) 28%, transparent)); --npaw-table-ease: cubic-bezier(0.4, 0, 0.2, 1); --npaw-table-duration-fast: 120ms; --npaw-table-duration-normal: 200ms; display: flex; flex-direction: column; width: 100%; font-size: 13px; letter-spacing: -0.005em; color: var(--npaw-table-row-text); position: relative; isolation: isolate; } .npaw-table__toolbar { display: flex; align-items: center; gap: var(--npaw-table-toolbar-gap); padding: var(--npaw-table-toolbar-padding-y) var(--npaw-table-toolbar-padding-x); border-bottom: 1px solid var(--npaw-table-header-divider); min-height: 56px; flex: 0 0 auto; } .npaw-table__toolbar-spacer { flex: 1 1 auto; } .npaw-table__search { display: inline-flex; align-items: center; gap: 8px; height: var(--npaw-table-input-height); padding: 0 12px; background: var(--npaw-table-input-bg); border: 1px solid var(--npaw-table-input-border); border-radius: var(--npaw-table-input-radius); width: 240px; transition: width var(--npaw-table-duration-normal) var(--npaw-table-ease), box-shadow var(--npaw-table-duration-fast) var(--npaw-table-ease), border-color var(--npaw-table-duration-fast) var(--npaw-table-ease); } .npaw-table__search:hover { background: var(--npaw-table-input-bg-hover); } .npaw-table__search:focus-within { width: 320px; border-color: var(--npaw-table-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-table-input-focus-ring); } .npaw-table__search-icon { color: var(--npaw-text-muted); flex-shrink: 0; } .npaw-table__search-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--npaw-table-input-text); font: inherit; font-size: 13px; } .npaw-table__search-input::placeholder { color: var(--npaw-table-input-placeholder); } .npaw-table__select { height: var(--npaw-table-input-height); min-width: 150px; max-width: 220px; padding: 0 32px 0 12px; border: 1px solid var(--npaw-table-input-border); border-radius: var(--npaw-table-input-radius); background: var(--npaw-table-input-bg); color: var(--npaw-table-input-text); font: inherit; font-size: 13px; outline: none; cursor: pointer; transition: background-color var(--npaw-table-duration-fast) var(--npaw-table-ease), border-color var(--npaw-table-duration-fast) var(--npaw-table-ease), box-shadow var(--npaw-table-duration-fast) var(--npaw-table-ease); } .npaw-table__select:hover { background: var(--npaw-table-input-bg-hover); } .npaw-table__select:focus { border-color: var(--npaw-table-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-table-input-focus-ring); } .npaw-table__select--wide { min-width: 180px; max-width: 280px; } .npaw-table__count { font-size: 12px; color: var(--npaw-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .npaw-table__count-strong { color: var(--npaw-text-primary); font-weight: 600; } .npaw-table__pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--npaw-table-header-divider); background: var(--npaw-surface-subtle); flex: 0 0 auto; } .npaw-table__pagination-summary { color: var(--npaw-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; } .npaw-table__pagination-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .npaw-table__page-size { display: inline-flex; align-items: center; gap: 6px; color: var(--npaw-text-secondary); font-size: 12px; } .npaw-table__page-size select { height: 30px; min-width: 108px; padding: 0 26px 0 10px; border: 1px solid var(--npaw-table-input-border); border-radius: var(--npaw-table-input-radius); background: var(--npaw-table-input-bg); color: var(--npaw-table-input-text); font: inherit; font-size: 12px; outline: none; } .npaw-table__page-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--npaw-button-secondary-border); border-radius: var(--npaw-button-radius); background: var(--npaw-button-secondary-bg); color: var(--npaw-button-secondary-fg); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color var(--npaw-button-transition), color var(--npaw-button-transition), opacity var(--npaw-button-transition); } .npaw-table__page-button:hover:not(:disabled) { background: var(--npaw-button-secondary-bg-hover); } .npaw-table__page-button:disabled { cursor: not-allowed; opacity: 0.5; } .npaw-table[data-chrome='card'] { background: var(--npaw-table-container-bg); border: 1px solid var(--npaw-table-container-border); border-radius: var(--npaw-table-container-radius); box-shadow: var(--npaw-table-container-shadow); overflow: hidden; } .npaw-table[data-chrome='flat'] { background: transparent; border: 0; border-radius: 0; box-shadow: none; } .npaw-table__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--npaw-text-primary) 18%, transparent) transparent; } .npaw-table__scroll::-webkit-scrollbar { width: 8px; height: 8px; } .npaw-table__scroll::-webkit-scrollbar-track { background: transparent; } .npaw-table__scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--npaw-text-primary) 14%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .npaw-table__scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--npaw-text-primary) 28%, transparent); background-clip: padding-box; } .npaw-table__grid { width: 100%; min-width: max-content; table-layout: auto; border-collapse: separate; border-spacing: 0; } .npaw-table th, .npaw-table td { margin: 0; border: 0; text-align: left; font-weight: inherit; font-size: inherit; color: inherit; vertical-align: middle; } /* Thead */ .npaw-table__thead { position: sticky; top: 0; z-index: 2; background: var(--npaw-table-header-bg); } .npaw-table__thead .npaw-table__th { border-bottom: 1px solid var(--npaw-table-header-divider); } .npaw-table__th { height: var(--npaw-table-header-height); padding: 0 var(--npaw-table-cell-padding-x); font-size: var(--npaw-table-header-font-size); font-weight: var(--npaw-table-header-font-weight); color: var(--npaw-table-header-text); user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; position: relative; } .npaw-table__th[data-align='right'] { text-align: right; } .npaw-table__th[data-align='center'] { text-align: center; } .npaw-table__th-content { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } .npaw-table__th--resizable .npaw-table__th-content { padding-right: 10px; } .npaw-table__col-resizer { position: absolute; top: 8px; right: -4px; bottom: 8px; width: 9px; z-index: 6; cursor: col-resize; touch-action: none; } .npaw-table__col-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; border-radius: 999px; background: transparent; transition: background var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .npaw-table__col-resizer:hover::before, body.is-resizing-table .npaw-table__col-resizer::before { background: var(--npaw-accent); box-shadow: 0 0 0 2px var(--npaw-accent-soft); } body.is-resizing-table { cursor: col-resize !important; user-select: none; } body.is-resizing-table * { cursor: col-resize !important; } /* Rows */ .npaw-table__row { height: var(--npaw-table-row-height); background: var(--npaw-table-row-bg); color: var(--npaw-table-row-text); transition: background-color var(--npaw-table-duration-fast) var(--npaw-table-ease), color var(--npaw-table-duration-fast) var(--npaw-table-ease); } .npaw-table__row + .npaw-table__row > .npaw-table__td { border-top: 1px solid var(--npaw-table-row-divider); } .npaw-table__row > .npaw-table__td:first-child { box-shadow: inset var(--npaw-table-row-accent-width) 0 0 transparent; transition: box-shadow var(--npaw-table-duration-normal) var(--npaw-table-ease); } .npaw-table__row:hover { background: var(--npaw-table-row-bg-hover); } .npaw-table__row:hover > .npaw-table__td:first-child { box-shadow: inset var(--npaw-table-row-accent-width) 0 0 var(--npaw-table-row-accent); } .npaw-table__row--status-pendent > .npaw-table__td:first-child, .npaw-table__row--status-pendent:hover > .npaw-table__td:first-child { box-shadow: inset 3px 0 0 var(--npaw-status-pendent-fg); } .npaw-table__row--status-bloquejada > .npaw-table__td:first-child, .npaw-table__row--status-bloquejada:hover > .npaw-table__td:first-child { box-shadow: inset 3px 0 0 var(--npaw-status-bloquejada-fg); } .npaw-table__row--status-en_curs > .npaw-table__td:first-child, .npaw-table__row--status-en_curs:hover > .npaw-table__td:first-child { box-shadow: inset 3px 0 0 var(--npaw-status-en_curs-fg); } .npaw-table__row--status-acabada > .npaw-table__td:first-child, .npaw-table__row--status-acabada:hover > .npaw-table__td:first-child { box-shadow: inset 3px 0 0 var(--npaw-status-acabada-fg); } .npaw-table__row--clickable { cursor: pointer; } /* Category group header row (custom) */ .npaw-table__row--group > td { background: color-mix(in srgb, var(--npaw-accent) 5%, var(--npaw-surface-subtle)); color: var(--npaw-text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; border-top: 1px solid var(--npaw-table-row-divider); border-bottom: 1px solid var(--npaw-table-row-divider); } .npaw-table__row--group .group-count { color: var(--npaw-text-muted); margin-left: 6px; letter-spacing: 0; text-transform: none; font-weight: 500; } /* Cells */ .npaw-table__td { padding: var(--npaw-table-cell-padding-y) var(--npaw-table-cell-padding-x); color: var(--npaw-table-row-text); vertical-align: middle; } .npaw-table__td[data-align='right'] { text-align: right; } .npaw-table__td[data-align='center'] { text-align: center; } .npaw-table__cell { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; } .npaw-table__cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .npaw-table__cell--primary { font-weight: 600; color: var(--npaw-text-primary); letter-spacing: -0.01em; } .npaw-table__cell--muted { color: var(--npaw-table-row-text-muted); } .npaw-table__cell--numeric { font-variant-numeric: tabular-nums; } /* Action column */ .npaw-table__td--actions, .npaw-table__th--actions { width: 1%; white-space: nowrap; text-align: right; padding-right: 12px; } .npaw-table__actions { display: inline-flex; align-items: center; gap: var(--npaw-table-action-strip-gap); position: relative; z-index: 1; } .npaw-table__action-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: var(--npaw-table-action-button-size); height: var(--npaw-table-action-button-size); padding: 0; border: 0; background: transparent; border-radius: var(--npaw-table-action-button-radius); color: var(--npaw-table-action-color); cursor: pointer; transition: background-color var(--npaw-table-duration-fast) var(--npaw-table-ease), color var(--npaw-table-duration-fast) var(--npaw-table-ease), transform var(--npaw-table-duration-fast) var(--npaw-table-ease); } .npaw-table__action-button--labelled { width: auto; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 500; } .npaw-table__action-button:hover { background: var(--npaw-table-action-bg-hover); color: var(--npaw-table-action-color-hover); } .npaw-table__action-button:active { transform: scale(0.92); } .npaw-table__action-button svg { display: block; } .npaw-table__empty { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 12px; color: var(--npaw-text-muted); font-size: 13px; } /* ── Tasks list table ──────────────────────────────────────────────────── */ .tasks-list-table { --npaw-table-header-height: 48px; --npaw-table-row-height: 56px; --npaw-table-action-button-size: 30px; font-size: 13.5px; flex: 1 1 auto; min-height: 360px; height: calc(100vh - 220px); } .tasks-list-table #list-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tasks-list-table #list-wrap > .npaw-table__scroll, .tasks-list-table #list-wrap > .npaw-table__empty { flex: 1 1 auto; min-height: 0; } .tasks-list-table .npaw-table__scroll { overflow: auto; } .tasks-list-table .npaw-table__grid { width: 100%; min-width: 1320px; table-layout: fixed; } .tasks-list-col--task { width: 18%; } .tasks-list-col--status { width: 7%; } .tasks-list-col--priority { width: 6%; } .tasks-list-col--categories { width: 10%; } .tasks-list-col--responsible { width: 11%; } .tasks-list-col--dependencies { width: 9%; } .tasks-list-col--start { width: 11%; } .tasks-list-col--hours { width: 5%; } .tasks-list-col--finish { width: 11%; } .tasks-list-col--resources { width: 8%; } .tasks-list-col--created { width: 9%; } .tasks-list-col--updated { width: 9%; } .tasks-list-col--actions { width: 122px; } /* Sortable header */ .npaw-table__th--sortable .npaw-table__th-content { width: 100%; } .npaw-table__th-button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; text-align: left; border-radius: 4px; transition: color var(--npaw-table-duration-fast, 120ms) ease; } .npaw-table__th-button:hover { color: var(--npaw-text-primary); } .npaw-table__th-button:focus-visible { outline: 2px solid var(--npaw-accent); outline-offset: 2px; } .npaw-table__sort-indicator { font-size: 9px; line-height: 1; opacity: 0.4; transition: opacity var(--npaw-table-duration-fast, 120ms) ease; margin-left: auto; } .npaw-table__th--sortable:hover .npaw-table__sort-indicator, .npaw-table__th.is-sorted .npaw-table__sort-indicator { opacity: 1; } .npaw-table__th.is-sorted { color: var(--npaw-text-primary); } .npaw-table__th.is-sorted .npaw-table__sort-indicator { color: var(--npaw-accent); } .tasks-list-table .npaw-table__toolbar { min-height: 44px; } .tasks-list-table .npaw-table__cell { gap: 8px; } .tasks-list-table .npaw-table__th, .tasks-list-table .npaw-table__td { overflow: hidden; } .tasks-list-table .npaw-table__td--actions, .tasks-list-table .npaw-table__th--actions { position: sticky; right: 0; z-index: 2; background: var(--npaw-surface-card-bg); box-shadow: -10px 0 16px -16px var(--npaw-surface-halo); } .tasks-list-table .npaw-table__th--actions { z-index: 3; } .tasks-list-table .npaw-table__action-button { background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-color); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-md); } .tasks-list-table .npaw-table__action-button:hover { background: var(--npaw-accent-soft); border-color: color-mix(in srgb, var(--npaw-accent) 35%, var(--npaw-border-color)); color: var(--npaw-accent); } .tasks-list-table .npaw-table__action-button--danger { color: var(--npaw-danger); border-color: color-mix(in srgb, var(--npaw-danger) 28%, var(--npaw-border-color)); background: color-mix(in srgb, var(--npaw-danger) 8%, transparent); } .tasks-list-table .npaw-table__action-button--danger:hover { color: var(--npaw-danger); border-color: color-mix(in srgb, var(--npaw-danger) 45%, var(--npaw-border-color)); background: color-mix(in srgb, var(--npaw-danger) 14%, transparent); } .task-title-cell { width: 100%; min-width: 0; max-width: none; align-items: stretch; } .task-title-line { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .task-warning-stack { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; gap: 6px; margin-top: 0; } .tasks-list-table .task-warning-stack { gap: 4px; } .task-list-inline-input { min-width: 0; height: 30px; border: 1px solid transparent; border-radius: var(--npaw-radius-md); background: transparent; color: var(--npaw-text-primary); font: inherit; font-size: 13px; outline: 0; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .task-list-inline-input:hover { background: var(--npaw-surface-hover); border-color: var(--npaw-border-color); } .task-list-inline-input:focus { background: var(--npaw-surface-input-bg); border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .task-list-inline-input:disabled { opacity: 0.65; } .task-list-title-input { flex: 1 1 auto; width: 100%; padding: 0 6px; margin-left: -6px; font-weight: 600; letter-spacing: -0.01em; } .task-date-cell { width: 100%; } .task-list-date-input { width: 100%; padding: 0 4px; color-scheme: var(--npaw-color-scheme); } .task-list-hours-input { width: 100%; padding: 0 6px; } .field-help { margin: 2px 0 0; color: var(--npaw-text-muted); font-size: 12px; line-height: 1.35; } .card-meta > .task-warning-badge { margin-top: 2px; } .task-warning-badge svg { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tasks-list-table .task-warning-badge { --npaw-badge-padding-x: 0; --npaw-badge-padding-y: 0; width: 22px; height: 18px; min-height: 18px; justify-content: center; } .tasks-list-table .task-warning-badge__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tasks-list-table .task-warning-badge svg { width: 13px; height: 13px; } .task-resource-cell { max-width: 100%; } /* ── Operators ─────────────────────────────────────────────────────────── */ .operators-page { min-height: calc(100vh - 108px); display: flex; flex-direction: column; } .operators-page > .npaw-table { flex: 1 1 auto; min-height: 360px; height: calc(100vh - 170px); --npaw-table-header-height: 48px; --npaw-table-row-height: 56px; --npaw-table-cell-padding-x: 12px; --npaw-table-action-button-size: 30px; font-size: 13.5px; } .operators-page > .npaw-table .npaw-table__scroll { min-height: 0; overflow: auto; } .operators-table .npaw-table__grid { width: 100%; min-width: 1450px; table-layout: fixed; } .operators-col--name { width: 180px; } .operators-col--kind { width: 90px; } .operators-col--status { width: 100px; } .operators-col--roles { width: 190px; } .operators-col--company { width: 150px; } .operators-col--specialty { width: 150px; } .operators-col--location { width: 130px; } .operators-col--notes { width: 160px; } .operators-col--updated { width: 110px; } .operators-col--created { width: 110px; } .operators-col--actions { width: 86px; } .operators-table .npaw-table__th, .operators-table .npaw-table__td { overflow: hidden; } .operators-table .npaw-table__td--actions, .operators-table .npaw-table__th--actions { position: sticky; right: 0; z-index: 2; background: var(--npaw-surface-card-bg); box-shadow: -10px 0 16px -16px var(--npaw-surface-halo); } .operators-table .npaw-table__th--actions { z-index: 3; } .operators-table .npaw-table__action-button { background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-color); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-md); } .operators-table .npaw-table__action-button:hover { background: var(--npaw-accent-soft); border-color: color-mix(in srgb, var(--npaw-accent) 35%, var(--npaw-border-color)); color: var(--npaw-accent); } .operator-kind-cell .npaw-badge, .operator-status-cell .npaw-badge { min-height: 26px; padding-inline: 10px; font-size: 12px; font-weight: 600; } .operators-page .npaw-table__cell { gap: 8px; max-width: 100%; } .operator-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--npaw-accent-soft); color: var(--npaw-accent); font-size: 12px; font-weight: 700; } .operator-role-cell { flex-wrap: wrap; gap: 6px; max-width: 100%; max-height: 48px; overflow: hidden; } .operator-notes { max-width: 100%; } .category-cell { flex-wrap: wrap; gap: 4px; max-width: 360px; } .dependency-cell { flex-wrap: wrap; gap: 4px; max-width: 360px; } .operator-form { display: grid; gap: 18px; height: 100%; } .operator-form .modal-body--grid { min-height: 100%; align-items: stretch; } .operator-form .modal-col { height: 100%; } .operator-general-panel, .operator-roles-panel { min-height: 100%; align-content: start; } .operator-notes-panel { height: 100%; display: flex; flex-direction: column; } .operator-notes-card { max-width: none; min-height: 100%; } .operator-notes-textarea { flex: 1; min-height: 420px; resize: vertical; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-lg); padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.55; outline: none; transition: border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .operator-notes-textarea:focus { border-color: var(--npaw-accent); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .role-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .role-option { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: 8px; color: var(--npaw-text-primary); font-size: 12px; cursor: pointer; } .role-option:hover { background: var(--npaw-surface-hover); } .role-option input { accent-color: var(--npaw-accent); } .assignment-editor { display: grid; gap: 8px; } .modal-section-help { margin: 4px 0 12px; color: var(--npaw-text-secondary); font-size: 12px; line-height: 1.35; } .assignment-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; } .assignment-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--npaw-border-subtle); border-radius: 14px; background: var(--npaw-surface-card-bg); box-shadow: var(--npaw-elevation-sm); } .assignment-section--secondary { grid-column: 1 / -1; background: var(--npaw-surface-subtle); box-shadow: none; } .assignment-section__head { display: flex; align-items: flex-start; gap: 10px; } .assignment-section__icon { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--npaw-accent-soft); color: var(--npaw-accent); } .assignment-section__icon[data-role-icon='validator'] { background: color-mix(in srgb, var(--npaw-success) 18%, transparent); color: var(--npaw-success); } .assignment-section__icon[data-role-icon='other'] { background: var(--npaw-surface-hover); color: var(--npaw-text-secondary); } .assignment-section__title-block { flex: 1 1 auto; min-width: 0; } .assignment-section__title-block h3 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--npaw-text-primary); display: inline-flex; align-items: center; gap: 8px; } .assignment-section__title-block p { margin: 3px 0 0; color: var(--npaw-text-secondary); font-size: 12px; line-height: 1.3; } .assignment-section__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--npaw-surface-hover); color: var(--npaw-text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 0; } .assignment-section[data-assignment-section='responsible'] .assignment-section__count { background: var(--npaw-accent-soft); color: var(--npaw-accent); } .assignment-section[data-assignment-section='validator'] .assignment-section__count { background: color-mix(in srgb, var(--npaw-success) 16%, transparent); color: var(--npaw-success); } .assignment-section__head .assignment-add { margin-top: 0; flex: 0 0 auto; align-self: flex-start; } .assignment-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: center; } .assignment-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--npaw-border-subtle); border-radius: 999px; background: var(--npaw-surface-card-bg); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } .assignment-chip:hover { border-color: color-mix(in srgb, var(--npaw-accent) 40%, var(--npaw-border-color)); box-shadow: var(--npaw-elevation-sm); } .assignment-chip__avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--npaw-accent-soft); color: var(--npaw-accent); flex: 0 0 auto; } .assignment-chip__avatar--lg { width: 30px; height: 30px; font-size: 11px; } .assignment-chip__avatar[data-accent='a1'] { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; } .assignment-chip__avatar[data-accent='a2'] { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; } .assignment-chip__avatar[data-accent='a3'] { background: color-mix(in srgb, #f97316 20%, transparent); color: #ea580c; } .assignment-chip__avatar[data-accent='a4'] { background: color-mix(in srgb, #a855f7 20%, transparent); color: #9333ea; } .assignment-chip__avatar[data-accent='a5'] { background: color-mix(in srgb, #ec4899 20%, transparent); color: #db2777; } .assignment-chip__avatar[data-accent='a6'] { background: color-mix(in srgb, #14b8a6 20%, transparent); color: #0f766e; } .assignment-chip__avatar[data-accent='a7'] { background: color-mix(in srgb, #eab308 22%, transparent); color: #a16207; } .assignment-chip__avatar[data-accent='a8'] { background: color-mix(in srgb, #ef4444 18%, transparent); color: #dc2626; } .assignment-chip__info { display: inline-flex; flex-direction: column; min-width: 0; padding-right: 4px; line-height: 1.15; } .assignment-chip__name { font-size: 12.5px; font-weight: 600; color: var(--npaw-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .assignment-chip__meta { margin-top: 2px; font-size: 10.5px; color: var(--npaw-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } .assignment-chip__remove { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--npaw-text-muted); display: inline-grid; place-items: center; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .assignment-chip__remove:hover { background: color-mix(in srgb, var(--npaw-danger) 16%, transparent); color: var(--npaw-danger); } .assignment-empty { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px dashed var(--npaw-border-subtle); border-radius: 12px; background: transparent; color: var(--npaw-text-tertiary); font-size: 12px; font-style: italic; width: 100%; justify-content: center; } .assignment-section__add { margin-top: auto; } .assignment-picker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 12px; border: 1px dashed var(--npaw-border-color); border-radius: 999px; background: transparent; color: var(--npaw-text-secondary); cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .assignment-picker:hover { border-color: color-mix(in srgb, var(--npaw-accent) 45%, var(--npaw-border-color)); background: var(--npaw-surface-hover); color: var(--npaw-text-primary); } .assignment-picker:focus-within { border-color: var(--npaw-accent); background: var(--npaw-accent-soft); color: var(--npaw-accent); } .assignment-picker svg { flex: 0 0 auto; } .assignment-picker__select { appearance: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 4px 4px 0; outline: none; cursor: pointer; max-width: 220px; } .assignment-picker__select option { color: var(--npaw-text-primary); background: var(--npaw-surface-card-bg); } .assignment-picker--empty { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--npaw-surface-hover); color: var(--npaw-text-tertiary); font-size: 12px; font-style: italic; } .assignment-other-list { display: grid; gap: 8px; } .assignment-row { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(140px, 0.9fr) minmax(160px, 1.2fr) 32px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--npaw-border-subtle); border-radius: 12px; background: var(--npaw-surface-card-bg); } .assignment-row__person { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; min-width: 0; } .assignment-row__person .assignment-chip__avatar { margin-left: 2px; } .assignment-row select, .assignment-row input { width: 100%; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-md); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; } .assignment-row select:focus, .assignment-row input:focus { border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .assignment-row__remove { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--npaw-text-muted); cursor: pointer; display: inline-grid; place-items: center; line-height: 1; } .assignment-row__remove:hover { background: color-mix(in srgb, var(--npaw-danger) 14%, transparent); color: var(--npaw-danger); } .assignment-add { margin-top: 0; } .dependency-editor { display: grid; gap: 8px; } .dependency-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 8px; align-items: center; } .dependency-row select { width: 100%; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-md); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; } .dependency-row select:focus { border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .dependency-open { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-md); background: var(--npaw-surface-subtle); color: var(--npaw-accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), color var(--npaw-transition-fast); } .dependency-open:hover { background: var(--npaw-accent-soft); border-color: color-mix(in srgb, var(--npaw-accent) 35%, var(--npaw-border-color)); } .dependency-open[hidden] { display: none; } .dependency-remove { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--npaw-text-muted); cursor: pointer; font-size: 18px; line-height: 1; } .dependency-remove:hover { background: var(--npaw-surface-hover); color: var(--npaw-danger); } .dependency-add { margin-top: 10px; } .dependency-help { margin: -2px 0 10px; } .category-picker { display: grid; gap: 10px; } .category-search-row input { width: 100%; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-md); padding: 9px 10px; font: inherit; font-size: 13px; outline: none; transition: border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .category-search-row input:focus { border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .category-chip-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 56px; overflow: hidden; align-content: flex-start; } .category-picker.has-query .category-chip-list { overflow-y: auto; } .category-chip[hidden] { display: none; } .category-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid var(--npaw-border-subtle); border-radius: 6px; background: var(--npaw-surface-input-bg); color: var(--npaw-text-secondary); font: inherit; font-size: 12px; cursor: pointer; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), color var(--npaw-transition-fast); } .category-chip:hover { color: var(--npaw-text-primary); background: var(--npaw-surface-hover); } .category-chip.is-active { background: var(--npaw-accent); border-color: color-mix(in srgb, var(--npaw-accent) 70%, transparent); color: var(--npaw-on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10); } /* ────────────────────────────────────────────────────────────────────────── Modal — sizing inspired by /home/ferran/ui NpawModal `w80 / w70h70` variants. Always 80% of the viewport (capped at 1400×1000 px) and collapses to true fullscreen on small screens. ────────────────────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); display: grid; place-items: center; z-index: var(--npaw-z-modal-backdrop); padding: clamp(8px, 2vw, 28px); animation: modal-backdrop-in 180ms ease-out; } .modal { width: min(80vw, 1400px); height: min(80vh, 1000px); max-width: 100%; max-height: 100%; min-height: min(620px, 92vh); display: flex; flex-direction: column; background: var(--npaw-surface-modal-bg); border: 1px solid var(--npaw-surface-modal-border); border-radius: 18px; box-shadow: var(--npaw-elevation-lg), 0 40px 120px -32px color-mix(in srgb, var(--npaw-accent) 22%, transparent); z-index: var(--npaw-z-modal); overflow: hidden; animation: modal-in 240ms cubic-bezier(0.16, 1, 0.3, 1); } /* `.modal-lg` retained as an alias so legacy callers still work. */ .modal-lg { width: min(80vw, 1400px); } /* Operator modal piggy-backs on the same generous sizing. */ .operator-modal { width: min(80vw, 1400px); } /* Compact modal variant for short, focused dialogs (column picker, confirm…). */ .modal.modal--compact { width: min(440px, 92vw); height: auto; min-height: 0; max-height: 80vh; } .modal.modal--compact .modal-pane { padding: 12px 18px; flex: 1; min-height: 0; overflow: auto; } .modal.modal--compact .modal-pane-card { padding: 0; background: transparent; border: 0; box-shadow: none; } .modal-subheading { margin: 4px 0 0; color: var(--npaw-text-secondary); font-size: 12px; font-weight: 400; } .column-picker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .column-picker__item { border-radius: var(--npaw-radius-md); transition: background var(--npaw-transition-fast, 120ms) ease; } .column-picker__item:hover { background: var(--npaw-surface-hover); } .column-picker__label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--npaw-text-primary); user-select: none; } .column-picker__label input[type='checkbox'] { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--npaw-accent); } .modal-header { display: flex; align-items: flex-start; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--npaw-border-subtle); background: linear-gradient(180deg, color-mix(in srgb, var(--npaw-accent) 4%, transparent) 0%, transparent 100%), var(--npaw-surface-modal-bg); flex-shrink: 0; } .modal-header-main { flex: 1; min-width: 0; } .modal-back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-md); background: var(--npaw-surface-subtle); color: var(--npaw-text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), color var(--npaw-transition-fast); } .modal-back-link:hover { background: var(--npaw-surface-hover); border-color: color-mix(in srgb, var(--npaw-accent) 35%, var(--npaw-border-color)); color: var(--npaw-accent); } .modal-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 4px; padding: 3px 8px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-pill); color: var(--npaw-text-secondary); } .modal-title-input { width: 100%; font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.3; background: transparent; border: 1px solid transparent; color: var(--npaw-text-primary); padding: 6px 8px; margin-left: -8px; border-radius: var(--npaw-radius-md); outline: none; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast); } .modal-title-input:hover { background: var(--npaw-surface-hover); } .modal-title-input:focus { background: var(--npaw-surface-input-bg); border-color: var(--npaw-surface-input-border); } .modal-heading { margin: 0; color: var(--npaw-text-primary); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.3; } .modal .close { background: transparent; border: 0; color: var(--npaw-text-muted); font-size: 20px; line-height: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--npaw-radius-md); transition: background var(--npaw-transition-fast), color var(--npaw-transition-fast); flex-shrink: 0; } .modal .close:hover { color: var(--npaw-text-primary); background: var(--npaw-surface-hover); } /* Tabs inside the modal. */ .modal-tabs { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-bottom: 1px solid var(--npaw-border-subtle); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--npaw-surface-subtle) 55%, transparent) 100%), var(--npaw-surface-modal-bg); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .modal-tabs::-webkit-scrollbar { display: none; } .modal-tab { min-height: var(--npaw-button-height-sm); padding: 0 var(--npaw-button-padding-x-sm); border: 1px solid var(--npaw-button-secondary-border); border-radius: var(--npaw-button-radius); background: var(--npaw-button-secondary-bg); color: var(--npaw-button-secondary-fg); font: inherit; font-size: var(--npaw-button-font-size-sm); font-weight: var(--npaw-button-font-weight); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--npaw-button-transition), border-color var(--npaw-button-transition), color var(--npaw-button-transition), box-shadow var(--npaw-button-transition); } .modal-tab:hover { background: var(--npaw-button-secondary-bg-hover); color: var(--npaw-text-primary); } .modal-tab.is-active { background: var(--npaw-button-primary-bg); border-color: var(--npaw-button-primary-bg); color: var(--npaw-button-primary-fg); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .modal-pane { padding: 22px 24px 28px; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--npaw-scrollbar-thumb) transparent; } .modal-pane[hidden] { display: none !important; } .modal-pane-card { max-width: 980px; display: grid; gap: 16px; } .modal-pane--notes { display: flex; flex-direction: column; } .modal-pane--notes[hidden] { display: none !important; } .modal-pane-card--fill { flex: 1 1 auto; min-height: 0; max-width: none; } .modal-pane-card .modal-section-title { display: block; } /* ── 2-column body layout — main editing area on the left, metadata sidebar on the right. Collapses to a single column on narrow modals. */ .modal-body--grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; } .modal-col { display: grid; gap: 18px; min-width: 0; } .modal-col__panel { display: grid; gap: 10px; padding: 16px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: 14px; } .modal-col__panel--flush { padding: 0; background: transparent; border: 0; } .modal-col__panel-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--npaw-text-secondary); } .modal-description { display: grid; gap: 8px; } .modal-description--rich { grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-height: 0; } .modal-description label { color: var(--npaw-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .modal-description textarea { background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-lg); padding: 14px 16px; font: inherit; font-size: 15px; line-height: 1.6; min-height: 260px; resize: vertical; outline: none; transition: border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .modal-description textarea:focus { border-color: var(--npaw-accent); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .rich-text-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-lg); } .rich-text-editor { min-height: 0; height: 100%; overflow: auto; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-lg); padding: 16px 18px; font: inherit; font-size: 15px; line-height: 1.65; outline: none; scrollbar-width: thin; scrollbar-color: var(--npaw-scrollbar-thumb) transparent; transition: border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .rich-text-editor:focus { border-color: var(--npaw-accent); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .rich-text-editor p, .rich-text-editor div { margin: 0 0 0.75em; } .rich-text-editor ul, .rich-text-editor ol { margin: 0 0 0.75em 1.25em; padding: 0; } .rich-text-editor:empty::before { content: attr(data-placeholder); color: var(--npaw-text-muted); } .modal-section { margin-bottom: 18px; padding-top: 4px; } .modal-section:last-child { margin-bottom: 0; } .modal-section-title { color: var(--npaw-text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; font-weight: 600; } /* Show section titles inside the new grid layout so each card is labelled. */ .modal-body--grid .modal-section-title { display: block; } .field { display: grid; gap: 6px; } .modal-section .field + .field { margin-top: 12px; } .field label { color: var(--npaw-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .field input, .field select, .field textarea { background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-lg); padding: 10px 12px; font: inherit; font-size: 14px; outline: none; transition: border-color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--npaw-accent); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fields-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .fields-row + .field, .fields-row-3 + .field { margin-top: 12px; } .modal-actions { display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--npaw-border-subtle); background: var(--npaw-surface-subtle); flex-shrink: 0; } /* ── Modal animations ─────────────────────────────────────────────────── */ @keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal { animation: none; } } /* ── Modal responsive — true fullscreen on small / narrow screens ────── */ @media (max-width: 960px) { .modal-body--grid { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 720px) { .modal-backdrop { padding: 0; } .modal, .modal-lg, .operator-modal { width: 100vw; height: 100vh; min-height: 100vh; max-height: 100vh; border-radius: 0; border: 0; } .modal-header, .modal-tabs, .modal-actions { padding-left: 14px; padding-right: 14px; } .modal-pane { padding: 16px 14px 22px; } } .activity-list { padding: 4px 0 8px; } .activity-item { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--npaw-border-subtle); font-size: 13.5px; } .activity-item:last-child { border-bottom: 0; } .activity-when { color: var(--npaw-text-muted); font-variant-numeric: tabular-nums; font-size: 12px; } .activity-who { color: var(--npaw-accent); font-weight: 600; } .activity-detail { color: var(--npaw-text-secondary); } /* ── Calendar / My tasks ────────────────────────────────────────────────── */ .my-tasks-shell { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: calc(100vh - 81px); } .my-tasks-shell > .section-toolbar { flex: 0 0 auto; margin-bottom: 0; } .my-tasks-summary { gap: 8px; align-items: center; } .my-tasks-summary > .npaw-badge { --npaw-badge-padding-x: 0.75rem; --npaw-badge-font-size: var(--npaw-button-font-size-sm); height: 34px; min-height: 34px; border-radius: var(--npaw-button-radius); font-weight: 600; } .my-tasks-panel-switch { height: 34px; } .my-tasks-panel-switch button { height: 28px; padding: 0 12px; font-size: var(--npaw-button-font-size-sm); font-weight: 600; } .my-tasks-panel-switch button.is-active { color: var(--npaw-text-primary); box-shadow: var(--npaw-elevation-sm); } .my-tasks-user-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--npaw-text-muted); } .my-tasks-user-select-label { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .my-tasks-user-select select { height: 34px; min-width: 180px; max-width: 260px; padding: 0 12px; background: var(--npaw-surface-input-bg); border: 1px solid var(--npaw-surface-input-border); border-radius: 8px; color: var(--npaw-text-primary); font: inherit; font-size: 13px; font-weight: 500; outline: 0; cursor: pointer; } .my-tasks-user-select select:focus { border-color: var(--npaw-surface-input-border-focus); box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .my-tasks-title-select select { width: 240px; max-width: 42vw; height: 34px; padding: 0 12px; border-radius: var(--npaw-button-radius); font-size: var(--npaw-button-font-size-sm); font-weight: 600; letter-spacing: 0; background: var(--npaw-surface-input-bg); color: var(--npaw-text-primary); } .my-tasks-calendar-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 14px; gap: 10px; } .my-tasks-list-panel { flex: 0 0 auto; display: flex; flex-direction: column; padding: 12px 14px; gap: 12px; min-height: 80px; overflow: hidden; } .my-tasks-list-panel--full { flex: 1 1 auto; min-height: 0; height: auto; } .my-tasks-resizer { flex: 0 0 14px; display: flex; align-items: center; justify-content: center; cursor: row-resize; position: relative; user-select: none; outline: 0; } .my-tasks-resizer-handle { display: block; width: 44px; height: 4px; border-radius: 999px; background: var(--npaw-border-color); transition: background var(--npaw-transition-fast), width var(--npaw-transition-fast); } .my-tasks-resizer:hover .my-tasks-resizer-handle, .my-tasks-resizer:focus-visible .my-tasks-resizer-handle, body.is-resizing-cal .my-tasks-resizer-handle { background: var(--npaw-accent); width: 64px; } .my-tasks-resizer::before { content: ''; position: absolute; inset: 0; border-radius: 4px; } .my-tasks-resizer:focus-visible::before { box-shadow: 0 0 0 3px var(--npaw-accent-glow); } body.is-resizing-cal { cursor: row-resize !important; user-select: none; } body.is-resizing-cal * { cursor: row-resize !important; } .my-tasks-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; } .my-tasks-calendar-aside { display: inline-flex; align-items: center; gap: 12px; } .my-tasks-calendar-nav { display: inline-flex; align-items: center; gap: 8px; } .my-tasks-calendar-nav-btn { height: 28px; width: 28px; border-radius: 8px; border: 1px solid var(--npaw-border-color); background: var(--npaw-surface-subtle); color: var(--npaw-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--npaw-transition-fast), color var(--npaw-transition-fast); } .my-tasks-calendar-nav-btn:hover { color: var(--npaw-text-primary); background: var(--npaw-surface-hover); } .my-tasks-calendar-title { margin: 0; font-size: 16px; font-weight: 650; text-transform: capitalize; letter-spacing: -0.01em; color: var(--npaw-text-primary); } .my-tasks-calendar { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; } .my-tasks-calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; flex: 0 0 auto; } .my-tasks-calendar-weekday { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--npaw-text-muted); padding: 4px 6px; text-align: left; } .my-tasks-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; flex: 1 1 auto; min-height: 0; } .my-tasks-calendar-grid--month { grid-template-rows: repeat(6, minmax(0, 1fr)); } .my-tasks-calendar-grid--week { grid-template-rows: minmax(0, 1fr); } .my-tasks-mode-switch button { padding: 0 12px; font-weight: 600; } .my-tasks-mode-switch button.is-active { color: var(--npaw-text-primary); box-shadow: var(--npaw-elevation-sm); } .my-tasks-calendar-cell.is-weekend { background: color-mix(in srgb, var(--npaw-surface-card-bg) 60%, var(--npaw-surface-subtle)); } .my-tasks-calendar-cell-head--week { align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--npaw-border-subtle); margin-bottom: 4px; } .my-tasks-calendar-weekday-name { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--npaw-text-muted); flex: 1 1 auto; } .my-tasks-calendar-grid--week .my-tasks-calendar-cell { padding: 10px; } .my-tasks-calendar-grid--week .my-tasks-calendar-day-number { font-size: 18px; font-weight: 700; } .my-tasks-calendar-grid--week .my-tasks-calendar-cell-body { gap: 5px; overflow-y: auto; } .my-tasks-calendar-grid--week .my-tasks-cal-chip { font-size: 12px; padding: 5px 8px; } .my-tasks-calendar-grid--week .my-tasks-cal-chip-row { gap: 5px; } .my-tasks-calendar-grid--week .my-tasks-calendar-cell.is-today .my-tasks-calendar-weekday-name { color: var(--npaw-accent); } .my-tasks-calendar-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--npaw-radius-lg); border: 1px solid var(--npaw-border-subtle); background: var(--npaw-surface-subtle); min-height: 0; overflow: hidden; transition: border-color var(--npaw-transition-fast), background var(--npaw-transition-fast); } .my-tasks-calendar-cell.is-outside { background: transparent; border-color: transparent; opacity: 0.55; } .my-tasks-calendar-cell.is-today { border-color: color-mix(in srgb, var(--npaw-accent) 60%, transparent); background: color-mix(in srgb, var(--npaw-accent) 8%, var(--npaw-surface-subtle)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--npaw-accent) 35%, transparent); } .my-tasks-calendar-cell-head { display: flex; align-items: center; justify-content: space-between; } .my-tasks-calendar-day-number { font-size: 12.5px; font-weight: 700; color: var(--npaw-text-primary); } .my-tasks-calendar-cell.is-outside .my-tasks-calendar-day-number { color: var(--npaw-text-muted); font-weight: 500; } .my-tasks-calendar-cell.is-today .my-tasks-calendar-day-number { color: var(--npaw-accent); } .my-tasks-calendar-day-count { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--npaw-surface-card-bg); border: 1px solid var(--npaw-border-subtle); color: var(--npaw-text-secondary); } .my-tasks-calendar-cell-body { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; } .my-tasks-cal-chip-row { display: flex; align-items: stretch; gap: 3px; min-width: 0; } .my-tasks-cal-chip { display: flex; align-items: baseline; gap: 4px; width: 100%; text-align: left; font: inherit; font-size: 11px; line-height: 1.15; padding: 3px 6px; border-radius: 6px; border: 0; cursor: pointer; color: var(--npaw-text-primary); background: var(--npaw-surface-card-bg); border-left: 3px solid var(--npaw-text-muted); overflow: hidden; min-width: 0; } .my-tasks-cal-chip:hover { background: var(--npaw-surface-hover); } .task-copy-link-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--npaw-border-subtle); border-radius: 7px; background: var(--npaw-surface-subtle); color: var(--npaw-text-secondary); cursor: pointer; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast), color var(--npaw-transition-fast), box-shadow var(--npaw-transition-fast); } .task-copy-link-btn:hover, .task-copy-link-btn:focus-visible { background: var(--npaw-accent-soft); border-color: color-mix(in srgb, var(--npaw-accent) 35%, var(--npaw-border-color)); color: var(--npaw-accent); outline: none; box-shadow: 0 0 0 3px var(--npaw-accent-glow); } .task-copy-link-btn--calendar { width: 24px; height: auto; min-height: 23px; border-radius: 6px; opacity: 0.62; } .my-tasks-cal-chip-row:hover .task-copy-link-btn--calendar, .task-copy-link-btn--calendar:focus-visible { opacity: 1; } .my-tasks-cal-chip-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--npaw-text-secondary); flex: 0 0 auto; } .my-tasks-cal-chip-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .my-tasks-cal-chip--pendent { border-left-color: var(--npaw-status-pendent, #64748b); } .my-tasks-cal-chip--en_curs { border-left-color: var(--npaw-accent); } .my-tasks-cal-chip--bloquejada { border-left-color: var(--npaw-priority-critical, #ef4444); } .my-tasks-cal-chip--acabada { border-left-color: var(--npaw-priority-minor, #16a34a); opacity: 0.75; } .my-tasks-cal-more { font-size: 10.5px; color: var(--npaw-text-muted); font-weight: 600; } .my-tasks-calendar-legend { display: inline-flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--npaw-text-muted); } .my-tasks-legend-item { display: inline-flex; align-items: center; gap: 4px; } .my-tasks-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--npaw-text-muted); } .my-tasks-legend-dot--pendent { background: var(--npaw-status-pendent, #64748b); } .my-tasks-legend-dot--en_curs { background: var(--npaw-accent); } .my-tasks-legend-dot--bloquejada { background: var(--npaw-priority-critical, #ef4444); } .my-tasks-legend-dot--acabada { background: var(--npaw-priority-minor, #16a34a); } .my-tasks-list-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 4px; } .my-tasks-empty { text-align: center; padding: 24px; border: 1px dashed var(--npaw-border-subtle); border-radius: var(--npaw-radius-lg); } .my-tasks-section { display: flex; flex-direction: column; gap: 6px; } .my-tasks-section-head { display: flex; align-items: center; gap: 8px; } .my-tasks-section-head h3 { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--npaw-text-secondary); } .my-tasks-section-count { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); color: var(--npaw-text-secondary); font-weight: 600; } .my-tasks-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .my-tasks-row { position: relative; display: flex; gap: 10px; padding: 8px 10px 8px 14px; background: var(--npaw-surface-subtle); border: 1px solid var(--npaw-border-subtle); border-radius: var(--npaw-radius-md); cursor: pointer; transition: background var(--npaw-transition-fast), border-color var(--npaw-transition-fast); } .my-tasks-row:hover { background: var(--npaw-surface-hover); border-color: color-mix(in srgb, var(--npaw-accent) 22%, var(--npaw-border-subtle)); } .my-tasks-row-bar { position: absolute; inset: 8px auto 8px 4px; width: 3px; border-radius: 2px; background: var(--npaw-text-muted); } .my-tasks-row--pendent .my-tasks-row-bar { background: var(--npaw-status-pendent, #64748b); } .my-tasks-row--en_curs .my-tasks-row-bar { background: var(--npaw-accent); } .my-tasks-row--bloquejada .my-tasks-row-bar { background: var(--npaw-priority-critical, #ef4444); } .my-tasks-row--acabada .my-tasks-row-bar { background: var(--npaw-priority-minor, #16a34a); } .my-tasks-row--acabada { opacity: 0.78; } .my-tasks-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .my-tasks-row-head { display: flex; align-items: center; gap: 8px; } .my-tasks-row-title { font-size: 13.5px; font-weight: 600; color: var(--npaw-text-primary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .my-tasks-row-meta { display: flex; flex-wrap: wrap; gap: 4px; } @media (max-width: 700px) { .my-tasks-calendar-grid { grid-template-rows: repeat(6, minmax(72px, auto)); } .my-tasks-calendar-weekday { font-size: 10px; } .my-tasks-calendar-aside { flex-direction: column; align-items: flex-end; gap: 6px; } .my-tasks-shell { min-height: auto; } .my-tasks-calendar-panel { min-height: 60vh; } } /* ── Utils ──────────────────────────────────────────────────────────────── */ .muted { color: var(--npaw-text-muted); font-size: 13px; } .empty { text-align: center; padding: 12px; color: var(--npaw-text-muted); } .toast { position: fixed; bottom: 24px; right: 24px; background: var(--npaw-surface-modal-bg); border: 1px solid var(--npaw-surface-modal-border); color: var(--npaw-text-primary); border-radius: var(--npaw-radius-lg); padding: 12px; box-shadow: var(--npaw-elevation-md); z-index: var(--npaw-z-toast); font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; } .toast.show { opacity: 1; transform: translateY(0); } .toast.ok { border-color: color-mix(in srgb, var(--npaw-priority-minor) 55%, transparent); } .toast.err { border-color: color-mix(in srgb, var(--npaw-priority-critical) 60%, transparent); } @media (max-width: 1100px) { .hero-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .task-filter-search { grid-column: 1 / -1; } .admin-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .board { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; padding: 12px; } .user-area { width: 100%; justify-content: flex-end; flex-wrap: wrap; } .section-toolbar { align-items: stretch; flex-direction: column; } .section-toolbar-actions { justify-content: space-between; } .task-filters { grid-template-columns: 1fr; } .fields-row, .fields-row-3 { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; gap: 12px; padding: 12px; } .hero-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-overview-shell { min-height: auto; } .ov-summary-strip { grid-template-columns: 1fr; } .ov-activity { min-height: 320px; } .activity-grid { grid-template-columns: 1fr; } .npaw-table__toolbar { flex-wrap: wrap; } .npaw-table__search, .npaw-table__search:focus-within { width: 100%; } .npaw-table__select, .npaw-table__select--wide { flex: 1 1 180px; max-width: none; } .assignment-row { grid-template-columns: 1fr; } .assignment-row__remove { width: 100%; } .assignment-board { grid-template-columns: 1fr; } .assignment-section__head { flex-wrap: wrap; } .assignment-section__head .assignment-add { width: 100%; } .dependency-row { grid-template-columns: 1fr; } .dependency-remove { width: 100%; } }