/* HOC5 HR Core — shared styles for [hr-timeoff], [hr-profile], [hr-manager-tools] */

.hoc5-hr-panel h3 {
	margin-top: 1.5em;
}

.hoc5-hr-panel form {
	max-width: 420px;
	margin-bottom: 1em;
}

.hoc5-hr-panel input[type="text"],
.hoc5-hr-panel input[type="email"],
.hoc5-hr-panel input[type="password"],
.hoc5-hr-panel input[type="date"],
.hoc5-hr-panel input[type="number"],
.hoc5-hr-panel select,
.hoc5-hr-panel textarea {
	width: 100%;
	padding: 0.5em;
	margin-top: 0.25em;
	box-sizing: border-box;
}

.hoc5-hr-button {
	display: inline-block;
	padding: 0.6em 1.2em;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}

/* Shared outline-style button — Calendar's Today/Request Time Off/Filter,
   and the Manager Tools "Request History" trigger. */
.hoc5-hr-btn-outline {
	display: inline-block;
	padding: 0.4em 0.9em;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	font-size: 0.9em;
	background: #fff;
	cursor: pointer;
}

.hoc5-hr-btn-outline:hover {
	background: #f0f0f1;
}

.hoc5-hr-sort-indicator {
	font-size: 0.75em;
	color: #aaa;
}

.hoc5-hr-sort-indicator.is-active {
	color: #333;
}

.hoc5-hr-status {
	padding: 0.75em 1em;
	border-radius: 4px;
	margin-bottom: 1em;
}

.hoc5-hr-status-success {
	background: #eafbe7;
	color: #1e6b2e;
}

.hoc5-hr-status-error {
	background: #fbeaea;
	color: #9c2b2b;
}

/* Time-off */

.hoc5-hr-field-with-action {
	display: flex;
	align-items: center;
	gap: 0.25em;
}

.hoc5-hr-field-with-action input {
	flex: 1;
}

.hoc5-hr-btn-sm {
	padding: 0.3em 0.7em;
	font-size: 1em;
	margin: 0 0.15em;
}

.hoc5-hr-date-days-row {
	display: flex;
	align-items: flex-end;
	gap: 0.75em;
	flex-wrap: wrap;
}

.hoc5-hr-date-days-row p {
	margin: 0;
}

.hoc5-hr-panel .hoc5-hr-date-days-row input[type="date"] {
	width: auto;
}

.hoc5-hr-panel .hoc5-hr-date-days-row input[type="number"] {
	width: 55px;
}

.hoc5-hr-date-separator {
	padding-bottom: 0.6em;
}

.hoc5-hr-reason-field {
	margin-top: 1em;
}

.hoc5-hr-sabbatical-note {
	color: #9c2b2b;
	font-size: 0.9em;
	margin-top: 0.5em;
	margin-bottom: 0;
}

/* Small red "Expires on ..." (and, during the heads-up month, "Opens
   on ...") lines under the Sabbatical label in Your Balances — same red
   as the note above and as .hoc5-hr-status-error. */
.hoc5-hr-sabbatical-expiry {
	color: #9c2b2b;
}

/* "Add a National Holiday" — Event Title, Date, and the Add/Save button
   in one row, since that form has nothing else to wrap onto a second
   line (Special Events keeps its own stacked layout — see
   render_calendar_event_form()'s docblock for why only Holidays
   changed). Title gets the remaining space; Date and the button stay
   their natural width. */
.hoc5-hr-holiday-add-row {
	display: flex;
	align-items: flex-end;
	gap: 0.75em;
	flex-wrap: wrap;
}

.hoc5-hr-holiday-add-row p {
	margin: 0;
}

.hoc5-hr-holiday-title-field {
	flex: 1 1 200px;
}

.hoc5-hr-holiday-title-field input[type="text"] {
	width: 100%;
}

.hoc5-hr-balances-total-note {
	color: #444;
	margin-top: -0.75em;
	margin-bottom: 0.75em;
}

.hoc5-hr-balances-note {
	display: flex;
	align-items: center;
	gap: 0.4em;
	color: #666;
	margin-top: -0.75em;
}

.hoc5-hr-balances-note-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Time-off: roughly-equal 2-column layout (history left, request form right) */

.hoc5-hr-timeoff-columns {
	display: flex;
	gap: 2em;
	align-items: flex-start;
	flex-wrap: wrap;
}

.hoc5-hr-col-history,
.hoc5-hr-col-request {
	flex: 1 1 360px;
	min-width: 0;
}

/* Profile page — top box (avatar, name, Change Photo) */

.hoc5-hr-profile-topbox {
	display: flex;
	align-items: center;
	gap: 1.5em;
	background: #f6f7f7;
	border-radius: 8px;
	padding: 1.5em;
	margin-bottom: 1.5em;
}

.hoc5-hr-profile-avatar img {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	object-fit: cover;
	display: block;
}

.hoc5-hr-profile-topbox-info h2 {
	margin: 0 0 0.6em 0;
}

/* Generic 2-field row — pairs related fields side by side to reduce
   vertical height (e.g. English/Chinese Name, Work/Personal Email).
   Wraps to stacked on narrow viewports. */

.hoc5-hr-form-row {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.hoc5-hr-form-row > p {
	flex: 1 1 45%;
	min-width: 140px;
	margin: 0;
}

/* Styled file-input button: the label is the visible button; the actual
   file input sits invisibly on top of it (same size, opacity:0) so a
   click anywhere on the button opens the file picker. Auto-submits on
   change (another narrow, deliberate JS exception — same reasoning as
   the others in this plugin), matching the reference design's
   single-click "Change Photo" flow instead of a separate upload step. */

.hoc5-hr-photo-upload-label {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.hoc5-hr-photo-upload-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.hoc5-hr-account-info-table th {
	width: 40%;
}

/* Shared tables — time-off history, manager employee list */

.hoc5-hr-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em !important;
}

.hoc5-hr-table th,
.hoc5-hr-table td {
	border: 1px solid #ddd;
	padding: 0.5em;
	text-align: left;
	vertical-align: middle;
}

/* Manager Tools: 2-column layout (2/3 employee table, 1/3 edit form) */

.hoc5-hr-manager-columns {
	display: flex;
	gap: 2em;
	align-items: flex-start;
	flex-wrap: wrap;
}

.hoc5-hr-col-employees {
	flex: 2 1 480px;
	min-width: 0; /* allow the table to shrink/scroll instead of overflowing */
	overflow-x: auto;
}

.hoc5-hr-col-edit {
	flex: 1 1 280px;
}

.hoc5-hr-col-edit form {
	max-width: none;
}

.hoc5-hr-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.hoc5-hr-identity-cell {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.hoc5-hr-identity-text {
	line-height: 1.3;
}

.hoc5-hr-name-zh {
	color: #555;
	font-size: 0.9em;
}

.hoc5-hr-subtabs {
	display: flex;
	gap: 0.5em;
	border-bottom: 1px solid #ddd;
	margin-bottom: 1em;
}

.hoc5-hr-subtabs a {
	padding: 0.5em 1em;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.hoc5-hr-subtabs a.is-active {
	border-bottom-color: #2271b1;
	font-weight: 600;
}

.hoc5-hr-actions-cell {
	white-space: nowrap;
}

.hoc5-hr-inline-form {
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
}

.hoc5-hr-icon-btn,
button.hoc5-hr-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0.25em !important;
	margin: 0 0.15em !important;
	cursor: pointer;
	line-height: 0;
}

.hoc5-hr-icon-btn img {
	width: 20px;
	height: 20px;
}

.hoc5-hr-diagnostics {
	background: #f6f7f7;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 0.5em 1em;
	margin-bottom: 1em;
	font-size: 0.9em;
}

.hoc5-hr-diagnostics summary {
	cursor: pointer;
	font-weight: 600;
}

.hoc5-hr-search-form {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin-bottom: 1em;
	max-width: none;
}

.hoc5-hr-search-form input[type="text"] {
	width: auto;
	flex: 1 1 240px;
	margin-top: 0;
}



/* Calendar */

.hoc5-hr-cal-controls {
	margin-bottom: 0.75em;
}

.hoc5-hr-cal-controls-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

.hoc5-hr-cal-right-group {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-left: auto;
}

.hoc5-hr-cal-segmented {
	display: inline-flex;
	border: 1px solid #ccd0d4;
	border-radius: 6px;
	overflow: hidden;
}

.hoc5-hr-cal-segmented a {
	padding: 0.5em 1.2em;
	background: #f6f7f7;
	color: #333;
	text-decoration: none;
	border-right: 1px solid #ccd0d4;
	font-size: 0.95em;
}

.hoc5-hr-cal-segmented a:last-child {
	border-right: none;
}

.hoc5-hr-cal-segmented a.is-active {
	background: #2271b1;
	color: #fff;
}

.hoc5-hr-cal-nav {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.hoc5-hr-cal-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	font-size: 1.1em;
	line-height: 1;
}

.hoc5-hr-cal-caret:hover {
	background: #f0f0f1;
}

.hoc5-hr-cal-period-label {
	font-size: 1.3em;
	font-weight: 600;
	margin: 0 0.4em;
	min-width: 150px;
	text-align: center;
}

.hoc5-hr-cal-scope-form {
	margin-top: 0.75em;
	max-width: none;
}

.hoc5-hr-cal-scope-form label {
	font-size: 0.9em;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
}

.hoc5-hr-cal-weekday-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: #f6f7f7;
}

.hoc5-hr-cal-weekday-header > div {
	text-align: center;
	font-size: 0.8em;
	font-weight: 600;
	color: #555;
	padding: 0.5em 0;
}

.hoc5-hr-cal-grid-wrap {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	margin-bottom: 1em;
}

.hoc5-hr-cal-week-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	border-top: 1px solid #e2e2e2;
	border-left: 1px solid #e2e2e2;
}

.hoc5-hr-cal-daycell {
	border-right: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 5px;
	background: #fff;
}

.hoc5-hr-cal-daycell.hoc5-hr-cal-outside {
	background: #fafafa;
}

.hoc5-hr-cal-daycell.hoc5-hr-cal-outside .hoc5-hr-cal-daynum {
	color: #ccc;
}

.hoc5-hr-cal-daycell.hoc5-hr-cal-today {
	background: #fff8ea;
}

.hoc5-hr-cal-daycell.hoc5-hr-cal-today .hoc5-hr-cal-daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #d97706;
	color: #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
}

.hoc5-hr-cal-daynum {
	font-size: 0.85em;
	color: #333;
	font-weight: 700;
	display: inline-block;
	margin-bottom: 8px;
}

.hoc5-hr-cal-bar {
	display: flex;
	align-items: center;
	height: 18px;
	margin: 1px 2px;
	padding: 0 6px;
	font-size: 0.78em;
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: default;
}

.hoc5-hr-cal-bar.hoc5-hr-cal-mine {
	background: #2271b1;
}

.hoc5-hr-cal-bar.hoc5-hr-cal-other {
	background: #8a8f98;
}

.hoc5-hr-cal-bar:not(.hoc5-hr-cal-continues-before) {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.hoc5-hr-cal-bar.hoc5-hr-cal-continues-before {
	margin-left: 0;
}

.hoc5-hr-cal-bar:not(.hoc5-hr-cal-continues-after) {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.hoc5-hr-cal-bar.hoc5-hr-cal-continues-after {
	margin-right: 0;
}

.hoc5-hr-cal-mine-row {
	background: #eaf3fb;
}

/* Special Events and Holidays — white bar, colored border, black text,
   distinct from the blue/gray time-off bars. */

.hoc5-hr-cal-event-bar {
	display: flex;
	align-items: center;
	height: 18px;
	margin: 1px 2px;
	padding: 0 6px;
	font-size: 0.78em;
	color: #000;
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: default;
}

.hoc5-hr-cal-event-bar.hoc5-hr-cal-special {
	border: 1px solid #7c3aed;
}

.hoc5-hr-cal-event-bar.hoc5-hr-cal-holiday {
	border: 1px solid #7f1d1d;
}

/* Room bookings added by the HOC5 Room Booking plugin ("Also display this on
   the calendar"). Border color comes from that plugin's settings (inline). */
.hoc5-hr-cal-event-bar.hoc5-hr-cal-room {
	border: 1px solid #6b8e23;
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.hoc5-hr-cal-event-bar.hoc5-hr-cal-room:hover,
.hoc5-hr-cal-event-bar.hoc5-hr-cal-room:focus-visible {
	background: #f4f7ee;
	text-decoration: none;
}

.hoc5-hr-cal-list-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-bottom: 1em;
	max-width: none;
}

.hoc5-hr-cal-list-filters input[type="text"] {
	width: auto;
	flex: 1 1 220px;
	margin-top: 0;
}

.hoc5-hr-cal-list-filters input[type="date"] {
	width: auto;
	margin-top: 0;
}

.hoc5-hr-cal-list-filters label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.9em;
}

/* Groups From/To so they stay adjacent even when the rest of a filter
   bar wraps onto a new line — used by both list view and the history
   modal filters. */
.hoc5-hr-cal-daterange {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: nowrap;
}

.hoc5-hr-cal-daterange input[type="date"] {
	width: auto;
	margin-top: 0;
}

/* Generic heading + action-button-on-the-right layout — used by
   Request History's "Add Record" button. */
.hoc5-hr-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
}

.hoc5-hr-section-header h3 {
	margin: 0;
}

.hoc5-hr-section-header-actions {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.hoc5-hr-holiday-reference {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hoc5-hr-holiday-reference li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}

.hoc5-hr-holiday-reference li:last-child {
	border-bottom: none;
}

.hoc5-hr-holiday-reference span {
	color: #666;
	font-size: 0.9em;
}

.hoc5-hr-holiday-quickadd {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid #2271b1;
	background: #fff;
	color: #2271b1;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.hoc5-hr-holiday-quickadd:hover {
	background: #2271b1;
	color: #fff;
}

.hoc5-hr-history-filters,
.hoc5-hr-history-results {
	/* Forces full width regardless of any max-width the theme applies to
	   raw <form> elements — same family of issue as .hoc5-hr-table's
	   margin-bottom fix (a theme rule beating a higher-specificity
	   plugin rule, most likely via a CSS layer), confirmed by comparing
	   against Pending Approvals: that table isn't wrapped in a
	   full-width <form> and rendered fine, this one is and didn't. */
	width: 100% !important;
	max-width: none !important;
	margin-bottom: 1em;
}

/* Modal overlay — used by the Org Chart (a real JS show/hide toggle,
   not the URL-param CSS-overlay trick Request History used to use
   before it moved to its own dedicated tab). */

.hoc5-hr-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 9999;
	align-items: flex-start;
	justify-content: center;
	padding: 3em 1em;
	overflow-y: auto;
}

.hoc5-hr-modal {
	background: #fff;
	border-radius: 8px;
	max-width: 600px;
	width: 100%;
	padding: 1.5em;
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.2 );
}

.hoc5-hr-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}

.hoc5-hr-modal-header h3 {
	margin: 0;
}

.hoc5-hr-modal-close {
	font-size: 1.3em;
	line-height: 1 !important;
	background: none;
	border: none;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	color: #666;
}

.hoc5-hr-modal-close:hover {
	color: #333;
}

.hoc5-hr-modal-body {
	max-height: 65vh;
	overflow-y: auto;
}

/* Org Chart — nested indented list with dotted tree connectors.
   Indentation is computed, not arbitrary: 16px margin + 26px padding =
   42px total, matching the 32px avatar + ~10px gap so a child's avatar
   lines up under the parent's name text, not the parent's avatar.

   The vertical line is drawn per node (not one border-left spanning the
   whole list — tried first, always overshot past the last item, since
   the horizontal branch attaches at a row's vertical center while a
   border spanning the full <ul> continues on to that row's bottom
   edge). Every node except the last spans its own full height (0 to
   100%, meeting the next sibling's own segment); the last node's
   segment stops exactly at its own connector point instead. This also
   resolves the deeper case where the last child has its own children:
   an explicit height can't extend into a nested list no matter how
   tall that nested content is.

   Spacing between nodes is PADDING, not margin — margin sits outside an
   element's own box, so a node's absolutely-positioned segment (bound
   to that node's own box) couldn't reach into a margin gap to meet the
   next node's segment, leaving small breaks in the line between every
   person. Padding is inside the box, so consecutive nodes' padding-box
   edges touch directly with zero gap, and the per-node segments connect
   into one continuous line. 5px padding + 16px (half the 32px avatar)
   = 21px to the connector point, used consistently below. */

.hoc5-hr-org-chart-root,
.hoc5-hr-org-chart-root ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.hoc5-hr-org-chart-root ul {
	margin-left: 16px;
	padding-left: 26px;
}

.hoc5-hr-org-chart-node {
	position: relative;
	padding: 5px 0;
}

.hoc5-hr-org-chart-root ul > .hoc5-hr-org-chart-node::before {
	content: '';
	position: absolute;
	top: 21px;
	left: -26px;
	width: 26px;
	border-top: 2px dotted #d97706;
}

.hoc5-hr-org-chart-root ul > .hoc5-hr-org-chart-node:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -26px;
	border-left: 2px dotted #d97706;
}

.hoc5-hr-org-chart-root ul > .hoc5-hr-org-chart-node:last-child::after {
	content: '';
	position: absolute;
	top: 0;
	height: 21px;
	left: -26px;
	border-left: 2px dotted #d97706;
}

.hoc5-hr-org-chart-person {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.hoc5-hr-org-chart-person img {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	object-fit: cover;
	flex-shrink: 0;
}

.hoc5-hr-org-chart-name {
	font-weight: 600;
}

.hoc5-hr-org-chart-title {
	color: #666;
	font-size: 0.85em;
}

.hoc5-hr-history-filters {
	display: block;
}

.hoc5-hr-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-bottom: 0.75em;
}

.hoc5-hr-filter-row:last-child {
	margin-bottom: 0;
}

.hoc5-hr-filter-row-spacer {
	flex: 1 1 auto;
}

.hoc5-hr-history-filters input[type="text"] {
	width: auto;
	flex: 2 1 220px;
	margin-top: 0;
}

.hoc5-hr-history-filters select {
	width: auto;
	flex: 1 1 140px;
	margin-top: 0;
}

/* Org Chart CTA button on the Profile page — deliberately relies on the
   theme's own default <button> styling for color/fill (same as "Save"
   elsewhere, a plain unstyled button that already renders as a filled,
   prominent button) rather than setting a background color ourselves,
   since guessing at the theme's exact shade risked not matching. Just
   adds size and icon layout on top, with !important given the theme's
   own button padding/font-size has won over plain rules elsewhere in
   this plugin (see the modal-close button fix, earlier in this file). */
.hoc5-hr-org-chart-cta {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 30%;
	min-width: 220px; /* keeps the label/icon from cramping on a narrow Profile column */
	padding: 0.9em 1.5em !important;
	font-size: 1.1em !important;
	margin-top: 0.5em;
}

.hoc5-hr-org-chart-cta-icon {
	width: 22px;
	height: 22px;
	/* The source SVG (hosted at hr.hoc5.us/icons/, outside this plugin)
	   is a dark-stroke icon — there's no local copy to recolor directly,
	   so this forces it to pure white the standard CSS-only way: drop to
	   black regardless of original color, then invert. Safe here since
	   the icon has no color meaning of its own (unlike, say, the
	   Vacation/Other color-coding on the Calendar). */
	filter: brightness( 0 ) invert( 1 );
}

.hoc5-hr-personal-info-save {
	margin-top: 1.5em;
}

/* Locked, auto-filled fields (e.g. Bereavement Leave End Date / Days). */
input.hoc5-hr-readonly {
	background: #eee !important;
	color: #777 !important;
	cursor: not-allowed;
}

/* Jury Duty court-document uploader: one compact line under the Type select. */
.hoc5-hr-file-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 0.75em !important;
	font-size: 0.9em;
}

.hoc5-hr-file-row input[type="file"] {
	max-width: 100%;
	font-size: 0.95em;
}

button.hoc5-hr-link-btn {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: #a33;
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.9em;
}

/* [hr-timeoff-upcoming] — large-font 3-column table for staff meetings.
   Doubled root class so the theme's own table/td rules don't win. */
.hoc5-hr-upcoming.hoc5-hr-upcoming-large {
	font-size: 1.6em;
}
.hoc5-hr-upcoming.hoc5-hr-upcoming .hoc5-hr-upcoming-table {
	width: 100%;
	border-collapse: collapse;
}
.hoc5-hr-upcoming.hoc5-hr-upcoming .hoc5-hr-upcoming-table th,
.hoc5-hr-upcoming.hoc5-hr-upcoming .hoc5-hr-upcoming-table td {
	padding: 0.35em 0.7em;
	vertical-align: middle;
	line-height: 1.35;
}
.hoc5-hr-upcoming.hoc5-hr-upcoming .hoc5-hr-upcoming-dates {
	white-space: nowrap;
}
.hoc5-hr-upcoming.hoc5-hr-upcoming .hoc5-hr-upcoming-days {
	font-size: 0.8em;
	color: #909090;
}
.hoc5-hr-upcoming.hoc5-hr-upcoming .hoc5-hr-upcoming-holiday td {
	color: #7a1f1f;
}