/* ------------------------------
   Main / hospital
------------------------------ */ 
.hospital-head{ 
    display:flex;
    align-items:flex-start;   
	margin-bottom: 50px;
}

.hospital-head .arrow{
	font-weight: 600;
	
}
.hospital-head__brand{
    display:flex;
    align-items:center;
    gap:30px;
}
.hospital-head .profile-logo{
	border-radius:50%;
}

.dash-main .page-title-wrap{
	display:flex;
	gap:20px;
	align-items:baseline;
	margin-bottom: 20px;
}
.profile-logo{
	position:relative;
    width:80px;
    aspect-ratio:1;
    flex:none;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
	overflow:hidden; 
} 

.profile-logo::before{
	content:'';
	position:absolute;
	inset:0;
	background: url('/images/icon-image.png') var(--bg) no-repeat center center / 24px;
	opacity:.15;
}

.profile-logo img{
    width: 100%;
	height: 100%;
	object-fit:cover;
	position:relative;;
	z-index:1;
}

.hospital-head h1{
    margin-bottom: 5px;
    font-size:24px; 
    font-weight:700; 
} 
 

/* ------------------------------
   Section title
------------------------------ */
.dashboard-section{ 
}
.section-title{  
    margin-bottom:30px; 
} 
.section-title h2{ 
	margin-bottom: 10px;
    font-size:22px; 
    font-weight:700; 
} 

.section-title p { 
	color: var(--color-text-sub); 
	font-weight: 400;  
}

/* ------------------------------
   Status cards
------------------------------ */
.status-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.status-card{
    position:relative;
    min-height:104px;
    padding: 30px 32px; 
	background: var(--bg);
    border-radius:var(--radius-card); 
    transition:transform .22s ease,box-shadow .22s ease;
	display: flex;
    justify-content: space-between;
    align-items: center;
} 
.status-card__top{ 
	margin-bottom: 20px;
    margin:6px 0 0;
    color:var(--color-text-sub);
    font-size:13px;
}
.status-card__top > span{ 
    color:#191c24; 
    font-weight:650;  
	display:block;
	margin-bottom: 5px;
	font-size: 15px;
}
.date-badge{  
    font-style:normal;
    text-align:center;
    font-size:13px; 
	color: var(--color-text-sub);
	margin-left: auto;
} 
 
.status-card strong{
    display:block; 
    font-size:40px;
    line-height:1;
    font-weight:650; 
	color:#1c59e9;
}
.status-card strong small{
    margin-left:2px;
    font-size:15px;
    font-weight:700;
	color: var(--color-text-sub);
} 
.blue-text{color:var(--blue)}
.orange-text{color:var(--orange)}
.green-text{color:var(--green)}
.brown-text{color:#a97a19}

/* ------------------------------
   Filter
------------------------------ */
.filter-box{
    margin-bottom:30px; 
	padding:24px;
	border:1px solid var(--line);
	border-radius:20px;
}

.filter-box .date-field input,
.filter-box .keyword-field input{
	background-color: #fff;
    border:1px solid var(--line);
}
.status-tabs{
    display:flex;
    gap:12px;
    padding-bottom:20px;
    overflow-x:auto;
    scrollbar-width:none;
}
.status-tabs::-webkit-scrollbar{display:none}
.status-tabs button{  
	background: var(--bg);
	padding: 16px 18px;
	border-radius:14px;   
    white-space:nowrap;
    transition:all .18s ease;
	display:flex;
	flex-direction:column; 
	align-items:flex-start;
	text-align: left;
	gap:20px;
	flex:1;
}   
.status-tabs button.is-active{    
	border-color:#1c59e9; 
	background: #1c59e9;
	color: #fff; 
} 
.status-tabs button.is-active *{
	color: #fff;  
}
.status-tabs button strong{  
    font-weight:700;
	display:flex;
	justify-content:space-between;
	width: 100%; 
	
} 
.status-tabs button strong b{ 
	font-size: 1.2em;
    font-weight:700;
	line-height: 1;
}

.status-tabs .blue{ color:#1c59e9; }
.status-tabs .green{color:#159d56;}
.status-tabs .yellow{color:#bf8e13;}
.status-tabs .orange{color:#db8322;}
.status-tabs .red{color:#d66565;}
.status-tabs .gray{color:#878b90;}


.status-tabs button span{ 
	color: var(--color-text-sub); 
	width: 100%;
	font-size: 13px;
} 

.search-form{
    display:flex;
    align-items:center;
    gap:8px; 
	position:relative;
	max-width:800px;
} 
.date-field,
.keyword-field{ 
    display:flex;
    align-items:center; 
} 
.date-field{
    width:100%;
	max-width:200px; 
    gap:6px;
}
.date-field svg,
.keyword-field svg{
    width:14px;
    height:14px;
    flex:none;
    fill:none;
    stroke:#9a9ea3;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.date-field input,
.keyword-field input{ 
    height:54px; 
    background: var(--bg);
	width: 100%;
    height: 54px;
    padding: 0 15px;
    box-sizing: border-box; 
    border-radius: 8px;  
	font-weight: 650;
}
.keyword-field{
    flex:1;
	position:relative;
} 
.dash{ 
	font-size: 20px;
} 

.search-button{
	position:absolute;
	top:0; 
	right:0;
	height: 54px;
	aspect-ratio:1;
	font-size: 0; 
	border-radius:8px;
}
.search-button:before{
	content:'';
	position:absolute;
	inset:0;
	background: url('/images/icon-search.png') no-repeat center center / 20px;  
}

/* ------------------------------
   Result table
------------------------------ */
.result-box{    
}
.result-head{ 
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom: 10px;
	font-size: 14px;
}
.result-head>div{
    display:flex;
    align-items:baseline;
    gap:12px;
}
.result-head strong{ 
    font-weight:700;
}
.result-head span{
    color:#999; 
}
.notice-success{  
    color:#999; 
    font-weight:400;
}

.table-wrap{
    overflow-x:auto;
    scrollbar-width:thin;
    scrollbar-color:#d9dcdf transparent;
}
.candidate-table{
    width:100%;
    min-width:1180px;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
    font-size:14px;
    font-weight:650;
}
.candidate-table th{ 
    padding:18px 5px; 
    background:var(--bg); 
    white-space:nowrap;
}
.candidate-table th:first-child{
    border-radius:10px 0 0 10px;
}
.candidate-table th:last-child{
    border-radius:0 10px 10px 0;
}
.candidate-table td{ 
    padding:20px 5px;
    border-bottom:1px solid var(--line); 
	font-weight: 550;
    text-align:center;
    vertical-align:middle;
    word-break:keep-all; 
	line-height: 1.7;
}

.candidate-table [data-status="end"],
.candidate-table [data-status="unmatched"],
.candidate-table [data-status="decline"],
.candidate-table [data-status="reject"]{
	color: #999; 
	font-weight: 500;
}
.candidate-table tbody tr{
    transition:background .15s;
}  
.state{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px; 
    padding:8px 10px; 
	line-height: 1;
    border-radius:999px;
    font-size:12.5px;
    font-weight:600;
    white-space:nowrap;
}
.state.blue{background:var(--blue-bg);color:var(--blue);border-color:#76b9eb}
.state.green{background:var(--green-bg);color:#159d56;border-color:#a8dbbc}
.state.yellow{background:var(--yellow-bg);color:#bf8e13;border-color:#edd481}
.state.orange{background:var(--orange-bg);color:#db8322;border-color:#edbd83}
.state.red{background:var(--red-bg);color:#d66565;border-color:#eab3b3}
.state.gray{background:var(--gray-bg);color:#878b90;border-color:#dedfe2}

.actions{
    display:flex;
	flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
	color: #191c24;
}
.btn-wr{
	width: 100%;
	display:flex;
	justify-content:flex-end;
	gap:5px; 
	margin-top: 10px;
}
.btn{ 
	display:inline-block;
    padding:8px 10px;
	line-height: 1;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff; 
    font-size:12.5px;
    font-weight:550;
    white-space:nowrap;
    transition:all .16s ease;
}
.btn:hover{
    border-color:var(--color-border-strong);
    background:#f8f9fa;
    color:#222;
}
.btn.black{
    border-color:#1c59e9; 
    color:#1c59e9;
}
.btn.black:hover{background:var(--blue-bg); }
.btn.danger{
    border-color:#e7baba;
    color:#d46363;
    background:#fffafa;
}
.btn.danger:hover{
    border-color:#dc9696;
    background:#fff3f3;
}

.result-notes{
    margin-top:20px;  
}
.result-notes p{
    margin:5px 0;
    color:#999;
    font-size:13px; 
}
 
/* ------------------------------
   Responsive
------------------------------ */
@media (max-width:1100px){ 
    .status-grid{gap:10px}
    .candidate-table{min-width:1050px}
}
@media (max-width:850px){ 
    .dash-main{padding-top:42px}
    .status-grid{grid-template-columns:repeat(2,1fr)}
    .search-form{flex-wrap:wrap}
    .search-form>label{width:100%;margin:0 0 1px}
    .keyword-field{flex:1}
}
@media (max-width:640px){ 
    .dash-main{padding:32px 0 60px}
    .hospital-head{min-height:92px}
    .hospital-head__brand{gap:14px}
    .profile-logo{width:58px;height:58px;font-size:16px}
    .profile-logo span{font-size:18px}
    .hospital-head h1{font-size:20px}
    .hospital-head a{font-size:13px}
    .section-title h2{font-size:24px}
    .section-title a{font-size:13px}
    .status-grid{gap:8px}
    .status-card{min-height:91px;padding:13px}
    .status-card strong{font-size:25px}
    .date-badge{min-width:51px;padding:4px 5px}
    .filter-box{padding:13px}
    .status-tabs{padding-bottom:12px}
    .search-form{gap:6px}
    .date-field{flex:1;width:auto}
    .keyword-field{
        order:5;
        flex:1 0 calc(100% - 70px);
        width:auto;
    }
    .search-button{order:6;min-width:64px}
    .result-box{padding:11px}
    .result-head{
        align-items:flex-start;
        flex-direction:column;
        padding-bottom:9px;
    }
    .notice-success{font-size:13px}
    .candidate-table{min-width:1050px}
}