/* Debt Minder design tokens, type scale and reusable component primitives. Loaded AFTER tailwind.css so utility class output stays the source of truth and these tokens/components compose cleanly on top. */ :root { --color-primary: #f47c20; /* Kiteview orange — brand accent */ --color-primary-700: #ae560f; /* deepened for text on light surfaces (5.08:1) */ --color-danger: #ef4444; --color-warning: #f59e0b; --color-success: #10b981; --color-muted: #9ca3af; --color-text: #111827; --color-text-secondary: #6b7280; --color-border: #e5e7eb; --color-surface: #ffffff; --color-surface-alt: #f9fafb; } /* ---------- Type scale --------------------------------------------------- */ .dm-h1 { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--color-text); letter-spacing: -0.01em; } .dm-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--color-text); } .dm-th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); } .dm-body { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--color-text); } .dm-meta { font-size: 12px; color: var(--color-muted); } /* ---------- Status pill badges (replaces lone "p" indicators) ----------- */ .dm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .dm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: 0.55; } .dm-badge--pending { background: #fef3c7; color: #92400e; } .dm-badge--sent { background: #d1fae5; color: #065f46; } .dm-badge--failed { background: #fee2e2; color: #991b1b; } .dm-badge--posted { background: #dceaef; color: #244f63; } .dm-badge--logged { background: #e5e7eb; color: #374151; } .dm-badge--active { background: #d1fae5; color: #065f46; } .dm-badge--inactive { background: transparent; color: #6b7280; box-shadow: inset 0 0 0 1px #d1d5db; } .dm-badge--inactive::before { background: #9ca3af; } /* ---------- Filter chip — selected = teal text + teal outline only ----- */ .dm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; color: #4b5563; background: #ffffff; box-shadow: inset 0 0 0 1px #e5e7eb; transition: background-color .15s, box-shadow .15s, color .15s; } .dm-chip:hover { background: #f9fafb; } .dm-chip--selected { color: var(--color-primary-700); background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-primary); } /* ---------- Empty state ------------------------------------------------- */ .dm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 16px; color: var(--color-muted); gap: 8px; } .dm-empty__icon { width: 28px; height: 28px; color: #cbd5e1; } .dm-empty__text { font-size: 12px; color: #6b7280; } .dm-empty__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--color-primary-700); font-size: 12px; font-weight: 500; } .dm-empty__cta:hover { text-decoration: underline; } /* ---------- Sidebar — icon-only rail when collapsed -------------------- */ /* When .sidebar-collapsed is on , the drawer compresses to a 48px icon rail rather than sliding off-screen, and the dimmer backdrop is suppressed (rail stays visible like a permanent mini-nav). */ .sidebar-collapsed aside.dm-sidebar { width: 48px !important; transform: none !important; box-shadow: none; } .sidebar-collapsed aside.dm-sidebar .dm-rail-hide { display: none !important; } .sidebar-collapsed aside.dm-sidebar nav { padding-left: 0; padding-right: 0; } .sidebar-collapsed aside.dm-sidebar nav a { justify-content: center; padding-left: 0; padding-right: 0; margin: 2px 6px; } .sidebar-collapsed aside.dm-sidebar nav a[title]:hover::after { content: attr(title); position: absolute; left: 52px; background: #1f2937; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; z-index: 60; pointer-events: none; } .sidebar-collapsed .dm-backdrop { display: none !important; } /* Push the main content right by the rail width so it isn't covered. */ .sidebar-collapsed body > div.dm-shell { padding-left: 48px; } body > div.dm-shell { transition: padding-left .2s ease; } /* ---------- Action buttons (debtor detail toolbar) ---------------------- */ .dm-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: 6px; line-height: 1.1; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; } .dm-action-btn--secondary { color: #374151; background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .dm-action-btn--secondary:hover { background: #f9fafb; } .dm-action-btn--primary { color: #ffffff; background: var(--color-primary-700); border: 1px solid transparent; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .dm-action-btn--primary:hover { background: #1c3744; } /* Tiny counter chip used inside .dm-action-btn (4 attached, 1 unallocated, etc.) */ .dm-action-chip { display: inline-flex; align-items: center; margin-left: 4px; padding: 0 6px; height: 16px; border-radius: 9999px; font-size: 10px; font-weight: 600; line-height: 1; } .dm-action-chip--neutral { background: #f3f4f6; color: #374151; } .dm-action-chip--alert { background: #fef3c7; color: #92400e; } /* ---------- Misc --------------------------------------------------------- */ .dm-section-divider { border-top: 1px solid var(--color-border); margin: 24px 0; } .dm-kpi-accent { border-left: 3px solid var(--color-primary); } .dm-progress { height: 6px; background: #f3f4f6; border-radius: 9999px; overflow: hidden; } .dm-progress > span { display: block; height: 100%; background: var(--color-warning); transition: width .2s ease, background-color .2s ease; } .dm-progress.is-complete > span { background: var(--color-success); }