/* Desktop design tokens and shared components. One sheet, linked by every layout, for the pieces the design guide fixes: the tile (kpi-card), the notice, figures, selects, action menus, section spacing, row states and the How it works button. Overrides scoped to .desktop-ui (set on every desktop ) restyle legacy Metronic alert-* boxes, dashed borders and native selects so the old look cannot come back while the views are swept. Mobile CSS is untouched. See .claude/skills/desktop-component/SKILL.md before changing anything here. */ :root { --mt-blue: #1238FF; /* Bold blue: primary, links, default figure */ --mt-midnight: #002953; /* Midnight: text inside shared components */ --mt-text2: #51708C; /* secondary text, muted figures */ --mt-border: #E8E9F2; /* hairline */ --mt-red: #F8285A; /* blocked states only */ --mt-row: #EEF1FF; /* current row tint */ --mt-green: #17c653; /* money in your favour */ --mt-amber: #f69600; /* needs attention */ --mt-font: "Manrope", sans-serif; --mt-figure: 28px; --mt-section: 32px; --mt-radius: 10px; } /* ---- section spacing: 32px between major blocks (header, tiles, filters, table/form) ---- */ .page-section { margin-bottom: var(--mt-section); } /* ---- figures and tables ---- */ .tabular { font-variant-numeric: tabular-nums; } .money-zero { color: var(--mt-text2); } .desktop-ui .table tbody tr.is-current > td { background: var(--mt-row); } .desktop-ui .table tbody tr.is-future > td { color: var(--mt-text2); } .desktop-ui .table tbody tr.is-future > td .badge { opacity: .7; } /* ---- KPI card container ---- */ .kpi-card { height: 100%; background: #ffffff; border: 1px solid rgba(0,41,83,0.08); border-radius: 22px; padding: 22px 22px 16px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,41,83,0.35); border-color: rgba(18,56,255,0.25); } /* a tile placed beside a filter row rather than in a grid column */ .kpi-inline { min-width: 220px; height: auto; } /* ---- header: title + icon ---- */ .kpi-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .kpi-title { font-family: var(--mt-font); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--mt-midnight); } /* ---- coloured icon tile (top-right) ---- */ .kpi-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: #eaeeff; /* default: Blue soft */ color: var(--mt-blue); } .kpi-icon.teal { background: #e0f3f3; color: #2f8f8f; } .kpi-icon.icterine { background: #f4fad6; color: #7a8a1f; } .kpi-icon.mid { background: rgba(0,41,83,0.07); color: var(--mt-midnight); } /* ---- amount: 28px, Bold blue by default; green = money in your favour, amber = attention, muted = zero or empty ---- */ .kpi-amount { font-family: var(--mt-font); font-size: var(--mt-figure) !important; line-height: 1; font-weight: 700 !important; color: var(--mt-blue); display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; } .kpi-amount .cur { font-size: 19px; color: currentColor; opacity: .55; } .kpi-amount.green { color: var(--mt-green); } .kpi-amount.amber { color: var(--mt-amber); } .kpi-amount.muted { color: var(--mt-text2); } .kpi-refresh { margin-left: 6px; align-self: center; color: rgba(0,41,83,0.35); transition: color .15s; } .kpi-refresh:hover { color: var(--mt-blue); } /* ---- caption ---- */ .kpi-caption { font-family: var(--mt-font); font-size: 13px; font-weight: 500; color: rgba(0,41,83,0.6); margin-top: 9px; } .kpi-caption b { color: var(--mt-midnight); font-weight: 700; } /* ---- separator + footer ---- */ .kpi-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(0,41,83,0.08); } .kpi-link { font-family: var(--mt-font); font-size: 13px; font-weight: 600; color: rgba(0,41,83,0.6); text-decoration: none; transition: color .15s; } .kpi-card:hover .kpi-link { color: var(--mt-blue); } /* ---- arrow button (bottom-right corner) ---- */ .kpi-arrow { width: 28px; height: 28px; border-radius: 9px; border: 1px solid rgba(0,41,83,0.08); background: #ffffff; display: grid; place-items: center; color: var(--mt-midnight); flex-shrink: 0; transition: background .15s, color .15s, border-color .15s; } .kpi-card:hover .kpi-arrow { background: var(--mt-blue); color: #ffffff; border-color: var(--mt-blue); } /* ---- inline stat: a lone figure in a header band instead of a stranded tile ---- */ .inline-stat { display: flex; flex-direction: column; gap: 4px; } .inline-stat-label { font-family: var(--mt-font); font-size: 13px; font-weight: 600; color: var(--mt-text2); } .inline-stat-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .inline-stat-caption { font-family: var(--mt-font); font-size: 13px; font-weight: 500; color: rgba(0,41,83,0.6); } /* ---- Profit tile before/after tax toggle (top-right of the header) ---- */ .kpi-toggle { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(0,41,83,0.06); flex-shrink: 0; } .kpi-toggle button { font-family: var(--mt-font); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 5px 9px; border: 0; border-radius: 999px; background: transparent; color: rgba(0,41,83,0.6); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .kpi-toggle button:hover { color: var(--mt-midnight); } .kpi-toggle button.active { background: #ffffff; color: var(--mt-midnight); box-shadow: 0 1px 3px rgba(0,41,83,0.15); } /* ---- Notice (Components/Shared/Notice.razor, Views/Shared/Component/Notice.cshtml) ---- White, hairline border, 10px radius, 4px left bar: blue for information, red only when the user is blocked. No icon. Two sentences at most. */ .notice-box { background: #ffffff; border: 1px solid var(--mt-border); border-left: 4px solid var(--mt-blue); border-radius: var(--mt-radius); padding: 14px 18px; font-family: var(--mt-font); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--mt-midnight); } .notice-box.notice-box-blocked { border-left-color: var(--mt-red); } .notice-box-title { font-weight: 700; margin-bottom: 2px; } .notice-box a { color: var(--mt-blue); font-weight: 600; } .notice-box a:hover { color: var(--mt-blue); text-decoration: underline; } /* legacy: alert-* boxes and the blue "notice" disclaimer panels render the notice look until each view is swept onto the component */ .desktop-ui .alert:is(.alert-primary, .alert-info, .alert-success, .alert-warning, .alert-danger, .alert-light-primary, .alert-light-warning, .alert-secondary), .desktop-ui .notice:is(.bg-light-primary, .bg-light-warning, .bg-light-info, .bg-light-success, .bg-light-danger) { background: #ffffff !important; border: 1px solid var(--mt-border) !important; border-left: 4px solid var(--mt-blue) !important; border-radius: var(--mt-radius) !important; color: var(--mt-midnight) !important; } .desktop-ui .alert:is(.alert-warning, .alert-danger), .desktop-ui .notice:is(.bg-light-warning, .bg-light-danger) { border-left-color: var(--mt-red) !important; } .desktop-ui .alert > i.bi, .desktop-ui .alert > i.ki-duotone, .desktop-ui .alert > i.fas, .desktop-ui .alert > svg, .desktop-ui .alert > span.svg-icon, .desktop-ui .notice > i, .desktop-ui .notice > span.svg-icon { display: none; } .desktop-ui .alert a, .desktop-ui .notice a { color: var(--mt-blue); } .desktop-ui .alert .text-warning, .desktop-ui .alert .text-danger, .desktop-ui .alert .text-primary, .desktop-ui .alert .text-success { color: var(--mt-midnight) !important; } /* ---- row separators: solid hairlines only ---- */ .desktop-ui .border-dashed { border-style: solid !important; border-color: var(--mt-border) !important; } .desktop-ui .border-bottom-dashed { border-bottom-style: solid !important; border-bottom-color: var(--mt-border) !important; } .desktop-ui .border-top-dashed { border-top-style: solid !important; border-top-color: var(--mt-border) !important; } .desktop-ui .table.table-row-dashed > :not(caption) > * > * { border-bottom-style: solid; border-bottom-color: var(--mt-border); } .desktop-ui .separator.separator-dashed { border-bottom-style: solid; border-bottom-color: var(--mt-border); } /* ---- styled select: every form-select on desktop, including the small and solid variants ---- */ .desktop-ui .form-select { border: 1px solid var(--mt-border); border-radius: 8px; background-color: #ffffff; color: var(--mt-midnight); box-shadow: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2351708C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; } .desktop-ui .form-select.form-select-solid { background-color: #ffffff; } .desktop-ui .form-select:focus { border-color: var(--mt-blue); box-shadow: 0 0 0 3px rgba(18,56,255,0.15); } .desktop-ui .form-select:disabled { color: var(--mt-text2); background-color: #f9f9fc; } /* ---- action menus: anchored to their trigger, at most 260px wide ---- */ .desktop-ui .menu-sub-dropdown { max-width: 260px; border-radius: var(--mt-radius); box-shadow: 0 10px 30px -10px rgba(0,41,83,0.25); border: 1px solid var(--mt-border); } .desktop-ui .menu-sub-dropdown .menu-link { white-space: normal; } .action-menu .menu-item.action-menu-destructive { border-top: 1px solid var(--mt-border); margin-top: 4px; padding-top: 4px; } /* ---- How it works: one fixed size on every screen ---- */ .btn-how-it-works { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--mt-font); font-size: 13px; font-weight: 600; line-height: 1; } .btn-how-it-works .bi { font-size: 14px; } /* ---- headers, pills: Manrope + Midnight inside the shared components only ---- */ .page-header-title, .page-banner-title { font-family: var(--mt-font); } .page-header-title { color: var(--mt-midnight); } .status-pill { font-family: var(--mt-font); } /* ---- Wizard rail (Components/Shared/Wizard/WizardShell.razor) ---- Metronic's stepper already styles current and completed; this adds the "pending" state a visited-but-incomplete step uses (amber), so no consumer needs inline hex. */ .stepper.stepper-pills .stepper-item .stepper-icon .stepper-pending { display: none; } .stepper.stepper-pills .stepper-item.pending .stepper-icon { background-color: var(--bs-warning-light, #fff8dd); border-color: var(--bs-warning-light, #fff8dd); } .stepper.stepper-pills .stepper-item.pending .stepper-icon .stepper-number, .stepper.stepper-pills .stepper-item.pending .stepper-icon .stepper-check { display: none; } .stepper.stepper-pills .stepper-item.pending .stepper-icon .stepper-pending { display: inline; color: var(--bs-warning, #ffc700); } /* ---- File dropzone (Components/DevelopmentCase/DevelopmentCaseFilePicker.razor) ---- The native file input is stretched invisibly over the panel, so a click anywhere opens the picker and a drop lands on the input itself and fires its change event: no JavaScript, and the same Blazor InputFile path as choosing files. Solid hairline, never dashed. */ .dc-dropzone { position: relative; border: 1px solid var(--mt-border); border-radius: 10px; padding: 16px; text-align: center; background: #fff; transition: border-color .15s, background-color .15s; } .dc-dropzone:hover:not(.is-disabled), .dc-dropzone.is-dragging { border-color: var(--mt-blue); background: var(--mt-row); } .dc-dropzone.is-disabled { opacity: .6; } .dc-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dc-dropzone-input:disabled { cursor: default; } .dc-dropzone-body { pointer-events: none; }