/* ═══════════════════════════════════════════════════════════════════ BOAT MAINTENANCE — Maritime Premium Design System v2.0 Adapted to the actual class names used by the Razor markup. Paleta: Deep Ocean #0A2540 · Cyan Marina #00B4D8 · Ice Blue #CAE9FF Coral Alerta #FF6B35 · Verde Mar #06A77D · Ámbar #F4A261 Tipografía: Crimson Pro (headings) + DM Sans (body) + Material Icons ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); /* ── Design Tokens ──────────────────────────────────────────────── */ :root { /* Brand */ --ocean: #0A2540; --ocean-800: #0D2E4E; --ocean-700: #103659; --ocean-600: #134070; --cyan: #00B4D8; --cyan-dark: #0096B7; --cyan-light: #CAE9FF; --cyan-xlight: #E8F6FB; /* Semantic */ --danger: #FF6B35; --danger-light: #FFF0EB; --danger-border:#FAD3C4; --danger-dark: #D94F1A; --success: #06A77D; --success-light:#E6F7F2; --warning: #F4A261; --warning-light:#FEF6EC; --warning-dark: #C97C3A; --info: #00B4D8; --info-light: #E8F6FB; /* Neutrals */ --white: #FFFFFF; --off-white: #F8FAFC; --surface: #FFFFFF; --surface-alt: #F0F5FA; --border: #D1E3F0; --border-light: #E8F0F7; --text: #0A2540; --text-muted: #4A6580; --text-light: #8AA4BC; --ink: #0A2540; --accent-strong:#0A2540; /* solid controls: primary btn, active pill, selected day */ --on-solid: #FFFFFF; /* text/icons sitting on colored solids (night dims this) */ --sb-text: #E6EEF5; /* sidebar body text */ /* Gradient light-ends (surface role, follow --ocean's theme) */ --g-hero: #143A5E; --g-lift: #163E63; --g-card1: #1B3D5C; --g-card2: #2A5577; --g-slate1: #2B3A47; --g-slate2: #44586A; /* strong text/headings — light-flips in dark mode while --ocean keeps its SURFACE role (sidebar, hero, gradients) */ /* Chip/badge tint pairs (bg + ink) — themable as a unit */ --tint-amber-ink: #B96A2C; --tint-pink: #FBEAF0; --tint-pink-ink: #B43764; --tint-blue: #E7EFF7; --tint-blue-ink: #134070; --tint-neutral: #F0F2F5; --tint-neutral-ink: #4A6580; --tint-green: #DCFCE7; --tint-green-ink: #166534; --tint-yellow: #FEF3C7; --tint-yellow-ink: #92400E; --tint-orange: #FDF2E3; --tint-orange-ink: #B4772A; --tint-red: #FFF0F0; --tint-red-ink: #C05621; --tint-cream: #FFFBF5; /* Compat aliases — older rules still reference these */ --color-bg: var(--off-white); --color-surface: var(--surface); --color-surface-alt: var(--surface-alt); --color-border: var(--border); --color-text: var(--text); --color-text-muted: var(--text-muted); --color-primary: var(--ocean); --color-danger: var(--danger); --color-warning: var(--warning-dark); --color-success: var(--success); --color-info: var(--cyan-dark); /* Layout */ --sidebar-w: 220px; --sidebar-coll: 64px; --radius: 4px; --radius-lg: 8px; --radius-xl: 12px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(10,37,64,.08), 0 1px 2px rgba(10,37,64,.05); --shadow-md: 0 4px 16px rgba(10,37,64,.10), 0 2px 6px rgba(10,37,64,.06); --shadow-lg: 0 12px 32px rgba(10,37,64,.14), 0 4px 12px rgba(10,37,64,.08); --shadow-cyan: 0 4px 20px color-mix(in srgb, var(--cyan) 25%, transparent); /* Typography */ --font-display: 'Crimson Pro', Georgia, serif; --font-body: 'DM Sans', 'Calibri', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* ── NAUTICORE design-system additions ───────────────────────── */ --ocean-700: #133554; --ocean-600b: #1E456B; --cyan-600: #0098B8; --cyan-50: #EAF6FC; --danger-50: #FFEDE5; --success-50: #E2F5EE; --warning-50: #FCEFE0; --muted: #4A6580; --muted-2: #7E94A8; --border-soft: #E6EEF5; --canvas: #F1F6FB; --shadow-1: 0 1px 2px rgba(10,37,64,.05); --shadow-2: 0 4px 16px -4px rgba(10,37,64,.08); --shadow-3: 0 12px 40px -8px rgba(10,37,64,.14); --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; } /* ── Reset ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text); background: var(--off-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--cyan-dark); text-decoration: none; } a:hover { color: var(--ink); } button { font-family: var(--font-body); cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.2px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-light); } /* ── App Shell ──────────────────────────────────────────────────── */ .app-shell { display: flex; height: 100vh; overflow: hidden; } .main-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: var(--off-white); } .page-body { flex: 1; padding: 28px 32px; max-width: 1440px; width: 100%; } /* ── Sidebar ────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--ocean); color: var(--on-solid); display: flex; flex-direction: column; flex-shrink: 0; transition: width .2s ease; overflow: hidden; position: relative; } .sidebar::before { content:''; position:absolute; top:0; right:0; bottom:0; width:1px; background: linear-gradient(180deg, transparent, var(--cyan) 50%, transparent); opacity:.35; } .sidebar.collapsed { width: var(--sidebar-coll); } .sidebar.open { width: var(--sidebar-w); } .sb-header { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--cyan) 15%, transparent); flex-shrink: 0; } .sb-logo { font-size: 22px; flex-shrink: 0; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 60%, transparent)); } .sb-title { color: var(--on-solid); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; } .sidebar-toggle { margin-left: auto; background: none; border: none; color: #94a3b8 !important; font-size: 12px; opacity: .75; transition: opacity .15s; } .sidebar-toggle:hover { opacity: 1; } .sb-nav { flex: 1; padding: 12px 0; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: #7DA3C0; font-size: 13px; font-weight: 500; cursor: pointer; position: relative; transition: all .15s; white-space: nowrap; text-decoration: none; } .nav-item:hover { color: var(--on-solid); background: color-mix(in srgb, var(--cyan) 8%, transparent); text-decoration: none; } .nav-item.active { color: var(--on-solid); background: color-mix(in srgb, var(--cyan) 12%, transparent); } .nav-item.active::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; background:var(--cyan); border-radius:0 2px 2px 0; } .nav-icon { font-size: 18px !important; flex-shrink: 0; } .nav-label { white-space: nowrap; } .nav-item.collapsed { justify-content: center; padding: 10px; } .nav-item.collapsed .nav-label { display: none; } .alert-nav-badge { background: var(--danger); color: var(--on-solid); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; margin-left: auto; } .alert-nav-dot { position: absolute; top: 8px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); } /* ── Vessel picker (sidebar dropdown) ───────────────────────────── */ .sb-vessel-picker { padding: 12px 14px 8px; border-bottom: 1px solid color-mix(in srgb, var(--cyan) 15%, transparent); } .sb-vessel-picker-label { display: block; color: #6A8FAB; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; } .sb-vessel-picker .rz-dropdown { background: rgba(255,255,255,.06) !important; border: 1px solid color-mix(in srgb, var(--cyan) 25%, transparent) !important; color: var(--on-solid) !important; font-size: 12.5px !important; min-height: 32px !important; } .sb-vessel-picker .rz-dropdown-label, .sb-vessel-picker .rz-inputtext { color: var(--on-solid) !important; } .sb-vessel-picker .rz-dropdown-trigger { color: var(--cyan-light) !important; } .nav-divider { height: 1px; background: color-mix(in srgb, var(--cyan) 15%, transparent); margin: 8px 16px; } .sv-vessel { padding: 14px 16px; border-top: 1px solid color-mix(in srgb, var(--cyan) 15%, transparent); } .sv-name { color: var(--cyan-light); font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 2px; } .sv-meta { color: #6A8FAB; font-size: 11px; } /* ── Alert Banner (top of main-content) ─────────────────────────── */ .alert-banner { padding: 12px 32px 0; display: flex; flex-direction: column; gap: 4px; } .alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; border-left: 3px solid; border-radius: var(--radius); } .alert-item.severity-high { background: var(--danger-light); color: var(--danger-dark); border-left-color: var(--danger); } .alert-item.severity-medium { background: var(--warning-light); color: var(--warning-dark); border-left-color: var(--warning); } .alert-item.severity-low { background: var(--info-light); color: var(--cyan-dark); border-left-color: var(--cyan); } .alert-icon { font-size: 17px; } .alert-content { flex: 1; } .alert-due { opacity: .75; margin-left: 6px; } .alert-dismiss { background: none; border: none; font-size: 16px; opacity: .5; padding: 0 4px; transition: opacity .15s; cursor: pointer; } .alert-dismiss:hover { opacity: 1; } .alert-overflow { padding: 5px 14px; font-size: 12px; color: var(--text-muted); } /* ── Inline alert (in-page banner) ──────────────────────────────── */ .inline-alert { padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid; margin-bottom: 18px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .inline-alert.danger { background: var(--danger-light); color: var(--danger-dark); border-left-color: var(--danger); } .inline-alert.warning { background: var(--warning-light); color: var(--warning-dark); border-left-color: var(--warning); } .inline-alert.info { background: var(--info-light); color: var(--cyan-dark); border-left-color: var(--cyan); } .inline-alert.success { background: var(--success-light); color: var(--success); border-left-color: var(--success); } /* ── Page Header ────────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 20px; flex-wrap: wrap; } .page-header h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; } .page-subtitle { color: var(--text-muted); margin-top: 4px; font-size: 13px; } .back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } .back-link:hover { color: var(--cyan-dark); } /* ── Back button (NAUTICORE) ────────────────────────────────────── */ .nc-back { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 500; padding: 7px 14px 7px 10px; border-radius: 99px; cursor: pointer; margin-bottom: 16px; transition: all .15s; font-family: var(--font-body); } .nc-back:hover { border-color: var(--cyan); color: var(--ink); background: var(--cyan-50); } .nc-back .material-icons { font-size: 17px; } .vessel-metrics, .metrics { display: flex; gap: 28px; } .metric { text-align: right; } .metric-val, .metric-value { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--cyan-dark); line-height: 1; } .metric-lbl, .metric-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; display: block; } /* ── Summary Cards ──────────────────────────────────────────────── */ .summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; } .summary-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border-top: 3px solid var(--cyan); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; } .summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; } .summary-card.red, .summary-card.color-red { border-top-color: var(--danger); } .summary-card.amber, .summary-card.color-amber { border-top-color: var(--warning); } .summary-card.blue, .summary-card.color-blue { border-top-color: var(--cyan); } .summary-card.orange, .summary-card.color-orange { border-top-color: #EA580C; } .summary-card.green, .summary-card.color-green { border-top-color: var(--success); } .summary-icon { font-size: 28px !important; opacity: .8; color: var(--ink); } .summary-body { display: flex; flex-direction: column; gap: 2px; } .summary-val, .summary-value { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); } .summary-lbl, .summary-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; } /* ── Dashboard Sections ─────────────────────────────────────────── */ .dashboard-section { margin-bottom: 28px; } .section-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; letter-spacing: -.1px; color: var(--ink); } .section-title.danger { color: var(--danger); } .section-title.warning { color: var(--warning-dark); } .section-title.info { color: var(--cyan-dark); } .section-title.success { color: var(--success); } .task-list { display: flex; flex-direction: column; gap: 8px; } .show-more { display: inline-block; padding: 8px 0; font-size: 13px; color: var(--cyan-dark); font-weight: 600; } /* ── Task Cards (dashboard) ─────────────────────────────────────── */ .task-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--border); transition: box-shadow .15s, transform .1s; } .task-card:hover { box-shadow: var(--shadow-md); transform: translateX(2px); } .task-card.overdue, .task-card.urgency-overdue { border-left-color: var(--danger); } .task-card.duesoon, .task-card.urgency-duesoon { border-left-color: var(--warning); } .task-card.upcoming, .task-card.urgency-upcoming { border-left-color: var(--success); } .task-card.unknown, .task-card.urgency-unknown { border-left-color: var(--border); } .task-card.mandatory { background: var(--tint-cream); } .task-card-left { flex-shrink: 0; } .category-dot, .cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .task-card-body { flex: 1; min-width: 0; } .task-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; } .task-title { font-weight: 600; font-size: 13.5px; color: var(--text); } .task-title:hover { color: var(--cyan-dark); } .mandatory-badge { background: var(--tint-pink); color: var(--tint-pink-ink); font-size: 10px; padding: 1px 7px; border-radius: 99px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .task-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; } .meta-sep { color: var(--border); } .meta-category, .meta-date { color: var(--text-muted); } .task-reg-ref { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; } .task-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; } .task-cost { font-weight: 700; font-size: 14px; color: var(--text-muted); font-family: var(--font-display); } /* ── TaskList grid table ────────────────────────────────────────── */ .task-table { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .task-table-header { display: grid; grid-template-columns: 2.5fr 1.4fr 1.4fr 1fr 1fr 100px 160px; gap: 12px; padding: 12px 18px; background: var(--off-white); border-bottom: 2px solid var(--border); font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; } .task-table-row { display: grid; grid-template-columns: 2.5fr 1.4fr 1.4fr 1fr 1fr 100px 160px; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background .1s; font-size: 13px; } .task-table-row:last-child { border-bottom: none; } .task-table-row:hover { background: var(--cyan-xlight); } .task-table-row.row-overdue { background: rgba(255,107,53,.04); } .task-table-row.row-overdue:hover { background: rgba(255,107,53,.09); } .col-task { display: flex; align-items: center; gap: 10px; min-width: 0; } .col-task > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .task-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-cat { color: var(--text-muted); font-size: 12px; } .col-date { display: flex; flex-direction: column; gap: 3px; font-size: 12px; } .task-meta-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); } /* ── TaskList: category group headers (grouped view) ────────────── */ .task-group-header { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--off-white); border-bottom: 1px solid var(--border-light); cursor: pointer; font-size: 13px; transition: background .1s; } .task-group-header:hover { background: var(--cyan-xlight); } .task-group-header .tg-chevron { font-size: 20px; color: var(--muted); flex: none; } .task-group-header .cat-dot { flex: none; } .tg-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); } .tg-count { font-size: 12px; color: var(--muted); } .tg-overdue { font-size: 11px; font-weight: 700; color: var(--danger-dark); background: var(--danger-light); padding: 2px 9px; border-radius: 99px; } .tg-bar { margin-left: auto; width: 120px; flex: none; } .tg-pct { font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 40px; text-align: right; } /* ── TaskList: inline row quick actions ─────────────────────────── */ .col-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .icon-btn:hover { color: var(--cyan-dark); border-color: var(--cyan); } .icon-btn .material-icons { font-size: 16px; } .icon-btn.flagged { color: var(--danger); border-color: var(--danger); background: var(--danger-light); } /* Show-completed toggle (filter bar) */ .show-completed-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; } .show-completed-toggle input { width: 15px; height: 15px; accent-color: var(--cyan); cursor: pointer; } /* ── Badges ─────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; background: var(--off-white); color: var(--muted); } .badge.overdue, .badge.urgency-overdue { background: var(--danger-50); color: var(--danger); } .badge.duesoon, .badge.urgency-duesoon { background: var(--warning-50); color: var(--tint-amber-ink); } .badge.upcoming, .badge.urgency-upcoming { background: var(--success-50); color: var(--success); } .badge.unknown, .badge.urgency-unknown { background: var(--off-white); color: var(--muted); } .badge.status-notstarted { background: var(--danger-50); color: var(--danger); } .badge.status-inprogress { background: var(--warning-50); color: var(--tint-amber-ink); } .badge.status-waiting { background: var(--tint-red); color: var(--tint-red-ink); } .badge.status-completed { background: var(--success-50); color: var(--success); } .badge.status-cancelled { background: var(--off-white); color: var(--muted); } .badge.priority-high { background: var(--danger-50); color: var(--danger); } .badge.priority-medium { background: var(--warning-50); color: var(--tint-amber-ink); } .badge.priority-low { background: var(--success-50); color: var(--success); } .badge.outcome-completed { background: var(--success-50); color: var(--success); } .badge.outcome-partiallydone { background: var(--warning-50); color: var(--tint-amber-ink); } .badge.outcome-deferred { background: var(--cyan-50); color: var(--cyan-600); } .badge.outcome-failed { background: var(--danger-50); color: var(--danger); } /* Stock movement type badges (part audit ledger) */ .mv-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; } .mv-badge.mv-used { background: var(--warning-50); color: var(--tint-amber-ink); } .mv-badge.mv-purchased { background: var(--success-50); color: var(--success); } .mv-badge.mv-adjusted { background: var(--cyan-50); color: var(--cyan-600); } .mv-badge.mv-discarded { background: var(--danger-50); color: var(--danger); } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: all .15s; letter-spacing: .1px; text-decoration: none; cursor: pointer; font-family: var(--font-body); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-lg { padding: 12px 24px; font-size: 14px; } .btn-primary { background: var(--accent-strong); color: var(--on-solid); border-color: var(--accent-strong); } .btn-primary:hover { background: var(--ocean-700); border-color: var(--ocean-700); box-shadow: var(--shadow-md); color: var(--on-solid); text-decoration: none; } .btn-cyan { background: var(--cyan); color: var(--ink); border-color: var(--cyan); } .btn-cyan:hover { background: var(--cyan-dark); color: var(--on-solid); box-shadow: var(--shadow-cyan); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-alt); border-color: var(--text-light); } .btn-danger { background: var(--danger); color: var(--on-solid); border-color: var(--danger); } .btn-danger:hover{ background: var(--danger-dark); border-color: var(--danger-dark); color: var(--on-solid); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover { background: var(--cyan-xlight); color: var(--ink); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--surface-alt); color: var(--text); } /* ── Inputs ─────────────────────────────────────────────────────── */ .form-control, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="search"], textarea, select { font-family: var(--font-body); font-size: 13px; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; width: 100%; transition: border-color .15s, box-shadow .15s; outline: none; } .form-control:focus, input:focus, textarea:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 15%, transparent); } .form-control:hover, input:hover, textarea:hover, select:hover { border-color: var(--text-light); } textarea { resize: vertical; min-height: 80px; font-family: var(--font-body); } /* A larger single-line field, for the few places where the value is a real phrase rather than a short code — e.g. naming the recipient of a maintenance-passport link. Same box, more room. */ .input-lg { font-size: 15px; padding: 12px 14px; } /* (Routes.razor) sets tabindex="-1" + focuses the first

after every navigation (accessibility — announces the page heading to screen readers). That focus is programmatic, so suppress the browser's focus ring on it: otherwise the dashboard's vessel name (and every page's title) renders with a blue box as if it had been clicked. */ h1[tabindex="-1"]:focus { outline: none; } /* ── Cards / Panels ─────────────────────────────────────────────── */ .card, .detail-card, .settings-card, .report-card, .form-card, .action-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-1); } .card-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--border); } /* ── Modal ──────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10,37,64,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-dialog { background: var(--surface); border-radius: var(--radius-xl); padding: 28px; min-width: 380px; max-width: 560px; width: 90vw; box-shadow: var(--shadow-lg); } .modal-header { margin-bottom: 16px; } .modal-header h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); } .modal-body p { color: var(--text-muted); margin-bottom: 22px; font-size: 14px; line-height: 1.6; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ── Data tables ────────────────────────────────────────────────── */ .table-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); } /* Chrome-less horizontal-scroll wrapper for tables that aren't in a .table-card (keeps desktop/print visuals unchanged; only scrolls when it must). */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .data-table thead tr { background: var(--off-white); } .data-table th { padding: 12px 18px; text-align: left; font-size: 11.5px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; cursor: default; border-bottom: 1px solid var(--border-soft); } .data-table th.sortable { cursor: pointer; user-select: none; } .data-table th.sortable:hover { color: var(--ink); } .data-table th.sort-asc::after { content:" ↑"; color: var(--cyan-600); } .data-table th.sort-desc::after { content:" ↓"; color: var(--cyan-600); } .data-row { border-bottom: 1px solid var(--border-soft); transition: background .1s; cursor: pointer; } .data-row:last-child td { border-bottom: 0; } .data-row:hover { background: var(--off-white); } .data-row td { padding: 13px 18px; font-size: 13.5px; vertical-align: middle; border-bottom: 1px solid var(--border-soft); } .td-date { color: var(--text-muted); white-space: nowrap; font-size: 12px; } .td-main { font-weight: 600; } .td-main a { color: var(--text); } .td-main a:hover { color: var(--cyan-dark); } .td-muted { color: var(--text-muted); font-size: 12px; } .td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .td-center { text-align: center; } .td-right { text-align: right; } .td-mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } /* ── Category chips / stock ─────────────────────────────────────── */ .cat-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); padding-left: 4px; } .cat-chip::before{ content:''; display:inline-block; width:3px; height:14px; border-radius:2px; background: currentColor; flex-shrink:0; } .stock-qty { font-weight: 700; font-size: 15px; } .stock-low { color: var(--danger); } /* ── Filter bar (pills + tabs) ──────────────────────────────────── */ .filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .filter-pills, .filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .filter-pill, .filter-tab { padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: all .15s; display: inline-flex; align-items: center; gap: 6px; } .filter-pill:hover, .filter-tab:hover { border-color: var(--cyan); color: var(--ink); } .filter-pill.active, .filter-tab.active { background: var(--accent-strong); color: var(--on-solid); border-color: var(--accent-strong); } .pill-count, .filter-count { display: inline-block; background: rgba(255,255,255,.18); border-radius: 99px; padding: 0 6px; margin-left: 2px; font-size: 11px; min-width: 18px; text-align: center; } .filter-pill:not(.active) .pill-count, .filter-tab:not(.active) .filter-count { background: var(--off-white); color: var(--muted); } .filter-controls { display: flex; gap: 8px; align-items: center; } /* Filter-bar controls. ⚠ The global Inputs rule above sets `width: 100%` on every input/select, so a bare styled to match the design system (GPX import, etc.). The browser's default "Choose file" button is replaced via ::file-selector-button. */ .nc-file-input { font-size: 13px; color: var(--text-muted); max-width: 100%; } .nc-file-input::file-selector-button { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; margin-right: 12px; transition: background .15s, border-color .15s, color .15s; } .nc-file-input::file-selector-button:hover { background: var(--cyan-xlight); border-color: var(--cyan); color: var(--cyan-dark); } /* ── Alerts page ────────────────────────────────────────────────── */ .alert-card { display: flex; align-items: flex-start; gap: 16px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px 18px; border-left: 4px solid var(--border); transition: opacity .2s; box-shadow: var(--shadow-sm); } .alert-card.is-read { opacity: .6; } .alert-card.severity-high { border-left-color: var(--danger); } .alert-card.severity-medium { border-left-color: var(--warning); } .alert-card.severity-low { border-left-color: var(--success); } .alert-card-icon { flex-shrink: 0; margin-top: 2px; } .alert-card-icon .material-icons { font-size: 22px !important; } .alert-card.severity-high .alert-card-icon { color: var(--danger); } .alert-card.severity-medium .alert-card-icon { color: var(--warning-dark); } .alert-card.severity-low .alert-card-icon { color: var(--success); } .alert-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .alert-card-actions { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; align-items: flex-end; } .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; display: inline-block; } /* ── Reports ────────────────────────────────────────────────────── */ .report-card { padding: 20px; } .report-card-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 16px; } .share-bar { display: flex; align-items: center; gap: 8px; } .share-fill { height: 6px; border-radius: 3px; min-width: 2px; flex-shrink: 0; } .share-pct { font-size: 11px; color: var(--text-muted); min-width: 36px; } .report-card-hint { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 6px; } /* Drill-through rows (Cost report breakdown → filtered history) */ .drill-row { transition: background .12s; } .drill-row:hover { background: var(--cyan-xlight); } .drill-chevron { font-size: 18px; color: var(--muted-2); vertical-align: middle; } .drill-row:hover .drill-chevron { color: var(--cyan-dark); } /* Engines management (Settings → Vessel, Phase B) */ .engine-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .engine-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .engine-row.inactive { opacity: .55; } .engine-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .engine-name { font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; background: transparent; color: var(--ink); width: 100%; max-width: 240px; } .engine-name:hover, .engine-name:focus { border-color: var(--border); background: var(--white); outline: none; } .engine-meta { display: flex; align-items: center; gap: 8px; } .engine-pos { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--muted-2); } .engine-hours { display: flex; align-items: center; gap: 4px; } .engine-hours .unit { font-size: 12px; color: var(--muted-2); } .engine-actions{ display: flex; gap: 6px; } .engine-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--border); } /* Expense / PO line items (ADR-0011 Phase 2/4) — main row + a full-width "link part" sub-row. */ .exp-line-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); } .exp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .exp-line-x { color: var(--muted-2); font-size: 12px; } .exp-line-total { min-width: 84px; text-align: right; font-weight: 600; color: var(--ink); } .exp-line-part { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .exp-line-part-label { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } /* Widen the part-picker popup so long "name · number" labels read on one/two lines. */ .exp-line-part .rz-dropdown { width: 100%; } .rz-dropdown-panel { min-width: 260px; } /* Report chart pair stacks on small screens */ @media (max-width: 768px) { .report-charts { grid-template-columns: 1fr !important; } } /* ── Compliance ─────────────────────────────────────────────────── */ .compliance-section { margin-bottom: 28px; } .compliance-table { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .compliance-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 14px 18px; border-left: 3px solid var(--border); box-shadow: var(--shadow-sm); } .compliance-row.urgency-overdue { border-left-color: var(--danger); } .compliance-row.urgency-duesoon { border-left-color: var(--warning); } .compliance-row.urgency-upcoming { border-left-color: var(--success); } .compliance-left { flex-shrink: 0; } .compliance-body { flex: 1; min-width: 0; } .compliance-right { display: flex; align-items: center; flex-shrink: 0; gap: 8px; } /* ── Expandable rows ────────────────────────────────────────────── */ .expand-icon { font-size: 18px !important; color: var(--text-muted); vertical-align: middle; } .expanded-row { background: var(--cyan-xlight); } .expanded-content { padding: 14px 18px 18px; } .expanded-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 10px; font-size: 12px; } .exp-label { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; font-weight: 700; } .exp-notes { font-style: italic; color: var(--text-muted); font-size: 12px; line-height: 1.6; margin-top: 8px; } /* ── Logbook ────────────────────────────────────────────────────── */ .log-year-summary { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .wind-chip { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; } .wind-calm { background: var(--success-light); color: var(--success); } .wind-moderate { background: var(--warning-light); color: var(--warning-dark); } .wind-fresh { background: var(--danger-light); color: var(--danger-dark); } .wind-strong { background: var(--danger-light); color: var(--danger-dark); } /* ── Radio group ────────────────────────────────────────────────── */ .radio-group { display: flex; gap: 8px; flex-wrap: wrap; } .radio-option { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius); border: 1.5px solid var(--border); cursor: pointer; font-size: 13px; transition: all .15s; font-weight: 500; } .radio-option:hover { border-color: var(--cyan); color: var(--ink); } .radio-option.selected { border-color: var(--ink); background: var(--cyan-xlight); color: var(--ink); } .radio-icon { font-size: 16px; } /* ── Not found ──────────────────────────────────────────────────── */ .not-found { text-align: center; padding: 80px 24px; color: var(--text-muted); } .not-found h2 { font-family: var(--font-display); font-size: 26px; margin-bottom: 14px; color: var(--ink); } /* ── Utilities ──────────────────────────────────────────────────── */ .text-danger { color: var(--danger) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning-dark) !important; } .text-muted { color: var(--text-muted) !important; } .text-ocean { color: var(--ink) !important; } .text-cyan { color: var(--cyan-dark) !important; } .font-medium { font-weight: 600; } .font-bold { font-weight: 700; } .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } /* ── Toasts (Blazored) — full NAUTICORE styling ─────────────────── */ .blazored-toast-container { position: fixed; z-index: 1100; display: flex; flex-direction: column; gap: 10px; padding: 20px; max-width: 380px; list-style: none; margin: 0; } .blazored-toast-container.position-bottomright { bottom: 0; right: 0; } .blazored-toast-container.position-bottomleft { bottom: 0; left: 0; } .blazored-toast-container.position-topright { top: 0; right: 0; } .blazored-toast-container.position-topleft { top: 0; left: 0; } .blazored-toast { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border-soft); border-left: 4px solid var(--cyan); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 14px 16px; font-family: var(--font-body); font-size: 13.5px; position: relative; overflow: hidden; cursor: pointer; animation: nc-toast-in .22s ease; } @keyframes nc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .blazored-toast-success { border-left-color: var(--success); } .blazored-toast-error { border-left-color: var(--danger); } .blazored-toast-warning { border-left-color: var(--warning); } .blazored-toast-info { border-left-color: var(--cyan); } .blazored-toast-icon { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 99px; margin-top: 1px; } .blazored-toast-success .blazored-toast-icon { background: var(--success-50); color: var(--success); } .blazored-toast-error .blazored-toast-icon { background: var(--danger-50); color: var(--danger); } .blazored-toast-warning .blazored-toast-icon { background: var(--warning-50); color: var(--tint-amber-ink); } .blazored-toast-info .blazored-toast-icon { background: var(--cyan-50); color: var(--cyan-600); } .blazored-toast-icon svg { width: 14px; height: 14px; } .blazored-toast-message { flex: 1; min-width: 0; line-height: 1.45; color: var(--text); } .blazored-toast-message h5 { margin: 0 0 2px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); } .blazored-toast-close { background: none; border: 0; cursor: pointer; color: var(--muted-2); padding: 0 2px; font-size: 16px; line-height: 1; flex-shrink: 0; } .blazored-toast-close:hover { color: var(--ink); } .blazored-toast-close svg { width: 13px; height: 13px; } /* progress bar (if enabled) */ .blazored-toast .blazored-toast-progressbar, .blazored-toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--cyan); opacity: .5; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 1200px) { .task-table-header, .task-table-row { grid-template-columns: 2.4fr 1.2fr 1.3fr 1fr 1fr 90px 70px; } } @media (max-width: 1024px) { .summary-cards { grid-template-columns: repeat(2, 1fr); } .detail-layout { grid-template-columns: 1fr; } .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; } .detail-sidebar { position: static; } .expanded-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .sidebar { width: var(--sidebar-coll); } .sb-title, .nav-label, .sv-vessel { display: none; } .summary-cards { grid-template-columns: 1fr 1fr; } .form-row, .form-row-3 { grid-template-columns: 1fr; } .page-body { padding: 20px 16px; } .alert-banner { padding: 12px 16px 0; } .task-table-header { display: none; } .task-table-row { grid-template-columns: 1fr; gap: 6px; padding: 14px; } .vessel-metrics, .metrics { gap: 16px; } } /* ═══════════════════════════════════════════════════════════════════ NAUTICORE Web — shell, dashboard & component library (design v2) ═══════════════════════════════════════════════════════════════════ */ /* ── App grid shell ─────────────────────────────────────────────── */ .nc-app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--canvas); } .nc-app.compact { grid-template-columns: 72px 1fr; } .nc-main { display: flex; flex-direction: column; min-width: 0; background: var(--canvas); } /* ── Sidebar (NAUTICORE) ────────────────────────────────────────── */ .nc-sidebar { background: var(--ocean); color: var(--sb-text); padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.04); } .nc-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.06); } .brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-600) 100%); display: grid; place-items: center; color: var(--on-solid); font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .5px; box-shadow: inset 0 -2px 4px rgba(0,0,0,.15); flex-shrink: 0; } .brand-name { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand-name b { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .3px; color: var(--on-solid); white-space: nowrap; } .brand-name span { font-size: 11px; color: var(--cyan-light); letter-spacing: .16em; text-transform: uppercase; opacity: .7; } .brand-mark .nc-mark { display: block; } .nc-topbar-logo { display: inline-flex; align-items: center; color: var(--cyan-dark); margin-right: -6px; flex-shrink: 0; } .nc-section { display: flex; flex-direction: column; gap: 2px; } .nc-section-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .18em; color: rgba(202,233,255,.45); padding: 0 12px 8px; font-weight: 500; } .nc-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); font-size: 14px; color: rgba(230,238,245,.78); cursor: pointer; transition: background .15s, color .15s; position: relative; white-space: nowrap; text-decoration: none; } .nc-nav-item:hover { background: rgba(255,255,255,.04); color: var(--on-solid); text-decoration: none; } .nc-nav-item.active { background: color-mix(in srgb, var(--cyan) 13%, transparent); color: var(--on-solid); } .nc-nav-item.active::before { content:''; position:absolute; left:-16px; top:8px; bottom:8px; width:3px; background: var(--cyan); border-radius: 0 3px 3px 0; } .nc-nav-item .material-icons { font-size: 19px; flex-shrink: 0; } .nc-nav-item .nc-nav-badge { margin-left: auto; background: var(--danger); color: var(--on-solid); font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; min-width: 18px; text-align: center; } .nc-sidebar-vessel { margin-top: auto; padding: 14px; border-radius: var(--r-lg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); } .nc-vessel-head { display: flex; align-items: center; gap: 10px; } .nc-vessel-avatar{ width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--g-card1), var(--g-card2)); display: grid; place-items: center; color: var(--cyan-light); flex-shrink: 0; } .nc-vessel-meta b{ display: block; color: var(--on-solid); font-size: 13.5px; font-family: var(--font-display); font-weight: 600; letter-spacing: .2px; } .nc-vessel-meta span { font-size: 11px; color: rgba(202,233,255,.6); } .nc-vessel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); } .nc-vessel-stat .v { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--on-solid); letter-spacing: .3px; } .nc-vessel-stat .l { display: block; font-size: 10px; color: rgba(202,233,255,.55); text-transform: uppercase; letter-spacing: .14em; margin-top: 1px; } .nc-vessel-picker { margin-top: 0; position: relative; } .nc-vessel-select { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; cursor: pointer; text-align: left; background: rgba(255,255,255,.06); border: 1px solid color-mix(in srgb, var(--cyan) 28.0%, transparent); border-radius: var(--radius-lg); color: var(--on-solid); font-size: 13px; transition: background .15s, border-color .15s; } .nc-vessel-select:hover { background: rgba(255,255,255,.10); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); } .nc-vessel-ico { font-size: 18px; color: var(--cyan-light); flex: none; } .nc-vessel-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .nc-vessel-caret { font-size: 18px; color: var(--cyan-light); flex: none; } .nc-vessel-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 5px; } .nc-vessel-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; cursor: pointer; text-align: left; border: none; background: none; border-radius: var(--radius); font-size: 13px; color: var(--text); } .nc-vessel-opt:hover { background: var(--off-white); } .nc-vessel-opt.active { background: var(--cyan-xlight); color: var(--cyan-dark); font-weight: 600; } .nc-vessel-opt .material-icons { font-size: 17px; color: var(--text-muted); flex: none; } .nc-vessel-opt.active .material-icons { color: var(--cyan-dark); } .nc-vessel-opt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nc-vessel-opt-check { margin-left: auto; } /* ── Topbar ─────────────────────────────────────────────────────── */ .nc-topbar { background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: 14px 32px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 10; } .nc-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .nc-crumbs .sep { color: var(--border); } .nc-crumbs .cur { color: var(--text); font-weight: 500; } .nc-topbar-search{ margin-left: auto; position: relative; width: 320px; max-width: 38vw; } .nc-topbar-search input { width: 100%; height: 38px; padding: 0 14px 0 38px; border-radius: 99px; border: 1px solid var(--border); background: var(--off-white); font-size: 13px; transition: border .15s, background .15s, box-shadow .15s; } .nc-topbar-search input:focus { outline: none; border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 3px var(--cyan-50); } .nc-topbar-search .material-icons { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: 18px; } .nc-icon-btn { width: 38px; height: 38px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); position: relative; transition: background .15s, border-color .15s; } .nc-icon-btn:hover { background: var(--cyan-50); border-color: var(--cyan-light); } .nc-icon-btn .dot{ position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; background: var(--danger); border-radius: 99px; border: 2px solid var(--surface); } .nc-avatar { width: 38px; height: 38px; border-radius: 99px; background: linear-gradient(135deg, var(--ocean), var(--ocean-600)); color: var(--on-solid); display: grid; place-items: center; font-weight: 500; font-size: 13px; letter-spacing: .5px; } /* ── Page chrome (NAUTICORE) ────────────────────────────────────── */ .nc-page { padding: 28px 32px 64px; max-width: 1500px; margin: 0 auto; width: 100%; } .nc-page-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 4px; color: var(--ink); } .nc-page-sub { margin: 0; font-size: 14px; color: var(--muted); } /* ── Hero card ──────────────────────────────────────────────────── */ .hero { position: relative; color: var(--on-solid); border-radius: var(--r-xl); padding: 28px 32px; overflow: hidden; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 60%), linear-gradient(135deg, var(--ocean) 0%, var(--g-hero) 100%); } .hero::after { content:''; position:absolute; right:-100px; top:-120px; width:360px; height:360px; border-radius:50%; pointer-events:none; background: radial-gradient(circle, rgba(202,233,255,.10) 0%, transparent 70%); } .hero-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan-light); opacity: .7; margin-bottom: 8px; } .hero-name { font-family: var(--font-display); font-size: 38px; font-weight: 500; letter-spacing: -.01em; margin: 0; color: var(--on-solid); } .hero-tag { font-size: 14px; color: rgba(202,233,255,.78); margin-top: 2px; } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); } .hero-stat .v { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: .3px; display: block; } .hero-stat .l { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(202,233,255,.6); margin-top: 2px; } /* ── Stat tiles ─────────────────────────────────────────────────── */ .stat-tile { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border-soft); padding: 20px 22px; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; } .stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; } .stat-tile.accent{ background: linear-gradient(135deg, var(--ocean) 0%, var(--g-lift) 100%); color: var(--on-solid); border-color: transparent; } .stat-tile.accent .stat-label, .stat-tile.accent .stat-sub { color: rgba(202,233,255,.75); } .stat-tile.accent .stat-value { color: var(--on-solid); } .stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; color: var(--muted); } .stat-value { font-family: var(--font-display); font-size: 36px; font-weight: 500; margin: 8px 0 2px; color: var(--ink); letter-spacing: -.01em; line-height: 1; } .stat-value .unit{ font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 4px; font-family: var(--font-body); } .stat-sub { font-size: 12.5px; color: var(--muted); } /* ── Cards (NAUTICORE) ──────────────────────────────────────────── */ .nc-card { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-1); } .nc-card-pad { padding: 20px 22px; } .nc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); } .nc-card-head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: .2px; line-height: 1.2; } .nc-card-head .card-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } /* ── Pills ──────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; background: var(--off-white); color: var(--muted); white-space: nowrap; } .pill .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } .pill.overdue { background: var(--danger-50); color: var(--danger); } .pill.duesoon { background: var(--warning-50); color: var(--tint-amber-ink); } .pill.ok { background: var(--success-50); color: var(--success); } .pill.cyan { background: var(--cyan-50); color: var(--cyan-600); } .pill.mandatory { background: var(--tint-pink); color: var(--tint-pink-ink); } /* ── Compliance ring ────────────────────────────────────────────── */ .ring { --pct: .85; --c: var(--cyan); width: 120px; height: 120px; border-radius: 50%; flex: 0 0 120px; aspect-ratio: 1 / 1; background: conic-gradient(var(--c) calc(var(--pct) * 360deg), var(--border-soft) 0); display: grid; place-items: center; position: relative; } .ring::after { content:''; position:absolute; inset:8px; background: var(--surface); border-radius:50%; } .ring .ring-label{ position: relative; z-index: 1; text-align: center; } .ring .ring-pct { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink); line-height: 1; } .ring .ring-cap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; } /* ── Timeline ───────────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 28px; } .timeline::before{ content:''; position:absolute; left:8px; top:4px; bottom:4px; width:1px; background: var(--border); } .timeline-item { position: relative; padding: 0 0 18px; } .timeline-item::before { content:''; position:absolute; left:-25px; top:4px; width:11px; height:11px; border-radius:99px; background: var(--surface); border: 2px solid var(--cyan); } .timeline-item.done::before { border-color: var(--success); background: var(--success); } .timeline-item.alert::before { border-color: var(--danger); background: var(--danger); } .timeline-item .ti-head { font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 2px; } .timeline-item .ti-meta { font-size: 12px; color: var(--muted); } /* ── Calendar ───────────────────────────────────────────────────── */ .cal { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border-soft); padding: 20px; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-month { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); } .cal-nav { display: flex; gap: 4px; } .cal-nav button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--muted); } .cal-nav button:hover { background: var(--off-white); color: var(--ink); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-dow { font-size: 10.5px; font-weight: 500; color: var(--muted-2); text-transform: uppercase; letter-spacing: .12em; text-align: center; padding: 6px 0; } .cal-day { min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text); position: relative; gap: 3px; border: 1px solid transparent; padding: 4px 0; } .cal-day:hover { background: var(--off-white); } .cal-day.dim { color: var(--border); cursor: default; } .cal-day.today { background: var(--cyan-50); color: var(--ink); font-weight: 600; } .cal-day.selected{ background: var(--accent-strong); color: var(--on-solid); font-weight: 500; } .cal-day .marks { display: flex; gap: 2px; height: 5px; } .cal-day .mark { width: 4px; height: 4px; border-radius: 99px; background: var(--cyan); } .cal-day .mark.danger { background: var(--danger); } .cal-day .mark.warning { background: var(--warning); } .cal-day .mark.voyage { background: var(--success); } .cal-day.selected .mark { background: var(--cyan-light); } .cal-day-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .cal-day-detail-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 12px 0; } .cal-event { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border-soft); } .cal-event:last-child { border-bottom: 0; } .ev-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; background: var(--cyan); } .ev-dot.danger { background: var(--danger); } .ev-dot.warning { background: var(--warning); } .ev-dot.voyage { background: var(--success); } .ev-dot.cyan { background: var(--cyan); } .cal-event .ev-title { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event a.ev-title:hover { color: var(--cyan-600); } /* ── Sidebar compact mode (manual collapse) ─────────────────────── */ .nc-app.compact { grid-template-columns: 72px 1fr; } .nc-app.compact .brand-name, .nc-app.compact .nc-section-label, .nc-app.compact .nc-nav-item span:not(.material-icons):not(.nc-nav-badge), .nc-app.compact .nc-sidebar-vessel, .nc-app.compact .nc-vessel-picker { display: none; } .nc-app.compact .nc-nav-item { justify-content: center; padding: 9px; } .nc-app.compact .nc-brand { justify-content: center; } /* ── Notification bell dropdown ─────────────────────────────────── */ .nc-bell-wrap { position: relative; } .nc-bell-backdrop{ position: fixed; inset: 0; z-index: 40; } .nc-bell-menu { position: absolute; top: 46px; right: 0; width: 320px; z-index: 50; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; } .nc-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 15px; } .nc-bell-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; } .nc-bell-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); transition: background .12s; } .nc-bell-item:hover { background: var(--off-white); text-decoration: none; } .nc-bell-item .ev-dot { margin-top: 5px; } .nc-bell-title { font-size: 13px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nc-bell-meta { font-size: 11.5px; color: var(--muted); } .nc-bell-foot { display: block; padding: 11px 16px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--cyan-600); } .nc-bell-foot:hover { background: var(--off-white); } /* ── GPX passage track map (Leaflet) ────────────────────────────── */ .track-map { width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; border-top: 1px solid var(--border-soft); background: var(--off-white); z-index: 0; } /* Keep Leaflet panes/controls below the app's sidebar, topbar menus and dialogs. */ .track-map .leaflet-pane, .track-map .leaflet-top, .track-map .leaflet-bottom { z-index: 1; } /* ── AIS panel ──────────────────────────────────────────────────── */ /* The AIS card is a flex column so the map fills the widget cell (whatever the grid height) instead of a fixed 286px that clipped VesselFinder's own chrome. min-height covers the stacked (mobile) case where there is no fixed cell height. */ .ais-card { display: flex; flex-direction: column; } .ais-frame { position: relative; width: 100%; flex: 1 1 auto; min-height: 300px; background: var(--off-white); border-top: 1px solid var(--border-soft); overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); } .ais-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Dashboard grids ────────────────────────────────────────────── */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; } .dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; } .dash-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; align-items: start; } @media (max-width: 1100px) { .dash-trio { grid-template-columns: 1fr; } } /* ── Customizable dashboard (Gridstack) ─────────────────────────── */ .dash-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 20px 0 4px; flex-wrap: wrap; } /* View mode: a small control that doesn't reserve a full row — pulled up so the grid sits right under the stat-tiles. */ .dash-toolbar:not(.editing) { margin: -6px 0 2px; min-height: 0; } .dash-toolbar.editing { justify-content: space-between; padding: 10px 14px; background: var(--cyan-xlight); border: 1px solid var(--cyan-light); border-radius: var(--radius-lg); } .dash-customize-btn { height: 30px; padding: 0 12px; font-size: 12.5px; gap: 6px; } .dash-customize-btn .material-icons { font-size: 16px; } .dash-edit-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); } .dash-edit-hint .material-icons { font-size: 16px; color: var(--cyan-dark); } .dash-toolbar-actions { display: flex; align-items: center; gap: 8px; } .dash-tray { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; justify-content: center; } .dash-tray-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .dash-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px dashed var(--cyan-dark); border-radius: 99px; background: var(--surface); color: var(--cyan-dark); font-size: 12.5px; font-weight: 500; } .dash-chip:hover { background: var(--cyan-dark); color: var(--on-solid); } .dash-chip .material-icons { font-size: 15px; } /* Hide the grid until Gridstack has positioned the items (set by JS init) so the unpositioned, corner-stacked state never flashes on load. */ .grid-stack { opacity: 0; transition: opacity .18s ease; } .grid-stack.grid-stack--ready { opacity: 1; } /* Each Gridstack cell hosts one NAUTICORE card and fills the cell. */ .grid-stack { margin: 0 -6px; } .grid-stack-item-content.nc-widget { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); position: relative; } .nc-widget > * { flex: 1 1 auto; min-height: 0; height: 100%; margin: 0 !important; overflow: auto; } .nc-widget > .ais-card, .nc-widget > .cal { overflow: hidden; } /* Drag/hide affordances — only visible while editing. */ .nc-widget-hide, .nc-widget-grip { display: none; position: absolute; top: 8px; z-index: 5; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,.92); color: var(--muted); } .nc-widget-hide { right: 8px; cursor: pointer; } .nc-widget-hide:hover { background: var(--danger); border-color: var(--danger); color: var(--on-solid); } .nc-widget-grip { left: 8px; cursor: move; } .nc-widget-hide .material-icons, .nc-widget-grip .material-icons { font-size: 16px; } .nc-editing .nc-widget-hide, .nc-editing .nc-widget-grip { display: inline-flex; } .nc-editing .grid-stack-item-content.nc-widget { outline: 1px dashed var(--cyan); outline-offset: -1px; box-shadow: var(--shadow-md); } .grid-stack-item.nc-hidden { display: none !important; } /* Tablet (769–1100px): sidebar becomes a 72px icon rail — touch devices only, so a desktop (PC/Mac) browser keeps the full fixed sidebar at any window width. */ @media (max-width: 1100px) and (min-width: 769px) and (pointer: coarse) { .nc-app { grid-template-columns: 72px 1fr; } .nc-sidebar .brand-name, .nc-sidebar .nc-section-label, .nc-vessel-picker, .nc-sidebar .nc-nav-item span:not(.material-icons):not(.nc-nav-badge), .nc-sidebar-vessel { display: none; } .nc-sidebar .nc-nav-item { justify-content: center; padding: 9px; } } @media (max-width: 1100px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } .dash-cols { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: repeat(2, 1fr); } } /* ── Auth screens (login / access-denied) ───────────────────────── */ .nc-auth-shell { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, var(--ocean) 0%, var(--ocean-700) 55%, var(--ocean-600) 100%); overflow: hidden; } .nc-auth-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 420px at 85% 10%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 60%), radial-gradient(520px 520px at 10% 95%, color-mix(in srgb, var(--cyan) 14.0%, transparent), transparent 60%); } .nc-auth-card { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 34px 32px 30px; } .nc-auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; } .nc-auth-mark { width: 46px; height: 46px; border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--on-solid); background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); box-shadow: var(--shadow-cyan); } .nc-auth-mark--warn { background: linear-gradient(135deg, var(--danger), var(--danger-dark)); } .nc-auth-mark--warn .material-icons { font-size: 26px; } .nc-auth-appname { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.2px; } .nc-auth-title { font-family: var(--font-display); font-size: 25px; color: var(--ink); margin: 0; } .nc-auth-sub { color: var(--text-muted); font-size: 13px; margin: 4px 0 20px; } .nc-auth-error { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 10px 13px; font-size: 13px; border-radius: var(--radius-lg); background: var(--danger-light); color: var(--danger-dark); border: 1px solid var(--danger-border); } .nc-auth-error .material-icons { font-size: 18px; } .nc-auth-form { display: flex; flex-direction: column; gap: 15px; } .nc-auth-field { display: flex; flex-direction: column; gap: 6px; } .nc-auth-field span { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .nc-auth-field input { padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 14px; color: var(--text); background: var(--surface); transition: border-color .15s, box-shadow .15s; } .nc-auth-field input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-xlight); } .nc-auth-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-muted); user-select: none; } .nc-auth-remember input { width: 15px; height: 15px; accent-color: var(--cyan); cursor: pointer; } .nc-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 12px 16px; width: 100%; border: none; border-radius: var(--radius-lg); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--on-solid); background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); box-shadow: var(--shadow-cyan); transition: filter .15s, transform .05s; } .nc-auth-submit:hover { filter: brightness(1.05); } .nc-auth-submit:active { transform: translateY(1px); } .nc-auth-submit .material-icons { font-size: 19px; } .nc-auth-submit--ghost { background: var(--ocean); box-shadow: var(--shadow-md); } .nc-auth-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .nc-auth-link { background: none; border: none; cursor: pointer; color: var(--cyan-dark); font-size: 13px; padding: 4px; } .nc-auth-link:hover { text-decoration: underline; } /* ── Topbar user menu ───────────────────────────────────────────── */ .nc-user-wrap { position: relative; } .nc-user-wrap .nc-avatar { border: none; cursor: pointer; } .nc-user-menu { position: absolute; top: 46px; right: 0; width: 256px; z-index: 50; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; } .nc-user-head { display: flex; align-items: center; gap: 11px; padding: 12px 12px 11px; } .nc-user-avatar { width: 40px; height: 40px; border-radius: 99px; flex: none; background: linear-gradient(135deg, var(--ocean), var(--ocean-600)); color: var(--on-solid); display: grid; place-items: center; font-weight: 500; font-size: 14px; letter-spacing: .5px; } .nc-user-name { font-weight: 600; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nc-user-mail { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nc-user-roles { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 10px; } .nc-role-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--cyan-xlight); color: var(--cyan-dark); } .nc-user-menu hr { border: none; border-top: 1px solid var(--border-light); margin: 4px 0; } .nc-user-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer; border-radius: var(--radius); font-size: 13px; color: var(--text); text-align: left; } .nc-user-item:hover { background: var(--off-white); text-decoration: none; } .nc-user-item .material-icons { font-size: 18px; color: var(--text-muted); } .nc-user-logoutform { margin: 0; border-top: 1px solid var(--border-light); margin-top: 4px; padding-top: 4px; } .nc-user-logout { color: var(--danger-dark); } .nc-user-logout .material-icons { color: var(--danger-dark); } /* ── User management (/settings/users) ──────────────────────────── */ .users-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .users-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .users-search { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 180px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0 10px; height: 34px; } .users-search .material-icons { font-size: 18px; color: var(--text-light); } .users-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13px; color: var(--text); } .users-filters select { height: 34px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--text); padding: 0 8px; } .users-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; } .users-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; } /* Organization group header inside the users table (org → user hierarchy). */ .users-table tr.u-grp td { background: var(--bg-soft, var(--surface-2, #F4F7FA)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 9px 14px; } .u-grp .material-icons { font-size: 15px; color: var(--cyan-dark); vertical-align: -3px; margin-right: 7px; } .u-grp-name { font-weight: 700; font-size: 12.5px; letter-spacing: .3px; color: var(--ink); } .u-grp-count { margin-left: 10px; font-size: 11.5px; color: var(--text-muted); } /* Server-side paging bar (the list holds one page, not the whole user table). */ .users-paging { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .users-count { font-size: 12.5px; color: var(--text-muted); } .users-pager { display: flex; align-items: center; gap: 6px; margin-left: auto; } .users-page-of { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; } .users-pagesize { height: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 12.5px; color: var(--text); padding: 0 8px; } .users-pager .btn-icon:disabled { opacity: .4; cursor: default; } .u-company { color: var(--text); } .btn-icon-danger:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger-dark); } .users-table { width: 100%; border-collapse: collapse; font-size: 13px; } .users-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); } .users-table td { padding: 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text); } .users-table tr.is-inactive td { opacity: .55; } .users-table .ta-right { text-align: right; } .u-name { font-weight: 600; color: var(--text); } .u-mail { color: var(--text-muted); } .u-flag { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--danger-dark); background: var(--danger-light); padding: 1px 7px; border-radius: 99px; } .u-vessels { color: var(--text); } .u-allfleet { color: var(--cyan-dark); font-weight: 600; } .u-novessel { color: var(--text-light); font-style: italic; } .role-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .3px; } .role-admin { background: var(--cyan-xlight); color: var(--cyan-dark); } /* Relationship roles (per-vessel), most→least privileged. */ .role-owner { background: var(--warning-light); color: var(--warning-dark); } .role-manager { background: var(--tint-blue); color: var(--tint-blue-ink); } .role-contractor { background: var(--success-light); color: var(--success); } .role-viewer { background: var(--tint-neutral); color: var(--tint-neutral-ink); } /* Legacy global roles (kept for back-compat; access role never renders these). */ .role-crew { background: var(--tint-blue); color: var(--tint-blue-ink); } .role-guest { background: var(--tint-neutral); color: var(--tint-neutral-ink); } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; vertical-align: middle; } .status-dot.ok { background: #2BB673; } .status-dot.off { background: var(--text-light); } .btn-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; color: var(--text-muted); } .btn-icon:hover { background: var(--cyan-50); border-color: var(--cyan-light); color: var(--cyan-dark); } .btn-icon .material-icons { font-size: 18px; } /* ── Modal (used by user editor) ────────────────────────────────── */ .nc-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(10,37,64,.45); } .nc-modal { position: fixed; z-index: 201; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .nc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); } .nc-modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 19px; color: var(--ink); } .nc-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .nc-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-light); background: var(--off-white); } .form-note { font-size: 13px; color: var(--text-muted); padding: 10px 12px; background: var(--cyan-xlight); border-radius: var(--radius-lg); } .form-error { font-size: 13px; color: var(--danger-dark); background: var(--danger-light); border: 1px solid var(--danger-border); padding: 10px 12px; border-radius: var(--radius-lg); } /* ── Printable reports ──────────────────────────────────────────── */ .report-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 18px; } .report-toolbar .rt-field { display: flex; flex-direction: row; align-items: center; gap: 7px; } .report-toolbar .rt-field > span { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); } .report-toolbar .rt-spacer { flex: 1; } /* The Back pill carries a bottom margin for standalone use; drop it inside the toolbar so it sits on the same centre line as the date fields and the buttons. */ .report-toolbar .nc-back { margin-bottom: 0; align-self: center; } /* Uniform control height so date pickers and buttons line up crisply. */ .report-toolbar .btn, .report-toolbar .nc-back, .report-toolbar .rz-datepicker { height: 38px; box-sizing: border-box; } .report-toolbar .rz-datepicker .rz-inputtext { height: 100%; box-sizing: border-box; } .report-doc { background: #fff; color: #1a1a1a; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px 34px; max-width: 1000px; } .report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ocean); padding-bottom: 14px; margin-bottom: 18px; } .report-brand { display: flex; align-items: center; gap: 10px; } .report-brand .report-mark { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--on-solid); background: linear-gradient(135deg, var(--cyan), var(--cyan-dark)); } .report-brand-name { font-family: var(--font-display); font-size: 19px; color: var(--ink); font-weight: 600; } .report-brand-sub { font-size: 12px; color: var(--text-muted); } .report-title { text-align: right; } .report-title h2 { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin: 0; } .report-title .report-range { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .report-vessel { font-size: 13px; color: var(--text); margin-bottom: 14px; } .report-vessel strong { color: var(--ink); } .report-section { font-family: var(--font-display); font-size: 15px; color: var(--ink); margin: 18px 0 8px; } .report-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .report-table th { text-align: left; background: var(--off-white); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 8px 10px; border-bottom: 2px solid var(--border); } .report-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; } .report-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); background: var(--off-white); } .report-table .num { text-align: right; white-space: nowrap; } .report-empty { padding: 24px; text-align: center; color: var(--text-muted); } .report-foot { margin-top: 18px; font-size: 11px; color: var(--text-light); border-top: 1px solid var(--border-light); padding-top: 10px; } /* Stocktake count sheet — bordered write-in cells (print as empty boxes to fill by hand) */ .report-table.count-sheet td { border: 1px solid var(--border-light); } .report-table.count-sheet .count-write { height: 26px; background: var(--off-white); } .count-sign { margin-top: 26px; font-size: 12px; color: var(--text-muted); } /* Printable documents (expense / purchase order / supplier statement) */ .doc-parties { display: flex; gap: 32px; flex-wrap: wrap; margin: 18px 0; } .doc-party { flex: 1; min-width: 200px; } .doc-party-label { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin-bottom: 4px; } .doc-party strong { display: block; font-size: 14px; color: var(--ink); } .doc-party .line { font-size: 12.5px; color: var(--text-muted); } .doc-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; margin: 14px 0; font-size: 12.5px; } .doc-meta .k { color: var(--text-muted); margin-right: 6px; } .doc-totals { margin: 16px 0 0 auto; width: 280px; font-size: 13px; } .doc-totals .row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border-light); } .doc-totals .row.grand { font-weight: 700; font-size: 15px; border-bottom: none; border-top: 2px solid var(--border); color: var(--ink); padding-top: 8px; } @media print { .nc-sidebar, .nc-topbar, .alert-banner, .report-toolbar, .fleet-toolbar, .nc-bell-wrap, .blazored-toast-container, .back-link, .nc-back { display: none !important; } .nc-app { display: block !important; } .nc-main { margin: 0 !important; } .nc-page { padding: 0 !important; max-width: none !important; } body, .nc-app, .nc-main { background: #fff !important; } .report-doc { border: none !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; } @page { margin: 14mm; } } /* ── One-off task type ──────────────────────────────────────────── */ .oneoff-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 8px; border-radius: 99px; background: var(--cyan-xlight); color: var(--cyan-dark); vertical-align: middle; } .task-type-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .task-type-toggle .tt-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 600; } .task-type-toggle .tt-opt + .tt-opt { border-left: 1px solid var(--border); } .task-type-toggle .tt-opt:hover { background: var(--off-white); } .task-type-toggle .tt-opt.active { background: var(--cyan); color: var(--on-solid); } .task-type-toggle .tt-opt.active .material-icons { color: var(--on-solid); } .task-type-locked { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--cyan-xlight); color: var(--cyan-dark); font-size: 12.5px; } /* ── Progress bars (shared) ─────────────────────────────────────── */ .bar { height: 7px; border-radius: 99px; background: var(--border-light); overflow: hidden; } .bar-fill { height: 100%; border-radius: 99px; background: var(--cyan); transition: width .3s; } .bar-fill.over { background: var(--danger); } /* ── Projects ───────────────────────────────────────────────────── */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .project-card { display: block; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 18px 20px; color: var(--text); transition: box-shadow .15s, transform .05s; } .project-card:hover { box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); } .pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pc-head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--ink); } .pc-desc { color: var(--text-muted); font-size: 12.5px; margin: 6px 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pc-metric { margin-top: 10px; } .pc-bar-label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; } .pc-foot { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--text-muted); } .proj-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; } .proj-planning { background: var(--tint-blue); color: var(--tint-blue-ink); } .proj-active { background: var(--cyan-xlight); color: var(--cyan-dark); } .proj-onhold { background: var(--tint-yellow); color: var(--tint-yellow-ink); } .proj-completed { background: var(--tint-green); color: var(--tint-green-ink); } .proj-cancelled { background: var(--tint-neutral); color: var(--tint-neutral-ink); } .proj-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .proj-kpi { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .proj-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); } .proj-kpi-value { font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1; } .proj-kpi-sub { font-size: 11px; color: var(--text-light); } @media (max-width: 900px) { .proj-kpis { grid-template-columns: repeat(2, 1fr); } } /* Attach-existing-task control on the project detail page */ .proj-add-existing { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-light); display: flex; flex-direction: column; gap: 8px; } /* Project chip shown on a task's detail meta row (links back to its project) */ .task-project-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--cyan-xlight); color: var(--cyan-dark); text-decoration: none; } .task-project-link:hover { background: var(--cyan-light, #cdeef5); } /* Budget-line chips on the project detail page */ .budget-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border: 1px solid var(--border-light); border-radius: 99px; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink); } .budget-chip .chip-x { border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 99px; } .budget-chip .chip-x:hover { background: var(--danger-light); color: var(--danger-dark); } /* ── Project workspace (master-detail) ──────────────────────────── */ .proj-workspace { display: grid; grid-template-columns: 340px 1fr; gap: 18px; margin-top: 22px; align-items: start; } .proj-tasklist { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 16px; } .proj-tasklist-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .proj-tasklist-empty { padding: 18px 14px; color: var(--text-muted); font-size: 13px; } .proj-task-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer; } .proj-task-row:last-child { border-bottom: none; } .proj-task-row:hover { background: var(--off-white); } .proj-task-row.selected { background: var(--cyan-xlight); box-shadow: inset 3px 0 0 var(--cyan); } .proj-task-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .proj-task-title { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proj-task-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .proj-task-cost { font-size: 11px; color: var(--text-muted); font-weight: 600; } .proj-task-x { border: none; background: transparent; cursor: pointer; color: var(--text-light); padding: 2px; border-radius: 6px; display: inline-flex; } .proj-task-x:hover { background: var(--danger-light); color: var(--danger-dark); } .proj-pane { min-width: 0; } .proj-pane .pane-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; border: none; background: transparent; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .proj-pane .pane-back:hover { background: var(--off-white); color: var(--ink); } .proj-pane { min-height: 340px; } /* Embedded task detail/form renders full-width inside the (narrower) pane — no 2-col split */ .proj-pane .detail-layout { grid-template-columns: 1fr; } .proj-pane .detail-sidebar { position: static; } .proj-tasklist-empty .btn { margin-top: 12px; } .proj-task-overdue { display: inline-flex; align-items: center; color: var(--danger); font-size: 14px; line-height: 1; } /* Task-panel tools: search + segmented status + group labels + sub-line */ .proj-tasklist-tools { padding: 10px 12px; border-bottom: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 8px; } .proj-search { position: relative; } .proj-search .material-icons { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-muted); pointer-events: none; } .proj-search input { width: 100%; height: 32px; padding: 0 10px 0 30px; font-size: 12.5px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .proj-search input:focus { outline: none; border-color: var(--cyan); } .proj-seg { display: flex; gap: 4px; } .proj-seg button { flex: 0 0 auto; border: 1px solid var(--border-light); background: var(--surface); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; } .proj-seg button:hover { color: var(--ink); } .proj-seg button.on { background: var(--ocean); color: var(--on-solid); border-color: transparent; } .proj-task-group { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 14px 4px; } .proj-task-sub { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proj-task-mand { color: var(--tint-pink-ink); font-weight: 600; } .proj-task-flag { color: var(--danger); } .proj-task-check { color: var(--success); flex: none; } .proj-task-row.done .proj-task-title { text-decoration: line-through; color: var(--text-muted); font-weight: 500; } .proj-task-row.done { opacity: .78; } /* Add-existing-task typeahead results */ .add-existing-list { border: 1px solid var(--border-light); border-radius: var(--radius); max-height: 300px; overflow-y: auto; } .add-existing-cat { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--off-white); padding: 5px 12px; position: sticky; top: 0; } .add-existing-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border-light); } .add-existing-title { font-size: 13px; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Budget-by-category barred rows */ .budget-rows { display: flex; flex-direction: column; gap: 12px; } .budget-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 5px; } .budget-row-name { font-size: 13px; color: var(--text); min-width: 0; } .budget-row-fig { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .budget-row.editable { cursor: pointer; padding: 5px 7px; margin: 0 -7px; border-radius: var(--radius); transition: background .1s; } .budget-row.editable:hover { background: var(--off-white); } .budget-row-edit { color: var(--text-light); vertical-align: -2px; margin-left: 4px; opacity: 0; transition: opacity .1s; } .budget-row.editable:hover .budget-row-edit { opacity: 1; } /* Active-projects card on the dashboard */ .dash-proj { display: block; text-decoration: none; padding: 9px 11px; border: 1px solid var(--border-light); border-radius: var(--radius); } .dash-proj:hover { background: var(--off-white); } .dash-proj-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .dash-proj-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-proj-pct { font-size: 12px; font-weight: 700; color: var(--cyan-dark); flex-shrink: 0; } .dash-proj .bar { margin: 7px 0 0; } .dash-proj-sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; } /* Project-reports chooser (/reports/projects) */ .proj-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } @media (max-width: 900px) { .proj-workspace { grid-template-columns: 1fr; } .proj-tasklist { position: static; } } /* ── Task detail tabs (Overview / History / Parts / Attachments) ── */ .task-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-light); margin: 18px 0 20px; overflow-x: auto; } .task-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border: none; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .task-tab:hover { color: var(--ink); } .task-tab.active { color: var(--ink); border-bottom-color: var(--cyan); } .task-tab .material-icons { font-size: 16px; } .task-tab .tab-count { font-size: 11px; font-weight: 700; background: var(--off-white); color: var(--muted); border-radius: 99px; padding: 1px 8px; } .task-tab.active .tab-count { background: var(--cyan-50); color: var(--cyan-600); } /* ── Task detail: key-figures strip (KPI tiles) ─────────────────── */ .task-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 4px; } .task-kpi { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; } .task-kpi.danger { border-color: var(--danger); background: var(--danger-light); } .task-kpi.total { background: var(--success-light); border-color: transparent; } .tk-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--muted); } .task-kpi.danger .tk-label { color: var(--danger-dark); } .task-kpi.total .tk-label { color: var(--success); } .tk-value { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.15; margin: 5px 0 3px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-kpi.danger .tk-value { color: var(--danger-dark); } .task-kpi.total .tk-value { color: var(--success); } .tk-value .unit { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 2px; font-family: var(--font-body); } .tk-sub { display: block; font-size: 11.5px; color: var(--muted); min-height: 14px; } /* ── Task detail: audit/section header row (title left · action right) ── */ .audit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } /* ── Complete-task: cost checkpoint summary ─────────────────────── */ .cost-summary { background: var(--off-white); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; margin: 4px 0 16px; } .cs-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text); padding: 4px 0; } .cs-row.cs-total { border-top: 1px solid var(--border-light); margin-top: 4px; padding-top: 8px; font-size: 14px; color: var(--ink); } /* ── Spend-by-category card (dashboard) ─────────────────────────── */ .spend-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 9px 0; } .spend-row + .spend-row { border-top: 1px solid var(--border-light); } .spend-cat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); min-width: 0; } .spend-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spend-amt { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); } .spend-bar { grid-column: 1 / -1; margin-top: 2px; } .spend-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); } .spend-foot b { font-family: var(--font-display); font-size: 17px; color: var(--ink); } /* ── Compliance-by-category rows (dashboard ring card) ──────────── */ .compliance-cats { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 11px; } .cc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .cc-name { font-size: 12.5px; color: var(--text); } .cc-pct { font-size: 12.5px; font-weight: 700; } .cc-row .bar { grid-column: 1 / -1; } /* ── Fleet overview (/fleet) ────────────────────────────────────── */ .fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-top: 22px; } .fleet-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .12s, box-shadow .15s; } .fleet-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .fleet-card-head { position: relative; padding: 20px 22px 18px; background: linear-gradient(135deg, var(--ocean) 0%, var(--g-lift) 100%); } .fleet-card-head.haulout { background: linear-gradient(135deg, var(--g-slate1) 0%, var(--g-slate2) 100%); } .fleet-card-name { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--on-solid); margin: 0; line-height: 1.1; } .fleet-card-sub { font-size: 12.5px; color: rgba(202,233,255,.8); margin-top: 3px; } .fleet-card-loc { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 12px; color: rgba(202,233,255,.7); } .fleet-card-loc .material-icons { font-size: 14px; } .fleet-status { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.13); } .fleet-status.inservice { color: #6FE3C0; } .fleet-status.haulout { color: #F4A261; } .fleet-status .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } .fleet-card-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 16px; } .fleet-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fleet-metric-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; } .fleet-metric-value { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--ink); margin-top: 2px; line-height: 1; } .fleet-metric-value .unit { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; font-family: var(--font-body); } .fleet-compliance-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; } .fleet-compliance-head .lbl { color: var(--muted); } .fleet-compliance-head .pct { font-weight: 700; } .fleet-pills { display: flex; gap: 8px; flex-wrap: wrap; } .fleet-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .fleet-foot .btn { flex: 1; } .fleet-role { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--off-white); border: 1px solid var(--border-light); padding: 6px 12px; border-radius: 99px; white-space: nowrap; } /* Selected quick-filter stat tile (inventory) */ .stat-tile.sel { box-shadow: 0 0 0 2px var(--cyan) inset; } /* Read-only calendar-subscription URL field (vessel settings) */ .ics-url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--off-white); color: var(--text); } /* Compact YTD total atop the spend card */ .spend-total { font-family: var(--font-display); font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1; margin-bottom: 14px; } .spend-total span { font-size: 13px; color: var(--muted); font-family: var(--font-body); margin-left: 6px; } /* ── NAUTICORE Agent page ───────────────────────────────────────── */ .agent-head { display: flex; align-items: flex-start; gap: 16px; } .agent-icon { width: 56px; height: 56px; border-radius: var(--r-md); flex-shrink: 0; background: linear-gradient(135deg, var(--ocean) 0%, var(--g-lift) 100%); color: var(--on-solid); display: flex; align-items: center; justify-content: center; } .agent-icon .material-icons { font-size: 28px; } .agent-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .agent-title-row h1 { margin: 0; } .agent-meta { font-size: 12.5px; color: var(--muted); margin-top: 5px; } .agent-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; } .agent-status.running { background: var(--success-50); color: var(--success); } .agent-status.idle { background: var(--warning-50); color: var(--tint-amber-ink); } .agent-status .dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; } .agent-version { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--off-white); border: 1px solid var(--border-light); padding: 2px 9px; border-radius: 99px; font-family: var(--font-mono); } .engine-list { display: flex; flex-direction: column; gap: 12px; } .engine-row { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 16px 20px; box-shadow: var(--shadow-1); } .engine-ico { width: 42px; height: 42px; border-radius: var(--r-md); flex-shrink: 0; background: var(--cyan-50); color: var(--cyan-600); display: flex; align-items: center; justify-content: center; } .engine-ico.planned { background: var(--off-white); color: var(--muted-2); } .engine-body { flex: 1; min-width: 0; } .engine-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .engine-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); } .engine-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .engine-col { text-align: right; flex-shrink: 0; } .engine-col-label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); font-weight: 700; } .engine-col-value { font-size: 13px; color: var(--text); font-weight: 600; margin-top: 2px; } .engine-col-sub { font-size: 11px; color: var(--muted); } .nc-switch { width: 38px; height: 22px; border-radius: 99px; background: var(--border); position: relative; flex-shrink: 0; border: none; padding: 0; } .nc-switch.on { background: var(--cyan); } .nc-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: var(--shadow-1); } .nc-switch.on::after { left: 18px; } .nc-switch:disabled { opacity: .6; cursor: not-allowed; } .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } @media (max-width: 720px) { .engine-row { flex-wrap: wrap; } .engine-col { text-align: left; } } /* ── Agent control plane (ADR-0018) ─────────────────────────────── */ /* States beyond running/idle. A paused agent is a deliberate human choice, so it reads amber, not red; only real evidence of failure (a Failed cycle, a stopped heartbeat) turns red. */ .agent-status.paused { background: var(--warning-50); color: var(--tint-amber-ink); } .agent-status.failing { background: var(--danger-50); color: var(--danger); } .agent-status.unknown { background: var(--off-white); color: var(--muted); } .acp-alarm { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 4px; background: var(--danger-50); border: 1px solid var(--danger-border); border-radius: var(--r-lg); padding: 14px 16px; color: var(--danger-dark); } .acp-alarm .material-icons { font-size: 20px; flex-shrink: 0; } .acp-alarm strong { display: block; font-size: 13.5px; } .acp-alarm span.d { font-size: 12.5px; opacity: .9; } .acp-note { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 4px; background: var(--warning-50); border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 12px 16px; color: var(--tint-amber-ink); font-size: 12.5px; } .acp-group { margin-top: 26px; } .acp-group-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--muted-2); margin-bottom: 10px; } .acp-evidence { font-size: 12px; color: var(--muted); margin-top: 5px; font-family: var(--font-mono); } .acp-knobs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; justify-content: flex-end; } .acp-knob { display: flex; align-items: center; gap: 7px; } .acp-knob label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); font-weight: 700; } .acp-knob input { width: 74px; padding: 6px 8px; font-size: 13px; text-align: right; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-mono); } .acp-knob input[type="time"] { width: 96px; text-align: left; } .acp-knob input:disabled { opacity: .6; } .acp-unit { font-size: 12px; color: var(--muted); } .acp-dirty { position: sticky; bottom: 0; z-index: 5; margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ocean); color: var(--on-solid); border-radius: var(--r-lg); padding: 12px 18px; box-shadow: var(--shadow-2); } .acp-dirty .n { font-size: 13px; flex: 1; } @media (max-width: 720px) { .acp-knobs { justify-content: flex-start; width: 100%; } } /* ═══════════════════════════════════════════════════════════════════ Mobile (≤768px) — off-canvas nav drawer + compact chrome (PWA) Touch devices only ((pointer: coarse)) so a PC/Mac browser NEVER goes responsive — the navigation sidebar stays fixed at any window width. ═══════════════════════════════════════════════════════════════════ */ .nc-mobile-only { display: none; } .nc-nav-backdrop { display: none; } @media (max-width: 768px) and (pointer: coarse) { .nc-mobile-only { display: grid; } .nc-desktop-only { display: none; } /* shell: single column; the sidebar becomes an off-canvas drawer */ .nc-app, .nc-app.compact { grid-template-columns: 1fr; } .nc-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; width: min(300px, 85vw); height: 100vh; height: 100dvh; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(4,16,28,.45); padding-top: max(20px, env(safe-area-inset-top)); } .nc-app.nav-open .nc-sidebar { transform: translateX(0); } .nc-app.nav-open .nc-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(10,37,64,.45); } /* the drawer always shows the full nav, even if desktop collapse was on */ .nc-app.compact .brand-name { display: flex; } .nc-app.compact .nc-section-label { display: block; } .nc-app.compact .nc-nav-item span:not(.material-icons):not(.nc-nav-badge) { display: inline; } .nc-app.compact .nc-sidebar-vessel { display: block; } .nc-app.compact .nc-vessel-picker { display: block; } .nc-app.compact .nc-brand { justify-content: flex-start; } .nc-app.compact .nc-nav-item, .nc-nav-item { justify-content: flex-start; padding: 11px 12px; } /* touch targets */ /* topbar: compact + safe-area aware (notch / standalone PWA) */ .nc-topbar { gap: 10px; padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); padding-top: max(10px, env(safe-area-inset-top)); } .nc-crumbs span:not(.cur) { display: none; } .nc-topbar-search { display: none; } .nc-search-link { margin-left: auto; } /* dropdown menus clamp to the viewport */ .nc-bell-menu { width: min(320px, calc(100vw - 24px)); } .nc-user-menu { width: min(256px, calc(100vw - 24px)); } /* page chrome + hero */ .nc-page { padding: 18px 14px 56px; } .nc-page-title { font-size: 25px; } .hero { padding: 22px 18px; } .hero-name { font-size: 28px; } .hero-stats { gap: 14px; margin-top: 20px; padding-top: 16px; } /* real tables scroll sideways instead of crushing the columns */ .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-card .data-table { min-width: 640px; } .table-scroll > table { min-width: 560px; } /* filter controls: full width, never overflow the viewport (inputs/selects carry inline widths, hence the !important) */ .filter-controls { width: 100%; flex-wrap: wrap; } .filter-controls select, .filter-controls input { width: auto !important; flex: 1 1 150px; min-width: 0; } /* Customizable dashboard (Gridstack) — stack the widgets into one full-width column on phones. Gridstack keeps its 12-col model internally; we override its per-item absolute positioning for DISPLAY ONLY (its inline left/top/width are not !important, so these win). The grid engine is never touched, so no 'change' event fires and the user's saved desktop layout is never overwritten. Each card sizes to its content (the AIS map keeps its own 286px height, the calendar its natural height), so nothing collapses or overflows the viewport. */ .grid-stack { margin: 0 !important; height: auto !important; } .grid-stack-item { position: relative !important; inset: auto !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 14px !important; transition: none !important; } .grid-stack-item-content.nc-widget { position: relative !important; inset: auto !important; height: auto !important; } .nc-widget > * { height: auto !important; } /* Customizing is a desktop task — hide the entry on phones (drag/resize can't reflect on the forced single column, and the saved layout is shared with desktop). */ .dash-customize-btn { display: none !important; } } /* ── AI copilot "Ask NAUTICORE" (ADR-0003) ───────────────────────────────── Topbar trigger + right slide-over chat panel, styled to match the ADR-0003 prototype: borderless assistant replies with a NAUTICORE label + rendered markdown, navy user bubbles, pill suggested prompts. Read-only v1. */ .nc-ask-btn .material-icons { color: var(--cyan-dark); } .nc-ask-btn:hover { background: var(--cyan-xlight); } .nc-ask-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(10,37,64,.30); animation: nc-ask-fade .15s ease; } .nc-ask-panel { position: fixed; top: 0; right: 0; z-index: 1201; width: min(440px, 92vw); height: 100%; display: flex; flex-direction: column; background: var(--surface); box-shadow: -24px 0 48px -28px rgba(10,37,64,.45); border-left: 1px solid var(--border); animation: nc-ask-slide .22s cubic-bezier(.2,.7,.3,1); } @keyframes nc-ask-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes nc-ask-slide { from { transform: translateX(30px); opacity: .3; } to { transform: none; opacity: 1; } } /* Header */ .nc-ask-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .nc-ask-spark { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; background: var(--cyan-xlight); color: var(--cyan-dark); display: grid; place-items: center; } .nc-ask-spark .material-icons { font-size: 20px; } .nc-ask-titles { flex: 1; min-width: 0; } .nc-ask-titles h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); line-height: 1.1; } .nc-ask-titles span { font-size: .76rem; color: var(--text-muted); } .nc-ask-x { border: none; background: none; color: var(--text-light); cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); } .nc-ask-x:hover { background: var(--surface-alt); color: var(--text); } .nc-ask-x .material-icons { font-size: 20px; } /* Message stream */ .nc-ask-body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; } .nc-ask-intro p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; margin: 0; } .nc-ask-msg { display: flex; } .nc-ask-msg.user { justify-content: flex-end; } .nc-ask-msg.bot { justify-content: flex-start; } .nc-ask-ubub { max-width: 84%; padding: 9px 13px; font-size: .9rem; line-height: 1.45; background: var(--accent-strong); color: var(--on-solid); border-radius: 15px 15px 4px 15px; word-wrap: break-word; } .nc-ask-abub { max-width: 94%; } .nc-ask-who { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cyan-dark); } .nc-ask-who .material-icons { font-size: 14px; } /* Rendered markdown inside an assistant reply */ .nc-ask-md { font-size: .9rem; line-height: 1.6; color: var(--text); word-wrap: break-word; } .nc-ask-md > :first-child { margin-top: 0; } .nc-ask-md > :last-child { margin-bottom: 0; } .nc-ask-md p { margin: 0 0 10px; } .nc-ask-md ul, .nc-ask-md ol { margin: 0 0 10px; padding-left: 20px; } .nc-ask-md li { margin: 3px 0; } .nc-ask-md strong { color: var(--text); font-weight: 700; } .nc-ask-md h1, .nc-ask-md h2, .nc-ask-md h3, .nc-ask-md h4 { font-family: var(--font-display); font-weight: 600; color: var(--text); margin: 14px 0 6px; font-size: 1rem; line-height: 1.2; } .nc-ask-md a { color: var(--cyan-dark); text-decoration: underline; } .nc-ask-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; background: var(--surface-alt); padding: 1px 5px; border-radius: 4px; } .nc-ask-md table { border-collapse: collapse; font-size: .84rem; margin: 0 0 10px; } .nc-ask-md th, .nc-ask-md td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; } .nc-ask-typing { display: inline-flex; gap: 4px; padding: 4px 0; } .nc-ask-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-light); animation: nc-ask-bounce 1.2s infinite ease-in-out; } .nc-ask-typing i:nth-child(2) { animation-delay: .15s; } .nc-ask-typing i:nth-child(3) { animation-delay: .3s; } @keyframes nc-ask-bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } .nc-ask-error { padding: 10px 12px; font-size: .85rem; border-radius: var(--radius-lg); background: var(--danger-light); color: var(--danger-dark); border: 1px solid var(--danger); } /* Draft work order card (copilot draft_work_order, ADR-0009) */ .nc-draft { margin-top: 10px; padding: 12px; border-radius: var(--radius-lg); border: 1px solid var(--cyan); background: var(--cyan-xlight); display: flex; flex-direction: column; gap: 8px; } .nc-draft-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan-dark); } .nc-draft-head .material-icons { font-size: 17px; } .nc-draft-l { font-size: .72rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; } .nc-draft-in { width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 9px; font-size: .86rem; color: var(--text); } .nc-draft-in:focus { outline: none; border-color: var(--cyan); } .nc-draft-in:disabled { opacity: .7; } .nc-draft-in.cost { width: 90px; } .nc-draft-task { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .nc-draft-task-top { display: flex; align-items: center; gap: 6px; } .nc-draft-del { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-light); cursor: pointer; display: grid; place-items: center; } .nc-draft-del:hover { background: var(--danger-light); color: var(--danger-dark); border-color: var(--danger); } .nc-draft-del .material-icons { font-size: 15px; } .nc-draft-task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .8rem; } .nc-draft-cat { background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan-dark); border-radius: 99px; padding: 2px 9px; font-weight: 600; } .nc-draft-cat.warn { background: var(--warning-light, #fdf1dc); color: var(--warning-dark, #915b12); } .nc-draft-chk { display: inline-flex; align-items: center; gap: 4px; color: var(--text-light); } .nc-draft-cost { display: inline-flex; align-items: center; } .nc-draft-budget { font-size: .8rem; color: var(--text-light); } .nc-draft-note { margin-top: 8px; font-size: .85rem; display: flex; align-items: center; gap: 5px; } .nc-draft-note.ok { color: var(--success-dark, #14713b); } .nc-draft-note.ok .material-icons { font-size: 18px; } .nc-draft-note.muted { color: var(--text-light); font-style: italic; } .nc-draft-link { background: none; border: none; color: var(--cyan-dark); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; font-size: .85rem; } .nc-draft-err { font-size: .82rem; color: var(--danger-dark); } .nc-draft-actions { display: flex; gap: 8px; margin-top: 2px; } .nc-draft-confirm { flex: 1; border: none; border-radius: 9px; padding: 9px 12px; font-weight: 700; font-size: .86rem; background: var(--accent-strong, var(--cyan-dark)); color: var(--on-solid, #fff); cursor: pointer; } .nc-draft-confirm:hover:not(:disabled) { filter: brightness(1.06); } .nc-draft-confirm:disabled { opacity: .6; cursor: default; } .nc-draft-discard { border: 1px solid var(--border); background: var(--surface); color: var(--text-light); border-radius: 9px; padding: 9px 14px; font-weight: 600; font-size: .86rem; cursor: pointer; } .nc-draft-discard:hover { background: var(--surface-alt); } /* Suggested prompts (pills), shown before the first question */ .nc-ask-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; } .nc-ask-chip { border: 1px solid var(--border); background: var(--surface); color: var(--cyan-dark); border-radius: 99px; padding: 7px 13px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; } .nc-ask-chip:hover:not(:disabled) { background: var(--cyan-xlight); border-color: var(--cyan); } .nc-ask-chip:disabled { opacity: .5; cursor: default; } /* Composer */ .nc-ask-foot { border-top: 1px solid var(--border); padding: 12px 14px; background: var(--surface); } .nc-ask-inputrow { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 6px 6px 6px 12px; background: var(--surface); } .nc-ask-inputrow:focus-within { border-color: var(--cyan); } .nc-ask-inputrow textarea { flex: 1; resize: none; max-height: 120px; border: none; background: none; outline: none; font-family: var(--font-body); font-size: .9rem; line-height: 1.4; color: var(--text); padding: 4px 0; } .nc-ask-send { flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 9px; background: var(--cyan-dark); color: var(--on-solid); cursor: pointer; display: grid; place-items: center; } .nc-ask-send:disabled { background: var(--text-light); cursor: default; } .nc-ask-send .material-icons { font-size: 19px; } .nc-ask-disclaimer { margin-top: 8px; font-size: .7rem; color: var(--text-light); text-align: center; line-height: 1.4; } @media (max-width: 768px) { .nc-ask-panel { width: 100vw; border-left: none; } } /* ── Work orders (ADR-0004) ──────────────────────────────────────────────── Proposed-project (draft work order) list + propose form. */ .proj-proposed { background: var(--tint-orange); color: var(--tint-orange-ink); } /* draft / awaiting approval */ /* Propose form task rows (Radzen inputs) */ .wo-task-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .wo-task-title { flex: 1 1 auto; min-width: 320px; } /* the title is the primary field — keep it long */ .wo-task-cat { flex: 0 0 190px; } .wo-mand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 1rem; color: var(--text-muted); white-space: nowrap; cursor: pointer; } /* Work-order cards — Fleet-style proposal grid (gradient header + card body). */ /* Fixed 360px tracks (not 1fr) so cards keep a constant size instead of stretching to fill the row when only one or two proposals exist. */ .wo-grid { display: grid; grid-template-columns: repeat(auto-fill, 360px); gap: 20px; margin-top: 22px; justify-content: start; } .wo-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .12s, box-shadow .15s; } .wo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .wo-card-head { position: relative; padding: 20px 22px 18px; background: linear-gradient(135deg, var(--ocean) 0%, var(--g-lift) 100%); } .wo-card-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--on-solid); margin: 0; line-height: 1.15; padding-right: 92px; } .wo-card-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 10px; font-size: 12px; color: rgba(202,233,255,.82); } .wo-card-sub span.item { display: inline-flex; align-items: center; gap: 5px; } .wo-card-sub .material-icons { font-size: 14px; } .wo-card-copilot { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #CDEBFF; } .wo-card-status { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.15); color: #F4C287; } .wo-card-status .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; } .wo-card-body { padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .wo-rationale { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text); } .wo-tasklist { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--text); } .wo-tasklist li { margin: 3px 0; } .wo-byline { font-size: 11.5px; color: var(--muted); } .wo-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; } .wo-foot .btn { flex: 1; } /* Header toolbar: grid/list view toggle + New button. */ .wo-toolbar { display: flex; align-items: center; gap: 10px; } .wo-view-toggle, .view-toggle { display: inline-flex; border: 1px solid var(--border-light); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); } .wo-view-toggle button, .view-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .wo-view-toggle button + button, .view-toggle button + button { border-left: 1px solid var(--border-light); } .wo-view-toggle button .material-icons, .view-toggle button .material-icons { font-size: 19px; } .wo-view-toggle button:hover, .view-toggle button:hover { color: var(--ink); } .wo-view-toggle button.active, .view-toggle button.active { background: var(--accent-strong); color: var(--on-solid); } /* Text-label variant (e.g. Valued / Count sheet) — auto width, no wrap, instead of the 38px icon square. */ .view-toggle.text-toggle button { width: auto; padding: 0 16px; white-space: nowrap; font-size: 13px; font-weight: 600; } /* List view — these tables reuse .data-table but their rows carry no .data-row class, so give the body cells the same padding/borders the header cells get (else values sit flush-left, unaligned with the column titles). Shared by work orders + projects. */ .wo-table td, .list-table td { padding: 13px 18px; vertical-align: middle; font-size: 13.5px; border-bottom: 1px solid var(--border-soft); } .wo-table tbody tr:last-child td, .list-table tbody tr:last-child td { border-bottom: 0; } .wo-table tbody tr:hover, .list-table tbody tr:hover { background: var(--off-white); } .wo-table .wo-list-name, .list-table .list-name { font-weight: 600; color: var(--ink); text-decoration: none; } .wo-table .wo-list-name:hover, .list-table .list-name:hover { text-decoration: underline; } .wo-row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; } .wo-reason-cell { max-width: 320px; color: var(--text); } /* Declined work orders — status pill + reason block. */ .wo-card-status.declined { color: #F1A0A0; } /* warm red on the gradient header */ .wo-reason { font-size: .88rem; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--danger) 8%, transparent); border-left: 3px solid var(--danger); border-radius: var(--r-sm); padding: 8px 10px; } .wo-reason.muted { color: var(--muted); background: var(--off-white); border-left-color: var(--border); } .wo-reason-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--danger); margin-right: 6px; } /* Decline dialog reason field. */ .wo-reason-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; } .wo-reason-input { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; resize: vertical; } .wo-reason-input:focus { outline: none; border-color: var(--cyan); } /* ── Radzen theme alignment ──────────────────────────────────────────────── Radzen's default "material" primary is indigo/lilac (#4340D2), which leaked into dropdown selections, checkboxes, focus rings and buttons across the SITE. Remap the whole primary family to the NAUTICORE cyan so every Radzen component matches the design system. app.css loads AFTER Radzen's material-base.css, so these :root overrides win everywhere. */ :root { --rz-primary: #0096B7; /* = --cyan-dark */ --rz-primary-light: #00B4D8; /* = --cyan */ --rz-primary-lighter: color-mix(in srgb, var(--cyan) 12%, transparent); /* selection / highlight tint */ --rz-primary-dark: #007A94; --rz-primary-darker: #005F73; --rz-on-primary: #FFFFFF; /* ── Chart series palette ────────────────────────────────────────────────── The v1.15.0 remap above fixed buttons/inputs/focus rings but NOT charts: Radzen's --rz-series-* were left at its Material defaults (#3700b3 purple, #ba68c8 lilac, #f06292 pink), so every RadzenChart looked foreign to the design system. These are the NAUTICORE categorical slots. ⚠ NOT hand-picked. The order was chosen by ENUMERATING all 5,040 orderings of the eight hues (brand cyan pinned to slot 1) and keeping the one that maximises the minimum adjacent separation under simulated protanopia and deuteranopia. Result: worst adjacent ΔE 10.5 light / 10.0 dark (target 8), lightness band + chroma floor + 3:1 contrast all passing in BOTH modes. If you change a value, re-run the palette validator — do not eyeball it. ⚠ Slot 1 is the brand cyan on purpose: a SINGLE-series chart (the monthly spend bars on /reports) takes slot 1, so it must read as NAUTICORE. ⚠ The second constraint is local: the Night theme applies grayscale() to .rz-chart before the red tint, so adjacent slices must also differ in LUMINANCE or they merge into one grey wedge. The first ordering we found put green and blue 0.0007 apart in relative luminance — invisible under Night. This order keeps every adjacent pair >= 0.030. */ --rz-series-1: #0096B7; /* cyan — brand */ --rz-series-2: #6F8C1E; /* olive */ --rz-series-3: #B43764; /* pink — = --tint-pink-ink */ --rz-series-4: #A9761F; /* gold */ --rz-series-5: #2F6FB0; /* blue */ --rz-series-6: #D9541F; /* coral */ --rz-series-7: #6D4AA8; /* violet */ --rz-series-8: #0E7C56; /* green */ /* Radzen cycles through 24 slots. Only the eight above are validated as mutually distinguishable; 9+ are the SAME hues re-stepped (lighter, then deepened toward --ocean) so an unexpectedly long series still reads as NAUTICORE rather than reverting to Material purple. A chart that genuinely needs more than eight categories should fold the tail into "Other" instead of relying on these. The app seeds ~8 maintenance categories, so the donut on /reports normally stops at slot 8. */ --rz-series-9: #6BC2D5; --rz-series-10: #ABBC7D; --rz-series-11: #D48BA5; --rz-series-12: #CDB07D; --rz-series-13: #86ABD1; --rz-series-14: #E99C7D; --rz-series-15: #AA96CD; --rz-series-16: #73B39D; --rz-series-17: #046B8A; --rz-series-18: #49652B; --rz-series-19: #733056; --rz-series-20: #6D572C; --rz-series-21: #215385; --rz-series-22: #8A422C; --rz-series-23: #473C80; --rz-series-24: #0C5B4E; } /* ── Event log "ship's log" (alerts + compliance) ────────────────────────── Replaces the generic left-stripe cards. Events hang off a vertical spine with a severity node; the colour lives in the node + a small badge, never a full slab. Reusable: AlertsPage and ComplianceReport share these classes. */ .nc-log { position: relative; padding-left: 30px; } .nc-log::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--border), var(--border-soft)); border-radius: 2px; } .nc-log-item { position: relative; padding: 13px 0 15px; border-bottom: 1px solid var(--border-soft); } .nc-log-item:last-child { border-bottom: none; } .nc-log-node { position: absolute; left: -30px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted-2); display: grid; place-items: center; } .nc-log-node::after{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); } .nc-log-item.sev-high .nc-log-node { border-color: var(--danger); } .nc-log-item.sev-high .nc-log-node::after{ background: var(--danger); } .nc-log-item.sev-medium .nc-log-node { border-color: var(--warning); } .nc-log-item.sev-medium .nc-log-node::after{ background: var(--warning); } .nc-log-item.sev-low .nc-log-node { border-color: var(--cyan); } .nc-log-item.sev-low .nc-log-node::after{ background: var(--cyan); } .nc-log-item.sev-ok .nc-log-node { border-color: var(--success); } .nc-log-item.sev-ok .nc-log-node::after{ background: var(--success); } .nc-log-item.is-read .nc-log-node { opacity: .45; } .nc-log-line1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .nc-log-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; text-decoration: none; } a.nc-log-title:hover { color: var(--cyan-dark); text-decoration: none; } .nc-log-item.is-read .nc-log-title { color: var(--text-muted); } .nc-log-when { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .nc-log-msg { font-size: 12.5px; color: var(--text-muted); margin: 5px 0 0; line-height: 1.5; } .nc-log-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; margin-top: 7px; font-size: 11px; color: var(--muted-2); } .nc-log-meta .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; } .nc-log-meta .sep { opacity: .5; } .nc-log-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* ═══════════════════════════════════════════════════════════════════ DARK THEME (ADR-0007) — a second value set for the design tokens. The pre-paint script in App.razor stamps data-theme="dark"|"light" on from the nc-theme cookie (auto resolves via prefers-color-scheme), so this single selector is the whole theme: no per-component dark classes. --ocean/--ocean-* keep their SURFACE role (sidebar, hero, gradients stay deep navy in both themes); text roles flip via --ink/--text/--muted. ═══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { color-scheme: dark; /* native inputs, scrollbars, pickers */ /* Neutrals / surfaces — deep navy family, never pure black */ --off-white: #0B1622; /* page background */ --canvas: #0D1B2A; --surface: #122334; /* cards */ --surface-alt: #17293C; /* raised / hover */ --border: #28425B; --border-light: #1E3349; --border-soft: #1E3349; /* Text */ --text: #E8EEF4; --text-muted: #9FB4C7; --text-light: #6F8AA1; --muted: #9FB4C7; --muted-2: #7E97AC; --ink: #EAF2F8; /* headings / strong text */ --accent-strong:#1B4E79; /* solid controls lift off the dark canvas */ /* Brand accents — cyan lifts slightly for contrast on navy */ --cyan: #22C3E6; --cyan-dark: #3BC6E4; /* links / cyan buttons */ --cyan-600: #3BC6E4; --cyan-light: #155069; --cyan-xlight: #0F2E42; --cyan-50: #0F2E42; /* Semantic — statuses brighten, their tints go deep and translucent-ish */ --danger: #FF7D4D; --danger-dark: #FF9A70; --danger-light: #3C221A; --danger-50: #3C221A; --danger-border:#5A3325; --success: #1FC08F; --success-light:#11352A; --success-50: #11352A; --warning-dark: #F2B279; --warning-light:#3B2C19; --warning-50: #3B2C19; --info: #22C3E6; --info-light: #0F2E42; /* Chip/badge tint pairs */ --tint-amber-ink: #F0B983; --tint-pink: #3A1E2C; --tint-pink-ink: #F290B6; --tint-blue: #17293D; --tint-blue-ink: #9CC3E8; --tint-neutral: #1C2E3F; --tint-neutral-ink: #9FB4C7; --tint-green: #123527; --tint-green-ink: #7FD8A8; --tint-yellow: #3A2E14; --tint-yellow-ink: #EABE6C; --tint-orange: #3A2B16; --tint-orange-ink: #E9B678; --tint-red: #3A211B; --tint-red-ink: #F2A08A; --tint-cream: #1C2A3A; /* Shadows read as depth on dark only when they are darker + tighter */ --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.32); --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 4px 16px -4px rgba(0,0,0,.45); --shadow-3: 0 12px 40px -8px rgba(0,0,0,.55); --shadow-cyan: 0 4px 20px color-mix(in srgb, var(--cyan) 12%, transparent); /* Radzen (material-base derives everything from the base scale) */ --rz-base-background-color: var(--surface); --rz-body-background-color: var(--off-white); --rz-base: #21374C; --rz-base-50: #182A3C; --rz-base-100: #1B2F42; --rz-base-200: #21374C; --rz-base-300: #274056; --rz-base-400: #3E566D; --rz-base-500: #64809B; --rz-base-600: #8FA9C0; --rz-base-700: #B4C6D6; --rz-base-800: #D6E2EC; --rz-base-900: #ECF3F8; --rz-base-light: #1B2F42; /* Chart series in dark: SELECTED steps, not an automatic flip. Six of the eight clear 3:1 against the dark card surface (#122334) unchanged, so they stay put — re-stepping them would only cost hue fidelity. Violet and pink did not (2.43:1 and 2.79:1), so they are lifted, holding their hue. Re-validated in dark: band + chroma + contrast pass and the worst adjacent pair is ΔE 10.0. */ --rz-series-3: #CE5C84; /* pink, was #B43764 — 2.79:1 on this surface */ --rz-series-7: #8A6BCB; /* violet, was #6D4AA8 — 2.43:1 on this surface */ --rz-base-lighter:#182A3C; --rz-base-dark: #8FA9C0; --rz-base-darker: #ECF3F8; --rz-primary-lighter: rgba(34, 195, 230, 0.16); } /* Printable report pages are a LIGHT ISLAND by design: the .report-doc is a white "paper" document (its background is literal #fff), so its token values are pinned back to light regardless of theme — a dark-mode user still prints/reads a light doc. */ html[data-theme="dark"] .report-doc { --text:#0A2540; --text-muted:#4A6580; --text-light:#8AA4BC; --ink:#0A2540; --muted:#4A6580; --muted-2:#7E94A8; --surface:#FFFFFF; --surface-alt:#F0F5FA; --canvas:#F1F6FB; --off-white:#F8FAFC; --border:#D1E3F0; --border-light:#E8F0F7; --border-soft:#E6EEF5; --cyan:#00B4D8; --cyan-dark:#0096B7; --accent-strong:#0A2540; --danger:#FF6B35; --danger-dark:#D94F1A; --danger-light:#FFF0EB; --success:#06A77D; --warning-dark:#C97C3A; color-scheme: light; } /* Print always renders the light theme — paper is white. */ @media print { html[data-theme="dark"] { color-scheme: light; --off-white:#FFFFFF; --canvas:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F0F5FA; --border:#D1E3F0; --border-light:#E8F0F7; --border-soft:#E6EEF5; --text:#0A2540; --text-muted:#4A6580; --text-light:#8AA4BC; --ink:#0A2540; --muted:#4A6580; --muted-2:#7E94A8; --accent-strong:#0A2540; --cyan:#00B4D8; --cyan-dark:#0096B7; } } /* External embeds (VesselFinder AIS iframe, OSM map tiles) stay light — frame them. */ html[data-theme="dark"] .ais-frame, html[data-theme="dark"] .track-map { border-radius: var(--r-md); overflow: hidden; } /* ── Theme selector (user menu segmented control) ── */ .nc-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-light); } .nc-theme-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); } .nc-theme-label .material-icons { font-size: 18px; color: var(--text-muted); } .nc-theme-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 99px; overflow: hidden; background: var(--surface-alt); } .nc-theme-seg button { border: none; background: transparent; color: var(--text-muted); font-size: 11.5px; font-family: var(--font-body); padding: 4px 10px; } .nc-theme-seg button:hover { color: var(--ink); } .nc-theme-seg button.sel { background: var(--accent-strong); color: var(--on-solid); } /* ── Skeleton loading + empty states (ADR-0007 D3+D4) ── */ .skel { border-radius: var(--r-md); background: var(--border-light); animation: skel 1.1s ease-in-out infinite alternate; } @keyframes skel { from { opacity: .45; } to { opacity: .95; } } .skel-tile { height: 86px; border-radius: var(--r-lg); } .skel-row { height: 42px; margin: 10px 0; } .skel-list { padding: 8px 16px; margin-top: 4px; } .skel-hero { height: 172px; border-radius: var(--r-xl); margin-bottom: 18px; } .skel-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 18px; } .skel-card { height: 320px; border-radius: var(--r-lg); } @media (max-width: 768px) { .skel-cols { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce){ .skel { animation: none; opacity: .55; } } .empty-state .empty-title { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin: 6px 0 0; } .empty-state .empty-sub { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; } .empty-state .nc-empty-mark { color: var(--text-light); opacity: .8; } .empty-state .btn { margin-top: 14px; } /* ═══════════════════════════════════════════════════════════════════ NIGHT WATCH THEME (ADR-0007 D5) — red-only emission for on-watch use. Same rails as dark mode: nc-theme=night cookie → data-theme="night". Everything collapses to ONE warm-red ramp (scotopic vision: ~620nm+): status/urgency is carried by intensity, weight and iconography — never by hue. --ocean flips too (unlike dark mode, the sidebar must not emit blue). Small colored elements that carry inline hues (category dots, charts) and external content (AIS, map tiles, photos) are collapsed to red with per-element filters — NEVER filter html/body (breaks fixed positioning of the shell). ═══════════════════════════════════════════════════════════════════ */ html[data-theme="night"] { color-scheme: dark; /* Surfaces — near-black warm reds */ --off-white: #0F0302; --canvas: #120403; --surface: #180605; --surface-alt: #1F0907; --border: #40150F; --border-light: #2C0E09; --border-soft: #2C0E09; /* Ocean family becomes deep red (sidebar, hero, gradients) */ --ocean: #1C0705; --ocean-800: #220908; --ocean-700: #280B09; --ocean-600: #FF8E70; /* was chip-ink blue in light; ink role in night */ --ocean-600b: #331109; --g-hero: #2E0F0A; --g-lift: #331109; --g-card1: #2A0D0A; --g-card2: #3C1410; --g-slate1: #26100B; --g-slate2: #38160F; --sb-text: #E89A82; --on-solid: #FFB39C; /* dimmed warm white on solids — no white emission */ --white: #FFC9B4; /* Text — warm red-orange ramp */ --text: #FF9C80; --text-muted: #C25A44; --text-light: #8A3D2D; --muted: #C25A44; --muted-2: #A04A38; --ink: #FFB096; --accent-strong:#7E241A; /* Accents — the cyan family IS red here (links, buttons, focus, tints via the color-mix sweep all follow automatically) */ --cyan: #FF6248; --cyan-dark: #FF7E5F; --cyan-600: #FF7E5F; --cyan-light: #571812; --cyan-xlight: #2A0C08; --cyan-50: #2A0C08; /* Semantic — intensity encodes severity: danger brightest, ok dimmest */ --danger: #FF4B2E; --danger-dark: #FF8266; --danger-light: #3C120A; --danger-50: #3C120A; --danger-border:#571F12; --success: #A85640; --success-light:#26100B; --success-50: #26100B; --warning: #E8764F; --warning-dark: #F0906B; --warning-light:#33130A; --warning-50: #33130A; --info: #FF6248; --info-light: #2A0C08; /* Chip/badge tints — dark red bg, lightness-ramped inks */ --tint-amber-ink: #F0906B; --tint-pink: #38100C; --tint-pink-ink: #FF9C86; --tint-blue: #2E0F0A; --tint-blue-ink: #E8836A; --tint-neutral: #26100B; --tint-neutral-ink: #C25A44; --tint-green: #28100A; --tint-green-ink: #C97B5F; --tint-yellow: #33130A; --tint-yellow-ink: #EC9468; --tint-orange: #33130A; --tint-orange-ink: #E8895E; --tint-red: #3C120A; --tint-red-ink: #FF8A70; --tint-cream: #1D0806; /* Shadows: pure black (no colored glow) */ --shadow-sm: 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(0,0,0,.55); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --shadow-1: 0 1px 2px rgba(0,0,0,.45); --shadow-2: 0 4px 16px -4px rgba(0,0,0,.55); --shadow-3: 0 12px 40px -8px rgba(0,0,0,.6); --shadow-cyan: 0 4px 20px rgba(255,80,50,.10); /* Radzen base scale — red-tinted darks */ --rz-base-background-color: var(--surface); --rz-body-background-color: var(--off-white); --rz-base: #2A0D0A; --rz-base-50: #1F0907; --rz-base-100: #240B09; --rz-base-200: #2A0D0A; --rz-base-300: #33110C; --rz-base-400: #4A1A12; --rz-base-500: #8A3D2D; --rz-base-600: #B85843; --rz-base-700: #D97C60; --rz-base-800: #F09B7D; --rz-base-900: #FFB89E; --rz-base-light: #240B09; --rz-base-lighter:#1F0907; --rz-base-dark: #B85843; --rz-base-darker: #FFB89E; --rz-primary: #FF6248; --rz-primary-light: #FF8266; --rz-primary-lighter: rgba(255, 98, 72, 0.14); --rz-primary-dark: #E04A32; --rz-primary-darker: #B83A26; --rz-on-primary: #FFD9CC; } /* Hue-carrying content collapses to red: inline category colours, chart SVGs, external embeds and photos. Per-element only (see block comment). */ html[data-theme="night"] :is(.cat-dot, .cat-color-dot, .cal-day .mark, .rz-chart, .ais-card iframe, .track-map, img) { filter: grayscale(1) sepia(1) hue-rotate(-32deg) saturate(4) brightness(.62); } /* Printable reports in night: keep the light "paper" tokens (structure/ contrast) but dim the whole document to red on screen. Printing still renders light via the @media print reset below. */ html[data-theme="night"] .report-doc { --text:#0A2540; --text-muted:#4A6580; --text-light:#8AA4BC; --ink:#0A2540; --muted:#4A6580; --muted-2:#7E94A8; --surface:#FFFFFF; --surface-alt:#F0F5FA; --canvas:#F1F6FB; --off-white:#F8FAFC; --border:#D1E3F0; --border-light:#E8F0F7; --border-soft:#E6EEF5; --cyan:#00B4D8; --cyan-dark:#0096B7; --accent-strong:#0A2540; --danger:#FF6B35; --danger-dark:#D94F1A; --danger-light:#FFF0EB; --success:#06A77D; --warning-dark:#C97C3A; --on-solid:#FFFFFF; filter: grayscale(1) sepia(1) hue-rotate(-32deg) saturate(3) brightness(.5); } @media print { html[data-theme="night"] { color-scheme: light; --off-white:#FFFFFF; --canvas:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F0F5FA; --border:#D1E3F0; --border-light:#E8F0F7; --border-soft:#E6EEF5; --text:#0A2540; --text-muted:#4A6580; --text-light:#8AA4BC; --ink:#0A2540; --muted:#4A6580; --muted-2:#7E94A8; --accent-strong:#0A2540; --cyan:#00B4D8; --cyan-dark:#0096B7; --on-solid:#FFFFFF; --ocean:#0A2540; --sb-text:#E6EEF5; } html[data-theme="night"] .report-doc, html[data-theme="night"] :is(img) { filter: none; } } /* Topbar one-tap night toggle (wet hands at the helm) */ .nc-night-btn { background: none; border: none; color: var(--text-muted); display: grid; place-items: center; padding: 6px; border-radius: 50%; } .nc-night-btn:hover { color: var(--ink); background: var(--surface-alt); } .nc-night-btn.on { color: #FF6248; } /* Priority badge dot — currentColor follows the badge ink in every theme */ .badge .prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 3px; vertical-align: 0; } /* Bell: "For you" section (user-targeted notifications, ADR-0008) */ .nc-bell-markall { background: none; border: none; font-size: 11px; color: var(--cyan-dark); padding: 0; cursor: pointer; } .nc-bell-markall:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════ Public marketing landing page (/welcome). Scoped under .nc-land so nothing leaks into the app. Lives HERE (render-blocking app.css) — NOT in the page's HeadContent — so the landing paints already-styled (no FOUC). Deliberately light: .nc-land redefines its own tokens, so dark/night overlays don't touch it. ══════════════════════════════════════════════════════════════════════════ */ .nc-land *{box-sizing:border-box} .nc-land a{color:inherit;text-decoration:none} .nc-land section{padding:84px 0} .nc-land footer{background:var(--navy);padding:52px 0 30px;color:#fff} .nc-land{ --navy:#0A2540; --navy-2:#143A5E; --cyan:#00B4D8; --cyan-dark:#0098B8; --ink:#0A2540; --body:#4A6580; --muted:#7E94A8; --faint:#A8BCCF; --line:#E6EEF5; --line-2:#D1E3F0; --paper:#FFFFFF; --panel:#F8FAFC; --panel-2:#F1F6FB; --chip:#EAF6FC; --ok-bg:#E2F5EE; --ok:#06A77D; --err-bg:#FFEDE5; --err:#C43F17; --serif:'Crimson Pro',Georgia,'Times New Roman',serif; --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; background:var(--paper);color:var(--ink);font-family:var(--sans); -webkit-font-smoothing:antialiased;line-height:1.5} .nc-land img{max-width:100%} .nc-wrap{max-width:1180px;margin:0 auto;padding:0 40px} @keyframes ncPulse{0%{box-shadow:0 0 0 0 rgba(0,180,216,.45)}70%{box-shadow:0 0 0 9px rgba(0,180,216,0)}100%{box-shadow:0 0 0 0 rgba(0,180,216,0)}} @keyframes ncFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @media (prefers-reduced-motion:reduce){.nc-land *{animation:none!important}} .nc-land .eyebrow{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .nc-land .eyebrow.cyan{color:var(--cyan-dark)} .nc-pill{display:inline-flex;align-items:center;gap:8px;background:var(--chip);border-radius:99px;padding:6px 14px} .nc-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:0 0 auto;animation:ncPulse 2s infinite} .nc-pill .txt{font:500 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan-dark)} .nc-nav{position:sticky;top:0;z-index:50;height:72px;display:flex;align-items:center; background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nc-brand{display:flex;align-items:center;gap:11px;margin-right:44px;flex:0 0 auto} .nc-brand .name{font:600 17px/1 var(--serif);letter-spacing:.4px} .nc-brand .sub{font:400 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px} .nc-navlinks{display:flex;gap:26px} .nc-navlinks a{font:500 13.5px var(--sans);color:var(--body)} .nc-navlinks a:hover{color:var(--ink)} .nc-navcta{margin-left:auto;display:flex;gap:10px;align-items:center} .nc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px; font:500 14px var(--sans);cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap} .nc-btn.login{color:var(--body);padding:0 10px;height:38px} .nc-btn.login:hover{color:var(--ink)} .nc-btn.primary{background:var(--navy);color:#fff;padding:0 20px;height:40px} .nc-btn.primary:hover{background:#0c2c4d} .nc-btn.primary.lg{height:50px;padding:0 22px;font-size:15px} .nc-btn.cyan{background:var(--cyan);color:#fff;padding:0 32px;height:52px;font-size:15px;box-shadow:0 4px 20px rgba(0,180,216,.28)} .nc-btn.cyan:hover{background:#00a3c4} .nc-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .nc-hero{display:grid;grid-template-columns:1.05fr .95fr;border-bottom:1px solid var(--line)} .nc-hero-l{background:var(--panel);padding:74px 0;border-right:1px solid var(--line)} .nc-hero-l-in{max-width:560px;margin-left:auto;padding:0 40px} .nc-hero h1{font:400 60px/1.03 var(--serif);letter-spacing:-.018em;margin:26px 0 20px;text-wrap:balance} .nc-hero h1 em{color:var(--cyan);font-style:normal} .nc-lede{font:400 16.5px/1.66 var(--sans);color:var(--body);max-width:470px;margin:0 0 30px} .nc-waitform{display:flex;gap:9px;max-width:450px} .nc-waitform input{flex:1;height:52px;border:1px solid var(--line-2);border-radius:9px;padding:0 16px; font:400 15px var(--sans);color:var(--ink);background:#fff;min-width:0} .nc-waitform input::placeholder{color:var(--muted)} .nc-waitform input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,216,.15)} .nc-waitnote{font:400 12.5px var(--sans);color:var(--muted);margin-top:14px;max-width:450px} .nc-waitnote a{color:var(--cyan-dark);border-bottom:1px solid rgba(0,152,184,.35)} .nc-ok{display:flex;align-items:center;gap:11px;max-width:450px;background:var(--ok-bg); border:1px solid #BEE7D7;border-radius:11px;padding:16px 18px;font:500 14.5px var(--sans);color:#04795a} .nc-ok svg{flex:0 0 auto} .nc-formerr{display:flex;align-items:center;gap:8px;max-width:450px;background:var(--err-bg); border:1px solid #F6C9B6;border-radius:9px;padding:10px 14px;margin-bottom:12px;font:500 13px var(--sans);color:var(--err)} .nc-social{display:flex;align-items:center;gap:11px;margin-top:34px;max-width:450px} .nc-social .av{width:34px;height:34px;border-radius:9px;background:var(--navy);display:grid;place-items:center;flex:0 0 auto} .nc-social .t{font:400 12.5px/1.5 var(--sans);color:var(--muted)} .nc-social .t b{color:var(--ink);font-weight:600} .nc-hero-r{background:linear-gradient(165deg,#F4FAFD 0%,#E7F4FB 55%,#DAEEF8 100%); position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:56px 44px} .nc-gridbg{position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:linear-gradient(#BBD8EA 1px,transparent 1px),linear-gradient(90deg,#BBD8EA 1px,transparent 1px); background-size:46px 46px} .nc-glow{position:absolute;border-radius:50%;pointer-events:none} .nc-glow.a{top:-70px;right:-50px;width:320px;height:320px;background:radial-gradient(circle,rgba(0,180,216,.16),transparent 65%)} .nc-glow.b{bottom:-90px;left:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(10,37,64,.06),transparent 70%)} .nc-shot{position:relative;z-index:2;width:100%;max-width:470px;background:#fff;border:1px solid var(--line); border-radius:16px;box-shadow:0 16px 50px rgba(10,37,64,.16);overflow:hidden} .nc-shot-img{aspect-ratio:16/10;background-color:var(--panel);background-position:top center;background-size:cover;background-repeat:no-repeat; background-image:repeating-linear-gradient(135deg,#F8FAFC,#F8FAFC 12px,#F3F8FC 12px,#F3F8FC 24px)} .nc-builtfor{background:#fff;border-bottom:1px solid var(--line);padding:24px 0} .nc-builtfor .row{display:flex;align-items:center} .nc-builtfor .lab{font:400 11px var(--sans);color:var(--faint);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;margin-right:40px;flex:0 0 auto} .nc-builtfor .set{display:flex;gap:40px;flex-wrap:wrap} .nc-builtfor .set span{font:600 14px var(--serif);color:#C2D2E0;letter-spacing:.5px} .nc-panel{background:var(--panel);border-top:1px solid var(--line)} .nc-white{background:#fff;border-top:1px solid var(--line)} .nc-sechead{max-width:640px;margin-bottom:44px} .nc-sechead h2{font:400 40px/1.06 var(--serif);letter-spacing:-.01em;margin:12px 0 0;text-wrap:balance} .nc-sechead p{font:400 15.5px/1.7 var(--sans);color:var(--body);margin:16px 0 0;max-width:640px} .nc-prompts{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px} .nc-prompt{font:400 13px var(--sans);color:var(--cyan-dark);background:#fff;border:1px solid var(--line-2);border-radius:99px;padding:8px 15px} .nc-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px} .nc-mcap{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px} .nc-mcap .ico{width:40px;height:40px;border-radius:10px;background:var(--chip);display:grid;place-items:center;margin-bottom:14px} .nc-mcap h4{font:500 15px var(--sans);margin:0 0 7px;color:var(--ink)} .nc-mcap p{font:400 13px/1.6 var(--sans);color:var(--body);margin:0} .nc-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} /* Landing feature cards — scoped to .nc-land so this light "#fff" card does NOT clobber the app-wide .nc-card (dashboard/alerts/search/agent widgets), which would otherwise win by source order over the base rule AND the dark/night theme overlays → white cards in dark/night. */ .nc-land .nc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 28px;transition:.18s} .nc-land .nc-card:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(10,37,64,.08);border-color:var(--line-2)} .nc-land .nc-card .ico{width:44px;height:44px;border-radius:10px;background:var(--chip);display:grid;place-items:center;margin-bottom:18px} .nc-land .nc-card h3{font:500 16px var(--sans);margin:0 0 9px} .nc-land .nc-card p{font:400 13.5px/1.62 var(--sans);color:var(--body);margin:0} .nc-split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center} .nc-split h2{font:400 40px/1.06 var(--serif);letter-spacing:-.01em;margin:12px 0 0;text-wrap:balance} .nc-split p.lead{font:400 15.5px/1.7 var(--sans);color:var(--body);margin:16px 0 0} .nc-platform-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start} .nc-pstat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px} .nc-pstat .n{font:500 21px/1.15 var(--serif);color:var(--ink);margin-bottom:6px} .nc-pstat .l{font:400 12.5px/1.45 var(--sans);color:var(--muted)} .nc-checks{display:flex;flex-direction:column;gap:13px;margin-top:26px} .nc-check{display:flex;gap:12px;align-items:flex-start} .nc-check .tick{width:22px;height:22px;border-radius:50%;background:var(--chip);display:grid;place-items:center;flex:0 0 auto;margin-top:1px} .nc-check span{font:400 14.5px/1.55 var(--sans);color:var(--body)} .nc-tag-new{display:inline-block;background:var(--cyan);color:#fff;font:600 9px var(--sans);letter-spacing:.08em; text-transform:uppercase;padding:2px 7px;border-radius:99px;vertical-align:middle;margin-left:2px} .nc-chat{background:var(--navy);border-radius:18px;padding:24px;box-shadow:0 12px 44px rgba(10,37,64,.24);position:relative;overflow:hidden} .nc-chat .lab{font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(202,233,255,.4);margin-bottom:16px;position:relative;z-index:1} .nc-bubble{position:relative;z-index:1;border-radius:12px;padding:13px 15px;margin-bottom:10px;font:400 13.5px/1.55 var(--sans)} .nc-bubble.user{background:var(--cyan);color:#fff;margin-left:auto;max-width:78%;border-bottom-right-radius:4px} .nc-bubble.bot{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#EAF4FB;max-width:90%;border-bottom-left-radius:4px} .nc-bubble.bot b{color:#fff} .nc-draft{position:relative;z-index:1;background:rgba(255,255,255,.055);border:1px solid rgba(0,180,216,.28);border-radius:12px;padding:15px 16px;margin-bottom:10px} .nc-draft .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px} .nc-draft .wopill{font:500 9.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8FD6EA;background:rgba(0,180,216,.14);border:1px solid rgba(0,180,216,.28);border-radius:99px;padding:3px 9px} .nc-draft .cost{font:500 13px var(--mono);color:#fff;font-variant-numeric:tabular-nums} .nc-draft .wotitle{font:500 15px var(--serif);color:#fff;margin-bottom:11px} .nc-draft ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px} .nc-draft li{font:400 12.5px var(--sans);color:rgba(202,233,255,.78);padding-left:19px;position:relative} .nc-draft li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:3px;border:1.5px solid rgba(0,180,216,.5)} .nc-draft .acts{display:flex;gap:8px;justify-content:flex-end} .nc-wobtn{font:500 12px var(--sans);border-radius:7px;padding:7px 15px;border:1px solid transparent} .nc-wobtn.decline{background:transparent;color:rgba(202,233,255,.6);border-color:rgba(255,255,255,.16)} .nc-wobtn.approve{background:var(--cyan);color:#fff} .nc-chat .ask{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:10px 16px} .nc-chat .ask .ph{font:400 13px var(--sans);color:rgba(202,233,255,.4)} .nc-chat .ask .send{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;flex:0 0 auto} .nc-ex{font:400 11px var(--mono);color:var(--muted);margin-top:12px;text-align:center} .nc-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .nc-gal figure{margin:0} .nc-gal .nc-shot{max-width:none} .nc-gal .nc-shot-img{aspect-ratio:4/3;background-size:cover} .nc-gal .nc-shot.phone .nc-shot-img{background-size:contain;background-position:center;background-color:#0b2b4d} .nc-gal figcaption{font:400 12.5px var(--sans);color:var(--muted);margin-top:12px} .nc-gal figcaption b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px;font-size:13.5px} .nc-mission{max-width:760px;margin:0 auto;text-align:center} .nc-mission blockquote{font:300 29px/1.4 var(--serif);letter-spacing:-.01em;margin:20px 0 26px;text-wrap:balance} .nc-sig{display:flex;align-items:center;justify-content:center;gap:13px} .nc-sig .t{text-align:left} .nc-sig .t b{font:500 14px var(--sans)} .nc-sig .t span{font:400 12px var(--sans);color:var(--muted)} .nc-cta{background:var(--panel-2);border-top:1px solid var(--line);text-align:center} .nc-cta h2{font:400 48px/1.05 var(--serif);letter-spacing:-.015em;margin:12px 0 14px;text-wrap:balance} .nc-cta p{font:400 15px var(--sans);color:var(--body);margin:0 auto 30px;max-width:470px} .nc-cta .nc-waitform{margin:0 auto} .nc-cta .nc-ok{margin:0 auto} .nc-fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:40px} .nc-fbrand .name{font:600 15px var(--serif);letter-spacing:.3px} .nc-fbrand p{font:400 13px/1.6 var(--sans);color:rgba(202,233,255,.45);max-width:220px;margin:12px 0 0} .nc-fcol h4{font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(202,233,255,.38);margin:0 0 14px} .nc-fcol a{display:block;font:400 13.5px var(--sans);color:rgba(202,233,255,.6);margin-bottom:9px} .nc-fcol a:hover{color:#fff} .nc-fbot{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px} .nc-fbot .cr{font:400 12px var(--sans);color:rgba(202,233,255,.3)} @media (max-width:900px){ .nc-wrap{padding:0 22px} .nc-hero{grid-template-columns:1fr} .nc-hero-l{padding:52px 0;border-right:none} .nc-hero-l-in{padding:0 22px;margin:0;max-width:none} .nc-hero-r{padding:40px 22px} .nc-hero h1{font-size:44px} .nc-split,.nc-feat,.nc-gal,.nc-mgrid{grid-template-columns:1fr;gap:20px} .nc-platform-stats{grid-template-columns:1fr 1fr} .nc-navlinks{display:none} .nc-fcols{grid-template-columns:1fr 1fr;gap:28px} .nc-cta h2{font-size:34px} } /* ── Maintenance passport — the public document (ADR-0021) ───────────────────────────────────── The only NAUTICORE surface read by someone who is NOT a customer: a buyer, an insurer, a surveyor. It must read as a SHIP'S DOCUMENT, not as a dashboard. Three rules, and they are the reason this block looks sparse: 1. NO filled slabs and NO left colour stripes. Colour appears as a small NODE or a dot, never as a tint behind text — the same principle that retired the left-stripe alert cards for the ship's log (.nc-log) in v1.15.0. 2. Hairlines and whitespace do the separating, not boxes and radii. 3. Colour is spent on ONE thing: what has been verified. Everything else is ink and grey, so the eye lands on evidence instead of on decoration. It lives inside .report-doc, whose tokens are pinned to light in dark mode — so use TOKENS here, never literal hex, and it stays correct on screen, in dark mode and on paper. */ .nc-pp-bar-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); letter-spacing: .01em; } /* The document itself sits on more generous paper than a report. */ .nc-pp { padding: 40px 46px 34px; } .nc-pp .report-head { border-bottom-width: 1px; } /* Small-caps label voice, used for every field name in the document. */ .nc-pp-label { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-light); font-weight: 600; } /* ── Identification: a definition list, not a card grid ───────────────────────────────────── */ .nc-pp-id { display: flex; flex-wrap: wrap; gap: 4px 44px; padding: 18px 0 20px; border-bottom: 1px solid var(--border-light); } .nc-pp-id-item { min-width: 118px; } .nc-pp-id-value { display: block; font-size: 14px; color: var(--ink); margin-top: 3px; } /* ── Key figures: hairline-separated, no fills ────────────────────────────────────────────── */ .nc-pp-kpis { display: flex; flex-wrap: wrap; margin: 22px 0 6px; } .nc-pp-kpi { flex: 1 1 130px; padding: 0 22px; border-left: 1px solid var(--border-light); } .nc-pp-kpi:first-child { padding-left: 0; border-left: none; } .nc-pp-kpi-value { font-family: var(--font-display); font-size: 27px; line-height: 1.15; color: var(--ink); font-weight: 400; } .nc-pp-kpi-label { margin-top: 4px; } /* ── Section headings: a rule the width of the page, label above it ───────────────────────── */ .nc-pp-section { margin: 40px 0 0; padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-family: var(--font-body); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); font-weight: 700; } .nc-pp-lede { font-size: 13px; color: var(--text-muted); margin: 12px 0 0; } /* ── Mandatory items: hairline table, status as a dot + word (never a pill) ───────────────── */ .nc-pp-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; } .nc-pp-table th { text-align: left; padding: 0 12px 8px 0; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-light); font-weight: 600; border-bottom: 1px solid var(--border-light); } .nc-pp-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: top; } .nc-pp-table tr:last-child td { border-bottom: none; } .nc-pp-ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); } .nc-pp-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .nc-pp-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; } .nc-pp-state.is-late::before { background: var(--danger); } .nc-pp-state.is-late { color: var(--danger-dark); } /* ── Service record: entries hang off a spine, like the ship's log ────────────────────────── */ .nc-pp-record { position: relative; margin-top: 6px; padding-left: 116px; } .nc-pp-record::before { content: ""; position: absolute; left: 96px; top: 16px; bottom: 10px; width: 1px; background: var(--border-light); } .nc-pp-entry { position: relative; padding: 18px 0; border-bottom: 1px solid var(--border-light); break-inside: avoid; } .nc-pp-entry:last-child { border-bottom: none; } /* The date sits OUTSIDE the spine, in the margin — the ledger reading order. */ .nc-pp-date { position: absolute; left: -116px; top: 20px; width: 78px; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: -.02em; } .nc-pp-node { position: absolute; left: -23px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--text-light); } .nc-pp-entry.is-verified .nc-pp-node { border-color: var(--success); background: var(--success); } .nc-pp-entry.is-mandatory .nc-pp-node { border-color: var(--ink); } .nc-pp-title { font-family: var(--font-display); font-size: 17px; color: var(--ink); font-weight: 600; line-height: 1.3; } .nc-pp-mand { margin-left: 8px; font-family: var(--font-body); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 700; vertical-align: 2px; } .nc-pp-meta { margin-top: 5px; font-size: 12.5px; color: var(--text-muted); } .nc-pp-by { color: var(--ink); } .nc-pp-sep { color: var(--border); margin: 0 7px; } /* Attribution as a MARK, not a chip: the passport's document voice for the same words the app shows as .attr-chip. One component decides the wording (AttributionChip); only the dress differs. */ .attr-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-light); white-space: nowrap; } .attr-mark::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .attr-mark.attr-ok { color: var(--success); } /* Observations: indented quiet prose. NO background, NO left stripe. */ .nc-pp-note { margin-top: 9px; font-family: var(--font-display); font-size: 14px; line-height: 1.6; color: var(--text-muted); font-style: italic; max-width: 62ch; } .nc-pp-photos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; } .nc-pp-photos img { width: 74px; height: 74px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border-light); display: block; } /* ── Colophon: what the document is, and what it is not ───────────────────────────────────── */ .nc-pp-foot { margin-top: 44px; padding-top: 20px; border-top: 2px solid var(--ink); } .nc-pp-foot-cols { display: flex; flex-wrap: wrap; gap: 26px 46px; } .nc-pp-foot-col { flex: 1 1 260px; } .nc-pp-foot h4 { margin: 0 0 7px; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); font-weight: 700; } .nc-pp-foot p { margin: 0; font-family: var(--font-display); font-size: 13.5px; line-height: 1.65; color: var(--text-muted); } .nc-pp-colophon { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border-light); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-light); letter-spacing: -.01em; } /* ── The three "this link doesn't open" states ────────────────────────────────────────────── */ .nc-pp-msg { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--canvas); } .nc-pp-msg-card { max-width: 400px; text-align: center; color: var(--ink); } .nc-pp-msg-card h1 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 16px 0 10px; } .nc-pp-msg-card p { color: var(--text-muted); line-height: 1.65; font-size: 13.5px; margin: 0; } @media (max-width: 700px) { .nc-pp { padding: 26px 20px 24px; } .nc-pp-record { padding-left: 22px; } .nc-pp-record::before { left: 3px; } .nc-pp-date { position: static; width: auto; text-align: left; display: block; margin-bottom: 4px; } .nc-pp-node { left: -22px; top: 22px; } .nc-pp-kpi { flex-basis: 50%; padding: 10px 14px; border-left: none; border-top: 1px solid var(--border-light); } .nc-pp-kpi:first-child { padding-left: 14px; } }