/* Curio Central — platform admin shell */ :root { --admin-bg: var(--bg); --admin-card: var(--surface); --admin-primary: var(--primary); --admin-accent: var(--secondary); } body.admin-body { background: var(--admin-bg); font-family: 'Inter', sans-serif; display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } .admin-sidebar { background: var(--admin-primary); position: sticky; top: 0; height: 100vh; padding: 2rem; display: flex; flex-direction: column; overflow-y: auto; } .admin-sidebar .logo, .admin-sidebar .logo-text { color: white !important; } .admin-sidebar .logo-icon { background: var(--admin-accent); } .admin-sidebar .side-nav { margin-top: 3rem; } .admin-sidebar .side-nav a { color: #94A3B8; } .admin-sidebar .side-nav a:hover, .admin-sidebar .side-nav a.active { background: rgba(255, 255, 255, 0.1); color: white; } .admin-sidebar .user-profile { position: absolute; bottom: 2rem; } .admin-sidebar .user-profile strong { color: white; } .admin-sidebar .user-profile span { color: #94A3B8; } .admin-sidebar .logout-link { color: #FDA4AF; text-decoration: none; display: block; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; transition: var(--transition); } .admin-sidebar .logout-link:hover { color: #FCA5A5; } .admin-main { padding: 3rem; } .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; gap: 1.5rem; flex-wrap: wrap; } .admin-header h1 { font-family: 'Outfit', sans-serif; font-size: 2.2rem; color: var(--admin-primary); } .admin-header p { color: var(--text-muted); margin-top: 0.35rem; } .admin-main .btn-primary { background: var(--admin-accent); } .admin-main .btn-primary:hover { background: var(--secondary-hover); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .admin-body .stat-card { background: var(--admin-card); padding: 2rem; border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); border: 1px solid var(--border); } .admin-body .stat-card span { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .admin-body .stat-card h3 { font-size: 2rem; margin: 0.5rem 0; color: var(--admin-primary); } .admin-body .stat-card .trend { font-size: 0.85rem; font-weight: 700; } .trend.up { color: var(--accent); } .trend.down { color: var(--urgent); } .trend.positive { color: var(--accent); } .admin-body .health-indicator { display: flex; align-items: center; gap: 1rem; background: #ECFDF5; padding: 0.75rem 1.5rem; border-radius: 100px; color: var(--accent); font-weight: 700; font-size: 0.875rem; } .admin-body .pulse { width: 10px; height: 10px; background: #10B981; border-radius: 50%; animation: admin-pulse-ring 1.5s infinite; } @keyframes admin-pulse-ring { 0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .tenant-table-container { background: var(--admin-card); border-radius: 32px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); border: 1px solid var(--border); } .tenant-table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; } .tenant-table-container h2 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; color: var(--admin-primary); } .tenant-table-container table { width: 100%; border-collapse: collapse; } .tenant-table-container th { text-align: left; padding: 1rem; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--border); background: var(--bg); } .tenant-table-container td { padding: 1.5rem 1rem; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--text-main); } .tenant-table-container tbody tr:hover { background: var(--bg); } .status-badge { padding: 0.4rem 0.8rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700; } .status-badge.active { background: #DCFCE7; color: #15803D; } @media (max-width: 768px) { body.admin-body { grid-template-columns: 1fr; } .admin-main { padding: 1.5rem; padding-top: 2rem; } .admin-sidebar { } }