/* ============================================================
   tenant-app.css
   Dashboard shell: sidebar, topbar, content area.
   Palette matches the login page / public site:
   linen background, moss-deep sidebar, clay/sage accents.
   Depends on theme.css being loaded first for :root variables.
   ============================================================ */

html,body{height:100%;}
body{background:var(--bg);}

.menu-toggle {
	display: none;
}
/* ── SIDEBAR ─────────────────────────────────────── */
#sidebar{
  position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--primary-dark) 0%,var(--primary) 100%);
  color:rgba(255,255,255,.82);display:flex;flex-direction:column;
  padding:22px 16px;overflow-y:auto;z-index:1040;transition:transform .25s ease;
}
#sidebar::-webkit-scrollbar{width:5px;}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;}

.sidebar-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px;}
.brand-logo-slot{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.brand-logo-slot img{width:100%;height:100%;object-fit:contain;}
.sidebar-brand .brand-title{font-family:'Fraunces',serif;font-weight:600;font-size:14.5px;
  color:#fff;line-height:1.25;letter-spacing:-.01em;}
.sidebar-brand .brand-sub{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-top:1px;}

.sidebar-section-label{font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin:18px 10px 8px;}
.sidebar-section-label:first-of-type{margin-top:6px;}

.nav-item-custom{margin-bottom:2px;}
.nav-link-custom{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;font-weight:600;
  transition:background .15s,color .15s;}
.nav-link-custom i{font-size:15px;width:18px;text-align:center;flex-shrink:0;color:rgba(255,255,255,.55);}
.nav-link-custom:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-link-custom:hover i{color:#E08562;}
.nav-link-custom.active{background:rgba(255,255,255,.12);color:#fff;}
.nav-link-custom.active i{color:#E08562;}

/* Label takes up all remaining row space so the "Soon" badge that follows
   it is reliably pushed to the far right — not dependent on bare-text
   flex-item sizing next to the auto-margin badge. */
.nav-link-label{flex:1;}

.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);position:relative;}
.user-pill{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:#C76B4A;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.user-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2;}
.user-role{font-size:11px;color:rgba(255,255,255,.5);}

.user-pill-chevron {
	font-size: 11px;
	transition: transform .2s ease;
}

.user-pill.open .user-pill-chevron {
	transform: rotate(180deg);
}

.user-menu {
	position: absolute;
	bottom: 64px;
	left: 14px;
	right: 14px;
	background: var(--primary-dark);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.3);
	padding: 6px;
	display: none;
}

	.user-menu.open {
		display: block;
	}

	.user-menu a {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 8px 10px;
		border-radius: 7px;
		color: rgba(255,255,255,.85);
		text-decoration: none;
		font-size: 12.5px;
		font-weight: 600;
	}

		.user-menu a:hover {
			background: rgba(255,255,255,.08);
			color: #fff;
		}

			.user-menu a:hover i {
				color: #E08562;
			}

		.user-menu a.danger {
			color: #fca5a5;
		}

			.user-menu a.danger:hover {
				background: rgba(239,68,68,.15);
			}

	.user-menu hr {
		border-color: rgba(255,255,255,.1);
		margin: 5px 0;
	}

/* ── MAIN / TOPBAR ───────────────────────────────── */
#main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}
#topbar{height:var(--header-h);background:var(--card-bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;
  position:sticky;top:0;z-index:1020;}
.breadcrumb-bar{font-size:13px;color:var(--muted);font-weight:600;}
#breadcrumb-current{color:var(--text);font-weight:700;}

.icon-btn{width:36px;height:36px;border-radius:9px;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;
  text-decoration:none;cursor:pointer;transition:all .15s;}
.icon-btn:hover{background:var(--tenant-light);color:var(--primary);border-color:transparent;}

#content{padding:28px 30px 48px;flex:1;}

/* ── SHARED DASHBOARD CARD/STAT PRIMITIVES ──────── */
.dash-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:0 1px 3px rgba(31,36,32,.04);}
.dash-card h3,.dash-card h4{margin:0;}

.page-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.page-eyebrow::before{content:'';width:16px;height:2px;background:var(--accent);display:inline-block;}
.page-title{font-size:25px;font-weight:600;color:var(--text);margin:0 0 4px;}
.page-sub{font-size:13.5px;color:var(--muted);margin:0;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.stat-grid{grid-template-columns:1fr;}}
.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:10px;}
.stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:17px;}
.stat-icon.ic-clay{background:#F3DCD2;color:#C76B4A;}
.stat-icon.ic-sage{background:#E7EEE2;color:#7C9070;}
.stat-icon.ic-moss{background:#E2E7DE;color:#2D3B2E;}
.stat-icon.ic-amber{background:#FBE9D0;color:#B9842F;}
.stat-value{font-family:'Fraunces',serif;font-size:25px;font-weight:600;color:var(--text);line-height:1;}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600;}
.stat-delta{font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px;}
.stat-delta.up{color:#5C8A52;}
.stat-delta.down{color:#C0533A;}

.section-card-title{display:flex;align-items:center;justify-content:between;justify-content:space-between;
  margin-bottom:16px;}
.section-card-title h4{font-size:16px;font-weight:600;color:var(--text);margin:0;}
.section-card-title a{font-size:12.5px;color:var(--accent);font-weight:700;text-decoration:none;}
.section-card-title a:hover{text-decoration:underline;}

.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.list-avatar{width:34px;height:34px;border-radius:50%;background:var(--tenant-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0;}
.list-row-title{font-size:13.5px;font-weight:700;color:var(--text);}
.list-row-sub{font-size:12px;color:var(--muted);}
.list-row-meta{margin-left:auto;font-size:12px;color:var(--muted);text-align:right;}

.badge-soft{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:20px;}
.badge-soft.b-sage{background:#E7EEE2;color:#5C7A50;}
.badge-soft.b-clay{background:#F3DCD2;color:#A8543A;}
.badge-soft.b-amber{background:#FBE9D0;color:#9C6A1F;}

.quick-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;text-decoration:none;transition:all .15s;}
.quick-action:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(31,36,32,.18);}
.quick-action .qa-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:16px;}
.quick-action .qa-title{font-size:13.5px;font-weight:700;color:var(--text);}
.quick-action .qa-sub{font-size:11.5px;color:var(--muted);}

/* CARDS */
.card-hms{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);}
.card-hms-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.card-hms-header h5{font-size:14px;font-weight:700;margin:0;}
.card-hms-body{padding:20px;}

/* TABLE */
.table-hms thead th{background:var(--bg);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);border-color:var(--border);padding:11px 14px;}
.table-hms tbody td{font-size:13px;vertical-align:middle;border-color:var(--border);padding:11px 14px;}
.table-hms tbody tr:hover{background:var(--primary-light);}

.table-hms .avatar-chip {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap;
	gap: 8px;
}

.table-hms .avatar-sm {
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 50%;
	background: #e8f2fb;
	color: #0a4f8c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}

.table-hms .avatar-chip span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* BADGES */
.badge-status{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;}
.bs-confirmed{background:#dcfce7;color:#15803d;}   /* Active */
.bs-rejected{background:#f1f5f9;color:#64748b;}    /* Inactive */
.bs-pending{background:#fef3c7;color:#b45309;}
.bs-suspended{background:#fee2e2;color:#b91c1c;}

/* TENANT STATUS (Super Admin grid) */
.bs-live{background:#dcfce7;color:#15803d;}
.bs-provisioning{background:#fef3c7;color:#b45309;}
.bs-deactivated{background:#fee2e2;color:#b91c1c;}

/* ROLE BADGES (Staff Management grid) */
.badge-role{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;}
.role-superadmin{background:#fee2e2;color:#b91c1c;}
.role-clinicadmin{background:#ede9fe;color:#6d28d9;}
.role-doctor{background:#dbeafe;color:#1d4ed8;}
.role-nurse{background:#ccfbf1;color:#0d9488;}
.role-receptionist{background:#fef3c7;color:#b45309;}

/* NAV — disabled "soon" links — unconditional, not screen-size-gated */
.nav-link-custom.disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

.nav-soon-badge {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	background: rgba(255,255,255,.15);
	color: rgba(255,255,255,.65);
	padding: 2px 6px;
	border-radius: 10px;
}

/* Sidebar overlay — was previously inline style="..." on the Tenant App
   layout only; now defined once here so both layouts can use a bare div. */
#sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20,20,15,.45);
	z-index: 1030;
}

	#sidebar-overlay.show {
		display: block;
	}

/* Topbar inner grouping — replaces the old ad-hoc inline
   style="display:flex;align-items:center;gap:..." on Tenant App's topbar */
.topbar-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* Small avatar variant used in Super Admin's topbar-right corner */
.user-avatar-sm {
	width: 34px;
	height: 34px;
	font-size: 12px;
	cursor: pointer;
}

@media(max-width:991px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #main{margin-left:0;}

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 1px solid var(--border);
		border-radius: 8px;
		background: #fff;
		color: var(--muted);
		font-size: 16px;
		cursor: pointer;
	}
}