@charset 'UTF-8';

/*

    Manage (ATOZEKI admin)

*/

body#manage table.list td.units span.tag { margin-bottom: 0.2em;}
body#manage table.list td.members span.tag { margin-bottom: 0.2em;}
body#manage span.label.db { font-weight: 400;}

/*  List toolbar inside the card: primary action on the left, filters beside it  */

body#manage section.panel div.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-bottom: 2rem;}
body#manage section.panel div.toolbar p.hint { margin: 0;}
body#manage section.panel form.toolbar div.field.lead { align-self: flex-end;}

/*  Compact filters (the customer support list): smaller inputs than the edit forms  */

body#manage form.toolbar.compact div.field { flex: 1 1 150px;}
body#manage form.toolbar.compact div.field label { font-size: 1.3rem; margin-bottom: 0.4rem;}
body#manage form.toolbar.compact div.field input, body#manage form.toolbar.compact div.field select { min-height: 36px; padding: 6px 10px; font-size: 1.36rem; border-radius: 8px;}
body#manage form.toolbar.compact div.field select { padding-right: 2em; background-position: right 0.5em center;}
body#manage form.toolbar.compact div.field.submit button { min-height: 36px; padding: 0.4em 1.2em; font-size: 1.36rem;}

/*  Logout in the sidebar is for narrow screens only (the header has it on wide screens)  */

@media screen and (min-width: 768px) {
	body#manage nav.global li.mobile-only { display: none;}
}

/*  Internal calendar  */

body#manage section.internal-calendar-head div.toolbar { margin-bottom: 1.6rem;}
body#manage section.internal-calendar-head div.toolbar div.field.right { margin-left: auto;}
body#manage section.internal-calendar-head div.fields.three { margin-bottom: 1.6rem;}
body#manage section.internal-calendar-head div.fields.three div.field { margin-bottom: 0;}
body#manage div.internal-calendar-stats { margin-bottom: 1.2rem;}
body#manage div.internal-calendar-stats div.stat p.value { font-size: 2.2rem;}
body#manage div.internal-calendar-months { display: grid; grid-template-columns: 1fr; gap: 1.6rem;}
body#manage section.internal-calendar-month { margin-bottom: 0; padding: 1.8rem;}
body#manage section.internal-calendar-month > h3 { font-size: 1.7rem; margin-bottom: 1.2rem;}
body#manage section.internal-calendar-month table.list th, body#manage section.internal-calendar-month table.list td { padding: 0.5rem 0.6rem; font-size: 1.4rem; white-space: nowrap;}
body#manage section.internal-calendar-month td.d { width: 2.4em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;}
body#manage section.internal-calendar-month td.w { width: 2em; text-align: center; font-weight: 700;}
body#manage section.internal-calendar-month td.t select { min-height: 38px; padding: 0.3em 2em 0.3em 0.6em; font-size: 1.4rem; width: 9em; border-radius: 8px;}
body#manage section.internal-calendar-month td.n input, body#manage section.internal-calendar-month td.m input { min-height: 38px; padding: 0.3em 0.6em; font-size: 1.4rem; width: 8em; border-radius: 8px;}
body#manage section.internal-calendar-month td.m input { width: 10em;}
body#manage section.internal-calendar-month tr.w0 td.w { color: #b42318;}
body#manage section.internal-calendar-month tr.w6 td.w { color: #175cd3;}
body#manage section.internal-calendar-month tr.day-legal_holiday td, body#manage section.internal-calendar-month tr.day-public_holiday td { background: #fef3f2;}
body#manage section.internal-calendar-month tr.day-scheduled_holiday td { background: #eff8ff;}
body#manage section.internal-calendar-month tr.day-company_holiday td, body#manage section.internal-calendar-month tr.day-special_holiday td { background: #eef4fb;}
body#manage section.internal-calendar-month tr.day-paid_leave_recommended td { background: #fffaeb;}
body#manage section.internal-calendar-month tr.day-unset td { background: #f9fafb; color: var(--muted-color);}
body#manage div.internal-calendar-actions { margin-top: 1.6rem;}

@media screen and (min-width: 960px) {
	body#manage div.internal-calendar-months { grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media screen and (min-width: 1500px) {
	body#manage div.internal-calendar-months { grid-template-columns: repeat(3, minmax(0, 1fr));}
}