/* =========================================
GLOBAL
========================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Segoe UI',sans-serif;
background:#edf1f6;
color:#222;
}

a{
text-decoration:none;
}

.main-container{
width:96%;
margin:auto;
padding:14px;
}



/* =========================================
HEADER
========================================= */

.top-header{
background:linear-gradient(135deg,#1976d2,#64b5f6);
padding:18px 22px;
border-radius:22px;
margin-bottom:20px;
color:white;
box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

.hospital-header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.title-section h1{
font-size:32px;
font-weight:700;
margin-bottom:6px;
}

.title-section p{
font-size:16px;
opacity:0.95;
}

.header-right{
display:flex;
align-items:center;
gap:12px;
}

.hospital-logo{
width:280px;
height:95px;
object-fit:contain;
background:white;
padding:8px;
border-radius:14px;
}

.date-box{
background:white;
padding:10px;
border-radius:12px;
width:165px;
}

.date-box label{
display:block;
font-size:13px;
font-weight:600;
margin-bottom:5px;
color:#000;
}

.date-box input{
width:100%;
padding:7px;
border:1px solid #ccc;
border-radius:8px;
}



/* =========================================
DASHBOARD
========================================= */

.dashboard-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:18px;
margin-bottom:24px;
}

.card-small{
padding:20px;
border-radius:18px;
text-align:center;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.card-small h3{
font-size:16px;
margin-bottom:14px;
}

.card-small span{
font-size:40px;
font-weight:bold;
}

.card1{
background:#dceeff;
}

.card2{
background:#e7f5e8;
}

.card3{
background:#fff2dd;
}

.card4{
background:#f5e6ff;
}



/* =========================================
BOXES
========================================= */

.search-box,
.patient-info-box,
.panel{
background:white;
padding:22px;
border-radius:20px;
margin-bottom:24px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.search-box h2,
.patient-info-box h2,
.panel h2{
margin-bottom:20px;
font-size:22px;
}



/* =========================================
SEARCH
========================================= */

.search-input{
width:100%;
padding:14px;
border:1px solid #ccc;
border-radius:12px;
font-size:15px;
outline:none;
}

.search-input:focus{
border-color:#1976d2;
box-shadow:0 0 5px rgba(25,118,210,0.3);
}



/* =========================================
SEARCH RESULTS
========================================= */

#patient_results{
margin-top:10px;
max-height:250px;
overflow-y:auto;
border-radius:12px;
overflow:hidden;
}

#patient_results table{
width:100%;
border-collapse:collapse;
background:white;
}

#patient_results th{
background:#1976d2;
color:white;
padding:12px;
font-size:14px;
}

#patient_results td{
padding:12px;
border-bottom:1px solid #eee;
cursor:pointer;
font-size:14px;
}

#patient_results tr:hover{
background:#e3f2fd;
}



/* =========================================
PATIENT GRID
========================================= */

.patient-info-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
margin-bottom:20px;
}

.form-group{
display:flex;
flex-direction:column;
}

.form-group label{
font-size:14px;
font-weight:600;
margin-bottom:8px;
}

.form-group input,
.form-group select,
textarea{
padding:12px;
border:1px solid #ccc;
border-radius:12px;
font-size:14px;
outline:none;
}

.form-group input:focus,
.form-group select:focus,
textarea:focus{
border-color:#1976d2;
box-shadow:0 0 5px rgba(25,118,210,0.2);
}



/* =========================================
LANGUAGE BUTTONS
========================================= */

.language-buttons{
display:flex;
gap:15px;
margin-bottom:25px;
flex-wrap:wrap;
}

.lang-btn{
border:none;
padding:10px 24px;
border-radius:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
color:white;
transition:0.3s;
}

.lang-btn:hover{
transform:translateY(-2px);
}

.english-btn{
background:#1976d2;
}

.marathi-btn{
background:#8e24aa;
}

.hindi-btn{
background:#ef6c00;
}



/* =========================================
FEEDBACK TABLE
========================================= */

.feedback-table{
width:100%;
border-collapse:collapse;
}

.feedback-table th{
background:#3f86cb;
color:white;
padding:13px;
font-size:14px;
border:1px solid #d9d9d9;
}

.feedback-table td{
padding:10px;
border:1px solid #e3e3e3;
vertical-align:middle;
}

.service-name{
text-align:center;
font-size:14px;
font-weight:600;
}



/* =========================================
EMOJI SECTION
========================================= */

.emoji-container{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
flex-wrap:wrap;
}

.emoji-card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:78px;
height:62px;
border-radius:14px;
cursor:pointer;
transition:0.3s;
padding:4px;
border:2px solid transparent;
}

.emoji-card input{
display:none;
}

.emoji-icon{
font-size:22px;
margin-bottom:6px;
}

.emoji-text{
font-size:12px;
font-weight:600;
}

.excellent-card{
background:#edf7ed;
}

.good-card{
background:#edf5fb;
}

.average-card{
background:#fff8e7;
}

.poor-card{
background:#fdecec;
}

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

.emoji-card:has(input:checked){
border:2px solid #1976d2;
transform:scale(1.08);
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}



/* =========================================
COMMENTS
========================================= */

.feedback-box{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

textarea{
height:100px;
resize:none;
}



/* =========================================
SUBMIT BUTTON
========================================= */

.submit-section{
text-align:center;
margin-top:25px;
}

.submit-section button{
background:#28a745;
color:white;
border:none;
padding:13px 30px;
border-radius:12px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.submit-section button:hover{
background:#218838;
transform:translateY(-2px);
}



/* =========================================
CHART
========================================= */

.chart-container{
width:100%;
max-width:700px;
height:320px;
margin:auto;
}



/* =========================================
ADMIN BUTTON
========================================= */

.admin-btn-box{
text-align:center;
margin-top:30px;
}

.admin-btn{
background:#0d47a1;
color:white;
border:none;
padding:13px 30px;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.admin-btn:hover{
background:#1565c0;
transform:translateY(-2px);
}



/* =========================================
ADMIN LOGIN
========================================= */

.login-container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.login-box{
width:400px;
background:white;
padding:35px;
border-radius:20px;
box-shadow:0 4px 14px rgba(0,0,0,0.12);
}

.login-box h2{
text-align:center;
margin-bottom:25px;
}

.login-box input{
width:100%;
padding:13px;
margin-bottom:18px;
border:1px solid #ccc;
border-radius:12px;
}

.login-box button{
width:100%;
padding:13px;
background:#1976d2;
color:white;
border:none;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

.login-box button:hover{
background:#1565c0;
}

.error-box{
background:#ffebee;
color:#c62828;
padding:10px;
border-radius:10px;
margin-bottom:15px;
}



/* =========================================
ADMIN REPORTS
========================================= */

.report-container{
width:96%;
margin:auto;
padding:14px;
}

.report-table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:16px;
overflow:hidden;
margin-top:20px;
}

.report-table th{
background:#1976d2;
color:white;
padding:12px;
font-size:14px;
}

.report-table td{
padding:12px;
border-bottom:1px solid #eee;
font-size:14px;
}

.report-table tr:hover{
background:#f4f8ff;
}



/* =========================================
SEARCH FORM BUTTONS
========================================= */

.search-form{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
align-items:end;
margin-top:20px;
}

.search-form .form-group{
display:flex;
flex-direction:column;
}

.search-form label{
font-size:13px;
font-weight:600;
margin-bottom:6px;
color:#333;
}

.search-form input,
.search-form select{
height:44px;
padding:10px 14px;
border:1px solid #cfcfcf;
border-radius:12px;
font-size:14px;
background:#fff;
outline:none;
transition:0.3s;
}

.search-form input:focus,
.search-form select:focus{
border-color:#1976d2;
box-shadow:0 0 6px rgba(25,118,210,0.2);
}



/* SEARCH BUTTON */

.search-btn{
background:linear-gradient(135deg,#1976d2,#42a5f5);
color:#fff;
border:none;
height:44px;
padding:0 22px;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.3s;
box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

.search-btn:hover{
transform:translateY(-2px);
background:linear-gradient(135deg,#1565c0,#1e88e5);
}



/* RESET BUTTON */

.reset-btn{
background:#9e9e9e;
color:white;
border:none;
height:44px;
padding:0 22px;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.reset-btn:hover{
background:#757575;
}



/* EXPORT BUTTONS */

.export-btn{
border:none;
padding:11px 18px;
border-radius:12px;
font-size:14px;
font-weight:600;
color:white;
cursor:pointer;
transition:0.3s;
}

.excel-btn{
background:#4caf50;
}

.pdf-btn{
background:#ff7043;
}

.logout-btn{
background:#ef5350;
}

.back-btn-top{
background:#8e24aa;
}

.export-btn:hover{
transform:translateY(-2px);
opacity:0.9;
}



/* =========================================
THANK YOU PAGE
========================================= */

.thankyou-box{
width:500px;
margin:80px auto;
background:white;
padding:40px;
border-radius:22px;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,0.12);
}

.success-icon{
font-size:60px;
margin-bottom:15px;
}

.back-btn{
background:#1976d2;
color:white;
padding:12px 24px;
border:none;
border-radius:12px;
margin-top:20px;
cursor:pointer;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px){

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

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

}

@media(max-width:768px){

.hospital-header{
flex-direction:column;
text-align:center;
gap:20px;
}

.header-right{
flex-direction:column;
}

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

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

.language-buttons{
justify-content:center;
}

.emoji-container{
gap:12px;
}

.feedback-table{
font-size:12px;
}

.feedback-table td{
padding:8px;
}

.chart-container{
height:260px;
}

}

@media(max-width:480px){

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

.title-section h1{
font-size:24px;
}

.hospital-logo{
width:100%;
height:auto;
}

.lang-btn{
width:100%;
}

.emoji-card{
width:58px;
height:52px;
}

.emoji-icon{
font-size:18px;
}

.emoji-text{
font-size:10px;
}

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

.thankyou-box{
width:95%;
padding:25px;
}

}