/**
 * Attendance Manager Admin Styles CSS
 */



/**
 *	Today's staff
 */
ul.staff_block {
	margin: 0;
	padding: 0;
	*zoom: 1;
}

ul.staff_block:after {
	clear: both;
}
ul.staff_block li {
	float: left;
	width: 150px;
	list-style: none;
	margin: 5px;
	text-align: center;
}
ul.staff_block li img {
	box-shadow: none;
}
ul.staff_block li .post-info {
	font-size: 1.1em;
	line-height: 1.5em;
}

/**
 *	Weekly schedule
 */
table.attmgr_weekly_all {
	width: 100%;
	border-collapse: collapse !important;
	border: 1px solid #ddd;
}
table.attmgr_weekly_all th,
table.attmgr_weekly_all td {
	width: 12.5%;
	padding: 5px auto;
	vertical-align: middle !important;
	text-align: center;
	border: 1px solid #ddd !important;
}
table.attmgr_weekly_all td.portrait img {
	width: 50px;
}
table.attmgr_weekly_all .date {
	font-size: 0.9em;
}
table.attmgr_weekly_all .dow {
	margin-left: 5px;
	font-size: 0.8em;
}
table.attmgr_weekly_all td.working {

}
table.attmgr_weekly_all td.not_working {
	background-color: #f6f6f6;
}

/**
 *	Weekly personal schedule
 */
table.attmgr_weekly {
	width: 100%;
	border-collapse: collapse !important;
	border: 1px solid #ddd;
}
table.attmgr_weekly th,
table.attmgr_weekly td {
	width: 14.2%;
	padding: 5px auto;
	vertical-align: middle !important;
	text-align: center;
	border: 1px solid #ddd !important;
}
table.attmgr_weekly .date {
	font-size: 0.9em;
}
table.attmgr_weekly .dow {
	margin-left: 5px;
	font-size: 0.8em;
}
table.attmgr_weekly td.working {

}
table.attmgr_weekly td.not_working {
	background-color: #f6f6f6;
}

/**
 *	Scheduler for admin
 */
form#attmgr_admin_scheduler {
	clear: both;
}
form#attmgr_admin_scheduler table.attmgr_admin_scheduler {
	width: 100%;
	border-collapse: collapse !important;
	border: 1px solid #ddd;
}
form#attmgr_admin_scheduler table.attmgr_admin_scheduler th,
form#attmgr_admin_scheduler table.attmgr_admin_scheduler td {
	width: 12.5%;
	padding: 5px auto;
	vertical-align: middle !important;
	text-align: center;
	border: 1px solid #ddd !important;
	line-height: 1.5em;
}
form#attmgr_admin_scheduler table.attmgr_admin_scheduler td.portrait img {
	width: 50px;
	margin: 8px;
}
form#attmgr_admin_scheduler table.attmgr_admin_scheduler td select {
	margin-bottom: 3px;
}

/**
 *	Scheduler for staff
 */
form#attmgr_staff_scheduler {
	clear: both;
}
form#attmgr_staff_scheduler .portrait {
	float: left;
	width: 80px;
	margin-right: 10px;
}
form#attmgr_staff_scheduler .portrait img {
	width: 60px;
	margin: 10px;
}
form#attmgr_staff_scheduler .profile {
	float: left;
}
table.attmgr_staff_scheduler {
	clear: both;
}

/*
 *	Calendar
 */
table.attmgr_calendar {
	width: 100%;
	border-collapse: collapse !important;
}
table.attmgr_calendar th,
table.attmgr_calendar td {
	padding: 0 !important;
	text-align: center;
	border: 1px solid #ddd !important;
}
table.attmgr_calendar th.sunday {
	background-color: #ffeef6;
	color: #c06;
}
table.attmgr_calendar th.saturday {
	background-color: #eef6ff;
	color: #06c;
}
table.attmgr_calendar td.today {
	background-color: #ffeecc;
}
table.attmgr_calendar_weekly td .wmonth {
	font-size: x-small;
	color: #999;
}

/**
 *	Monthly schedule
 */
table.attmgr_monthly_schedule {
	background-color: #fff;
}
table.attmgr_monthly_schedule th,
table.attmgr_monthly_schedule td {
	width: 14%;
}
table.attmgr_monthly_schedule th {

}
table.attmgr_monthly_schedule td {
	vertical-align: top;
}
table.attmgr_monthly_schedule td:first-child:before {
	display: block;
	float: left;
	height: 42px;
}

/* .day */
table.attmgr_monthly_schedule td .day {
	text-align: center;
}
table.attmgr_monthly_schedule td .day a {
	display: block;
}
table.attmgr_monthly_schedule td:hover {

}

/* .info */
table.attmgr_monthly_schedule td .info {
	border-top: 1px dotted #ddd;
}
table.attmgr_monthly_schedule td .info div {
	text-align: left;
	line-height: 1.3em;
}
table.attmgr_monthly_schedule td .info a {
	display: block;
	padding: 3px 10px;
}

/* .saturday */ 
table.attmgr_monthly_schedule th.saturday {
	background-color: #eef6ff;
	color: #06c;
}

/* .sunday */ 
table.attmgr_monthly_schedule th.sunday {
	background-color: #ffeef6;
	color: #c06;
}

/**
 *	Weekly guide
 */
table.attmgr_guide_weekly {
	width: 100%;
	margin-bottom: 15px;
	border-collapse: collapse !important;
	border: 1px solid #ddd;
}
table.attmgr_guide_weekly td {
	/* width: 12.5%; */
	padding: 5px auto;
	vertical-align: middle !important;
	text-align: center;
	border: 1px solid #ddd !important;
}
table.attmgr_guide_weekly td.current {
	background-color: #f0f6ff;
}
table.attmgr_guide_weekly td a {
	display: block;
	padding: 8px auto !important;
	text-decoration: none;
}
table.attmgr_guide_weekly .date {
	margin-left: 10px;
}
table.attmgr_guide_weekly .dow {
	margin-left: 5px;
	font-size: 1em;
}

/*
 *	Page navi
 */
.list_pagenavi {
	display: block;
	height: 1em;
}
.list_pagenavi:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}
.list_pagenavi .prev_page {
	float: left;
	width: 20%;
}
.list_pagenavi .next_page {
	float: right;
	width: 20%;
	text-align: right;
}
.list_pagenavi .list_datenavi {
	float: left;
	width: 60%;
	text-align: center;
}
.list_pagenavi .list_datenavi a {
	margin: auto 10px;
}
.list_pagenavi .back_today {
	font-size: x-small;
}

/*
 *	info box
 */
.alert {
	clear: both;
	padding: 8px 35px 8px 14px;
	margin-top: 10px;
	margin-bottom: 20px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: transparent;
	border: 1px solid #ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.alert h4 {
	margin: 0;
}

.alert .close {
	position: relative;
	top: -2px;
	right: -21px;
	line-height: 20px;
}

.alert-caution {
	color: #c09853;
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
}
.alert-caution h4 {
	color: #c09853;
}

.alert-success {
	color: #468847;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.alert-success h4 {
	color: #468847;
}

.alert-danger,
.alert-error {
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
}

.alert-danger h4,
.alert-error h4 {
	color: #b94a48;
}

.alert-info {
	color: #3a87ad;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.alert-info h4 {
	color: #3a87ad;
}

.alert-block {
	padding-top: 14px;
	padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
	margin-bottom: 0;
}

.alert-block p + p {
	margin-top: 5px;
}

/*
 *	Mobile
 */
@media screen and (max-width: 480px) {
	table.attmgr_guide_weekly th,
	table.attmgr_guide_weekly td,
	table.attmgr_monthly_schedule th,
	table.attmgr_monthly_schedule td,
	table.attmgr_admin_scheduler th,
	table.attmgr_admin_scheduler td,
	table.attmgr_weekly th,
	table.attmgr_weekly td,
	table.attmgr_weekly_all th,
	table.attmgr_weekly_all td {
		/* padding: 3px 0;
		font-size: x-small;
		font-weight: normal; */
	}
	table.attmgr_guide_weekly .date,
	table.attmgr_guide_weekly .dow,
	table.attmgr_monthly_schedule .date,
	table.attmgr_monthly_schedule .dow,
	table.attmgr_admin_scheduler .date,
	table.attmgr_admin_scheduler .dow,
	table.attmgr_weekly .date,
	table.attmgr_weekly .dow,
	table.attmgr_weekly_all .date,
	table.attmgr_weekly_all .dow {
		display:block;
		line-height: 1.3em;
	}
	table .portrait img {
		/*
		width: auto !important;
		height: auto !important;
		*/
	}
	.list_pagenavi,
	.list_datenavi {
		font-size: x-small;
	}
}

.staff-daily {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
}

.staff-introduction {
    font-style: italic;
    margin-bottom: 10px;
}

.staff-tags {
    margin-bottom: 10px;
}

.staff-tag {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 2px 8px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

.attendance{
	font-size: 20px;
}

.attmgr_weekly_all {
    table-layout: fixed;
    width: 100%;
}

.attmgr_weekly_all td {
    overflow: hidden;
    text-align: center; /* セル内の内容を中央揃えにします */
    vertical-align: middle;
    padding: 0; /* セルの余白をなくします */
}

.attmgr_weekly_all .portrait {
    width: 100%;
    padding: 0; /* セル内の余白をなくします */
    box-sizing: border-box;
}

.attmgr_weekly_all .portrait img {
    width: 100%; /* 画像の幅をセルの幅に合わせる */
    height: auto; /* 高さは自動調整 */
    display: block; /* ブロック要素として表示して余白を消します */
}

@media screen and (max-width: 767px) {
    .attmgr_guide_weekly td a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }
    
    .attmgr_guide_weekly td span {
        display: inline-block;
    }
}

/**
 * 本日の出勤状況（daily）カスタマイズ
 */

/* テーブル全体の枠組みを整理 */
table.attmgr_weekly_all {
    border: none !important;
    margin-top: 20px;
}

/* セラピスト名と写真のセル */
table.attmgr_weekly_all td.portrait {
    background: #fff;
    padding: 10px !important;
    border: 1px solid #eee !important;
}

/* 写真を丸角にして高級感を出す */
table.attmgr_weekly_all td.portrait img {
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* 出勤時間のテキスト */
table.attmgr_weekly_all td.working {
    font-weight: bold;
    color: #d4af37; /* ゴールド */
    background-color: #fffdf5 !important;
    font-size: 1.1em;
}

/* 予約ボタンの擬似要素追加（もしHTML構造的に可能なら） 
 * もしくは、出勤状況ページの下に共通のCTAを表示させる */

/* スマホ表示の最適化 */
@media screen and (max-width: 480px) {
    table.attmgr_weekly_all {
        display: block; /* テーブルを解除して縦並びに近くする */
    }
    
    table.attmgr_weekly_all tr {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
    }
    
    table.attmgr_weekly_all th {
        width: 100% !important;
        background: #333;
        color: #fff;
    }
    
    table.attmgr_weekly_all td {
        width: 50% !important; /* 写真と時間を横並びに */
        height: auto !important;
    }
    
    table.attmgr_weekly_all td.working {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
}

/* 「予約はこちら」への固定導線を強調 */
.staff-daily:after {
    content: "このセラピストを予約する";
    display: block;
    margin-top: 10px;
    padding: 8px;
    background: #d4af37;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
}

/* ヘッダー全体の装飾 */
.daily-header {
    font-size: 1.1em !important;
    padding: 10px 15px;
    border-left: 5px solid #b8860b;
    background: #fdfaf2;
    margin: 40px 0 10px;
    position: relative;
    display: flex;
    align-items: center;
}

/* LIVEバッジの点滅アニメーション */
.now-on-duty span {
    background: #d9534f;
    color: #fff;
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.duty-subtext {
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
    padding-left: 5px;
}

.on-duty:hover {
    transform: translateY(-3px);
}

/* 既存のstaff_block内のテキスト調整 */
.staff_block li .name {
    font-size: 1.2em !important;
    font-weight: bold;
    color: #333;
}

.staff_block li .attendance {
    font-weight: bold;
    color: #b8860b; /* 時間部分を強調 */
}


/* 追加したタイトルのデザイン */
.weekly-schedule-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 20px 0 10px 5px; /* 上下に余白を作り、少し左に寄せる */
    padding-left: 10px;
    border-left: 4px solid #b8860b; /* ゴールドの縦線で高級感を出す */
    line-height: 1.2;
}

/* スマホでは少し文字を小さくして調整 */
@media screen and (max-width: 767px) {
    .weekly-schedule-title {
        font-size: 14px;
        margin: 15px 0 8px 5px;
    }
}