/* ── CareOS Shared Page Shell ──────────────────────────────────────────────
   Topbar, page content wrapper, status pills, module badges, icon buttons.
   Link this file after shared/sidebar.css on every page.
   Page-specific color overrides (e.g. RPM live-pill red) stay inline.
─────────────────────────────────────────────────────────────────────────── */

/* ── APP SHELL ── */
.app  { display: flex; min-height: 100vh; }
.main { flex: 1; margin-left: var(--sidebar-width, 252px); min-height: 100vh; display: flex; flex-direction: column; }

/* ── TOPBAR ── */
.topbar {
    height: var(--topbar-height, 62px);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky; top: 0; z-index: 50;
}
.topbar-left     { display: flex; align-items: center; gap: 14px; }
.topbar-title    { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.topbar-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.topbar-right    { display: flex; align-items: center; gap: 8px; }
.topbar-divider  { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

/* ── BACK BUTTON ── */
.back-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: all var(--ease);
    flex-shrink: 0;
}
.back-btn:hover { background: var(--bg); color: var(--text-primary); }

/* ── MODULE BADGE ── */
.module-badge {
    font-size: 11px; padding: 3px 9px;
    border-radius: 999px; font-weight: 600; flex-shrink: 0;
}
.module-badge.badge-blue   { background: var(--blue-light);   color: var(--blue); }
.module-badge.badge-green  { background: var(--green-light);  color: var(--green); }
.module-badge.badge-amber  { background: var(--amber-light);  color: var(--amber); }
.module-badge.badge-purple { background: var(--purple-light); color: var(--purple); }
.module-badge.badge-muted  { background: var(--border-light, #F1F5F9); color: var(--text-secondary); }

/* ── STATUS PILLS ── */
.demo-pill, .live-pill, .tenant-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--radius-xl, 20px);
    font-size: 12px; font-weight: 500;
}
.demo-pill   { background: var(--green-light); color: var(--green); border: 1px solid var(--green-mid); }
.live-pill   { background: var(--blue-light);  color: var(--blue); }
.tenant-pill { background: var(--green-light); color: var(--green); border: 1px solid var(--green-mid); }

/* ── PULSE DOT ── */
.pulse-dot {
    width: 6px; height: 6px;
    border-radius: 50%; background: currentColor;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

/* ── ICON BUTTON ── */
.icon-btn {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary);
    transition: all var(--ease);
    position: relative;
}
.icon-btn:hover { background: var(--bg); color: var(--text-primary); }
.notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px;
    border-radius: 50%; background: var(--red);
    border: 2px solid #fff;
}

/* ── PAGE CONTENT ── */
.page { flex: 1; padding: 26px; overflow: auto; }