/* =============================================================
Loop Customer Portal — Component Library
=============================================================
FONT SETUP — add these tags inside in your HTML:
============================================================= */
@import './_tokens.css';
/* ── Reset & base ─────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
color: var(--ink-900);
background: var(--ink-50);
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
}
/* ── App layout ───────────────────────────────────────────── */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
}
/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
background: var(--navy-900);
color: var(--ink-300);
display: flex;
flex-direction: column;
padding: 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.sidebar-header {
padding: 22px 16px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* ── Brand / Logo ─────────────────────────────────────────── */
.brand {
display: flex;
align-items: center;
}
.brand-logo {
height: 28px;
width: auto;
display: block;
/* mix-blend-mode makes a solid black PNG background disappear on dark navy.
Remove this line if using transparent PNG or SVG. */
mix-blend-mode: screen;
}
.brand-logo-icon {
/* Icon-only square variant — just the loop mark, no wordmark */
height: 32px;
width: 32px;
object-fit: contain;
mix-blend-mode: screen;
}
.sidebar-org {
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.org-label {
color: var(--ink-500);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.org-name {
color: white;
font-size: 13px;
font-weight: 500;
margin-top: 2px;
}
.sidebar-nav {
padding: 10px;
flex: 1;
}
.nav-section-label {
color: var(--ink-500);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 14px 8px 6px;
display: block;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-sm);
color: var(--ink-400);
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: var(--t-fast);
width: 100%;
text-align: left;
border: none;
background: none;
margin-bottom: 1px;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--ink-100);
}
.nav-item.active {
background: rgba(37, 99, 235, 0.15);
color: white;
}
.nav-item svg,
.nav-item .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.7;
}
.nav-item.active .icon {
opacity: 1;
}
.nav-badge {
margin-left: auto;
font-size: 10px;
font-weight: 600;
background: rgba(245, 158, 11, 0.18);
color: #FBBF24;
padding: 2px 6px;
border-radius: 999px;
}
.sidebar-footer {
margin-top: auto;
padding: 14px 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.org-card {
display: flex;
gap: 10px;
padding: 8px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.03);
}
.org-avatar {
width: 32px;
height: 32px;
border-radius: 8px;
background: #1E293B;
color: #93C5FD;
font-weight: 600;
font-size: 12px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.org-name {
color: white;
font-size: 13px;
font-weight: 600;
}
.org-user {
color: var(--ink-400);
font-size: 11.5px;
}
/* ── Main content area ────────────────────────────────────── */
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 0;
}
/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
height: var(--topbar-h);
background: white;
border-bottom: 1px solid var(--ink-200);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
position: sticky;
top: 0;
z-index: 10;
}
.topbar-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-900);
}
.topbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.bx-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--accent-soft);
border: 1px solid var(--accent-border);
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--accent);
cursor: pointer;
font-family: var(--font-mono);
letter-spacing: 0.01em;
}
.icon-btn {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
color: var(--ink-500);
transition: var(--t-fast);
border: none;
background: none;
cursor: pointer;
}
.icon-btn:hover {
background: var(--ink-100);
color: var(--ink-900);
}
.status-dot {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--ink-100);
color: var(--ink-700);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.status-dot .dot {
width: 6px;
height: 6px;
background: var(--emerald);
border-radius: 50%;
}
/* ── Page wrapper ─────────────────────────────────────────── */
.page {
padding: 28px 32px 64px;
max-width: var(--content-max);
width: 100%;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.page-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-900);
margin-bottom: 4px;
}
.page-subtitle {
color: var(--ink-500);
font-size: 14px;
}
/* ── Grid layouts ─────────────────────────────────────────── */
.grid {
display: grid;
gap: 16px;
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
/* ── Cards ────────────────────────────────────────────────── */
.card {
background: white;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.card-header {
padding: 18px 22px;
border-bottom: 1px solid var(--ink-200);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-900);
}
.card-subtitle {
color: var(--ink-500);
font-size: 13px;
margin-top: 2px;
}
.card-body {
padding: 22px;
}
.card-footer {
padding: 14px 22px;
border-top: 1px solid var(--ink-100);
background: var(--ink-50);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* ── Stat cards ───────────────────────────────────────────── */
.stat-card {
padding: 20px 22px;
}
.stat-label {
font-size: 12px;
color: var(--ink-500);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stat-value {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-900);
margin-top: 6px;
line-height: 1.15;
}
.stat-value.mono {
font-family: var(--font-mono);
}
.stat-sub {
font-size: 13px;
color: var(--ink-500);
margin-top: 4px;
}
.stat-delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
margin-top: 10px;
}
.stat-delta.up { background: var(--emerald-soft); color: var(--emerald); }
.stat-delta.down { background: var(--rose-soft); color: var(--rose); }
.stat-delta.neutral { background: var(--ink-100); color: var(--ink-500); }
/* ── Buttons ──────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 16px;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 600;
transition: var(--t-fast);
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
font-family: var(--font-sans);
}
.btn .icon {
width: 15px;
height: 15px;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: white; border-color: var(--ink-200); color: var(--ink-900); }
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-300); }
.btn-ghost { color: var(--ink-700); background: none; border: none; }
.btn-ghost:hover { background: var(--ink-100); }
.btn-danger { background: var(--rose-soft); color: var(--rose); border: 1px solid #FECACA; }
.btn-danger:hover { background: #FEE2E2; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
/* ── Tables ───────────────────────────────────────────────── */
table.data {
width: 100%;
border-collapse: collapse;
}
table.data th {
text-align: left;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--ink-500);
padding: 12px 18px;
background: var(--ink-50);
border-bottom: 1px solid var(--ink-200);
}
table.data td {
padding: 14px 18px;
border-bottom: 1px solid var(--ink-100);
font-size: 13.5px;
color: var(--ink-900);
vertical-align: middle;
}
table.data tr:hover td { background: var(--ink-50); }
table.data tr:last-child td { border-bottom: none; }
.td-mono {
font-family: var(--font-mono);
font-size: 12.5px;
}
/* ── Status badges ────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.badge .dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.badge-success { background: var(--emerald-soft); color: var(--emerald); }
.badge-success .dot { background: var(--emerald); }
.badge-pending { background: var(--amber-soft); color: var(--amber); }
.badge-pending .dot { background: var(--amber); }
.badge-danger { background: var(--rose-soft); color: var(--rose); }
.badge-danger .dot { background: var(--rose); }
.badge-neutral { background: var(--ink-100); color: var(--ink-500); }
.badge-neutral .dot { background: var(--ink-400); }
.badge-info { background: var(--accent-soft); color: var(--accent); }
/* ── Form elements ────────────────────────────────────────── */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--ink-700);
}
.form-hint {
font-size: 12px;
color: var(--ink-500);
}
.form-input {
height: 40px;
border: 1px solid var(--ink-200);
border-radius: var(--radius-sm);
padding: 0 12px;
font-size: 14px;
color: var(--ink-900);
background: white;
transition: border-color var(--t-fast);
width: 100%;
font-family: var(--font-sans);
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.form-input.mono {
font-family: var(--font-mono);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
/* ── Copy field ───────────────────────────────────────────── */
.copy-field {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--ink-200);
border-radius: var(--radius-sm);
background: var(--ink-50);
overflow: hidden;
}
.copy-field-value {
flex: 1;
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink-900);
}
.copy-btn {
padding: 10px 14px;
border-left: 1px solid var(--ink-200);
background: white;
color: var(--ink-500);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: var(--t-fast);
white-space: nowrap;
border-top: none;
border-right: none;
border-bottom: none;
}
.copy-btn:hover { background: var(--ink-50); color: var(--ink-900); }
.copy-btn.copied { color: var(--emerald); }
/* ── Alert / callout boxes ────────────────────────────────── */
.alert {
display: flex;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius-sm);
font-size: 13.5px;
}
.alert-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
}
.alert-warning { background: var(--amber-soft); border: 1px solid #FDE68A; color: #92400E; }
.alert-info { background: var(--accent-soft); border: 1px solid var(--accent-border); color: #1E3A8A; }
.alert-success { background: var(--emerald-soft); border: 1px solid #A7F3D0; color: #065F46; }
.alert-danger { background: var(--rose-soft); border: 1px solid #FECACA; color: #991B1B; }
/* ── Progress steps ───────────────────────────────────────── */
.steps {
display: flex;
flex-direction: column;
gap: 0;
}
.step {
display: flex;
gap: 16px;
position: relative;
}
.step-indicator {
display: flex;
flex-direction: column;
align-items: center;
}
.step-circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.step-circle.complete { background: var(--emerald); color: white; }
.step-circle.active { background: var(--accent); color: white; }
.step-circle.pending { background: var(--ink-100); color: var(--ink-400); border: 2px solid var(--ink-200); }
.step-line {
width: 2px;
flex: 1;
background: var(--ink-200);
margin: 4px 0;
min-height: 24px;
}
.step-line.complete { background: var(--emerald); }
.step-content {
padding-bottom: 28px;
flex: 1;
padding-top: 4px;
}
.step-title {
font-size: 14px;
font-weight: 600;
color: var(--ink-900);
}
.step-title.pending { color: var(--ink-400); }
.step-desc {
font-size: 13px;
color: var(--ink-500);
margin-top: 4px;
}
/* ── Status timeline ──────────────────────────────────────── */
.timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.timeline-item {
display: flex;
gap: 14px;
position: relative;
}
.timeline-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 5px;
}
.timeline-line {
width: 2px;
background: var(--ink-200);
position: absolute;
left: 4px;
top: 16px;
bottom: 0;
}
.timeline-dot.complete { background: var(--emerald); }
.timeline-dot.active { background: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); }
.timeline-dot.pending { background: var(--ink-200); border: 2px solid var(--ink-300); }
.timeline-body {
padding-bottom: 20px;
flex: 1;
}
.timeline-label {
font-size: 13.5px;
font-weight: 600;
color: var(--ink-900);
}
.timeline-label.pending { color: var(--ink-400); }
.timeline-time {
font-size: 12px;
color: var(--ink-400);
margin-top: 2px;
}
/* ── Divider ──────────────────────────────────────────────── */
.divider {
border: none;
border-top: 1px solid var(--ink-200);
margin: 0;
}
/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 48px 24px;
}
.empty-state-icon {
width: 40px;
height: 40px;
margin: 0 auto 12px;
color: var(--ink-300);
}
.empty-state-title {
font-size: 15px;
font-weight: 600;
color: var(--ink-700);
margin-bottom: 6px;
}
.empty-state-desc {
font-size: 13.5px;
color: var(--ink-400);
max-width: 320px;
margin: 0 auto;
}
/* ── Utilities ────────────────────────────────────────────── */
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--ink-500); }
.text-sm { font-size: 12.5px; }
.text-xs { font-size: 11.5px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
/* ── Side panel ───────────────────────────────────────────── */
.side-panel-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.28);
z-index: 400;
backdrop-filter: blur(1px);
}
.side-panel-overlay.open { display: block; }
.side-panel {
position: fixed;
top: 0;
right: 0;
width: 440px;
max-width: 100vw;
height: 100vh;
background: white;
box-shadow: -4px 0 32px rgba(15, 23, 42, 0.12);
z-index: 500;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.side-panel.open { transform: translateX(0); }
.sp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px 18px;
border-bottom: 1px solid var(--ink-100);
flex-shrink: 0;
}
.sp-header-left {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.sp-title {
font-size: 15px;
font-weight: 700;
color: var(--ink-900);
}
.sp-close {
background: none;
border: none;
cursor: pointer;
color: var(--ink-400);
padding: 4px;
border-radius: var(--radius-sm);
display: grid;
place-items: center;
transition: background var(--t-fast), color var(--t-fast);
flex-shrink: 0;
}
.sp-close:hover {
background: var(--ink-100);
color: var(--ink-700);
}
.sp-body {
flex: 1;
overflow-y: auto;
padding: 22px;
}
.sp-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid var(--ink-100);
gap: 12px;
}
.sp-row:last-child { border-bottom: none; }
.sp-label {
font-size: 12px;
color: var(--ink-400);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
flex-shrink: 0;
}
.sp-value {
font-size: 13px;
color: var(--ink-900);
font-weight: 500;
text-align: right;
}
.sp-value.mono {
font-family: var(--font-mono);
font-size: 13px;
}
.sp-copy {
display: flex;
align-items: center;
gap: 5px;
}
.sp-copy-btn {
background: none;
border: 1px solid var(--ink-200);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--ink-400);
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
font-family: var(--font-sans);
transition: background var(--t-fast), color var(--t-fast);
}
.sp-copy-btn:hover {
background: var(--ink-100);
color: var(--ink-700);
}
.side-panel-footer {
padding: 16px 22px;
border-top: 1px solid var(--ink-200);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ── Switch customer profile link ─────────────────────────── */
.switch-profile-link {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--ink-500);
text-decoration: none;
padding: 6px 8px;
border-radius: var(--radius-sm);
transition: var(--t-fast);
margin-top: 6px;
}
.switch-profile-link:hover {
background: rgba(255,255,255,0.05);
color: var(--ink-300);
}