/* ========================================================================= CBC Product Registry — design system Palette pulled directly from cbcinc.ai: primary blue #1847AB, deep blue #043295, accent #5084E0. Typography: DM Sans (same as the public site). Two themes driven by data-theme on . ========================================================================= */ :root, [data-theme="light"] { --brand: #1847AB; /* CBC primary blue */ --brand-hover: #0f3689; --brand-deep: #043295; /* CBC deep blue (gradient end) */ --accent: #5084E0; /* light blue — used in gradients */ --accent-hover: #3b6dd1; --bg: #f5f7fa; --bg-elev: #ffffff; --surface: #ffffff; --surface-alt: #f1f2f3; /* cbcinc.ai neutral grey */ --text: #1a1a1a; --text-muted: #56617a; --text-subtle: #8a95a9; --border: #e5e7eb; --border-strong:#c6cbd4; --danger: #dc2626; --danger-bg: #fef2f2; --danger-border:#fecaca; --success: #047857; --success-bg: #ecfdf5; --success-border:#a7f3d0; --warning: #b45309; --warning-bg: #fffbeb; --warning-border:#fde68a; --info: #1d4ed8; --info-bg: #eff6ff; --info-border: #bfdbfe; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; } [data-theme="dark"] { --brand: #6a95f0; /* lighter CBC blue for dark bg */ --brand-hover: #88abf3; --brand-deep: #2b52b4; --accent: #88abf3; --accent-hover: #a7c1f7; --bg: #0b1020; --bg-elev: #101730; --surface: #131b36; --surface-alt: #19223e; --text: #e6ecf5; --text-muted: #94a3b8; --text-subtle: #64748b; --border: #1f2a44; --border-strong:#2a3657; --danger: #f87171; --danger-bg: #2a1414; --danger-border:#5a1f1f; --success: #34d399; --success-bg: #0e2a21; --success-border:#1e4f3c; --warning: #fbbf24; --warning-bg: #2a1f08; --warning-border:#5a421a; --info: #60a5fa; --info-bg: #0e1d33; --info-border: #1e3a6b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.2s ease, color 0.2s ease; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } ::selection { background: rgba(24, 71, 171, 0.22); color: #fff; } /* ===================================================================== TOP BAR ===================================================================== */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0 28px; height: 62px; backdrop-filter: saturate(180%) blur(8px); } .brand { display: flex; align-items: center; gap: 14px; } .brand-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; } .brand-link:hover .brand-logo { opacity: 0.88; } .brand-logo { height: 36px; width: auto; display: block; transition: opacity 0.15s ease; /* Subtle brightness bump on dark theme so the logo doesn't look flat */ filter: none; } [data-theme="dark"] .brand-logo { filter: brightness(1.25) contrast(1.05); } .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; box-shadow: var(--shadow-sm); } .brand-divider { width: 1px; height: 24px; background: var(--border-strong); margin: 0 2px; } .brand a { font-weight: 600; color: var(--text); font-size: 15px; letter-spacing: -0.005em; } .brand a:hover { color: var(--brand); } .nav { display: flex; gap: 4px; align-items: center; } .nav-link { color: var(--text-muted); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { color: var(--text); background: var(--surface-alt); } .nav-link.is-active { color: var(--brand); background: var(--surface-alt); } /* Theme toggle button */ .icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .icon-btn:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border); } .icon-btn svg { width: 18px; height: 18px; } [data-theme="light"] .icon-btn .icon-moon { display: block; } [data-theme="light"] .icon-btn .icon-sun { display: none; } [data-theme="dark"] .icon-btn .icon-moon { display: none; } [data-theme="dark"] .icon-btn .icon-sun { display: block; } /* ===================================================================== USER MENU (avatar + dropdown) ===================================================================== */ .user-menu { position: relative; margin-left: 8px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; font-weight: 600; font-size: 14px; display: grid; place-items: center; cursor: pointer; border: 2px solid transparent; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; user-select: none; } .avatar:hover { box-shadow: 0 0 0 4px rgba(24, 71, 171, 0.18); } .avatar:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(24, 71, 171, 0.28); } .user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .user-menu[data-open="true"] .user-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-dropdown-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .user-dropdown-name { font-weight: 600; color: var(--text); font-size: 14px; margin: 0 0 2px; } .user-dropdown-email { color: var(--text-muted); font-size: 12.5px; margin: 0 0 8px; word-break: break-all; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; cursor: pointer; width: 100%; background: transparent; border: none; font-family: inherit; text-align: left; } .user-dropdown-item:hover { background: var(--surface-alt); color: var(--text); } .user-dropdown-item svg { width: 16px; height: 16px; color: var(--text-muted); } .user-dropdown-item.is-danger { color: var(--danger); } .user-dropdown-item.is-danger svg { color: var(--danger); } /* Role pill */ .role { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .role-admin { background: rgba(4, 50, 149, 0.10); color: var(--brand-deep); } [data-theme="dark"] .role-admin { background: rgba(106, 149, 240, 0.14); color: var(--brand); } .role-user { background: rgba(24, 71, 171, 0.08); color: var(--brand); } [data-theme="dark"] .role-user { background: rgba(106, 149, 240, 0.14); color: var(--brand); } /* ===================================================================== LAYOUT ===================================================================== */ .container { max-width: 1120px; margin: 0 auto; padding: 28px 28px 40px; } .footer { text-align: center; color: var(--text-subtle); padding: 28px 0 40px; font-size: 12.5px; border-top: 1px solid var(--border); margin-top: 40px; } .footer a { color: var(--text-muted); font-weight: 500; } .footer a:hover { color: var(--brand); } .page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; } .page-head .subtitle { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; } .actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ===================================================================== CARDS & SECTIONS ===================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin: 14px 0; box-shadow: var(--shadow-sm); } .card h2 { margin-top: 0; margin-bottom: 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; } .description { color: var(--text-muted); margin: 0 0 12px; } .meta { color: var(--text-muted); font-size: 12.5px; margin-top: 24px; } .muted { color: var(--text-muted); } /* ===================================================================== FLASH MESSAGES ===================================================================== */ .flash { padding: 11px 16px; border-radius: var(--radius-md); margin-bottom: 14px; border: 1px solid; font-size: 14px; } .flash-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .flash-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .flash-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); } .flash-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } /* ===================================================================== BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; } .btn:hover { background: var(--surface-alt); border-color: var(--text-subtle); text-decoration: none; color: var(--text); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 1px 2px rgba(4, 50, 149, 0.15); } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; box-shadow: 0 4px 14px rgba(4, 50, 149, 0.28); } .btn-accent { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); } .btn-accent:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); } .btn-danger:hover { background: var(--danger-bg); color: var(--danger); } .btn-sm { padding: 5px 10px; font-size: 13px; } .btn-block { display: flex; width: 100%; justify-content: center; } /* ===================================================================== TABLES ===================================================================== */ .data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; } .data-table thead { background: var(--surface-alt); } .data-table th { font-weight: 600; color: var(--text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; } .data-table tbody tr { transition: background 0.1s ease; } .data-table tbody tr:hover { background: var(--surface-alt); } .data-table tbody tr:last-child td { border-bottom: none; } /* ===================================================================== FORMS ===================================================================== */ .form fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; background: var(--surface); margin-bottom: 16px; box-shadow: var(--shadow-sm); } .form legend { padding: 0 8px; font-weight: 600; color: var(--text); font-size: 14px; } .form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); } .form label > input, .form label > textarea, .form label > select { display: block; width: 100%; margin-top: 6px; color: var(--text); } .form input, .form textarea, .form select { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(24, 71, 171, 0.18); } .form input::placeholder, .form textarea::placeholder { color: var(--text-muted); opacity: 0.45; } .search input::placeholder { color: var(--text-muted); opacity: 0.45; } .form .row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; } .form .row > label { flex: 1; min-width: 180px; } .form .row > input { flex: 1; min-width: 180px; } .form-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } /* ===================================================================== LOGIN — CBC branded hero + card ===================================================================== */ .login-wrapper { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 40px 20px; position: relative; overflow: hidden; } /* Subtle deep-blue glow background, inspired by cbcinc.ai's dark hero */ .login-wrapper::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 18% 22%, rgba(24, 71, 171, 0.10), transparent 60%), radial-gradient(55% 45% at 82% 78%, rgba(4, 50, 149, 0.10), transparent 60%); z-index: 0; pointer-events: none; } .login-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 36px 32px; box-shadow: var(--shadow-lg); text-align: left; } .login-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; } .login-card .subtitle { margin: 0 0 24px; color: var(--text-muted); font-size: 14px; } .login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .login-logo img { height: 48px; width: auto; display: block; } .login-logo .login-logo-fallback { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: 0.02em; } .login-tag { display: block; font-size: 11px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 2px; } .btn-microsoft { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; background: #2f2f2f; color: #fff; border: 1px solid #2f2f2f; border-radius: var(--radius-md); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; transition: background 0.15s ease; } .btn-microsoft:hover { background: #1a1a1a; color: #fff; } .btn-microsoft .ms-logo { width: 18px; height: 18px; flex-shrink: 0; } [data-theme="dark"] .btn-microsoft { background: #f3f3f3; color: #2f2f2f; border-color: #f3f3f3; } [data-theme="dark"] .btn-microsoft:hover { background: #ffffff; color: #1a1a1a; } .divider { display: flex; align-items: center; gap: 12px; color: var(--text-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 22px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ===================================================================== MISC ===================================================================== */ .kv { display: grid; grid-template-columns: 180px 1fr; row-gap: 10px; margin: 0; } .kv dt { color: var(--text-muted); font-size: 13px; font-weight: 500; } .kv dd { margin: 0; color: var(--text); } .url-list { list-style: none; padding: 0; margin: 0; } .url-list li { padding: 8px 0; border-bottom: 1px dashed var(--border); } .url-list li:last-child { border-bottom: none; } .search { display: flex; gap: 8px; } .search input { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); min-width: 280px; background: var(--surface); color: var(--text); } .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(24, 71, 171, 0.18); } .empty { text-align: center; padding: 64px 24px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); } .secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; } code { background: var(--surface-alt); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 720px) { .topbar { padding: 0 16px; } .nav-link { display: none; } .nav-link.nav-link-always { display: inline-flex; } .container { padding: 20px 16px 40px; } .kv { grid-template-columns: 1fr; row-gap: 4px; } .kv dt { margin-top: 8px; } .env-view-grid { grid-template-columns: 1fr !important; } } /* ===================================================================== ENVIRONMENT CARDS (edit form) ===================================================================== */ .env-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); margin-bottom: 12px; overflow: hidden; } .env-card[open] { background: var(--surface); } .env-card > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 10px; user-select: none; border-bottom: 1px solid transparent; transition: background 0.12s ease; } .env-card > summary:hover { background: var(--surface-alt); } .env-card[open] > summary { border-bottom-color: var(--border); } .env-card > summary::-webkit-details-marker { display: none; } .env-card > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform 0.15s ease; margin-right: 4px; } .env-card[open] > summary::before { transform: rotate(45deg); } .env-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; min-width: 90px; text-align: center; } .env-summary-meta { flex: 1; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .remove-env { flex-shrink: 0; } .env-body { padding: 18px 20px; } .env-subhead { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .env-subhead:first-child { margin-top: 0; } /* ===================================================================== ENVIRONMENT CARDS (view page) ===================================================================== */ .env-view-card { padding: 22px 24px; position: relative; overflow: hidden; } /* thin gradient accent on top edge */ .env-view-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand) 60%, var(--accent) 100%); } .env-view-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .env-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--surface-alt); border: 1px solid var(--border); font-size: 12.5px; color: var(--text); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .env-chip a { color: inherit; } .env-chip a:hover { color: var(--brand); } .env-view-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } /* Each sub-section is its own bordered panel — no more column bleed. */ .env-view-grid > div { min-width: 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; } .env-view-grid h3 { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .env-view-grid h3 svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; } /* Stacked label/value so long strings wrap cleanly inside their own cell. */ .env-view-grid .kv { display: block; margin: 0; } .env-view-grid .kv dt { font-size: 10.5px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 3px; } .env-view-grid .kv dt:not(:first-child) { margin-top: 12px; } .env-view-grid .kv dd { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; } .env-view-grid .kv dd code { display: inline-block; max-width: 100%; word-break: break-all; font-size: 12.5px; } .env-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; } .env-notes { margin-top: 16px; padding: 14px 16px; background: var(--surface-alt); border-left: 3px solid var(--brand); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .env-notes h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .env-notes p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); } /* ===================================================================== CREDENTIAL CARDS ===================================================================== */ .cred-row { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; } .cred-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .cred-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; } .cred-card-head { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* Compact kv inside narrow credential cards — short label column, wrapping values, no horizontal overflow. */ .cred-card .kv { grid-template-columns: 90px 1fr; column-gap: 10px; row-gap: 8px; } .cred-card .kv dt { font-size: 12px; white-space: nowrap; } .cred-card .kv dd { min-width: 0; word-break: break-word; overflow-wrap: anywhere; font-size: 13.5px; } .cred-card .kv dd code { display: inline-block; max-width: 100%; padding: 2px 6px; word-break: break-all; overflow-wrap: anywhere; white-space: normal; font-size: 12.5px; line-height: 1.4; } .cred-card .secret { word-break: break-all; } .cred-card .reveal-btn { margin-left: 6px; } /* ===================================================================== ATTACHMENTS ===================================================================== */ .attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; } .attach-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .attach-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .attach-thumb { display: block; width: 100%; height: 120px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--border); } .attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .attach-thumb-file { display: grid; place-items: center; color: var(--text-muted); gap: 4px; } .attach-thumb-file svg { width: 36px; height: 36px; } .attach-ext { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); } .attach-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .attach-name { font-weight: 500; font-size: 13.5px; color: var(--text); word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .attach-name:hover { color: var(--brand); } .attach-upload { border-top: 1px solid var(--border); padding-top: 16px; } .attach-upload input[type="file"] { font-size: 13px; color: var(--text); } .attach-upload input[type="file"]::file-selector-button { padding: 6px 12px; margin-right: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; cursor: pointer; } .attach-upload input[type="file"]::file-selector-button:hover { background: var(--surface-alt); } /* ===================================================================== DOMAIN-specific — status & expiry pills, NS list ===================================================================== */ .status-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid; line-height: 1.4; white-space: nowrap; } .status-pill.status-healthy { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .status-pill.status-issue { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } .status-pill.status-neutral { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); } .expiry-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted); line-height: 1.4; white-space: nowrap; } .expiry-pill.expiry-ok { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .expiry-pill.expiry-warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } .expiry-pill.expiry-soon, .expiry-pill.expiry-expired { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .ns-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .ns-list li code { font-size: 12.5px; word-break: break-all; } /* ---------------------------------------------------------------------- EXPENSES-specific ---------------------------------------------------------------------- */ .expenses-table td.num, .expenses-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .expenses-table td.nowrap, .expenses-table th.nowrap { white-space: nowrap; } .expenses-table .expense-title { font-weight: 600; font-size: 14.5px; } .expenses-table .expense-meta { margin-top: 2px; font-size: 12.5px; color: var(--text-muted); } .expenses-table .actions-cell { white-space: nowrap; text-align: right; } .expenses-table .actions-cell .btn + .btn { margin-left: 6px; } .expenses-table tfoot th { background: var(--bg-subtle, rgba(0,0,0,0.03)); font-weight: 700; }