:root{
--bs-primary:#177d72;
--bs-primary-rgb:23,125,114;
--bs-body-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
--bs-body-color:#263e44;
--bs-body-bg:#f5f7f9;
--bs-border-color:#e2e8ed;
--bs-link-color:#177d72;
--bs-link-hover-color:#105d55;
--lte-sidebar-width:264px;
--lte-main-bg:#f5f7f9}

.dashboard-stat-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1rem;
margin-bottom:1.5rem}
.card.dashboard-stat-card{
margin-bottom:0}
.dashboard-stat-body{
padding:1.25rem}
.dashboard-stat-heading,.dashboard-work-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:.75rem}
.dashboard-stat-heading{
margin-bottom:.75rem}
.dashboard-work-heading{
flex-wrap:wrap;
margin-bottom:1rem}
.dashboard-metric-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.5rem}
.dashboard-metric-value{
font-size:1.5rem;
line-height:2rem;
font-weight:600;
font-variant-numeric:tabular-nums}
@media(min-width:1024px){
.dashboard-metric-grid{
grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1280px){
.dashboard-stat-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}}

html{
font-size:100%}
html[data-text-size="small"]{
font-size:87.5%}
html[data-text-size="large"]{
font-size:112.5%}

body{
font-size:1rem;
line-height:1.6;
letter-spacing:.012em}
a{
transition:color .15s,background .15s}
button,a,input,select,textarea{
outline-offset:3px}
[v-cloak]{
display:none}
.app-wrapper{
grid-template-areas:"lte-app-sidebar lte-app-header" "lte-app-sidebar lte-app-main" "lte-app-sidebar lte-app-footer"}
.app-sidebar{
display:flex;
flex-direction:column;
height:100vh;
height:100dvh;
overflow:hidden;
background:#fff;
border-right:1px solid #e2e8ed;
box-shadow:none!important}
.sidebar-brand{
height:auto;
min-height:90px;
flex:none;
padding:20px 16px;
text-decoration:none;
display:flex;
justify-content:flex-start;
gap:11px;
color:#243f42;
font-size:1.375rem;
font-weight:750;
letter-spacing:.1em;
border-bottom:0}
.brand-caption{
min-width:0}
.sidebar-brand small{
display:block;
font-size:.8125rem;
letter-spacing:.07em;
font-weight:500;
color:#809096;
margin-top:4px}
.brand-mark{
display:inline-flex;
flex:none;
align-items:center;
justify-content:center;
width:38px;
height:40px;
border-radius:12px;
background:#177d72;
color:white;
font:600 25px Georgia,serif;
letter-spacing:0}
.sidebar-wrapper{
padding:0 15px;
display:flex;
flex-direction:column}
.sidebar-expand-lg.layout-fixed .app-sidebar>.sidebar-wrapper{
height:auto;
min-height:0;
flex:1;
overflow-x:hidden;
overflow-y:auto;
scrollbar-gutter:stable}
.clinic-navigation{
flex:none;
padding-bottom:12px}
.skip-link{
top:0;
transform:translateY(calc(-100% - 1rem))}
.skip-link:focus{
transform:none}
.nav-section{
font-size:.8125rem;
letter-spacing:.12em;
color:#85959c;
font-weight:650;
margin:26px 13px 9px}
.workspace-nav{
display:flex;
align-items:center;
gap:13px;
min-height:43px;
padding:11px 14px;
margin:3px 0;
border-radius:8px;
color:#687b83;
text-decoration:none;
font-size:1rem;
font-weight:500}
.workspace-nav i{
font-size:1.125rem;
width:19px}
.workspace-nav:hover{
background:#f4f8f7;
color:#177d72}
.workspace-nav.is-current{
background:#e8f4ef;
color:#117567;
font-weight:650}
.nav-active-dot{
width:5px;
height:5px;
flex:none;
visibility:hidden;
border-radius:50%;
background:#258d7b;
margin-left:auto}
.workspace-nav.is-current .nav-active-dot{
visibility:visible}
.navigation-group{
margin:6px 0}
.navigation-heading,.navigation-subheading{
display:flex;
align-items:center;
gap:10px;
list-style:none;
cursor:pointer;
border-radius:8px;
color:#526a72;
font-weight:650;
padding:12px 10px;
overflow-wrap:anywhere}
.navigation-heading::-webkit-details-marker,.navigation-subheading::-webkit-details-marker{
display:none}
.navigation-heading:hover,.navigation-subheading:hover{
background:#f4f8f7;
color:#177d72}
.navigation-heading:focus-visible,.navigation-subheading:focus-visible{
outline:2px solid #177d72;
outline-offset:-2px}
.navigation-heading>i:first-child{
flex:none;
font-size:1.125rem}
.navigation-heading>span,.navigation-subheading>span,.workspace-nav>span:first-of-type{
min-width:0}
.navigation-chevron{
margin-left:auto;
flex:none;
font-size:.75rem}
details[open]>.navigation-heading>.navigation-chevron,details[open]>.navigation-subheading>.navigation-chevron{
transform:rotate(90deg)}
.navigation-group:has(.is-current)>.navigation-heading,.navigation-subgroup:has(.is-current)>.navigation-subheading{
color:#117567}
.navigation-items{
margin:0 0 10px 18px;
padding-left:7px;
border-left:1px solid #e2e8ed}
.navigation-items .workspace-nav{
gap:9px;
padding:10px 7px}
.navigation-items .workspace-nav i{
flex:none}
.navigation-subheading{
font-size:.9375rem;
padding:10px 5px}
.navigation-subgroup .workspace-nav{
margin-left:3px}
.sidebar-bottom{
flex:none;
padding:16px 18px;
border-top:1px solid #edf1f3;
font-size:.8125rem;
color:#8d9aa0;
display:flex;
gap:6px;
align-items:center}
.sidebar-bottom>span:last-child{
min-width:0;
overflow-wrap:anywhere}
.navigation-status{
font-size:.8125rem;
color:#177d72;
white-space:nowrap}
.app-header{
position:sticky;
top:0;
min-height:70px;
border-bottom:1px solid #e2e8ed;
padding:10px 22px;
box-shadow:none}
.sidebar-toggle{
border:0;
background:transparent;
color:#7e8f96;
padding:7px;
font-size:1.5rem}
.header-context{
font-size:.9375rem;
color:#6f818a}
.header-divider{
height:22px;
border-left:1px solid #e2e8ed}
.account-avatar{
display:flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:50%;
background:#eaf1f4;
color:#54717b;
font-weight:600;
text-transform:uppercase}
.account-name{
font-size:.9375rem;
font-weight:600}
.app-main{
background:#f5f7f9}
.app-content-header{
padding:30px 28px 24px}
.app-content{
padding:0 28px 28px}
.page-eyebrow{
font-size:.8125rem;
font-weight:650;
letter-spacing:.12em;
color:#8a9aa0;
margin:0 0 8px}
.page-heading{
font-size:1.75rem;
font-weight:700;
letter-spacing:-.025em;
margin:0;
color:#263e44}
.workspace-date{
display:flex;
align-items:center;
gap:9px;
justify-content:flex-end;
margin-top:22px;
font-size:.9375rem;
font-weight:500}
.availability-dot{
width:6px;
height:6px;
background:#42a68d;
display:inline-block;
border-radius:50%;
flex-shrink:0}
.card{
border:1px solid #e2e8ed;
border-radius:12px;
box-shadow:0 2px 4px #243f4203;
margin-bottom:22px;
overflow:visible}
.card-header{
padding:19px 22px;
border-bottom:1px solid #edf0f3;
background:white;
border-radius:12px 12px 0 0!important}
.card-title{
font-size:1rem;
font-weight:650;
float:none;
margin:0;
line-height:1.6}
.card-header .d-flex{
gap:12px;
flex-wrap:wrap}
.card-body{
padding:22px}
.card-footer{
background:#fcfdfd;
border-top:1px solid #edf0f3;
padding:16px 22px;
border-radius:0 0 12px 12px!important}
.btn{
font-size:.9375rem;
font-weight:550;
border-radius:7px;
padding:9px 15px;
line-height:1.5}
.btn-sm{
padding:7px 11px;
font-size:.875rem}
.btn-primary{
--bs-btn-bg:#177d72;
--bs-btn-border-color:#177d72;
--bs-btn-hover-bg:#116459;
--bs-btn-hover-border-color:#116459;
--bs-btn-active-bg:#105b52;
--bs-btn-active-border-color:#105b52;
--bs-btn-disabled-bg:#177d72;
--bs-btn-disabled-border-color:#177d72}
.btn-outline-primary{
--bs-btn-color:#177d72;
--bs-btn-border-color:#bad6cf;
--bs-btn-hover-bg:#177d72;
--bs-btn-hover-border-color:#177d72}
.btn-light{
background:#f4f7f9;
border-color:#e7edf0;
color:#73868c}
.btn-outline-secondary{
--bs-btn-color:#687f86;
--bs-btn-border-color:#dce5e8;
--bs-btn-hover-bg:#f0f5f5;
--bs-btn-hover-color:#263e44;
--bs-btn-hover-border-color:#bdcdcd}
.card-footer .btn+.btn,td .btn+.btn{
margin-left:6px}
.table{
--bs-table-bg:transparent;
--bs-table-hover-bg:#f6faf9;
color:#344d54;
font-size:1rem;
margin-bottom:0}
.table>thead>tr>th{
background:#f8fafb;
color:#809099;
font-size:.875rem;
font-weight:600;
letter-spacing:.04em;
border-bottom:1px solid #edf0f3;
white-space:nowrap;
padding:12px 16px}
.table>tbody>tr>td{
padding:16px;
border-bottom:1px solid #edf1f3;
vertical-align:middle}
.table>tbody>tr:last-child>td{
border-bottom:0}
.table a{
text-decoration:none}
.table td.text-end{
white-space:nowrap}
.table td.text-end .btn{
padding:6px 9px}
.badge{
font-size:.8125rem;
font-weight:550;
padding:5px 8px;
border-radius:5px;
letter-spacing:.02em}
.text-bg-info{
background:#e9f3f8!important;
color:#36738c!important}
.text-bg-success{
background:#e8f5ee!important;
color:#29805e!important}
.text-bg-danger{
background:#fceeed!important;
color:#b36866!important}
.text-bg-warning{
background:#fff5df!important;
color:#a87d30!important}
.text-bg-primary{
background:#e5f2ef!important;
color:#177d72!important}
.text-bg-secondary{
background:#f0f3f5!important;
color:#73828c!important}
.text-bg-dark{
background:#eaeef5!important;
color:#546683!important}
.form-label{
font-size:.9375rem;
font-weight:600;
color:#536d77;
margin-bottom:8px}
.form-control,.form-select{
background-color:#fff;
border:1px solid #dce5e8;
border-radius:7px;
font-size:1rem;
min-height:41px;
padding:9px 12px}
.form-control:focus,.form-select:focus{
border-color:#63a99e;
box-shadow:0 0 0 3px #177d7210}
.form-check-input:checked{
background-color:#177d72;
border-color:#177d72}
.invalid-feedback{
font-size:.875rem}
.form-control::placeholder{
color:#a5afb5}
.modal-content{
border:0;
border-radius:14px;
box-shadow:0 20px 100px #223d4425}
.modal-header,.modal-footer{
padding:20px 24px;
border-color:#edf0f3}
.modal-body{
padding:24px}
.modal-title{
font-size:1.125rem;
font-weight:650}
.toast-container{
z-index:1200}
.toast{
border-radius:10px;
box-shadow:0 8px 40px #213d4425}
.app-footer{
background:#f5f7f9;
border-top:1px solid #e5ebee;
color:#94a1a7;
font-size:.8125rem;
display:flex;
justify-content:space-between;
padding:20px 40px}
.app-footer a{
text-decoration:none;
color:#879ba0}
.section-kicker{
color:#91a29e;
font-size:.8125rem;
letter-spacing:.12em;
font-weight:650}
.stat-icon{
display:flex;
align-items:center;
justify-content:center;
width:35px;
height:35px;
border-radius:9px;
background:#edf6f3;
color:#368c7b;
font-size:1.125rem}
.stat-number{
font-size:2.125rem;
line-height:1.3;
letter-spacing:-.04em;
font-weight:650;
color:#29484b;
font-variant-numeric:tabular-nums}
.stat-label{
font-size:.875rem;
color:#7c8f96}
.stat-footnote{
font-size:.8125rem;
color:#9ba8ad}
.workday-hero{
background:#eaf3f0;
border:1px solid #dcebe5;
border-radius:12px;
padding:24px 28px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:24px}
.workday-hero h2{
font-size:1.375rem;
font-weight:650;
margin:0 0 8px;
color:#30534c}
.workday-hero p{
font-size:.9375rem;
color:#7a958c;
margin:0}
.workday-hero-symbol{
font:italic 74px Georgia,serif;
color:#a9cbc0;
line-height:1}
.table-heading-link{
font-size:.875rem;
text-decoration:none;
color:#718e88;
white-space:nowrap}
.empty-state{
padding:36px 15px;
text-align:center;
color:#93a1a7;
font-size:.9375rem}
.empty-state i{
display:block;
font-size:2rem;
margin-bottom:10px;
color:#bacbc6}
.login-page{
background:#f2f6f5!important;
background-image:radial-gradient(ellipse at 20% 10%,#e4f0e9,transparent 60%)!important;
min-height:100vh}
.login-box{
width:420px;
max-width:calc(100vw - 36px)}
.login-logo{
margin-bottom:30px;
text-align:left}
.login-logo a{
display:flex;
align-items:center;
gap:12px;
color:#2c5049;
font-size:1.75rem;
letter-spacing:.12em;
text-decoration:none}
.login-box .card{
border:1px solid #e0e9e4;
box-shadow:0 14px 60px #18382f08;
border-radius:16px}
.login-card-body{
padding:34px;
background:white;
border-radius:16px}
.login-card-body .page-eyebrow{
margin-bottom:18px}
.login-card-body .form-control{
min-height:46px}
.login-card-body .input-group-text{
background:#f7faf9;
color:#7d9b92;
border-color:#dce5e8}
.login-card-body .btn-primary{
min-height:43px}
.login-card-body .form-check-label{
font-size:.9375rem;
color:#8b9c95}
.resource-allocation{
border-left:3px solid #70ac9d;
background:#f3f8f6;
border-radius:4px;
padding:9px 12px;
line-height:1.8}

@media(max-width:991.98px){
.app-wrapper{
grid-template-columns:minmax(0,1fr);
grid-template-areas:"lte-app-header" "lte-app-main" "lte-app-footer"}
.app-content-header{
padding:24px 14px 20px}
.app-content{
padding:0 14px 20px}
.app-header{
padding:10px 12px}
.app-sidebar{
z-index:1040}
.sidebar-open .app-sidebar{
box-shadow:12px 0 80px #233d4420!important}
.app-footer{
padding:18px 25px}
.workday-hero{
padding:20px}
.page-heading{
font-size:1.625rem}
}

@media(max-width:575.98px){
.workspace-date{
justify-content:flex-start;
margin-top:13px;
font-size:.875rem}
.card-body{
padding:17px}
.card-header{
padding:17px}
.card-footer{
padding:14px 17px;
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap}
.card-footer .btn+.btn{
margin-left:0}
.header-divider{
display:none}
.app-footer>a{
display:none}
.workday-hero-symbol{
display:none}
.table>tbody>tr>td{
padding:13px 12px}
.table>thead>tr>th{
padding:12px}
.card-footer.text-end{
position:sticky;
bottom:0;
z-index:5}
.login-card-body{
padding:26px}
.workday-hero h2{
font-size:1.125rem}
}


.card,.info-box{
background:#fff}
.workday-heading{
font-size:1.125rem;
font-weight:650;
margin:0}
.table a{
color:#177d72}

.appointment-status-options{
display:flex;
flex-wrap:wrap;
gap:10px}
.app-main fieldset{
min-width:0;
margin:0;
padding:0;
border:0}
.appointment-status-option{
min-width:6rem;
min-height:2.75rem}
.appointment-status-option[aria-pressed="true"]{
box-shadow:0 0 0 2px #177d7220}
.form-control[readonly]{
background:#f6f8f9;
color:#536d77}


.header-toolbar{
flex-wrap:wrap;
gap:12px}
.header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
flex:1;
min-width:0;
gap:12px}
.header-actions>.btn{
white-space:nowrap}
.text-size-control{
display:inline-flex;
align-items:center;
gap:3px;
flex-shrink:0;
padding:3px;
border:1px solid #dce5e8;
border-radius:9px;
background:#f8fafb}
.text-size-label{
font-size:.8125rem;
color:#536d77;
padding:0 5px}
.text-size-option{
font:inherit;
font-size:.875rem;
font-weight:600;
line-height:1.4;
min-width:2rem;
min-height:2rem;
padding:4px 7px;
border:1px solid transparent;
border-radius:6px;
background:transparent;
color:#536d77;
cursor:pointer}
.text-size-option:hover{
background:#edf4f1;
color:#105d55}
.text-size-option[aria-pressed="true"]{
background:#177d72;
color:#fff}
.text-size-option:focus-visible{
outline:2px solid #177d72;
outline-offset:2px}
.login-text-size{
position:absolute;
top:20px;
right:20px}
.login-page{
padding:90px 0 32px}
.flatpickr-calendar{
font-size:.9375rem}
.flatpickr-current-month{
font-size:1.125rem}
.flatpickr-time input{
font-size:1rem}
@media(max-width:575.98px){
.header-toolbar{
gap:8px;
padding:0}
.header-actions{
gap:6px}
.text-size-label{
padding:0 3px}
}
@media(max-width:400px){
.app-header .text-size-label{
display:none}
}
@media(max-width:359.98px){
.header-create-label{
display:none}
.header-create .bi{
margin-right:0!important}
}

.resource-schedule{
--resource-accent:#177d72;
--resource-tint:#e9f5f1}
.schedule-intro{
color:#82949b;
font-size:.9375rem;
margin:0 0 16px}
.schedule-toolbar-actions{
display:flex;
align-items:center;
gap:12px}
.schedule-zoom{
margin-left:12px;
font:inherit;
color:#177d72;
background:#edf6f3;
border:0;
border-radius:5px;
padding:4px 8px;
cursor:pointer}
.schedule-summary{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:22px}
.schedule-summary-item{
display:flex;
align-items:center;
gap:14px;
background:white;
border:1px solid #e2e8ed;
border-radius:12px;
padding:18px}
.schedule-summary-item>div{
min-width:0}
.schedule-summary-item>div>span{
display:block;
font-size:.8125rem;
color:#73868c}
.schedule-summary-item strong{
display:block;
font-size:1.75rem;
font-weight:650;
font-variant-numeric:tabular-nums;
line-height:1.3;
color:#29484b}
.schedule-summary-icon{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
flex-shrink:0;
border-radius:11px;
background:#edf6f3;
color:#177d72;
font-size:1.25rem}
.schedule-workspace{
overflow:hidden}
.schedule-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 22px;
border-bottom:1px solid #edf0f3}
.schedule-date-controls{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px}
.schedule-date-controls input{
width:11rem;
font-variant-numeric:tabular-nums}
.schedule-day-arrow{
padding:9px 11px}
.schedule-view-controls{
display:flex;
flex-shrink:0;
padding:4px;
gap:4px;
background:#f1f5f6;
border-radius:9px}
.schedule-view-controls button{
background:transparent;
border:0;
padding:8px 12px;
font:inherit;
font-size:.875rem;
font-weight:600;
color:#71848c;
border-radius:6px;
cursor:pointer}
.schedule-view-controls button.is-selected{
background:white;
color:#177d72;
box-shadow:0 1px 5px #243f4212}
.schedule-filters{
padding:18px 22px 16px;
border-bottom:1px solid #edf0f3}
.schedule-type-filters{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px}
.schedule-type-filter{
display:inline-flex;
align-items:center;
gap:7px;
background:white;
border:1px solid #e2e8ed;
border-radius:8px;
padding:7px 10px;
font:inherit;
font-size:.875rem;
font-weight:550;
color:#71848c;
cursor:pointer}
.schedule-type-filter>i{
color:var(--resource-accent)}
.schedule-type-filter>span{
font-size:.8125rem;
border-radius:4px;
padding:0 5px;
background:#f1f4f5;
font-variant-numeric:tabular-nums}
.schedule-type-filter.is-selected{
background:var(--resource-tint);
border-color:var(--resource-accent);
color:var(--resource-accent)}
.schedule-search-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:16px}
.schedule-filter-hint{
display:none}
.schedule-search{
position:relative;
width:280px;
max-width:100%}
.schedule-search>i{
position:absolute;
top:50%;
left:12px;
transform:translateY(-50%);
color:#91a1a7}
.schedule-search input{
padding-left:36px}
.schedule-assigned-filter{
display:flex;
align-items:center;
gap:9px;
font-size:.875rem;
color:#536d77;
cursor:pointer}
.schedule-assigned-filter input{
margin:0}
.schedule-result-count{
margin-left:auto;
font-size:.8125rem;
color:#82949b}
.schedule-view-caption{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:8px;
padding:16px 22px;
font-size:.8125rem;
color:#82949b}
.schedule-view-caption strong{
font-weight:600;
color:#536d77}
.schedule-timeline-scroll{
max-height:68vh;
overflow:auto;
scrollbar-color:#bdcdc7 #f4f7f8;
scrollbar-width:thin;
border-top:1px solid #e5ecef;
border-bottom:1px solid #e5ecef}
.schedule-timeline{
--schedule-name-width:174px;
min-width:calc(var(--schedule-name-width) + var(--schedule-hours) * var(--schedule-hour-width,72px))}
.schedule-axis,.schedule-resource-row{
display:grid;
grid-template-columns:var(--schedule-name-width) minmax(0,1fr)}
.schedule-axis{
position:sticky;
top:0;
z-index:4;
background:#f8fafb;
border-bottom:1px solid #dfe8ec}
.schedule-axis-corner{
position:sticky;
left:0;
z-index:5;
padding:13px 16px;
background:#f8fafb;
border-right:1px solid #dfe8ec;
font-size:.8125rem;
font-weight:600;
color:#71848c}
.schedule-hour-axis{
display:grid;
grid-template-columns:repeat(var(--schedule-hours),minmax(0,1fr));
font-size:.8125rem;
font-variant-numeric:tabular-nums;
color:#82949b}
.schedule-hour-axis span{
padding:13px 6px;
border-left:1px solid #edf1f3}
.schedule-type-heading{
background:var(--resource-tint);
border-bottom:1px solid #e7edef;
min-height:34px;
color:var(--resource-accent);
font-size:.8125rem;
font-weight:650}
.schedule-type-heading>span{
display:block;
position:sticky;
left:0;
width:max-content;
max-width:var(--schedule-name-width);
padding:7px 16px}
.schedule-resource-row{
border-bottom:1px solid #e9eff1}
.schedule-resource-row:last-child{
border-bottom:0}
.schedule-resource-label{
position:sticky;
left:0;
z-index:2;
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
padding:12px 16px;
background:white;
border-right:1px solid #dfe8ec;
box-shadow:3px 0 5px #243f4203}
.schedule-resource-label strong{
font-size:.9375rem;
line-height:1.35;
overflow-wrap:anywhere}
.schedule-resource-label>span{
font-size:.8125rem;
color:#91a1a7}
.schedule-resource-track{
position:relative;
background-color:#fff;
background-image:linear-gradient(to right,#e8eef1 1px,transparent 1px);
background-size:calc(100% / var(--schedule-hours)) 100%}
.schedule-event{
position:absolute;
height:52px;
padding:0;
border:0;
box-shadow:inset 3px 0 var(--resource-accent);
border-radius:6px;
background:var(--resource-tint);
color:#344d54;
font:inherit;
text-align:left;
overflow:hidden;
cursor:pointer;
transition:box-shadow .15s,filter .15s}
.schedule-event:hover,.schedule-event:focus-visible{
z-index:3;
filter:brightness(.97);
box-shadow:0 3px 12px #243f421c}
.schedule-event strong,.schedule-event>span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.schedule-event strong{
font-size:.875rem;
font-weight:650;
line-height:1.4;
padding:6px 7px 0}
.schedule-event>span{
font-size:.8125rem;
color:#71848c;
line-height:1.4;
padding:0 7px}
.schedule-track-empty{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
font-size:.8125rem;
color:#a4b1b5}
.schedule-resource-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
align-items:start;
gap:16px;
padding:0 22px 22px}
.schedule-resource-card{
min-width:0;
border:1px solid #e1e9ed;
border-radius:11px;
overflow:hidden;
background:#fff}
.schedule-resource-card>header{
display:flex;
align-items:center;
gap:11px;
padding:17px 16px;
border-bottom:1px solid #edf1f3;
background:linear-gradient(110deg,var(--resource-tint),#fff 95%)}
.schedule-resource-card>header>div{
min-width:0;
flex:1}
.schedule-resource-icon{
display:flex;
align-items:center;
justify-content:center;
width:35px;
height:35px;
flex-shrink:0;
border:1px solid color-mix(in srgb,var(--resource-accent) 18%,transparent);
border-radius:9px;
background:#ffffffb3;
color:var(--resource-accent);
font-size:1.125rem}
.schedule-card-type{
font-size:.8125rem;
color:#82949b}
.schedule-resource-card h3{
font-size:1rem;
font-weight:650;
line-height:1.4;
margin:2px 0 0;
overflow-wrap:anywhere}
.schedule-card-count{
font-size:.8125rem;
white-space:nowrap;
color:var(--resource-accent);
font-weight:600}
.schedule-card-events{
padding:9px}
.schedule-card-event{
position:relative;
display:flex;
flex-direction:column;
gap:6px;
width:100%;
text-align:left;
background:#fff;
border:0;
border-left:3px solid var(--resource-accent);
border-radius:5px;
font:inherit;
padding:12px 26px 12px 11px;
margin:4px 0 9px;
color:#344d54;
cursor:pointer}
.schedule-card-event:hover,.schedule-card-event:focus-visible{
background:var(--resource-tint)}
.schedule-card-event:last-child{
margin-bottom:0}
.schedule-card-event strong{
font-size:1rem;
font-weight:600;
overflow-wrap:anywhere}
.schedule-card-event>span:last-of-type{
font-size:.875rem;
line-height:1.5;
color:#82949b;
overflow-wrap:anywhere}
.schedule-card-time{
font-size:.8125rem;
font-weight:600;
color:var(--resource-accent);
font-variant-numeric:tabular-nums}
.schedule-card-open{
position:absolute;
right:9px;
top:13px;
color:#9aaca8;
font-size:.875rem}
.schedule-resource-empty{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:92px;
font-size:.875rem;
color:#9aabae}
.schedule-resource-empty i{
font-size:1.125rem;
color:#b1c4bb}
.schedule-expand{
width:100%;
padding:11px;
font:inherit;
font-size:.8125rem;
color:var(--resource-accent);
background:#fafcfc;
border:0;
border-top:1px solid #edf1f3;
cursor:pointer}
.schedule-inactive-note{
padding:9px 12px 0;
font-size:.8125rem;
color:#82949b}
.schedule-day-empty{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
margin:20px 22px 0;
padding:18px;
background:#f3f8f6;
border:1px dashed #cbded5;
border-radius:10px}
.schedule-day-empty-icon{
font-size:1.5rem;
color:#7ba892}
.schedule-day-empty>div{
flex:1;
min-width:180px}
.schedule-day-empty strong{
font-size:.9375rem;
color:#486a5d}
.schedule-day-empty p{
font-size:.875rem;
margin:5px 0 0;
color:#8a9f97}
.schedule-footer-note{
padding:15px 22px;
border-top:1px solid #edf1f3;
background:#fcfdfd;
font-size:.8125rem;
color:#8a9ba0}
.schedule-no-results{
text-align:center;
padding:45px 22px}
.schedule-no-results>i{
font-size:1.75rem;
color:#adc5bc}
.schedule-no-results h3{
font-size:1.125rem;
font-weight:600;
margin:14px 0 8px}
.schedule-no-results p{
color:#82949b;
font-size:.9375rem}
.schedule-detail-heading{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px;
margin-bottom:24px}
.schedule-detail-heading h3{
font-size:1.25rem;
font-weight:650;
margin:0}
.schedule-detail dl{
display:grid;
grid-template-columns:90px minmax(0,1fr);
gap:16px 12px;
margin:0}
.schedule-detail dt{
color:#82949b;
font-size:.875rem;
font-weight:500}
.schedule-detail dd{
margin:0;
overflow-wrap:anywhere}
@media(max-width:767.98px){
.schedule-summary{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px}
.schedule-summary-item{
padding:13px;
gap:10px}
.schedule-summary-icon{
width:30px;
height:34px;
font-size:1.125rem}
.schedule-toolbar-actions{
width:100%}
.schedule-toolbar,.schedule-filters{
padding:16px}
.schedule-view-controls{
width:100%}
.schedule-view-controls button{
flex:1}
.schedule-date-controls{
width:100%;
gap:6px}
.schedule-date-controls input{
width:9.75rem;
flex:1;
min-width:0}
.schedule-search{
width:100%}
.schedule-search-row{
gap:12px}
.schedule-result-count{
font-size:.8125rem}
.schedule-resource-grid{
padding:0 16px 16px}
.schedule-view-caption{
padding:14px 16px}
.schedule-day-empty{
margin:16px 16px 0;
padding:15px}
.schedule-footer-note{
padding:14px 16px}
}
@media(max-width:575.98px){
.schedule-intro{
display:none}
.schedule-summary-item{
padding:11px 12px}
.schedule-summary-icon{
display:none}
.schedule-summary-item>div{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
width:100%}
.schedule-summary-item strong{
font-size:1.25rem}
.schedule-date-controls{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px}
.schedule-date-controls input{
grid-column:1/-1;
grid-row:1;
width:100%}
.schedule-date-controls .btn{
padding:8px}
.schedule-type-filters{
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:thin;
padding-bottom:5px;
margin-bottom:6px}
.schedule-type-filter{
flex-shrink:0}
.schedule-filter-hint{
display:block;
font-size:.8125rem;
color:#91a1a7;
margin:0 0 12px}
}

/* Appointment management: readable lists and focused forms. */
.appointment-management{
min-width:0}
.appointment-list-toolbar,.appointment-detail-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:12px}
.appointment-result-count{
margin:0;
color:#687f86;
font-size:.9375rem}
.appointment-result-count strong{
color:#29484e;
font-size:1.125rem}
.appointment-toolbar-actions,.appointment-filter-actions,.appointment-row-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px}
.appointment-filters{
display:grid;
grid-template-columns:minmax(12rem,1fr) minmax(12rem,1.5fr) minmax(9rem,1fr) auto;
align-items:end;
gap:14px;
padding:20px 22px;
border-bottom:1px solid #edf0f3}
.appointment-filters>div{
min-width:0}
.appointment-filters .form-label{
font-size:.875rem;
margin-bottom:6px}
.appointment-filters input[type=date]{
min-height:44px;
min-width:0;
width:100%}
.appointment-daily-filters{
grid-template-columns:minmax(13rem,16rem) auto;
justify-content:start}
.appointment-list-wrap{
overflow-x:auto;
border-radius:0 0 12px 12px}
.appointment-list{
table-layout:fixed;
width:100%}
.appointment-list th:nth-child(1){width:22%}
.appointment-list th:nth-child(2){width:20%}
.appointment-list th:nth-child(3){width:24%}
.appointment-list th:nth-child(4){width:12%}
.appointment-list th:nth-child(5){width:22%}
.appointment-list td{
overflow-wrap:anywhere}
.appointment-list .appointment-cell-actions{
text-align:right}
.appointment-row-actions{
justify-content:flex-end;
gap:6px}
.appointment-row-actions .btn+.btn{
margin-left:0}
.appointment-time-range{
display:flex;
flex-direction:column;
gap:3px;
font-variant-numeric:tabular-nums;
line-height:1.6}
.appointment-date,.appointment-member-mobile{
color:#6c8189;
font-size:.875rem}
.appointment-hours{
font-weight:650;
color:#304d54}
.appointment-hours time{
white-space:nowrap}
.appointment-time-separator{
color:#8a9ba0;
padding:0 5px}
.appointment-end-date{
font-size:.875rem;
font-weight:500}
.appointment-member-name{
font-weight:650;
font-size:1.0625rem;
color:#25484d;
text-decoration:none}
.appointment-member-name:hover{
color:#177d72;
text-decoration:underline}
.appointment-member-mobile{
display:block;
margin-top:3px}
.appointment-service-name{
font-weight:550}
.appointment-note-preview{
margin-top:6px;
font-size:.875rem}
.appointment-note-preview summary{
color:#667f87;
cursor:pointer;
width:fit-content}
.appointment-note-preview summary:hover{
color:#177d72}
.appointment-note-preview p{
white-space:pre-wrap;
overflow-wrap:anywhere;
margin:8px 0 0;
padding:10px;
background:#f5f8f9;
border-radius:6px;
color:#405c64}
.appointment-status-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 9px;
font-size:.875rem;
font-weight:600;
line-height:1.5;
border-radius:6px;
color:#64757d;
background:#eff2f4;
white-space:nowrap}
.appointment-status-badge::before{
content:'';
width:6px;
height:6px;
border-radius:50%;
background:currentColor}
.appointment-status-badge[data-status=scheduled]{color:#436d94;background:#edf3fa}
.appointment-status-badge[data-status=confirmed]{color:#216c75;background:#eaf5f6}
.appointment-status-badge[data-status=preparing]{color:#946c25;background:#fbf4e7}
.appointment-status-badge[data-status=in_progress]{color:#7b5798;background:#f3ecf8}
.appointment-status-badge[data-status=completed]{color:#2a775e;background:#eaf5ef}
.appointment-status-badge[data-status=cancelled],.appointment-status-badge[data-status=no_show]{color:#8c5d65;background:#f8eef0}
.appointment-status-badge[data-status=rescheduled]{color:#69758b;background:#eef1f7}
.appointment-list .appointment-empty{
padding:48px 20px;
text-align:center;
color:#70848b}
.appointment-empty>i,.appointment-empty>strong,.appointment-empty>span{
display:block}
.appointment-empty>i{
font-size:1.75rem;
margin-bottom:10px}
.appointment-empty>span{
margin-top:5px;
font-size:.9375rem}
.appointment-detail-toolbar{
margin-bottom:18px}
.appointment-detail-grid{
display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(18rem,1fr);
gap:20px;
align-items:start}
.appointment-detail-grid>.card:only-child{
grid-column:1/-1}
.appointment-facts{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:22px 24px;
margin:0}
.appointment-facts>div{
min-width:0;
max-width:100%}
.appointment-facts dt{
color:#73868e;
font-weight:500;
font-size:.875rem;
margin-bottom:6px}
.appointment-facts dd{
margin:0;
overflow-wrap:anywhere}
.appointment-fact-member strong{
font-size:1.375rem;
font-weight:650}
.appointment-fact-service{
font-size:1.125rem;
font-weight:600}
.appointment-fact-time,.appointment-fact-note{
flex-basis:100%}
.appointment-fact-note dd{
white-space:pre-wrap}
.appointment-overview .appointment-hours{
font-size:1.25rem}
.appointment-requested{
border-top:1px solid #edf0f3;
margin-top:22px;
padding-top:18px}
.appointment-requested h2{
font-size:.875rem;
font-weight:500;
color:#73868e;
margin-bottom:10px}
.appointment-resource-tags{
display:flex;
flex-wrap:wrap;
gap:8px}
.appointment-resource-tag{
display:inline-flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
padding:7px 10px;
border:1px solid #e0e9eb;
border-radius:6px;
font-size:.9375rem;
overflow-wrap:anywhere;
max-width:100%}
.appointment-resource-tag>span:first-child{
color:#748990;
font-size:.8125rem}
.appointment-status-card .appointment-status-options{
grid-template-columns:repeat(2,minmax(0,1fr))}
.appointment-status-card .card-footer{
text-align:right}
.appointment-steps{
list-style:none;
padding:0;
margin:0}
.appointment-step+.appointment-step{
border-top:1px solid #edf0f3;
padding-top:22px;
margin-top:22px}
.appointment-step-heading{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px}
.appointment-step-heading h3{
font-size:1.0625rem;
font-weight:650;
margin:0;
overflow-wrap:anywhere}
.appointment-step-number{
display:inline-grid;
place-items:center;
width:28px;
height:28px;
flex-shrink:0;
border-radius:50%;
background:#eaf5f1;
color:#177d72;
font-size:.875rem;
font-weight:650}
.appointment-step-body{
display:grid;
grid-template-columns:minmax(10rem,1fr) minmax(0,3fr);
gap:22px;
padding-left:38px}
.appointment-step-resources{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
gap:10px;
align-items:start}
.appointment-allocation{
padding:12px 14px;
background:#f8fafb;
border-radius:7px;
min-width:0}
.appointment-allocation>div:first-child{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:8px;
margin-bottom:7px;
overflow-wrap:anywhere}
.appointment-allocation>div:first-child>span{
color:#71868d;
font-size:.8125rem}
.appointment-allocation .appointment-hours{
font-size:.9375rem;
font-weight:500}
.appointment-flow-empty{
color:#71868d;
padding:16px 0;
text-align:center}
.appointment-section-title{
font-size:1.0625rem;
font-weight:650;
margin:0 0 18px}
.appointment-section-title>span{
font-weight:400;
color:#788a91;
font-size:.875rem;
margin-left:5px}
.appointment-form-basics{
padding-bottom:24px;
margin-bottom:24px;
border-bottom:1px solid #edf0f3}
.appointment-form-columns{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:32px}
.appointment-form-columns>section{
min-width:0}
.appointment-form .appointment-status-options{
grid-template-columns:repeat(2,minmax(0,1fr))}
.appointment-form .appointment-form-resources .btn{
white-space:normal;
overflow-wrap:anywhere}
.appointment-form .card-footer{
display:flex;
justify-content:flex-end;
gap:10px}
.appointment-form .card-footer .btn+.btn{
margin-left:0}
@media(max-width:1199px){
.appointment-filters{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.appointment-daily-filters{
grid-template-columns:minmax(13rem,16rem) auto}
.appointment-list th:nth-child(1){width:25%}
.appointment-list th:nth-child(2){width:20%}
.appointment-list th:nth-child(3){width:22%}
.appointment-list th:nth-child(4){width:15%}
.appointment-list th:nth-child(5){width:18%}
.appointment-detail-grid{
grid-template-columns:minmax(0,1fr)}
.appointment-status-card .appointment-status-options{
grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
}
@media(max-width:767px){
.appointment-list-wrap{
overflow:visible}
.appointment-list,.appointment-list tbody{
display:block}
.appointment-list thead{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%)}
.appointment-list-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:'time status' 'member member' 'service service' 'actions actions';
gap:10px 12px;
padding:18px;
border-bottom:1px solid #e6ecee}
.appointment-list-row:last-child{
border-bottom:0}
.appointment-list .appointment-list-row>td{
display:block;
padding:0;
border:0;
min-width:0}
.appointment-list .appointment-cell-time{grid-area:time}
.appointment-list .appointment-cell-status{grid-area:status;align-self:start}
.appointment-list .appointment-cell-member{grid-area:member}
.appointment-list .appointment-cell-service{grid-area:service}
.appointment-list .appointment-cell-actions{grid-area:actions;padding-top:8px}
.appointment-row-actions{
justify-content:flex-start}
.appointment-row-actions .btn{
min-width:4rem}
.appointment-list .appointment-empty{
display:block}
.appointment-toolbar-actions .btn{
font-size:.875rem;
padding:8px 10px}
.appointment-facts{
gap:18px 20px}
.appointment-facts .appointment-fact-member{
flex-basis:100%}
.appointment-step-body{
grid-template-columns:minmax(0,1fr);
gap:12px}
.appointment-form-columns{
grid-template-columns:minmax(0,1fr);
gap:26px}
.appointment-filters{
padding:18px;
gap:14px 10px}
.appointment-filters .appointment-keyword{
grid-column:1/-1;
grid-row:1}
.appointment-filters>div:first-child{
grid-column:1/-1}
.appointment-daily-filters{
grid-template-columns:minmax(0,1fr);
justify-content:stretch}
.appointment-daily-filters .appointment-filter-actions{
justify-content:flex-start}
}
@media(max-width:575px){
.appointment-filters{
grid-template-columns:minmax(0,1fr)}
.appointment-filter-actions .btn{
flex:1}
.appointment-list-toolbar{
padding:16px}
.appointment-detail-toolbar .btn{
font-size:.875rem;
padding:8px 10px}
.appointment-flow .card-header{
padding:16px}
.appointment-step-body{
padding-left:0}
.appointment-status-card .appointment-status-options{
grid-template-columns:repeat(2,minmax(0,1fr))}
.appointment-list-toolbar .appointment-toolbar-actions{
width:100%}
.appointment-toolbar-actions .btn{
flex:1}
.appointment-filter-actions .btn{
font-size:.875rem;
padding:9px 10px}
}
.appointment-list-toolbar::after{
display:none}
.appointment-status-card .appointment-status-options,.appointment-form .appointment-status-options{
display:grid}
@media(min-width:768px){
.appointment-form .appointment-status-options{
grid-template-columns:repeat(auto-fit,minmax(6rem,1fr))}
}