/* ============================================================= * Admin Hub — component library (Phase 1 redesign) * * All classes prefixed `.adm-*` so they coexist with the legacy * Myra component classes in components.css. Pages opt in by * adding `` and using `.adm-*` markup. * Heavy pages keep the legacy components until Phase 2. * ============================================================= */ /* ───── Buttons ──────────────────────────────────────────── */ .adm-btn { display: inline-flex; align-items: center; gap: var(--adm-space-2); padding: var(--adm-space-2) var(--adm-space-4); border-radius: var(--adm-radius-md); font-size: var(--adm-fs-sm); font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease; font-family: var(--adm-font-sans); text-decoration: none; white-space: nowrap; line-height: 1.4; } .adm-btn--primary { background: var(--adm-accent); color: #fff; } .adm-btn--primary:hover { background: var(--adm-accent-hover); color: #fff; } .adm-btn--secondary { background: var(--adm-surface); color: var(--adm-text-primary); border-color: var(--adm-border); } .adm-btn--secondary:hover { background: var(--adm-surface-sunken); } .adm-btn--ghost { background: transparent; color: var(--adm-text-secondary); } .adm-btn--ghost:hover { background: var(--adm-accent-soft); color: var(--adm-accent); } .adm-btn--danger { background: var(--adm-danger); color: #fff; } .adm-btn--danger:hover { background: #B91C1C; color: #fff; } .adm-btn--sm { padding: var(--adm-space-1) var(--adm-space-3); font-size: var(--adm-fs-xs); } .adm-btn--lg { padding: var(--adm-space-3) var(--adm-space-5); font-size: var(--adm-fs-md); } /* ───── Cards ────────────────────────────────────────────── */ .adm-card { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--adm-radius-lg); padding: var(--adm-space-6); box-shadow: var(--adm-shadow-sm); } .adm-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--adm-space-4); padding-bottom: var(--adm-space-4); border-bottom: 1px solid var(--adm-border); gap: var(--adm-space-3); flex-wrap: wrap; } .adm-card__title { font-size: var(--adm-fs-md); font-weight: 600; color: var(--adm-text-primary); margin: 0; } .adm-card__sub { font-size: var(--adm-fs-sm); color: var(--adm-text-secondary); margin-top: var(--adm-space-1); } /* ───── Tables ───────────────────────────────────────────── */ .adm-table { width: 100%; border-collapse: collapse; font-size: var(--adm-fs-sm); } .adm-table th { text-align: left; padding: var(--adm-space-3) var(--adm-space-4); background: var(--adm-surface-sunken); font-weight: 500; color: var(--adm-text-secondary); font-size: var(--adm-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--adm-border); white-space: nowrap; } .adm-table td { padding: var(--adm-space-3) var(--adm-space-4); border-bottom: 1px solid var(--adm-border); color: var(--adm-text-primary); vertical-align: middle; } .adm-table tr:hover td { background: var(--adm-accent-soft); } .adm-table tr:last-child td { border-bottom: none; } /* ───── KPI strip / stat cards ───────────────────────────── */ .adm-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--adm-space-4); margin-bottom: var(--adm-space-6); } .adm-stat { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--adm-radius-lg); padding: var(--adm-space-5); box-shadow: var(--adm-shadow-sm); } .adm-stat__label { font-size: var(--adm-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--adm-text-secondary); margin-bottom: var(--adm-space-2); font-weight: 500; } .adm-stat__value { font-size: var(--adm-fs-2xl); font-weight: 600; color: var(--adm-text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; } .adm-stat__delta { margin-top: var(--adm-space-2); font-size: var(--adm-fs-xs); color: var(--adm-text-muted); } .adm-stat__delta--positive { color: var(--adm-success); } .adm-stat__delta--negative { color: var(--adm-error); } /* ───── Badges (status + product) ────────────────────────── */ .adm-badge { display: inline-flex; align-items: center; gap: var(--adm-space-1); padding: var(--adm-space-1) var(--adm-space-2); border-radius: var(--adm-radius-sm); font-size: var(--adm-fs-xs); font-weight: 500; white-space: nowrap; line-height: 1.4; } .adm-badge--success { background: rgba(22, 163, 74, 0.1); color: var(--adm-success); } .adm-badge--warning { background: rgba(217, 119, 6, 0.1); color: var(--adm-warning); } .adm-badge--error { background: rgba(220, 38, 38, 0.1); color: var(--adm-error); } .adm-badge--neutral { background: var(--adm-surface-sunken); color: var(--adm-text-secondary); } .adm-badge--danger-soft { background: var(--adm-danger-bg); color: var(--adm-danger); } .adm-product-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .adm-product-dot--myra { background: var(--adm-product-myra); } .adm-product-dot--partners { background: var(--adm-product-partners); } .adm-product-dot--partners-tr { background: var(--adm-product-partners-tr); } .adm-product-dot--sadakio { background: var(--adm-product-sadakio); } .adm-product-dot--agentios { background: var(--adm-product-agentios); } /* ───── Filters bar + form inputs ────────────────────────── */ .adm-filter-bar { display: flex; gap: var(--adm-space-3); margin-bottom: var(--adm-space-4); align-items: center; flex-wrap: wrap; } .adm-input, .adm-select { padding: var(--adm-space-2) var(--adm-space-3); border: 1px solid var(--adm-border); border-radius: var(--adm-radius-md); background: var(--adm-surface); font-size: var(--adm-fs-sm); font-family: var(--adm-font-sans); color: var(--adm-text-primary); outline: none; min-height: 36px; } .adm-input:focus, .adm-select:focus { border-color: var(--adm-accent); box-shadow: 0 0 0 3px var(--adm-accent-soft); } .adm-action-menu { display: inline-flex; gap: var(--adm-space-1); } /* ───── Page header ──────────────────────────────────────── */ .adm-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--adm-space-6); gap: var(--adm-space-4); flex-wrap: wrap; } .adm-page-header__title { font-size: var(--adm-fs-xl); font-weight: 600; color: var(--adm-text-primary); margin: 0; letter-spacing: -0.01em; } .adm-page-header__desc { font-size: var(--adm-fs-sm); color: var(--adm-text-secondary); margin-top: var(--adm-space-1); line-height: 1.5; } .adm-page-header__actions { display: flex; gap: var(--adm-space-2); flex-wrap: wrap; } /* ───── Empty state ──────────────────────────────────────── */ .adm-empty { text-align: center; padding: var(--adm-space-12) var(--adm-space-6); color: var(--adm-text-muted); } .adm-empty__icon { font-size: 48px; opacity: 0.5; margin-bottom: var(--adm-space-3); } .adm-empty__title { font-size: var(--adm-fs-md); font-weight: 500; color: var(--adm-text-primary); margin-bottom: var(--adm-space-2); } .adm-empty__desc { font-size: var(--adm-fs-sm); margin-bottom: var(--adm-space-4); line-height: 1.5; } /* ───── Tabs (Phase 2) ───────────────────────────────────── */ /* Used to decompose dense pages (myra.html, partner_view.html, sadakio_business.html) into focused panels. Native button + data-tab attribute pattern — no JS framework. */ .adm-tabs { display: flex; gap: var(--adm-space-1); margin-bottom: var(--adm-space-5); border-bottom: 1px solid var(--adm-border); flex-wrap: wrap; } .adm-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--adm-space-3) var(--adm-space-4); font-size: var(--adm-fs-sm); font-weight: 500; color: var(--adm-text-secondary); cursor: pointer; font-family: var(--adm-font-sans); transition: color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease; margin-bottom: -1px; } .adm-tab:hover { color: var(--adm-text-primary); } .adm-tab.active { color: var(--adm-accent); border-bottom-color: var(--adm-accent); font-weight: 600; } .adm-tab-panel { display: block; } .adm-tab-panel[hidden] { display: none; } /* ───── Drawer (Phase 2 — slide-in detail panel) ─────────── */ /* Right-side slide-in for record details (e.g. partner profile). Mounted by template, opened via JS that fills the inner content area. Backdrop closes on click. No framework. */ .adm-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 150; backdrop-filter: blur(2px); display: none; } .adm-drawer-overlay.is-open { display: block; } .adm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 95vw; background: var(--adm-surface); z-index: 160; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; box-shadow: var(--adm-shadow-lg); } .adm-drawer.is-open { transform: translateX(0); } .adm-drawer__header { padding: var(--adm-space-5) var(--adm-space-6) var(--adm-space-4); border-bottom: 1px solid var(--adm-border); display: flex; align-items: center; justify-content: space-between; gap: var(--adm-space-3); } .adm-drawer__title { font-size: var(--adm-fs-md); font-weight: 600; color: var(--adm-text-primary); } .adm-drawer__close { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--adm-text-muted); padding: 4px; line-height: 1; } .adm-drawer__close:hover { color: var(--adm-text-primary); } .adm-drawer__body { padding: var(--adm-space-5) var(--adm-space-6); overflow-y: auto; flex: 1; } /* ───── Small variants + utilities (Phase 2) ─────────────── */ .adm-text-tiny { font-size: 11px; color: var(--adm-text-muted); margin-top: 2px; line-height: 1.4; } .adm-select--sm { min-height: 28px; padding: 4px var(--adm-space-2); font-size: var(--adm-fs-xs); } .adm-btn--sm i, .adm-btn--sm svg { width: 14px; height: 14px; } /* Inline code in admin tables (promo codes, ref codes) */ .adm-code { font-family: var(--adm-font-mono); font-size: var(--adm-fs-xs); background: var(--adm-surface-sunken); padding: 2px 6px; border-radius: var(--adm-radius-sm); color: var(--adm-text-primary); } /* ───── Phase 3a — Overview dashboard ───────────────────── */ /* Two-column layout: products on the left, sidebar (activity + quick actions + systems) on the right. Collapses to single column on narrow viewports. */ .adm-grid-2col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--adm-space-5); } @media (max-width: 1100px) { .adm-grid-2col { grid-template-columns: 1fr; } } /* Activity timeline — vertical list of recent cross-product events. Icon column is fixed-width so titles align. */ .adm-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .adm-activity-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--adm-space-3); align-items: flex-start; padding: var(--adm-space-3) 0; border-bottom: 1px solid var(--adm-border); font-size: var(--adm-fs-sm); } .adm-activity-item:last-child { border-bottom: 0; } .adm-activity-item__icon { width: 32px; height: 32px; border-radius: var(--adm-radius-md); background: var(--adm-surface-sunken); color: var(--adm-text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .adm-activity-item__icon svg { width: 16px; height: 16px; } .adm-activity-item__body { min-width: 0; } .adm-activity-item__title { font-weight: 500; color: var(--adm-text-primary); line-height: 1.3; word-break: break-word; } .adm-activity-item__time { font-size: var(--adm-fs-xs); color: var(--adm-text-muted); white-space: nowrap; flex-shrink: 0; } /* Quick actions — chunky tappable cards in a 2-col grid */ .adm-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--adm-space-2); } .adm-quick-action { display: flex; align-items: center; gap: var(--adm-space-2); padding: var(--adm-space-3); background: var(--adm-surface-sunken); border: 1px solid var(--adm-border); border-radius: var(--adm-radius-md); font-size: var(--adm-fs-sm); font-weight: 500; color: var(--adm-text-primary); text-decoration: none; transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease; } .adm-quick-action:hover { background: var(--adm-accent-soft); border-color: var(--adm-accent-soft); color: var(--adm-accent); } .adm-quick-action svg, .adm-quick-action i { width: 18px; height: 18px; flex-shrink: 0; } /* Systems list — single-line health check */ .adm-systems-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--adm-space-1); } .adm-systems-list li { display: flex; align-items: center; gap: var(--adm-space-2); font-size: var(--adm-fs-sm); color: var(--adm-text-primary); padding: var(--adm-space-2) 0; border-bottom: 1px solid var(--adm-border); } .adm-systems-list li:last-child { border-bottom: 0; } .adm-systems-list li > .adm-text-tiny { margin-left: auto; margin-top: 0; } .adm-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .adm-status-dot--green { background: var(--adm-success); } .adm-status-dot--yellow { background: var(--adm-warning); } .adm-status-dot--red { background: var(--adm-error); } .adm-status-dot--unknown, .adm-status-dot--gray { background: var(--adm-text-muted); }