*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#edf1f7;
padding:20px;
}

.container{
max-width:1400px;
margin:auto;
background:white;
border-radius:30px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px;
}

.brand{
display:flex;
align-items:center;
gap:15px;
}

.logo{
width:70px;
height:70px;
}

.brand h1{
font-size:42px;
}

.brand span{
color:#2ec5b5;
}

.timebox h2{
font-size:38px;
}

.layout{
display:flex;
}

.left-panel{
flex:1;
padding:30px;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.card{
background:#f7fbff;
padding:20px;
border-radius:25px;
text-align:center;
cursor:pointer;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.card img{
width:90px;
height:90px;
margin-bottom:12px;
}

.card h3{
font-size:18px;
}

.urgent-btn{
margin-top:30px;
padding:15px 30px;
border:none;
background:#ff5a5a;
color:white;
border-radius:40px;
font-size:18px;
cursor:pointer;
}

.sidebar{
width:360px;
background:#f6f8fc;
padding:20px;
border-left:1px solid #ddd;
}

.tabs{
display:flex;
gap:10px;
margin-bottom:20px;
}

.tab{
flex:1;
padding:12px;
border:none;
border-radius:20px;
cursor:pointer;
background:#e2e8f2;
}

.tab.active{
background:#2f5ea8;
color:white;
}

.tab-content{
display:none;
}

.active-content{
display:block;
}

.info-card{
background:white;
padding:20px;
border-radius:20px;
margin-bottom:20px;
}

.info-card button{
margin-top:10px;
padding:10px 15px;
border:none;
border-radius:12px;
background:#2f5ea8;
color:white;
cursor:pointer;
}

.notification{
position:fixed;
right:20px;
bottom:20px;
background:#2f5ea8;
color:white;
padding:20px;
border-radius:18px;
max-width:360px;
display:none;
z-index:999;
}

.burger{
display:none;
font-size:30px;
margin-bottom:15px;
cursor:pointer;
}

@media(max-width:1000px){
.layout{
flex-direction:column;
}

.sidebar{
width:100%;
border-left:none;
border-top:1px solid #ddd;
}

.grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:650px){
.header{
flex-direction:column;
text-align:center;
gap:15px;
}

.grid{
grid-template-columns:1fr;
}

.brand h1{
font-size:30px;
}

.timebox h2{
font-size:30px;
}

.burger{
display:block;
}

.tabs{
display:none;
flex-direction:column;
}

.tabs.show{
display:flex;
}
}


/* Monday Health branding */
.full-logo{
width:280px;
max-width:100%;
height:auto;
object-fit:contain;
}

.brand h1{display:none;}

/* Right side Care Hub enhancements */
.provider-card{
background:#fff;
border:1px solid #dfe4ee;
box-shadow:0 4px 14px rgba(13,47,111,0.08);
border-radius:22px;
padding:18px;
margin-bottom:20px;
display:flex;
gap:16px;
align-items:center;
}

.provider-card.large{
align-items:flex-start;
}

.avatar{
width:72px;
height:72px;
background:#dcecf8;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
flex-shrink:0;
}

.provider-main{
flex:1;
}

.provider-main h3{
font-size:26px;
color:#102a55;
margin-bottom:6px;
}

.provider-main p{
font-size:18px;
color:#5e6677;
margin:6px 0;
}

.phone-line{
font-size:20px;
color:#102a55;
margin-top:12px;
}

.warning{
color:#b97914!important;
font-weight:700;
}

.button-row{
display:flex;
gap:12px;
margin-top:14px;
}

.light-btn{
background:#e7ebf3!important;
color:#102a55!important;
}

.side-btn{
background:#e7ebf3!important;
color:#102a55!important;
font-weight:700;
min-width:115px;
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid #dfe4ee;
margin-top:18px;
padding-top:20px;
gap:18px;
}

.two-col h3{
font-size:24px;
color:#102a55;
margin-bottom:14px;
}

.detail-list{
list-style:none;
padding:0;
margin:0;
}

.detail-list li{
font-size:18px;
color:#102a55;
margin:12px 0;
line-height:1.2;
}

.detail-list small{
color:#5e6677;
margin-left:22px;
}

.dot{
width:11px;
height:11px;
border-radius:50%;
display:inline-block;
margin-right:9px;
}

.green{background:#35c56b;}
.blue{background:#2f80ed;}
.red{background:#e7354f;}
.cyan{background:#28a8d8;}

.completed{
margin-top:30px;
}

textarea#careNotes{
width:100%;
min-height:130px;
font-size:18px;
padding:10px;
border:1px solid #999;
border-radius:6px;
resize:vertical;
margin:8px 0 12px;
}

.saved-note{
background:#fff;
border:1px dashed #9aa7bd;
border-radius:12px;
padding:14px;
color:#102a55;
font-size:17px;
white-space:pre-wrap;
}

@media(max-width:650px){
.full-logo{width:220px;}
.provider-card{align-items:flex-start;}
.two-col{grid-template-columns:1fr;}
.button-row{flex-direction:column;}
}


/* Final polish: neat Care Hub buttons and blended logo */
.brand{
gap:14px;
align-items:center;
}

.logo{
width:58px!important;
height:58px!important;
border-radius:14px;
object-fit:cover;
box-shadow:none;
}

.full-logo{
width:235px!important;
max-height:120px;
object-fit:contain;
mix-blend-mode:multiply;
}

.provider-card{
overflow:hidden;
}

.button-row{
display:flex;
gap:14px;
align-items:center;
flex-wrap:wrap;
}

.button-row button,
.provider-main button,
.side-btn{
border:none!important;
outline:none!important;
box-shadow:0 4px 10px rgba(13,47,111,0.10);
border-radius:18px!important;
padding:12px 22px!important;
font-size:17px!important;
font-weight:700!important;
min-width:120px;
height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
line-height:1;
}

.provider-main button:not(.light-btn){
background:#3b6fa8!important;
color:#fff!important;
}

.light-btn{
background:#e9edf5!important;
color:#102a55!important;
}

.side-btn{
background:#e9edf5!important;
color:#102a55!important;
min-width:150px;
max-width:170px;
align-self:center;
flex-shrink:0;
}

.provider-card:not(.large){
justify-content:space-between;
}

.provider-card:not(.large) .provider-main{
min-width:0;
}

@media(max-width:900px){
.full-logo{
width:210px!important;
}
.side-btn{
width:100%;
max-width:100%;
margin-top:10px;
}
.provider-card:not(.large){
flex-wrap:wrap;
}
}

@media(max-width:650px){
.logo{
width:52px!important;
height:52px!important;
}
.full-logo{
width:190px!important;
}
.button-row{
width:100%;
}
.button-row button{
flex:1;
min-width:125px;
}
.provider-main h3{
font-size:24px;
}
}


/* Clean logo styling */
.brand{
display:flex;
align-items:center;
gap:12px;
}

.logo{
width:54px !important;
height:54px !important;
object-fit:contain !important;
background:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
}

.full-logo{
width:185px !important;
height:auto !important;
background:transparent !important;
mix-blend-mode:normal !important;
filter:none !important;
}

/* Better buttons */
.button-row{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:18px;
}

.button-row button,
.side-btn,
.provider-main button{
cursor:pointer !important;
transition:all 0.25s ease;
border:none !important;
border-radius:20px !important;
padding:14px 24px !important;
font-size:18px !important;
font-weight:700 !important;
display:flex;
align-items:center;
justify-content:center;
min-width:150px;
height:54px;
text-decoration:none;
}

.button-row button:hover,
.side-btn:hover,
.provider-main button:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.light-btn{
background:#edf1f7 !important;
color:#0f2c5c !important;
}

.provider-main button:not(.light-btn){
background:#3f72af !important;
color:white !important;
}

.side-btn{
background:#edf1f7 !important;
color:#0f2c5c !important;
min-width:220px !important;
max-width:220px;
margin-left:auto;
}

.provider-card:not(.large){
align-items:center;
}

.provider-main{
flex:1;
min-width:0;
}

@media(max-width:700px){

.brand{
justify-content:center;
}

.logo{
width:48px !important;
height:48px !important;
}

.full-logo{
width:165px !important;
}

.button-row{
flex-direction:column;
width:100%;
}

.button-row button,
.side-btn{
width:100%;
max-width:100%;
min-width:100% !important;
}

.provider-card:not(.large){
flex-direction:column;
align-items:flex-start;
}

.side-btn{
margin-left:0;
margin-top:16px;
}
}