/* Dashboard layout — sidebar + main content */
.dashboard-layout {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.dashboard-sidebar {
width: 220px;
background: #fafaf8;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.sidebar-header {
padding: 1.25rem;
border-bottom: 1px solid var(--border);
}
.sidebar-logo {
font-weight: 600;
font-size: 1.1rem;
color: var(--text);
text-decoration: none;
}
.sidebar-nav {
padding: 0.5rem 0;
flex: 1;
}
.nav-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.25rem;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.1s;
}
.nav-item:hover { color: var(--text); background: #f0eeea; }
.nav-item.active { color: var(--accent); font-weight: 500; background: #f5f0e8; border-right: 3px solid var(--accent); }
.nav-icon { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.sidebar-divider {
height: 1px;
background: var(--border);
margin: 0.5rem 1.25rem;
}
.sidebar-toggle { display: none; }
/* Main content */
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--border);
background: white;
}
.dashboard-header #header-title {
font-weight: 600;
font-size: 1.1rem;
}
.header-right {
display: flex;
align-items: center;
gap: 1rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.dashboard-content {
padding: 1.5rem;
flex: 1;
overflow-y: auto;
}
/* Session card (calendar view) */
.session-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.75rem;
background: white;
}
.session-time {
font-weight: 600;
font-size: 0.95rem;
min-width: 80px;
color: var(--accent);
}
.session-info { flex: 1; }
.session-client {
font-weight: 500;
margin-bottom: 0.15rem;
}
.session-meta {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.session-actions {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.session-actions .btn {
padding: 0.3rem 0.7rem;
font-size: 0.8rem;
border-radius: 4px;
}
/* Summary cards */
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.summary-card {
padding: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
text-align: center;
background: white;
}
.summary-number {
font-size: 2rem;
font-weight: 600;
color: var(--accent);
}
.summary-label {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
/* Week overview */
.week-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
margin: 1rem 0;
}
.week-day {
text-align: center;
padding: 0.75rem 0.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: white;
}
.week-day.today { border-color: var(--accent); background: #faf8f4; }
.week-day-name {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
}
.week-day-count {
font-size: 1.4rem;
font-weight: 600;
margin: 0.25rem 0;
}
.week-day-date {
font-size: 0.75rem;
color: var(--text-secondary);
}
/* Client list */
.client-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.5rem;
background: white;
cursor: pointer;
transition: border-color 0.1s;
}
.client-card:hover { border-color: var(--accent); }
.client-card-info { flex: 1; }
.client-card-name { font-weight: 500; margin-bottom: 0.15rem; }
.client-card-meta { font-size: 0.85rem; color: var(--text-secondary); }
/* Package list */
.package-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.5rem;
background: white;
}
.package-row-info { flex: 1; }
.package-row-name { font-weight: 500; margin-bottom: 0.15rem; }
.package-row-meta { font-size: 0.85rem; color: var(--text-secondary); }
.package-row-actions {
display: flex;
gap: 0.4rem;
}
.package-row-actions .btn { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
/* Availability editor */
.day-editor {
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.day-editor-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.day-editor-header label { font-weight: 500; margin-bottom: 0; flex: 1; }
.time-window {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
margin-left: 1.5rem;
}
.time-window select {
width: auto;
margin-bottom: 0;
padding: 0.4rem;
font-size: 0.9rem;
}
.time-window .remove-window {
background: none;
border: none;
color: var(--error);
cursor: pointer;
font-size: 1.2rem;
padding: 0.2rem;
}
.add-window {
margin-left: 1.5rem;
background: none;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 0.85rem;
padding: 0.3rem 0;
}
.add-window:hover { text-decoration: underline; }
/* Settings layout */
.settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
max-width: 900px;
}
.settings-grid .settings-full {
grid-column: 1 / -1;
}
.settings-section {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
text-align: left;
}
.settings-section h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.settings-section label {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 0.2rem;
}
.settings-section input,
.settings-section select,
.settings-section textarea {
margin-bottom: 0.75rem;
padding: 0.6rem 0.75rem;
font-size: 0.9rem;
}
.settings-section textarea {
resize: vertical;
}
.settings-row {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.settings-row > div {
flex: 1;
}
.settings-info {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.settings-info a {
color: var(--accent);
font-weight: 500;
}
.settings-badge {
display: inline-block;
font-size: 0.8rem;
font-weight: 500;
padding: 0.15rem 0.5rem;
border-radius: 10px;
}
.settings-badge.success {
background: #e6f4ea;
color: var(--success);
}
.settings-badge.neutral {
background: #f0f0f0;
color: var(--text-secondary);
}
@media (max-width: 768px) {
.settings-grid {
grid-template-columns: 1fr;
}
.settings-row {
flex-direction: column;
gap: 0;
}
}
/* Progress bar */
.progress {
height: 8px;
background: var(--border);
border-radius: 4px;
overflow: hidden;
margin: 0.5rem 0;
}
.progress-fill {
height: 100%;
background: var(--accent);
border-radius: 4px;
transition: width 0.3s;
}
/* Responsive */
@media (max-width: 768px) {
.dashboard-sidebar {
position: fixed;
left: -220px;
top: 0;
bottom: 0;
z-index: 100;
transition: left 0.2s;
}
.dashboard-sidebar.open { left: 0; box-shadow: 2px 0 8px rgba(0,0,0,0.1); }
.sidebar-toggle { display: block; background: none; border: none; font-size: 1.4rem; cursor: pointer; }
.summary-grid { grid-template-columns: repeat(2, 1fr); }
.week-grid { grid-template-columns: repeat(4, 1fr); }
}