/*
 * Coresearch HR: the few places the template's dark scheme leaves text
 * unreadable. Loaded after style.css so these win.
 */

/* The template darkens this badge's background but keeps the light scheme's
   dark-teal text, which vanishes into it. */
[data-theme=dark] .badge.badge-secondary-transparent,
[data-theme=dark] .badge-secondary-transparent {
    background: #1F2933 !important;
    color: #CBD5E1 !important;
}

/* An outline button keeps its light-scheme text on a dark card. */
[data-theme=dark] .btn-outline-secondary {
    color: #CBD5E1 !important;            /* the template pins its own with !important */
    border: 1px solid #4B5563 !important;
}
[data-theme=dark] .btn-outline-secondary:hover,
[data-theme=dark] .btn-outline-secondary:focus {
    color: #FFFFFF !important;
    background-color: #374151 !important;
    border: 1px solid #4B5563 !important;
}

/* The table length and search labels the datatable plugin draws. */
[data-theme=dark] .dataTables_length label,
[data-theme=dark] .dataTables_filter label,
[data-theme=dark] .custom-datatable-filter label,
[data-theme=dark] .dataTables_info {
    color: #CBD5E1;
}

/* Chart text follows the scheme (live-charts.js sets the colours on the
   chart itself; this covers the legend the library styles inline). */
[data-theme=dark] .apexcharts-legend-text {
    color: #CBD5E1 !important;
}
[data-theme=dark] .apexcharts-menu {
    background: #1F2933;
    border-color: #374151;
    color: #CBD5E1;
}

/* The template paints every chart tick and legend tspan a light-scheme grey;
   live-charts.js colours the text element for the scheme, so the inner span
   must follow it. */
[data-theme=dark] .apexcharts-text tspan,
[data-theme=dark] .apexcharts-xaxis-label,
[data-theme=dark] .apexcharts-yaxis-label,
[data-theme=dark] .apexcharts-xaxis-title-text,
[data-theme=dark] .apexcharts-yaxis-title-text {
    fill: #CBD5E1 !important;
}

/* Calendar: an event pill stays inside its day rather than running over the
   next one, and long titles end in an ellipsis. */
.fc .fc-daygrid-event.badge,
.fc .fc-daygrid-event {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 500;
    margin: 1px 2px 0;
}
.fc .fc-daygrid-event .fc-event-title,
.fc .fc-daygrid-event .fc-event-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fc .fc-daygrid-more-link {
    font-size: 12px;
}
.fc .fc-timegrid-event .fc-event-main {
    overflow: hidden;
}

/* To-do priority pills: the label reads in either state, and the chosen
   priority carries its colour. */
.todo-tabs .nav-link.todo-pill {
    color: #6B7280 !important;
    font-size: 14px;
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.todo-tabs .nav-link.todo-pill.active {
    background: #FFFFFF;
    color: #212529 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.todo-tabs .nav-link.todo-pill[data-priority=high].active { color: #AB47BC !important; background: #F7EEF9; }
.todo-tabs .nav-link.todo-pill[data-priority=medium].active { color: #E2A03F !important; background: #FFF6DC; }
.todo-tabs .nav-link.todo-pill[data-priority=low].active { color: #03C95A !important; background: #D2F5E1; }
[data-theme=dark] .todo-tabs .nav-link.todo-pill.active { background: #1F2933; color: #FFFFFF !important; }

/* Notes: the important strip shows three cards across and scrolls by one. */
.notes-strip { gap: 24px; scroll-snap-type: x mandatory; }
.notes-strip-item { width: calc((100% - 48px) / 3); scroll-snap-align: start; }
@media (max-width: 1299px) { .notes-strip-item { width: calc((100% - 24px) / 2); } }
@media (max-width: 767px) { .notes-strip-item { width: 100%; } }

/* File manager: a card's star sits where the reference puts it, the drop
   zone's hidden input covers the whole box, and a strip's arrows show. */
.access-wrap form.access-rate { margin: 0; }
.access-wrap .access-rate .btn { line-height: 1; }
.file-drop input[type=file] { z-index: 2; }
.fm-carousel .owl-nav { position: absolute; top: -44px; right: 0; display: flex; gap: 6px; }
.fm-carousel .owl-nav button { width: 28px; height: 28px; border-radius: 50%; background: #fff !important; border: 1px solid #E9EDF4 !important; color: #111827 !important; font-size: 10px; }
.fm-carousel .owl-nav button.disabled { opacity: .4; }
.fm-carousel { position: relative; }
.files-wrap .files-content h6 { max-width: 150px; }
.folder-wrap { padding: 12px; border: 1px solid #E9EDF4; border-radius: 6px; }
.rating-select form { display: inline-flex; }
#preview .recent-activity li { padding-bottom: 12px; }
[data-theme=dark] .folder-wrap, [data-theme=dark] .files-wrap .files-content { background: #1F2933 !important; border-color: #2D3A46; }
[data-theme=dark] .fm-carousel .owl-nav button { background: #1F2933 !important; color: #fff !important; border-color: #2D3A46 !important; }
.fm-table .file-name-icon > div { max-width: 190px; }
.fm-table .file-name-icon p, .fm-table .file-name-icon span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fm-table td, .fm-table th { white-space: nowrap; }

/* Projects board: the gap a dragged card will land in, and the pills the
   reference uses for priority read as links. */
.project-status .drag-placeholder { border: 1px dashed #AAB2BF; border-radius: 6px; min-height: 120px; margin-bottom: 8px; background: rgba(255,255,255,.5); }
.project-status .kanban-card { cursor: grab; }
.project-status .kb-column { min-width: 270px; }
.todo-tabs .nav-link.todo-pill[data-priority=high].active { color: #AB47BC !important; background: #F7EEF9; }
[data-theme=dark] .project-status .bg-white { background: #1F2933 !important; }

/* Sign-in pages: the company's own photograph behind the left panel, under a
   translucent black wash so the white headline stays readable. The class is
   only added when assets/img/bg/login-bg.jpg exists. */
.login-background.auth-photo { background: #0B0F14 url(../img/bg/login-bg.jpg) center center / cover no-repeat; }
/* The photograph is left untouched: no wash on the panel and no tint on the
   card, which keeps only its border; the words carry a shadow to stay readable. */
.login-background.auth-photo::before { display: none; }
.login-background.auth-photo .authen-overlay-item { background: transparent; border-color: rgba(255, 255, 255, 0.35) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.login-background.auth-photo .authen-overlay-item h1,
.login-background.auth-photo .authen-overlay-item p { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }

/* Sign in with Google keeps its white face under the pointer; the template
   turned every white button orange on hover. */
.btn.btn-white.google-btn:hover, .btn.btn-white.google-btn:focus, .btn.btn-white.google-btn:active {
    background-color: #FFFFFF;
    border-color: #E9EDF4;
    color: #212529;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme=dark] .btn.btn-white.google-btn:hover, [data-theme=dark] .btn.btn-white.google-btn:focus { background-color: #1F2933; color: #FFFFFF; border-color: #2D3A46; }

/* Sign-in pages: the copyright sits at the foot of the column rather than
   under the form; on a narrow screen it simply follows the form. */
.auth-copyright { padding: 1.5rem 0 1rem; }

/* Face kiosk: a tablet page with no chrome, the camera filling the middle. */
.kiosk-body { background: #0B0F14; color: #E5E7EB; min-height: 100vh; }
.kiosk { display: flex; flex-direction: column; min-height: 100vh; }
.kiosk-top, .kiosk-bottom { background: #111827; }
.kiosk-top .text-muted, .kiosk-bottom .text-muted { color: #9CA3AF !important; }
.kiosk-clock { font-size: 28px; line-height: 1; }
.kiosk-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; }
.kiosk-camera, .face-enrol-camera { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; }
/* The kiosk frames a person, not a room: a portrait box, as tall as the space
   between the two bars allows and only as wide as that makes it. A landscape
   camera is cropped to the middle by object-fit below, which is where
   somebody standing in front of a tablet is.
   Sized from the width rather than the height: a flex item whose children are
   all absolutely positioned has no content to measure, so height:100% with an
   aspect ratio collapses it to nothing. The 176px is the two bars and the
   stage's own padding, rounded up, so the box is never taller than its room. */
.kiosk-camera { aspect-ratio: 3 / 4; width: min(100%, (100vh - 176px) * 0.75); max-width: 100%; }
.face-enrol-camera { max-width: 100%; }
.kiosk-camera video, .kiosk-camera canvas, .face-enrol-camera video, .face-enrol-camera canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.kiosk-status { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: rgba(17, 24, 39, 0.85); color: #FFF; padding: 10px 18px; border-radius: 999px; font-size: 16px; white-space: nowrap; max-width: 95%; overflow: hidden; text-overflow: ellipsis; }
.kiosk-status-ok { background: rgba(3, 201, 90, 0.9); }
.kiosk-status-bad { background: rgba(231, 13, 13, 0.9); }
.kiosk-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 15, 20, 0.85); }
.kiosk-result-card { background: #FFF; color: #111827; border-radius: 20px; padding: 40px 56px; min-width: 320px; }
.kiosk-result-avatar { width: 120px; height: 120px; border-radius: 50%; background: #F26522; color: #FFF; font-size: 40px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kiosk-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kiosk-result-line { font-size: 22px; font-weight: 600; }
.kiosk-pin { position: fixed; inset: 0; background: rgba(11, 15, 20, 0.92); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.kiosk-pin-card { background: #FFF; color: #111827; border-radius: 20px; padding: 28px; width: 100%; max-width: 420px; }
.kiosk-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kiosk-keypad .btn { font-size: 22px; padding: 14px 0; }

/* The camera picker sits in the corner of the camera box on both camera pages. */
.kiosk-camera .cam-pick, .face-enrol-camera .cam-pick { position: absolute; top: 12px; right: 12px; width: auto; max-width: 60%; z-index: 3; opacity: 0.9; }

/* A panel filter with many choices scrolls inside its menu. */
.dropdown-menu.filter-menu { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }

/* The "from, to, Apply" date-range form that heads most lists. On a phone
   two date boxes and a button are wider than the screen, and a form that
   cannot wrap pushes the whole page sideways; here it wraps, and the boxes
   give way instead of the page. */
@media (max-width: 767.98px) {
	.right-content form.d-flex,
	.right-content form.d-inline-flex,
	.page-breadcrumb form.d-flex,
	.page-breadcrumb form.d-inline-flex { flex-wrap: wrap; max-width: 100%; }
	.right-content form input[type="date"],
	.page-breadcrumb form input[type="date"] { min-width: 0; width: auto; flex: 1 1 130px; max-width: 100%; }
	.right-content .input-icon, .page-breadcrumb .input-icon { max-width: 100%; }
	.right-content > .me-3, .page-breadcrumb .right-content > .me-3 { max-width: 100%; }
}

/* Calls: the ring card that slides in on any page, and the room on the
   call pages, which is the reference's video frame with Jitsi inside it. */
.hr-call-card { position: fixed; right: 20px; bottom: 20px; z-index: 1080; width: 320px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 16px; animation: hr-call-in .25s ease-out; }
@keyframes hr-call-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.hr-call-body { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hr-call-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hr-call-initials { display: inline-flex; align-items: center; justify-content: center; background: #FF6F28; color: #fff; font-weight: 600; }
.hr-call-text { display: flex; flex-direction: column; min-width: 0; }
.hr-call-text strong { font-size: 15px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-call-text span { font-size: 12px; color: #6B7280; }
.hr-call-actions { display: flex; gap: 8px; }
.hr-call-actions .btn { flex: 1 1 0; }
.hr-room { position: relative; min-height: 70vh; background: #0B0F14; border-radius: 10px; overflow: hidden; }
.hr-room .hr-jitsi { position: absolute; inset: 0; }
.hr-room .hr-jitsi iframe { width: 100%; height: 100%; border: 0; display: block; }
.hr-room .chat-active-users, .hr-room .record-item, .hr-room .call-overlay-bottom { z-index: 2; }
.hr-room .call-overlay-bottom { pointer-events: none; }
.hr-room .call-overlay-bottom button, .hr-room .call-overlay-bottom .call-option { pointer-events: auto; }
.hr-room-voice { min-height: 60vh; }
.hr-room:fullscreen { border-radius: 0; }

/* Chart tooltips readable in both schemes, whatever the slice colour. */
.apexcharts-tooltip.apexcharts-theme-light { background: #fff !important; color: #111827 !important; border-color: #E5E7EB !important; }
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: #F9FAFB !important; color: #111827 !important; border-color: #E5E7EB !important; }
.apexcharts-tooltip.apexcharts-theme-dark { background: #1F2937 !important; color: #F9FAFB !important; }
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: #111827 !important; color: #F9FAFB !important; border-color: #374151 !important; }
.apexcharts-tooltip .apexcharts-tooltip-text, .apexcharts-tooltip .apexcharts-tooltip-y-group { color: inherit !important; }
.apexcharts-tooltip .apexcharts-tooltip-series-group.apexcharts-active { color: inherit !important; }

/* The workflow strip on a phone used to scroll sideways here. It cannot: a
   scrolling rail clips on both axes, which cut the menus off the tabs that
   open them. The rail wraps instead — see the strip's own rules further
   down. */

/* The theme cog on a phone. The template hides it below 992px, but only for
   the default orange scheme: on a phone it vanished on the default theme and
   came back on any other one, and once gone there was no way to reopen the
   customizer and change back. It now behaves the same at every width, in
   every scheme, and sits clear of the right edge so the whole of it can be
   tapped. */
@media (max-width: 991.98px) {
	[data-color] .sidebar-contact .toggle-theme,
	[data-color=primary] .sidebar-contact .toggle-theme {
		display: flex;
	}
	.sidebar-contact .toggle-theme {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}

/* User Roles Distribution: every role on one row, the bars sharing it by
   headcount. Each item may shrink to whatever its share comes to — without
   min-width:0 a flex item refuses to go narrower than its longest word, which
   is how "IT/Helpdesk Agent" ended up over the bar beside it — and a name too
   long for its share is cut rather than wrapped, with the whole of it in the
   tooltip. Stacked on a phone, each bar is full width again. */
.user-role-split .user-role-item { min-width: 0; }
@media (max-width: 767.98px) {
	.user-role-split .user-role-item { flex: 1 1 100% !important; width: 100%; }
}

/* The template caps the error and status artwork at 500px. That rule is more
   specific than img-fluid's own max-width, so on a phone the picture stayed
   500px wide and pushed the whole page sideways — every 404, every refusal and
   every page that lands on one. Keep the cap, never exceed the column. */
.error-images img { max-width: min(500px, 100%); }

/* A date range is two date boxes and an Apply button, and on a card header it
   sits in a row barely wider than one of them. A native date input refuses to
   go below its natural width, so the row could not shrink and took the page
   sideways with it on a phone.

   Matched by shape rather than by page: a form inside an icon-prefixed field
   is this control, whether the page draws it through the shared partial or
   keeps its own copy. Let the row wrap, and let each box take a share of
   whatever width there is. */
.date-range,
.date-range .input-icon,
.date-range form,
.input-icon > form,
.input-icon-start,
.right-content > form,
.right-content .input-icon,
.right-content .input-icon-start {
	flex-wrap: wrap;
}
.date-range > .input-icon,
.date-range input[type="date"].form-control,
.input-icon input[type="date"].form-control,
.input-icon-start input[type="date"].form-control,
.right-content input[type="date"].form-control {
	flex: 1 1 9rem;
	min-width: 9rem;
}

/* Where a page wraps each date in its own icon field rather than putting both
   inside one, the field is the flex item and the box inside it should simply
   fill it — otherwise the box holds its natural width and the field's share
   counts for nothing. */
.date-range .input-icon > input[type="date"].form-control {
	width: 100%;
	min-width: 0;
}

/* A row given flex-fill inside a flex column is a flex item, and a flex item
   will not go narrower than its widest child unless it is told it may. On a
   phone that turned a two-card row into a page wider than the screen. */
.d-flex > .row.flex-fill {
	min-width: 0;
}

/* The theme parks its settings panel off the right edge (position: fixed,
   right: -350px) and clips the overflow on body — but the scrollbar is the
   root's, not body's, so at some widths the page could still be dragged
   sideways onto nothing. Clip at the root as well. `clip` rather than
   `hidden` so the sticky table headers inside keep working; a browser that
   does not know it simply ignores the line. */
html {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- */
/* The workflow strip: a dark bar of pills across the top of a role's
   pages. One rule set for all six strips, since they are one partial.

   A rail rather than a row of tabs — the old nav-tabs sat on a hairline
   border and the lit one was the only thing with any weight, which read as
   a browser's tab bar rather than as this application's own navigation.  */
.workflow-nav {
	display: flex;
	/* Wraps rather than scrolls. A scrolling rail has to clip, and a clipped
	   rail clips the menus hanging off its tabs too: setting overflow-x makes
	   the browser clip the y axis as well, so an open dropdown was cut off two
	   pixels below the bar. Wrapping keeps every tab reachable and every menu
	   whole. */
	flex-wrap: wrap;
	gap: .25rem;
	align-items: center;
	margin-bottom: 1.25rem;
	padding: .3125rem;
	border: 0;
	border-radius: .75rem;
	background: #111827;
}
.workflow-nav > .nav-item {
	flex: 0 0 auto;
}
.workflow-nav .nav-link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: .5rem .875rem;
	border: 0;
	border-radius: .5rem;
	color: #fff;
	font-weight: 500;
	font-size: .875rem;
	line-height: 1.25rem;
	transition: background-color .15s ease, color .15s ease;
}
.workflow-nav .nav-link i {
	font-size: 1rem;
	opacity: .9;
}
.workflow-nav .nav-link:hover,
.workflow-nav .nav-link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}
/* The page you are on. Filled in the brand colour so it reads at a glance
   without having to compare weights along the row.

   Written out rather than taken from --bs-primary: that variable is still
   Bootstrap's blue in this build, and the accent the rest of the theme draws
   lives in the per-scheme rules instead. */
.workflow-nav .nav-link.active,
.workflow-nav .nav-link.show,
.workflow-nav .show > .nav-link,
.workflow-nav .nav-link.active:hover,
.workflow-nav .nav-link.show:hover {
	/* The template pins an open dropdown toggle to #f8f9fa with !important,
	   which turned the lit tab into a pale block on the dark rail. Only
	   !important answers !important. */
	color: #fff !important;
	background: #F26522 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.workflow-nav .nav-link.active i {
	opacity: 1;
}
/* A tab that opens a menu keeps its caret, tightened up against the label. */
.workflow-nav .dropdown-toggle::after {
	margin-left: .4rem;
	vertical-align: .15em;
	border-top-color: currentColor;
}
/* The menu hanging off a tab belongs to the dark rail above it. */
.workflow-nav .dropdown-menu {
	margin-top: .375rem;
	padding: .3125rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: .625rem;
	background: #111827;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.workflow-nav .dropdown-menu .dropdown-item {
	border-radius: .375rem;
	padding: .4375rem .625rem;
	color: #fff;
	font-size: .875rem;
}
.workflow-nav .dropdown-menu .dropdown-item:hover,
.workflow-nav .dropdown-menu .dropdown-item:focus {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}
.workflow-nav .dropdown-menu .dropdown-item.active {
	color: #fff;
	background: #F26522;
}
/* On a phone the rail keeps its shape and simply scrolls. */
@media (max-width: 575.98px) {
	.workflow-nav {
		border-radius: .625rem;
	}
	.workflow-nav .nav-link {
		padding: .4375rem .6875rem;
		font-size: .8125rem;
	}
}
/* In the dark scheme the page is already dark, so the rail lifts off it
   instead of sinking into it. */
[data-theme=dark] .workflow-nav {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .08);
}
[data-theme=dark] .workflow-nav .dropdown-menu {
	background: #1B1F24;
	border-color: rgba(255, 255, 255, .1);
}
/* The menu is dark in both schemes, so its text is stated in both rather than
   inherited: the dark scheme's own dropdown rules would otherwise put near
   black on it. */
[data-theme=dark] .workflow-nav .dropdown-menu .dropdown-item {
	color: #fff;
}
[data-theme=dark] .workflow-nav .dropdown-menu .dropdown-item:hover,
[data-theme=dark] .workflow-nav .dropdown-menu .dropdown-item:focus {
	color: #fff;
	background: rgba(255, 255, 255, .1);
}
[data-theme=dark] .workflow-nav .dropdown-menu .dropdown-item.active {
	color: #fff;
	background: #F26522;
}

/* A tab's menu drops on hover, not only on click.
   Only where there is a real pointer: on a touch screen there is no hover to
   read, and a menu that opened on the first tap and navigated on the second
   would be worse than the tap-to-open Bootstrap already gives. Clicking still
   works everywhere, which is also what the keyboard uses. */
@media (hover: hover) and (pointer: fine) {
	.workflow-nav .nav-item.dropdown:hover > .dropdown-menu {
		display: block;
	}
	/* The menu sits a few pixels below the tab. Without something to cross,
	   the pointer leaves the tab before it reaches the menu and the menu
	   closes under it. This bridges the gap. */
	.workflow-nav .nav-item.dropdown:hover::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: .5rem;
	}
	/* Hovering a tab that opens a menu lights it the way the open one is lit,
	   so the pointer and the menu agree about which tab is in play. */
	.workflow-nav .nav-item.dropdown:hover > .nav-link {
		/* The template colours a hovered toggle pale with !important, same as
		   it does an open one. */
		color: #fff !important;
		background: #F26522 !important;
	}
}

/* ---------------------------------------------------------------------------
   Alerts you can actually read.

   The template's style.css overrides Bootstrap's alert colours with the
   variant's own hue at full strength for the text and the same hue at ten per
   cent for the background. Amber on amber is about 1.6:1 — the migration
   banner rendered as a blank cream band with its text technically present and
   nobody able to read a word of it. Bootstrap's own rule uses a dark
   --bs-*-text-emphasis for exactly this reason; the template throws it away.

   So the tint stays, because the tint is the design, and the text goes dark
   enough to clear 4.5:1 against it. Each value is the variant's own hue taken
   down in luminance rather than a flat grey, so a warning still reads amber
   and an error still reads red.
   -------------------------------------------------------------------------- */
.alert-primary   { color: #8A3310; }
.alert-success   { color: #04632C; }
.alert-info      { color: #0B4894; }
.alert-warning   { color: #7A5900; }
.alert-danger    { color: #8C0707; }

/* The template points these at the full-strength hue too, so a link or a
   dismiss button inside an alert disappears the same way the text did. */
.alert-primary .alert-link,
.alert-primary .btn-close   { color: #8A3310; }
.alert-success .alert-link,
.alert-success .btn-close   { color: #04632C; }
.alert-info .alert-link,
.alert-info .btn-close      { color: #0B4894; }
.alert-warning .alert-link,
.alert-warning .btn-close   { color: #7A5900; }
.alert-danger .alert-link,
.alert-danger .btn-close    { color: #8C0707; }

/* <code> inside an alert takes the page's code colour, which is its own
   near-invisible pink on these tints. The filenames in the migration banner
   are the whole point of the sentence, so they follow the alert's text. */
.alert code {
	color: inherit;
	background: rgba(0, 0, 0, .06);
	padding: .0625rem .25rem;
	border-radius: .25rem;
}

/* Dark scheme: the tint sits on a dark surface instead of white, so the same
   dark text would vanish the other way. Here the light hue is the readable
   one, which is what the template was reaching for in the first place. */
[data-theme=dark] .alert-primary,
[data-theme=dark] .alert-primary .alert-link,
[data-theme=dark] .alert-primary .btn-close { color: #FFA87A; }
[data-theme=dark] .alert-success,
[data-theme=dark] .alert-success .alert-link,
[data-theme=dark] .alert-success .btn-close { color: #5FE49C; }
[data-theme=dark] .alert-info,
[data-theme=dark] .alert-info .alert-link,
[data-theme=dark] .alert-info .btn-close    { color: #7FB8FF; }
[data-theme=dark] .alert-warning,
[data-theme=dark] .alert-warning .alert-link,
[data-theme=dark] .alert-warning .btn-close { color: #FFD75E; }
[data-theme=dark] .alert-danger,
[data-theme=dark] .alert-danger .alert-link,
[data-theme=dark] .alert-danger .btn-close  { color: #FF8B8B; }
[data-theme=dark] .alert code { background: rgba(255, 255, 255, .10); }

/* ---------------------------------------------------------------------------
   The pending-migrations banner, where it can actually be seen.

   header.php emits it between the fixed header and .page-wrapper, so it is the
   first element in the document flow — with nothing holding it clear of either
   fixed thing around it. Measured on the manager dashboard at 1440px: the
   header covered the top 36px of it, and it began at x=16 while the content
   column begins at x=252, so its left quarter sat in the sidebar's lane. Its
   first line was behind the header and the start of every line was behind the
   sidebar, which is why it read as an empty cream band on every page rather
   than as the sentence it is.

   flash.php hit this same trap and escaped by becoming a toast. This one has
   to stay in the flow — it is persistent, and it must push the page down
   rather than float over it — so instead it borrows .page-wrapper's own
   offsets. The wrapper's padding-top is then redundant, because the banner
   has already cleared the header on its behalf.

   The m-3 that used to be in the markup is gone: it is Bootstrap's
   margin:1rem !important, which no plain rule here could have overridden.
   -------------------------------------------------------------------------- */
.app-db-banner {
	/* 52px is the fixed header's height, plus a gap of the same 1rem m-3 gave. */
	margin: calc(52px + 1rem) 1rem 0 1rem;
}
/* The horizontal layouts put a menu bar below the header, and the wrapper
   clears both; so does this. */
.menu-horizontal .app-db-banner {
	margin-top: calc(96px + 1rem);
}
[data-layout="horizontal-single"] .menu-horizontal .app-db-banner {
	margin-top: calc(50px + 1rem);
}
/* Layouts with no header overhead at all: the wrapper's padding-top is 0 here,
   so the banner needs no clearance either. */
[data-layout="default"] .header-collapse .app-db-banner,
[data-layout="without-header"] .app-db-banner {
	margin-top: 1rem;
}

/* The sidebar is fixed and opaque, and the wrapper is pushed clear of it by a
   margin that depends on which sidebar is showing. The banner follows suit, so
   its text starts where the page's text starts. */
@media (min-width: 992px) {
	.app-db-banner {
		margin-left: calc(252px + 1rem);
	}
	.mini-sidebar .app-db-banner {
		margin-left: calc(72px + 1rem);
	}
	.sidebar-twocol .mini-sidebar .app-db-banner,
	.sidebar-stacked .mini-sidebar .app-db-banner {
		margin-left: calc(60px + 1rem);
	}
	/* A horizontal menu has no sidebar to clear. */
	.menu-horizontal .app-db-banner {
		margin-left: 1rem;
	}
}

/* The wrapper's padding-top exists to clear the fixed header. When the banner
   is present it has already done that, and leaving the padding in place put a
   second empty gap between the banner and the page title. */
.app-db-banner ~ .page-wrapper {
	padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Stat tiles — the day's register across the top of a dashboard.

   Solid colour, white figures, a translucent chip for the icon and a large
   soft circle bleeding off the corner. The first tile is the whole team and
   is darker than the rest, carrying a ring: the share of the team actually
   marked present today.

   The template's version was a white box with a ringed icon floating to the
   right, and only that icon was a link — the whole card looked clickable and
   every part of it but a 40px circle was inert. Each tile is one link now,
   edge to edge.
   -------------------------------------------------------------------------- */
.stat-tile {
	--tile-from: #F26522;
	--tile-to: #D4531A;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	flex: 1 1 auto;
	min-height: 8.25rem;
	padding: 1.125rem 1.25rem;
	border: 0;
	border-radius: 1rem;
	overflow: hidden;
	text-decoration: none;
	background-image: linear-gradient(145deg, var(--tile-from) 0%, var(--tile-to) 100%);
	color: #fff;
	transition: transform .18s ease, box-shadow .18s ease;
}
.stat-tile:hover,
.stat-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 .75rem 1.5rem rgba(17, 24, 39, .22);
	color: #fff;
}
.stat-tile:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}
/* The soft disc bleeding off the lower corner. Decoration only, so it is
   never in the way of the figure. */
.stat-tile::after {
	content: "";
	position: absolute;
	right: -2.25rem;
	bottom: -3.25rem;
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	pointer-events: none;
}
.stat-tile-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-width: 0;
}
.stat-tile-label {
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	/* Full white, not white-at-92%: dimming it to suggest hierarchy cost
	   nearly a whole contrast point and put three of the five tiles under
	   4.5:1. Size and weight carry the hierarchy instead. */
	color: #fff;
}
.stat-tile-value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	/* Figures of one width, so a row does not jitter as numbers go 1 to 11. */
	font-variant-numeric: tabular-nums;
}
.stat-tile-foot {
	font-size: .75rem;
	line-height: 1.3;
	color: #fff;
	/* The caption is the quietest line on the tile, so it is the smallest —
	   never the faintest. */
	opacity: 1;
}
/* The icon chip sits top right, out of the text's way. */
.stat-tile-icon {
	position: absolute;
	top: 1.125rem;
	right: 1.25rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .75rem;
	background: rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 1.125rem;
}
/* The figure must not run under the chip on a narrow tile. */
.stat-tile-fill .stat-tile-body {
	padding-right: 3rem;
}

/* Deeper than the reference's. White on its green came to 2.23:1 and on its
   amber to 2.15:1 — under even the 3:1 a figure this size is allowed, and far
   under the 4.5:1 the label and caption need. Same hues, taken down until
   white sits on them properly; measured values are in the commit. */
.stat-tile-success { --tile-from: #12875C; --tile-to: #0A6B48; }
.stat-tile-danger  { --tile-from: #C62339; --tile-to: #9F1829; }
.stat-tile-violet  { --tile-from: #6D3BD4; --tile-to: #55249F; }
.stat-tile-amber   { --tile-from: #9A6206; --tile-to: #7A4D03; }
.stat-tile-slate   { --tile-from: #51607A; --tile-to: #3A465A; }

/* ---- the team tile, with the ring ---------------------------------------- */
.stat-tile-hero {
	--tile-from: #1B2130;
	--tile-to: #11151F;
	align-items: center;
}
.stat-tile-hero::after {
	background: rgba(255, 255, 255, .05);
}
.stat-ring {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background:
		conic-gradient(#F26522 calc(var(--ring-pct, 0) * 1%), rgba(255, 255, 255, .14) 0);
}
/* The hole in the middle of the ring. */
.stat-ring::before {
	content: "";
	position: absolute;
	inset: .4375rem;
	border-radius: 50%;
	background: #161B28;
}
.stat-ring-value {
	position: relative;
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* conic-gradient is well supported, but where it is not the ring would be a
   flat block; a plain disc with the figure on it is the better failure. */
@supports not (background: conic-gradient(red 10%, blue 0)) {
	.stat-ring { background: rgba(255, 255, 255, .14); }
}

/* A dashboard is read in the light scheme and the dark one alike; these tiles
   carry their own colour, so only the ring's hole has to follow the surface
   behind it. */
[data-theme=dark] .stat-ring::before { background: #12161F; }

@media (max-width: 1399.98px) {
	.stat-tile { min-height: 7.5rem; }
	.stat-tile-value { font-size: 1.75rem; }
}
@media (max-width: 575.98px) {
	.stat-tile { padding: 1rem; min-height: 7rem; }
	.stat-tile-value { font-size: 1.5rem; }
	.stat-tile-icon { width: 2.25rem; height: 2.25rem; top: 1rem; right: 1rem; }
	.stat-ring { width: 3.5rem; height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.stat-tile { transition: none; }
	.stat-tile:hover,
	.stat-tile:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
   The welcome banner.

   It was bg-primary, a full width slab of the brand orange above a row of
   tiles that are themselves solid colour — two loud things stacked, and the
   orange won. Dark instead, in the same gradient the team tile uses, so the
   top of the dashboard reads as one surface with the colour saved for the
   figures that are meant to be read first. The brand is kept as an edge
   rather than a fill.
   -------------------------------------------------------------------------- */
.welcome-card {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(145deg, #1B2130 0%, #11151F 100%);
}
.welcome-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: #F26522;
}
/* The same soft disc the tiles carry, so the two belong together. */
.welcome-card::after {
	content: "";
	position: absolute;
	right: -3rem;
	bottom: -5rem;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
	pointer-events: none;
}
.welcome-card > .card-body {
	position: relative;
	z-index: 1;
}
/* The subtitle was white at 75% against orange. Against this it can simply be
   the muted grey the rest of the dark surfaces use. */
.welcome-card .opacity-75 {
	opacity: 1 !important;
	color: #9AA7B5 !important;
}


/* ===========================================================================
   The project workspace.

   Everything under .ws is a deliberate break from the template's language.
   The rest of this application is an HR system and looks like one: heavy card
   headers, filled badges, a table for everything. Delivery work reads better
   quieter — one soft surface, a lot of white space, type doing the work that
   borders were doing, and colour saved for the two or three things that
   actually need it.

   Scoped under .ws and .rm so none of it reaches the HR pages.
   =========================================================================== */
.ws-page {
	--ws-ink: #E8EDF4;
	--ws-muted: #8A97A8;
	--ws-line: #273040;
	--ws-surface: #1B2231;
	--ws-accent: #2DD4A7;
	--ws-accent-soft: #15372F;
	--ws-good: #2DD4A7;
	--ws-late: #F26A7E;
	/* The workspace is its own surface. Without this the variables above were
	   declared on a block whose siblings could not see them, and a dark
	   palette rendered as pale text on the HR page's white. */
	background: #141A24;
	border-radius: 1rem;
	padding: 1.25rem;
	color: var(--ws-ink);
}
.ws { margin-bottom: 1.25rem; }
.ws-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.ws-identity { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.ws-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .875rem;
	background: var(--ws-accent-soft);
	color: var(--ws-accent);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .02em;
}
.ws-mark-sm { width: 2.25rem; height: 2.25rem; border-radius: .625rem; font-size: .8125rem; }
.ws-name {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ws-ink);
	margin: 0;
}
.ws-meta {
	margin: .25rem 0 0;
	font-size: .8125rem;
	color: var(--ws-muted);
}
.ws-meta a { color: var(--ws-muted); text-decoration: underline; text-underline-offset: 2px; }
.ws-dot { margin: 0 .4375rem; }
.ws-state { font-weight: 600; }
.ws-state-active    { color: var(--ws-good); }
.ws-state-on_hold   { color: #9A6206; }
.ws-state-completed { color: var(--ws-muted); }
.ws-state-cancelled { color: var(--ws-late); }
.ws-back {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	color: var(--ws-muted);
	text-decoration: none;
}
.ws-back:hover { color: var(--ws-ink); }

/* Tabs as an underline rather than a filled rail: inside a project the tabs
   are not the loudest thing on the page, the work is. */
.ws-tabs {
	display: flex;
	gap: .25rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--ws-line);
}
.ws-tab {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	padding: .625rem .875rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: .875rem;
	font-weight: 500;
	color: var(--ws-muted);
	text-decoration: none;
	white-space: nowrap;
}
.ws-tab i { font-size: 1rem; }
.ws-tab:hover { color: var(--ws-ink); }
.ws-tab.is-here { color: var(--ws-accent); border-bottom-color: var(--ws-accent); font-weight: 600; }
.ws-count {
	min-width: 1.25rem;
	padding: 0 .3125rem;
	border-radius: 999px;
	background: #273040;
	color: #9FACBD;
	font-size: .6875rem;
	font-weight: 600;
	text-align: center;
}
.ws-tab.is-here .ws-count { background: var(--ws-accent-soft); color: var(--ws-accent); }

/* Figures as plain type on the page, not as six coloured boxes. */
.ws-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	padding: 1.125rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid var(--ws-line);
	border-radius: .875rem;
	background: var(--ws-surface);
}
.ws-stat { display: flex; flex-direction: column; gap: .1875rem; min-width: 7rem; }
.ws-stat-action { margin-left: auto; justify-content: center; }
.ws-stat-label {
	font-size: .6875rem; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: var(--ws-muted);
}
.ws-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--ws-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ws-stat-of { font-size: 1rem; font-weight: 500; color: var(--ws-muted); }
.ws-stat-foot { font-size: .75rem; color: var(--ws-muted); }
.ws-bar { display: block; width: 7rem; height: 4px; border-radius: 999px; background: #273040; overflow: hidden; }
.ws-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--ws-accent); }
.ws-btn {
	display: inline-flex; align-items: center; gap: .375rem;
	padding: .5rem .875rem; border-radius: .625rem;
	/* The accent is a light mint, so white on it reads at 1.9:1. The ink
	   the surface is cut from gives about nine. */
	background: var(--ws-accent); color: #0A1F1A; font-size: .8125rem; font-weight: 600;
	text-decoration: none;
}
.ws-btn:hover { background: #25B892; color: #fff; }

.ws-panel {
	border: 1px solid var(--ws-line);
	border-radius: .875rem;
	background: var(--ws-surface);
	padding: 1rem 1.25rem 1.25rem;
}
.ws-empty {
	text-align: center; padding: 3rem 1.5rem;
	border: 1px dashed var(--ws-line); border-radius: .875rem; background: var(--ws-surface);
}
.ws-empty i { font-size: 2.5rem; color: #4A5668; }
.ws-empty p { margin: .75rem auto 0; max-width: 32rem; color: var(--ws-muted); font-size: .875rem; }

/* The project picker a workspace page shows when none was chosen. */
.ws-pick { border: 1px solid #273040; border-radius: .875rem; background: #1B2231; padding: 1.5rem; }
.ws-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.ws-pick-card {
	display: flex; align-items: center; gap: .75rem;
	padding: .875rem; border: 1px solid #273040; border-radius: .75rem;
	text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.ws-pick-card:hover { border-color: #2DD4A7; box-shadow: 0 .25rem .75rem rgba(16,23,42,.06); color: inherit; }
.ws-pick-name { display: block; font-weight: 600; color: #E8EDF4; }
.ws-pick-meta { display: block; font-size: .75rem; color: #8A97A8; }

/* ---------------------------------------------------------------------------
   The roadmap itself: a milestone per row, its tasks indented beneath it.
   -------------------------------------------------------------------------- */
.rm-scroll { overflow-x: auto; }
.rm { min-width: 46rem; }
.rm-row { display: flex; align-items: center; gap: 1rem; }
.rm-months .rm-track { height: 1.5rem; }
.rm-label { flex: 0 0 17rem; width: 17rem; min-width: 0; padding: .375rem .75rem .375rem 0; }
.rm-track { position: relative; flex: 1 1 auto; height: 2.5rem; }

.rm-month {
	position: absolute; top: 0;
	font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: #96A3B4; white-space: nowrap; padding-left: .375rem;
	border-left: 1px solid #273040;
	/* A year of columns on a narrow chart gives each month less room than its
	   name needs, and absolutely positioned labels do not push each other
	   along — they simply overlapped into "JUN 2026UL 2026AUG". */
	overflow: hidden;
	text-overflow: clip;
	box-sizing: border-box;
}
.rm-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: #222A38; }
.rm-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #2DD4A7; opacity: .55; z-index: 3; }

.rm-name { display: block; font-weight: 600; font-size: .875rem; color: #E8EDF4;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-sub  { display: block; font-size: .75rem; color: #8A97A8; }
.rm-late { color: #F26A7E; font-weight: 600; margin-left: .375rem; }
.rm-done { color: #2DD4A7; font-weight: 600; margin-left: .375rem; }

.rm-bar {
	position: absolute; top: 50%; transform: translateY(-50%);
	height: 1.75rem; min-width: 2.25rem;
	border-radius: .5rem;
	background: #243042;
	display: flex; align-items: center;
	overflow: hidden; z-index: 2;
}
.rm-fill { position: absolute; inset: 0 auto 0 0; background: #2DD4A7; border-radius: inherit; }
.rm-bar.is-late  { background: #3A222A; }
.rm-bar.is-late .rm-fill { background: #F26A7E; }
.rm-bar.is-done .rm-fill { background: #2DD4A7; }
.rm-bar.is-loose { background: #242C39; }
.rm-bar.is-loose .rm-fill { background: #5A6879; }
.rm-bar-text {
	position: relative; z-index: 1; padding: 0 .5rem;
	font-size: .6875rem; font-weight: 700; color: #06231C;
	text-shadow: none;
	font-variant-numeric: tabular-nums;
}

/* A task row: quieter than its milestone, indented under it. */
.rm-row-task .rm-track { height: 1.75rem; }
.rm-row-task .rm-label { padding-left: 1.25rem; }
.rm-task {
	display: inline-flex; align-items: center; gap: .4375rem;
	font-size: .8125rem; color: #A9B4C2; text-decoration: none; max-width: 100%;
}
.rm-task i { font-size: .875rem; color: #4A5668; flex-shrink: 0; }
.rm-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The "and the rest" line under a milestone whose task list was cut. */
.rm-more { display: inline-block; padding-left: 1.3125rem; font-size: .75rem; color: #96A3B4; }
.rm-more a { color: #2DD4A7; text-decoration: none; }
.rm-task:hover { color: #E8EDF4; }
.rm-task.is-done { color: #7A8698; }
.rm-task.is-done span { text-decoration: line-through; }
.rm-task.is-done i { color: #2DD4A7; }
.rm-row-loose .rm-name { color: #93A1B5; font-style: italic; }

/* The workspace is dark in both schemes — it is its own surface, the way the
   real thing is, rather than following the HR pages around. Only the light
   scheme needs its edge softened against a pale page. */
/* The milestone bar's own label: dark ink on the teal fill, light on the
   empty track behind it, so it reads wherever the fill happens to end. */
.rm-bar-text { color: #06231C; }
.rm-bar.is-late .rm-bar-text { color: #FFE9ED; }
.rm-bar.is-loose .rm-bar-text { color: #D5DCE6; }

@media (max-width: 767.98px) {
	.rm-label { flex-basis: 10rem; width: 10rem; }
	.ws-stats { gap: 1.25rem; }
	.ws-name { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------------
   The discussion feed — a channel against a project.

   Modelled on what a team actually does: short messages in date order, the
   day called out between them, mentions marked, reactions underneath, and a
   composer at the foot. No card per message: a channel reads as one column,
   and a border round every line would make forty messages look like forty
   documents.
   -------------------------------------------------------------------------- */
.fd {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.fd-stream {
	display: flex;
	flex-direction: column;
	max-height: 42rem;
	overflow-y: auto;
	padding-right: .5rem;
}

/* The date divider: a rule with the day sitting in it. */
.fd-day {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin: 1.25rem 0 .75rem;
	color: #96A3B4;
	font-size: .75rem;
	font-weight: 600;
}
.fd-day::before,
.fd-day::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #273040;
}
.fd-day span { flex-shrink: 0; }

.fd-msg {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .625rem .5rem;
	border-radius: .625rem;
}
.fd-msg:hover { background: #1B2231; }
.fd-body { flex: 1 1 auto; min-width: 0; }

.fd-byline {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .125rem;
}
.fd-who  { font-weight: 600; font-size: .875rem; color: #E8EDF4; }
.fd-when { font-size: .75rem; color: #8A97A8; }
.fd-on {
	display: inline-flex; align-items: center; gap: .25rem;
	font-size: .75rem; color: #96A3B4; text-decoration: none;
	padding: .0625rem .375rem; border-radius: .375rem; background: #222A38;
}
.fd-on:hover { color: #2DD4A7; }
.fd-tag {
	font-size: .6875rem; font-weight: 600; color: #2DD4A7;
	background: #15372F; padding: .0625rem .375rem; border-radius: .375rem;
}
.fd-title { font-size: .9375rem; font-weight: 600; color: #E8EDF4; margin: .125rem 0 .25rem; }
.fd-text  { font-size: .875rem; line-height: 1.55; color: #C6D0DC; overflow-wrap: anywhere; }

/* A mention. Teal because that is the accent, and a link where the person
   resolves to somebody on the books. */
.fd-at {
	color: #2DD4A7;
	font-weight: 600;
	text-decoration: none;
}
a.fd-at:hover { text-decoration: underline; }

.fd-react {
	display: flex;
	align-items: center;
	gap: .375rem;
	flex-wrap: wrap;
	margin-top: .4375rem;
}
.fd-chip {
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .125rem .4375rem;
	border: 1px solid #2B3647;
	border-radius: 999px;
	background: #1B2231;
	color: #C6D0DC;
	font-size: .8125rem;
	line-height: 1.4;
	cursor: pointer;
}
.fd-chip span { font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-chip:hover { border-color: #2DD4A7; }
.fd-chip.is-mine { border-color: #2DD4A7; background: #15372F; color: #7BE8C8; }
.fd-chip-add { color: #8A97A8; padding: .1875rem .375rem; }

/* The picker: shown on hover or when the button has focus, so it works from a
   keyboard as well as a pointer. */
.fd-add { position: relative; display: inline-flex; }
.fd-picker {
	position: absolute;
	bottom: calc(100% + .375rem);
	left: 0;
	display: none;
	gap: .125rem;
	padding: .25rem;
	border: 1px solid #2B3647;
	border-radius: .625rem;
	background: #141A24;
	box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .45);
	z-index: 5;
}
.fd-add:hover .fd-picker,
.fd-add:focus-within .fd-picker { display: flex; }
.fd-emoji {
	border: 0; background: transparent; cursor: pointer;
	font-size: 1rem; line-height: 1; padding: .25rem; border-radius: .375rem;
}
.fd-emoji:hover { background: #222A38; }

.fd-replies {
	display: inline-flex; align-items: center; gap: .3125rem;
	margin-left: .25rem;
	font-size: .75rem; font-weight: 600; color: #2DD4A7; text-decoration: none;
}
.fd-replies:hover { text-decoration: underline; color: #2DD4A7; }
.fd-replies .avatar { width: 1.25rem; height: 1.25rem; font-size: .5625rem; }

/* The composer, pinned under the stream the way a channel puts it. */
.fd-composer {
	display: flex;
	align-items: flex-end;
	gap: .5rem;
	padding: .5rem .5rem .5rem .875rem;
	border: 1px solid #2B3647;
	border-radius: .875rem;
	background: #1B2231;
}
.fd-composer textarea {
	flex: 1 1 auto;
	min-height: 2.25rem;
	max-height: 9rem;
	padding: .4375rem 0;
	border: 0;
	background: transparent;
	color: #E8EDF4;
	font-size: .875rem;
	line-height: 1.5;
	resize: vertical;
}
.fd-composer textarea::placeholder { color: #7A8698; }
.fd-composer textarea:focus { outline: none; }
.fd-send {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	border: 0; border-radius: .625rem;
	background: #2DD4A7; color: #06231C;
	font-size: 1.0625rem; cursor: pointer;
}
.fd-send:hover { background: #25B892; }
.fd-readonly { font-size: .8125rem; color: #8A97A8; margin: 0; }

@media (max-width: 575.98px) {
	.fd-stream { max-height: none; }
	.fd-msg { padding: .5rem .25rem; }
}

/* ---------------------------------------------------------------------------
   The task list — a project's work grouped by the list it belongs to.

   Rows rather than a table element: the row is a flex line so the add-a-task
   row can be a form with the same columns, which a <tr> cannot be. Roles are
   set on the markup so it still reads as a table to anything listening.
   -------------------------------------------------------------------------- */
.tl-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.tl-spacer { flex: 1 1 auto; }
.tl-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 18rem;
}
.tl-search i {
	position: absolute;
	left: .625rem;
	color: #7A8698;
	font-size: .9375rem;
}
.tl-search input {
	width: 100%;
	padding: .4375rem .625rem .4375rem 2rem;
	border: 1px solid #2B3647;
	border-radius: .625rem;
	background: #1B2231;
	color: #E8EDF4;
	font-size: .8125rem;
}
.tl-search input::placeholder { color: #7A8698; }
.tl-search input:focus { outline: none; border-color: #2DD4A7; }

.tl-pill {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .4375rem .75rem;
	border: 1px solid #2B3647;
	border-radius: .625rem;
	background: #1B2231;
	color: #C6D0DC;
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.tl-pill:hover { border-color: #3A4759; color: #E8EDF4; }
.tl-pill.is-on { border-color: #2DD4A7; color: #2DD4A7; background: #15372F; }
.tl-menu { position: relative; display: inline-flex; }
.tl-n {
	float: right;
	margin-left: .75rem;
	/* The filter menu it usually sits in is one of the template's white
	   dropdowns, not the dark panel behind it. */
	color: #5A6879;
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}

/* A group: its name, how many are in it, and when it is due. */
.tl-group { margin-bottom: 1.25rem; }
.tl-head {
	display: flex;
	align-items: center;
	gap: .625rem;
	flex-wrap: wrap;
	padding: .5rem .75rem;
	border-top: 2px solid #2DD4A7;
	border-radius: .375rem .375rem 0 0;
	background: #1B2231;
}
.tl-name { font-size: .875rem; font-weight: 700; color: #E8EDF4; margin: 0; }
.tl-count {
	min-width: 1.375rem;
	padding: 0 .375rem;
	border-radius: 999px;
	background: #273040;
	color: #C6D0DC;
	font-size: .6875rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.tl-progress, .tl-due { font-size: .75rem; color: #8A97A8; }
.tl-due { margin-left: auto; }

.tl-table { border: 1px solid #273040; border-top: 0; border-radius: 0 0 .375rem .375rem; overflow: hidden; }
.tl-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem .75rem;
	border-top: 1px solid #222A38;
	background: #141A24;
}
.tl-row:first-child { border-top: 0; }
.tl-row:hover { background: #1B2231; }
.tl-row-head {
	background: #11161F;
	/* The heading cells carry words where the rows carry avatars and dates,
	   so they are the ones that overflow their column. "ASSIGNEE" ran into
	   "DUE" without this. */
	overflow: hidden;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7A8698;
}
.tl-row-head:hover { background: #11161F; }
.tl-row-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tl-c-title  { flex: 1 1 auto; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tl-c-status { flex: 0 0 8rem; }
.tl-c-who    { flex: 0 0 10rem; display: flex; align-items: center; gap: .4375rem; min-width: 0; }
.tl-c-due    { flex: 0 0 7rem; font-size: .8125rem; color: #C6D0DC; }

.tl-tick { display: inline-flex; margin: 0; }
.tl-tick button {
	border: 0; background: transparent; padding: 0; cursor: pointer;
	color: #4A5668; font-size: 1.0625rem; line-height: 1; display: inline-flex;
}
.tl-tick button:hover { color: #2DD4A7; }
.tl-tick-flat { color: #4A5668; font-size: 1.0625rem; }
.tl-row.is-done .tl-tick button,
.tl-row.is-done .tl-tick-flat { color: #2DD4A7; }

.tl-title {
	font-size: .875rem; color: #E8EDF4; text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-title:hover { color: #2DD4A7; }
.tl-row.is-done .tl-title { color: #7A8698; text-decoration: line-through; }

/* The reference a team says out loud. */
.tl-chip {
	flex-shrink: 0;
	padding: .0625rem .375rem;
	border: 1px solid #2B3647;
	border-radius: .3125rem;
	background: #11161F;
	color: #8A97A8;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.tl-late {
	flex-shrink: 0;
	color: #F26A7E;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
}

.tl-state {
	display: inline-block;
	padding: .125rem .5rem;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 600;
	background: #273040;
	color: #C6D0DC;
}
.tl-state-completed  { background: #15372F; color: #7BE8C8; }
.tl-state-inprogress { background: #16314D; color: #8CC4FF; }
.tl-state-onhold     { background: #3A3320; color: #E8C877; }
.tl-state-review     { background: #2C2447; color: #C0B0F5; }

.tl-who-name {
	font-size: .8125rem; color: #C6D0DC;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-none { color: #8A97A8; }
.tl-empty { color: #7A8698; font-size: .8125rem; font-style: italic; }

/* The row that adds the next task, wearing the same columns as the rest. */
.tl-add { background: #11161F; }
.tl-add:hover { background: #141A24; }
.tl-add i { color: #4A5668; font-size: 1rem; }
.tl-add input[type="text"] {
	flex: 1 1 auto;
	border: 0; background: transparent; color: #E8EDF4;
	font-size: .875rem; padding: .125rem 0; min-width: 0;
}
.tl-add input[type="text"]::placeholder { color: #6B7788; }
.tl-add input[type="text"]:focus { outline: none; }
.tl-add select {
	width: 100%;
	border: 1px solid #2B3647; border-radius: .375rem;
	background: #1B2231; color: #C6D0DC;
	font-size: .75rem; padding: .1875rem .375rem;
}
.tl-save {
	border: 0; border-radius: .375rem;
	background: #2DD4A7; color: #06231C;
	font-size: .75rem; font-weight: 700;
	padding: .25rem .625rem; cursor: pointer;
}
.tl-save:hover { background: #25B892; }

@media (max-width: 991.98px) {
	.tl-c-status { flex-basis: 6rem; }
	.tl-c-who    { flex-basis: 2rem; }
	.tl-who-name { display: none; }
	.tl-c-due    { flex-basis: 5.5rem; font-size: .75rem; }
}
@media (max-width: 575.98px) {
	.tl-c-status, .tl-c-due { display: none; }
	.tl-row-head { display: none; }
}

/* The columns the list view gained once a list stopped meaning a milestone. */
.tl-c-ms   { flex: 0 0 9rem; font-size: .8125rem; color: #C6D0DC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-c-tags { flex: 0 0 9rem; display: flex; align-items: center; gap: .25rem; overflow: hidden; }
.tl-tag {
	padding: .0625rem .4375rem;
	border-radius: 999px;
	background: #273040;
	color: #C6D0DC;
	font-size: .6875rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.tl-tag-more { font-size: .6875rem; color: #7A8698; }
/* An overdue date reads red; a finished task keeps the ordinary colour. */
.tl-c-due.is-late { color: #F26A7E; font-weight: 600; }
.tl-row.is-done .tl-c-due.is-late { color: #C6D0DC; font-weight: 400; }
/* The milestone a list carries, on its heading. */
.tl-ms {
	display: inline-flex; align-items: center; gap: .25rem;
	margin-left: auto;
	font-size: .75rem; color: #8A97A8;
}
.tl-ms i { font-size: .8125rem; color: #2DD4A7; }
.tl-new { border-color: #2DD4A7; color: #06231C; background: #2DD4A7; font-weight: 700; }
.tl-new:hover { background: #25B892; color: #06231C; border-color: #25B892; }

@media (max-width: 1399.98px) {
	.tl-c-ms, .tl-c-tags { flex-basis: 7rem; }
}
@media (max-width: 991.98px) {
	.tl-c-ms, .tl-c-tags { display: none; }
}

/* ---------------------------------------------------------------------------
   Portfolio pages: the dashboard's project rows and roster, and the overview's
   nesting of milestones inside their project.
   -------------------------------------------------------------------------- */
.pf-head {
	display: flex; align-items: center; gap: .625rem;
	margin-bottom: .75rem; padding-bottom: .625rem;
	border-bottom: 1px solid #273040;
}
.pf-title { font-size: .875rem; font-weight: 700; color: #E8EDF4; margin: 0; }
.pf-empty { font-size: .8125rem; color: #8A97A8; margin: .5rem 0 0; }

/* The mix of statuses across a portfolio, as one bar. */
.pf-mix { display: flex; gap: 2px; flex: 1 1 auto; max-width: 14rem; margin-left: auto; height: 6px; }
.pf-mix-bit { border-radius: 999px; min-width: .375rem; }
.pf-live { background: #2DD4A7; }
.pf-hold { background: #E8C877; }
.pf-done { background: #4A7CC4; }
.pf-off  { background: #5A6879; }

.pf-proj {
	display: flex; align-items: center; gap: 1rem;
	padding: .625rem 0; border-bottom: 1px solid #222A38;
}
.pf-proj:last-child { border-bottom: 0; }
.pf-proj-main { flex: 1 1 auto; min-width: 0; }
.pf-proj-name {
	display: block; font-size: .875rem; font-weight: 600; color: #E8EDF4;
	text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-proj-name:hover { color: #2DD4A7; }
.pf-proj-meta { display: block; font-size: .75rem; color: #8A97A8; }
.pf-state { font-weight: 600; }
.pf-state.pf-live { background: none; color: #2DD4A7; }
.pf-state.pf-hold { background: none; color: #E8C877; }
.pf-state.pf-done { background: none; color: #8CA9D8; }
.pf-state.pf-off  { background: none; color: #8A97A8; }
.pf-late { color: #F26A7E; font-weight: 600; }

.pf-proj-prog { flex: 0 0 9rem; display: flex; align-items: center; gap: .5rem; }
.pf-proj-n { font-size: .6875rem; color: #8A97A8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-proj-who { flex: 0 0 6rem; display: flex; align-items: center; gap: .1875rem; }
.pf-proj-who .avatar { width: 1.375rem; height: 1.375rem; font-size: .5625rem; }

.pf-person {
	display: flex; align-items: center; gap: .625rem;
	padding: .5rem 0; border-bottom: 1px solid #222A38;
}
.pf-person:last-child { border-bottom: 0; }
.pf-person-name {
	display: block; font-size: .8125rem; font-weight: 600; color: #E8EDF4; text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-person-name:hover { color: #2DD4A7; }
.pf-person-sub { display: block; font-size: .6875rem; color: #8A97A8; }
.pf-person-n {
	flex-shrink: 0; min-width: 1.5rem; padding: .0625rem .375rem;
	border-radius: 999px; background: #273040; color: #C6D0DC;
	font-size: .6875rem; font-weight: 700; text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The overview nests milestones inside their project, so a project row leads
   and its parts are indented and quieter beneath it. */
.rm-row-proj .rm-label { padding: .5rem 0; }
.rm-bar-proj { height: 1.75rem; }
.rm-row-inner .rm-track { height: 2rem; }
.rm-row-inner .rm-label { padding-left: 1.25rem; }
.rm-inner-name {
	display: block; font-size: .8125rem; font-weight: 500; color: #C6D0DC;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-bar-inner { height: 1.125rem; border-radius: .375rem; }
.rm-bar-inner .rm-bar-text { font-size: .625rem; }
.rm-sub i { font-size: .75rem; }
.rm-note { margin: .75rem 0 0; font-size: .75rem; color: #8A97A8; }
.rm-note i { margin-right: .25rem; }
.pf-more { margin: .625rem 0 0; font-size: .75rem; color: #8A97A8; }

/* ---------------------------------------------------------------------------
   A project's Docs, Files and Calendar.
   -------------------------------------------------------------------------- */
.dc-item {
	display: flex; align-items: center; gap: .5rem;
	padding: .4375rem .5rem; border-radius: .5rem;
	color: #C6D0DC; text-decoration: none; font-size: .8125rem;
}
.dc-item:hover { background: #222A38; color: #E8EDF4; }
.dc-item.is-open { background: #15372F; color: #7BE8C8; }
.dc-item i { font-size: .9375rem; color: #7A8698; flex-shrink: 0; }
.dc-item.is-open i { color: #2DD4A7; }
.dc-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-draft {
	margin-left: auto; flex-shrink: 0;
	font-size: .625rem; font-weight: 700; text-transform: uppercase;
	color: #E8C877;
}
.dc-when { font-size: .75rem; color: #8A97A8; margin-left: auto; margin-right: .75rem; }
.dc-body { font-size: .875rem; line-height: 1.7; color: #C6D0DC; overflow-wrap: anywhere; }

.fl-row {
	display: flex; align-items: center; gap: .75rem;
	padding: .625rem 0; border-bottom: 1px solid #222A38;
}
.fl-row:last-child { border-bottom: 0; }
.fl-icon {
	flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: .5rem;
	background: #222A38; color: #96A3B4;
	display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem;
}
.fl-name {
	display: block; font-size: .875rem; font-weight: 600; color: #E8EDF4;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-meta { display: block; font-size: .75rem; color: #8A97A8; }
.fl-bin { border: 0; background: transparent; color: #7A8698; cursor: pointer; font-size: 1rem; }
.fl-bin:hover { color: #F26A7E; }

/* The month grid: whole weeks so it sits in a rectangle. */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #222A38; border: 1px solid #222A38; border-radius: .5rem; overflow: hidden; }
.cal-dow {
	background: #11161F; padding: .375rem .5rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: #7A8698; text-align: center;
}
.cal-day { background: #141A24; min-height: 5.5rem; padding: .3125rem; display: flex; flex-direction: column; gap: .1875rem; }
.cal-day.is-out { background: #11161F; }
.cal-day.is-out .cal-num { color: #4A5668; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px #2DD4A7; }
.cal-num { font-size: .75rem; font-weight: 700; color: #96A3B4; }
.cal-day.is-today .cal-num { color: #2DD4A7; }
.cal-pip {
	display: block; padding: .0625rem .3125rem; border-radius: .25rem;
	font-size: .6875rem; line-height: 1.35; text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-event     { background: #16314D; color: #9CC8FF; }
.cal-milestone { background: #15372F; color: #7BE8C8; }
.cal-task      { background: #3A3320; color: #F0D48A; }
.cal-done      { background: #222A38; color: #8A97A8; text-decoration: line-through; }
.cal-more { font-size: .625rem; color: #7A8698; padding-left: .3125rem; }

.cal-key { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .875rem; font-size: .75rem; color: #8A97A8; }
.cal-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: .1875rem; margin-right: .3125rem; vertical-align: -1px; }
.cal-nav { display: inline-flex; gap: .375rem; }

@media (max-width: 767.98px) {
	.cal-day { min-height: 4rem; }
	.cal-pip { font-size: .625rem; }
}

/* ------------------------------------------------------------------ *
 * Subtasks: a checklist inside one task.
 *
 * Two homes, two tones. The "2/5" sits on a task row in the dark list,
 * so it is cut from the same cloth as .tl-chip. The panel itself lives
 * on the task detail page, which is an ordinary light HRMS page, so it
 * borrows nothing from the workspace palette.
 * ------------------------------------------------------------------ */
.tl-sub {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .1875rem;
	padding: .0625rem .375rem;
	border-radius: .3125rem;
	background: #15372F;
	color: #2DD4A7;
	font-size: .6875rem;
	font-weight: 600;
}
.tl-sub i { font-size: .8125rem; }

.st-count { display: inline-flex; align-items: center; gap: .5rem; }
.st-count-num { font-size: .8125rem; font-weight: 600; color: #6B7280; }
.st-bar {
	display: block;
	width: 6rem;
	height: .375rem;
	border-radius: 999px;
	background: #E9ECF1;
	overflow: hidden;
}
.st-bar-fill { display: block; height: 100%; border-radius: inherit; background: #0D9488; }

.st-row {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .5rem 0;
	border-bottom: 1px solid #F1F3F7;
}
.st-row:first-of-type { padding-top: 0; }
.st-tick { display: inline-flex; margin: 0; flex-shrink: 0; }
.st-tick button {
	padding: 0;
	border: 0;
	background: none;
	color: #9AA4B2;
	font-size: 1.125rem;
	line-height: 1;
}
.st-tick button:hover { color: #0D9488; }
.st-tick-flat { color: #9AA4B2; font-size: 1.125rem; flex-shrink: 0; }
.st-row.is-done .st-tick button,
.st-row.is-done .st-tick-flat { color: #0D9488; }
.st-title { flex: 1 1 auto; min-width: 0; font-size: .875rem; color: #202C4B; }
.st-row.is-done .st-title { color: #8A94A6; text-decoration: line-through; }
.st-when { flex-shrink: 0; font-size: .75rem; color: #9AA4B2; }
.st-bin { display: inline-flex; margin: 0; flex-shrink: 0; }
.st-bin button {
	padding: 0;
	border: 0;
	background: none;
	color: #C2C9D4;
	font-size: .9375rem;
	line-height: 1;
}
.st-bin button:hover { color: #E7415A; }

/* The "add a subtask" line, which reads as the next empty row rather than
   as a form sitting underneath one. */
.st-add {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding-top: .625rem;
}
.st-add > i { color: #9AA4B2; font-size: 1rem; flex-shrink: 0; }
.st-add input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .3125rem .5rem;
	border: 1px solid transparent;
	border-radius: .375rem;
	background: none;
	font-size: .875rem;
	color: #202C4B;
}
.st-add input[type="text"]:focus {
	outline: 0;
	border-color: #D7DBE3;
	background: #FBFCFE;
}
.st-add button {
	flex-shrink: 0;
	padding: .3125rem .75rem;
	border: 0;
	border-radius: .375rem;
	background: #0D9488;
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
}
.st-add button:hover { background: #0B7F75; }

/* ------------------------------------------------------------------ *
 * My Tasks: one person's work across every project.
 *
 * It borrows the task list's rows wholesale — the same thing should look
 * the same — and adds only what a cross-project view needs: a project
 * column, a picker down the side, and a late heading that reads late.
 * ------------------------------------------------------------------ */
.mine-row .tl-c-ms  { flex: 0 0 9rem; }
.mine-row .tl-c-due { flex: 0 0 7rem; }
.tl-c-proj {
	flex: 0 0 10rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .8125rem;
}
.mine-proj { color: #9FB0C4; }
.mine-proj:hover { color: var(--ws-accent); }

/* A seat on the task rather than the task's own name on it. */
.mine-seat {
	flex-shrink: 0;
	padding: .0625rem .375rem;
	border-radius: .3125rem;
	background: #1F2838;
	color: #8A97A8;
	font-size: .6875rem;
	font-weight: 600;
}

.tl-name.is-late { color: var(--ws-late); }

.mine-pick {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4375rem .5rem;
	border-radius: .5rem;
	color: var(--ws-muted);
	font-size: .8125rem;
}
.mine-pick:hover { background: #1B2231; color: var(--ws-ink); }
.mine-pick.is-on { color: var(--ws-ink); }
.mine-pick > i { flex-shrink: 0; font-size: 1rem; color: #4A5668; }
.mine-pick.is-on > i { color: var(--ws-accent); }
.mine-pick .tl-n { float: none; margin-left: 0; color: var(--ws-muted); }
.mine-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1399.98px) {
	.tl-c-proj { flex: 0 0 8rem; }
}

/* Correcting a file rather than removing it. Its own class so the hover does
   not read as destructive: an edit that goes red on hover looks like a delete
   somebody is about to press by accident. */
.fl-pen { border: 0; background: transparent; color: #7A8698; cursor: pointer; font-size: 1rem; }
.fl-pen:hover { color: var(--ws-accent); }

/* ------------------------------------------------------------------ *
 * Creating a project: the sections it will use, and the questions
 * most projects never need.
 * ------------------------------------------------------------------ */
.pn-more {
	display: flex;
	align-items: center;
	gap: .375rem;
	cursor: pointer;
	color: var(--ws-muted);
	font-size: .8125rem;
	font-weight: 600;
	list-style: none;
}
.pn-more::-webkit-details-marker { display: none; }
.pn-more:hover { color: var(--ws-ink); }
.pn-more i { transition: transform .15s ease; }
details[open] > .pn-more i { transform: rotate(90deg); }

.pn-view {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .5rem .625rem;
	border-radius: .5rem;
	cursor: pointer;
	color: var(--ws-ink);
	font-size: .875rem;
}
.pn-view:hover { background: #1B2231; }
.pn-view.is-fixed { cursor: default; color: var(--ws-muted); }
.pn-view.is-fixed:hover { background: none; }
.pn-view input { accent-color: var(--ws-accent); width: 1rem; height: 1rem; flex-shrink: 0; }
.pn-view-name { flex: 1 1 auto; min-width: 0; }
.pn-view-note { flex-shrink: 0; font-size: .6875rem; color: var(--ws-muted); }

/* The form controls here sit on the dark surface, so the template's white
   inputs would glare. Scoped to .ws-form rather than to every workspace panel:
   the other pages put controls inside modals and quick-add rows that already
   have their own treatment, and widening this would reach them. */
.ws-form .form-label { color: var(--ws-muted); font-size: .8125rem; font-weight: 600; }
.ws-form .form-control,
.ws-form .form-select {
	background: #11161F;
	border-color: #2B3647;
	color: var(--ws-ink);
}
.ws-form .form-control:focus,
.ws-form .form-select:focus {
	background: #11161F;
	border-color: var(--ws-accent);
	color: var(--ws-ink);
	box-shadow: none;
}
.ws-form .form-control::placeholder { color: #5B687A; }

/* ------------------------------------------------------------------ *
 * Text on the dark workspace surface.
 *
 * The template paints every link #111827 — near-black, which is right on
 * the white HR pages and invisible on this one. Measured on a project's
 * Overview, the task titles and team names were coming out at 1.02:1
 * against the surface: present in the markup, unreadable on the screen.
 *
 * :where() is the point of this block. It contributes no specificity, so
 * these rules carry exactly the weight of `a` and `.text-muted` — enough
 * to beat the vendor stylesheet, which loads first, and not enough to
 * beat the workspace's own classes (.tl-title, .ws-tab, .cal-task and
 * the rest), which keep their colours.
 * ------------------------------------------------------------------ */
/* The template also paints every heading #202C4B, and the links that caused
   the trouble sit inside an <h6> — so fixing the anchor alone only moved the
   problem up one element. :is() of element selectors carries an element's
   weight, so this matches the vendor rule exactly and wins on load order. */
:where(.ws-page) :is(h1, h2, h3, h4, h5, h6) { color: var(--ws-ink); }
:where(.ws-page) a { color: inherit; }
:where(.ws-page) a:hover { color: var(--ws-accent); }

/* The template's muted grey is #677788: 3.8:1 here, under AA even for the
   secondary text it is used for. The workspace has its own. */
:where(.ws-page) .text-muted { color: var(--ws-muted) !important; }
:where(.ws-page) .text-gray-9,
:where(.ws-page) .text-dark { color: var(--ws-ink) !important; }

/* A chip is an anchor, so its colour is stated against the anchor: no link
   rule from anywhere can then turn a calendar full of work into brown on
   brown. */
a.cal-pip.cal-event     { color: #9CC8FF; }
a.cal-pip.cal-milestone { color: #7BE8C8; }
a.cal-pip.cal-task      { color: #F0D48A; }
a.cal-pip.cal-done      { color: #8A97A8; }

/* Days either side of the month are meant to recede, not to disappear:
   they are still dates somebody clicks. 2.4:1 to 4.6:1 — recessive because
   the cell behind them is darker, not because the figures are faint. */
.cal-day.is-out .cal-num { color: #76869C; }

/* The template's soft badges are a dark ink on a 10% tint of themselves.
   Over white that lands around 8:1; over this panel the tint composites to
   very nearly the panel itself and the ink is still dark, so "Inprogress"
   and "Member" came out at about 1.3:1 — a badge you can see the shape of
   and not read. Restated here as a dark ground with a light hue, which is
   what the rest of the workspace already does. */
:where(.ws-page) .badge.badge-soft-primary   { background: #15372F; color: #5FE3BC; }
:where(.ws-page) .badge.badge-soft-success   { background: #15372F; color: #7BE8C8; }
:where(.ws-page) .badge.badge-soft-info      { background: #16314D; color: #9CC8FF; }
:where(.ws-page) .badge.badge-soft-warning   { background: #3A3320; color: #F0D48A; }
:where(.ws-page) .badge.badge-soft-danger    { background: #3B1F27; color: #F6A1AF; }
:where(.ws-page) .badge.badge-soft-secondary { background: #242D3C; color: #AEBACB; }
:where(.ws-page) .badge.badge-soft-purple    { background: #2A2340; color: #C3B0F5; }
:where(.ws-page) .badge.badge-soft-pink      { background: #3A2230; color: #F2A6C6; }
:where(.ws-page) .badge.badge-pink           { background: #3A2230; color: #F2A6C6; }
:where(.ws-page) .badge.badge-info           { background: #16314D; color: #9CC8FF; }

/* Avatar initials. The template puts white on every tone in the palette,
   which is fine on #DC3545 and not on #FFC107 — the amber ones measured
   1.63:1 here, two letters nobody can read. The light tones take the dark
   ink instead; bg-danger, bg-purple and bg-dark keep white, because they
   already carry it. */
:where(.ws-page) .avatar.bg-warning,
:where(.ws-page) .avatar.bg-success,
:where(.ws-page) .avatar.bg-info,
:where(.ws-page) .avatar.bg-primary,
:where(.ws-page) .avatar.bg-pink { color: #0A1420 !important; }

/* The required-field asterisk is the template's #E70D0D, which is 3.4:1 on
   this surface. The workspace already has a red that works on it. */
:where(.ws-page) .text-danger { color: var(--ws-late) !important; }

/* A select's options are drawn by the operating system on its own white
   popup, so they need the dark ink rather than the page's. The template
   marks the chosen one in the brand orange, which is 3.15:1 on that white
   — legible enough to spot, not to read. */
:where(.ws-form) option { color: #202C4B; background: #fff; }
:where(.ws-form) .form-select option:checked { color: #0E4F8A; font-weight: 600; }

/* The "Draft it" line at the top of the task popup. Set apart from the fields
   below it because it is not one of them: it fills them in. */
.tf-ai {
	padding: .75rem;
	border: 1px dashed #D7DBE3;
	border-radius: .625rem;
	background: #FBFCFE;
}
.tf-ai .form-label { color: #6B7280; font-weight: 600; margin-bottom: .375rem; }