/* Feature-owned layouts; colours follow the selected Bootstrap theme. */
.admin-example { display: grid; grid-template-columns: 222px minmax(0, 1fr); min-height: calc(100vh - 5rem); background: var(--bs-tertiary-bg); }
.example-sidebar { padding: 1.75rem 1rem 1rem; background: var(--bs-body-bg); display: flex; flex-direction: column; gap: 1rem; }
.example-workspace { display: flex; gap: .7rem; align-items: center; padding: 0 .4rem 1rem; }
.example-workspace strong, .example-profile strong { font-size: .8rem; }
.example-workspace small, .example-profile small { display: block; color: var(--bs-secondary-color); font-size: .7rem; margin-top: .2rem; }
.example-symbol { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); font-size: 1.15rem; flex-shrink: 0; }
.example-nav-label, .example-eyebrow { font-size: .66rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); }
.example-nav-label { padding: .4rem .7rem 0; }
.example-sidebar .nav-link { display: flex; gap: .75rem; align-items: center; color: var(--bs-secondary-color); padding: .7rem; border-radius: .5rem; font-size: .8rem; }
.example-sidebar .nav-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.example-sidebar .nav-link.active { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); font-weight: 600; }
.example-sidebar-note { padding: 1rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; margin-top: auto; }
.example-profile { display: flex; gap: .6rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.example-avatar { width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: .7rem; font-weight: 600; flex-shrink: 0; }
.example-main { padding: 1.8rem clamp(1rem, 2.7vw, 3rem); min-width: 0; max-width: 1660px; width: 100%; margin-inline: auto; }
.example-breadcrumb { font-size: .7rem; color: var(--bs-secondary-color); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.example-breadcrumb .bi { font-size: .55rem; }
.example-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin: 2rem 0 1.75rem; }
.example-heading h1 { font-size: clamp(1.8rem, 2.4vw, 2.5rem); font-weight: 650; letter-spacing: -.045em; margin: .4rem 0 .55rem; }
.example-heading p { color: var(--bs-secondary-color); margin: 0; font-size: .8rem; }
.admin-example .btn { font-size: .75rem; padding: .6rem .85rem; border-radius: .5rem; }
.admin-example .btn-sm { padding: .35rem .6rem; }
.admin-example .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); }
.example-stat, .example-panel { border-color: var(--bs-border-color); border-radius: .8rem; box-shadow: 0 2px 3px rgba(0, 0, 0, .015); }
.example-stat { padding: 1.2rem; height: 100%; }
.example-stat > div { font-size: .75rem; color: var(--bs-secondary-color); gap: .3rem; }
.example-stat > strong { display: block; font-size: 1.9rem; letter-spacing: -.05em; font-weight: 650; margin: .7rem 0 .5rem; }
.example-stat small { font-size: .67rem; }
.example-filter-tabs { display: flex; gap: 1.4rem; }
.example-filter-tabs button { padding: .7rem 0 1rem; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); background: none; border: 0; border-bottom: 2px solid transparent; }
.example-filter-tabs button.active { border-bottom-color: var(--bs-primary); color: var(--bs-primary-text-emphasis); }
.example-filter-tabs span { border-radius: .3rem; background: var(--bs-tertiary-bg); padding: .15rem .4rem; margin-left: .3rem; }
.example-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1.1rem 1.5rem; }
.example-search { max-width: 310px; }
.example-toolbar .form-control, .example-toolbar .form-select { font-size: .75rem; }
.admin-example .table-responsive { position: relative; }
.example-products { font-size: .75rem; min-width: 740px; }
.example-products th, .example-appointments th { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: .68rem; font-weight: 500; padding: .85rem .75rem; white-space: nowrap; }
.example-products td { padding: 1rem .75rem; }
.example-products tbody tr:last-child td, .example-appointments tbody tr:last-child td { border-bottom: 0; }
.example-sort { border: 0; background: none; color: inherit; padding: 0; }
.example-product-name { display: flex; align-items: center; gap: .8rem; }
.example-product-art { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .65rem; font-size: 1.3rem; flex-shrink: 0; background: var(--bs-secondary-bg); color: var(--bs-secondary-text-emphasis); }
.example-product-art[data-category="Home"] { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.example-product-art[data-category="Accessories"] { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.example-product-art[data-category="Wellness"] { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.example-product-name strong { display: block; font-size: .76rem; font-weight: 600; }
.example-product-name small { display: block; color: var(--bs-secondary-color); font-size: .63rem; margin-top: .25rem; }
.example-status { display: inline-flex; align-items: center; gap: .35rem; border-radius: .35rem; padding: .3rem .5rem; font-size: .65rem; white-space: nowrap; }
.example-status::before { content: ''; width: .3rem; height: .3rem; border-radius: 50%; background: currentColor; }
.example-footnote { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .65rem; color: var(--bs-secondary-color); margin-top: 1.4rem; }
.example-practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.min-width-0 { min-width: 0; }
.example-risk-grid { display: flex; align-items: center; gap: 2.25rem; }
.example-risk-donut { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--bs-primary) 0 72%, var(--bs-warning) 72% 92%, var(--bs-danger) 92%); padding: 13px; flex-shrink: 0; transform: rotate(-90deg); }
.example-risk-donut > div { width: 100%; height: 100%; background: var(--bs-body-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: rotate(90deg); }
.example-risk-donut strong { font-size: 1.6rem; letter-spacing: -.05em; }
.example-risk-donut span { font-size: .7rem; color: var(--bs-secondary-color); }
.example-dot { display: inline-block; height: .5rem; width: .5rem; border-radius: 50%; margin-right: .5rem; flex-shrink: 0; }
.example-risk-row { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--bs-border-color); font-size: .75rem; }
.example-risk-row strong { white-space: nowrap; }
.example-risk-row small { color: var(--bs-secondary-color); margin-left: .75rem; font-weight: 400; }
.example-activity-chart { height: 155px; display: flex; gap: 1rem; align-items: end; margin-top: 1.25rem; border-bottom: 1px solid var(--bs-border-color); background: repeating-linear-gradient(to top, transparent 0, transparent 37px, var(--bs-border-color-translucent) 38px, transparent 39px); }
.example-chart-column { height: 100%; flex: 1; min-width: 0; display: flex; align-items: end; justify-content: center; gap: .2rem; position: relative; padding-bottom: 1.5rem; }
.example-chart-column i { display: block; width: 22px; max-width: 38%; border-radius: .25rem .25rem 0 0; }
.example-chart-column span { position: absolute; bottom: .3rem; color: var(--bs-secondary-color); font-size: .65rem; }
.example-appointments { font-size: .73rem; min-width: 490px; }
.example-appointments td { padding: .85rem .75rem; }
.example-calendar-week, .example-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; text-align: center; }
.example-calendar-week { color: var(--bs-secondary-color); font-size: .65rem; margin-bottom: .7rem; }
.example-calendar-days button { position: relative; border: 1px solid transparent; background: none; color: var(--bs-body-color); border-radius: .45rem; aspect-ratio: 1; font-size: .7rem; padding: 0; }
.example-calendar-days button:hover { background: var(--bs-tertiary-bg); }
.example-calendar-days button[aria-pressed="true"] { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); color: var(--bs-primary-text-emphasis); font-weight: 700; }
.example-calendar-days button.has-appointments::after, .example-calendar-days button.has-event::after { content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--bs-primary); bottom: 2px; left: calc(50% - 1.5px); }
.example-calendar-days button.has-event::after { background: var(--bs-warning); }
.example-calendar-legend { display: grid; gap: .65rem; color: var(--bs-secondary-color); font-size: .7rem; }
.example-event-date { width: 3rem; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-radius: .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; padding: .4rem; }
.example-event-date strong { font-size: 1.2rem; } .example-event-date span { font-size: .6rem; }
.admin-example [id] { scroll-margin-top: 7rem; }
.admin-example [hidden] { display: none !important; }
@media (min-width: 1600px) { .example-practice-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 1199.98px) { .admin-example { grid-template-columns: 185px minmax(0, 1fr); } .example-practice-grid { grid-template-columns: minmax(0, 1fr); } .example-practice-grid > aside { display: grid !important; grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 991.98px) { .admin-example { display: block; } .example-sidebar { padding: 1rem; gap: .5rem; border-bottom: 1px solid var(--bs-border-color); } .example-sidebar .nav { flex-direction: row !important; flex-wrap: wrap; } .example-sidebar-note, .example-profile, .example-nav-label, .example-workspace { display: none; } .example-main { padding-top: 1.25rem; } .gallery-topbar { position: static; } }
@media (max-width: 575.98px) { .example-practice-grid > aside { display: flex !important; } .example-risk-grid { gap: 1rem; flex-direction: column; align-items: stretch; } .example-risk-donut { align-self: center; } .example-stat { padding: 1rem; } .example-stat small { line-height: 1.5; } .example-toolbar { padding: 1rem; } .example-search { max-width: none; } .example-heading { margin-top: 1.5rem; } .example-breadcrumb .badge { margin-left: 0 !important; } }