/* Client portal pages. Only these get data-theme (see web.js), so other website pages are untouched. */

html[data-theme="dark"] {
	--g-link: #a9b4ff;
}

html[data-theme="light"] {
	--g-link: #4a3bc4;
}

html[data-theme] body {
	color: var(--ink-gray-8);
}

html[data-theme] .navbar,
html[data-theme] .web-footer,
html[data-theme] .page-footer,
html[data-theme] .footer-info {
	background: transparent;
	border-color: var(--g-edge) !important;
}

html[data-theme] .navbar .navbar-brand,
html[data-theme] .navbar .nav-link,
html[data-theme] .web-footer,
html[data-theme] .footer-powered,
html[data-theme] .footer-powered a {
	color: var(--ink-gray-7);
}

html[data-theme] .page-content-wrapper,
html[data-theme] .main-column,
html[data-theme] main.container {
	background: transparent;
}

/* Sidebar menu */
html[data-theme] .web-sidebar a,
html[data-theme] .sidebar-items a {
	display: block;
	padding: 7px 12px;
	color: var(--ink-gray-7);
	border-radius: 10px;
	text-decoration: none;
}

html[data-theme] .web-sidebar a:hover,
html[data-theme] .sidebar-items a:hover {
	color: var(--ink-gray-9);
	background: var(--surface-gray-2);
}

html[data-theme] .web-sidebar a.active,
html[data-theme] .sidebar-items a.active {
	color: var(--ink-gray-9);
	font-weight: 600;
	background: var(--g-active);
	box-shadow: inset 0 0 0 1px var(--g-edge);
}

/* Shared parts of the portal pages */
html[data-theme] .page_content h1,
html[data-theme] .page-title,
html[data-theme] .page_content h3,
html[data-theme] .page_content h4 {
	color: var(--g-title);
	letter-spacing: -0.02em;
}

html[data-theme] .page_content h1 {
	font-size: 34px;
	font-weight: 600;
}

/* List pages such as /invoices put their title outside .page_content. */
html[data-theme] main h1,
html[data-theme] main h2,
html[data-theme] .page-header h1,
html[data-theme] .page-header h2,
html[data-theme] .page-header h3 {
	color: var(--g-title);
	letter-spacing: -0.02em;
}

html[data-theme] .web-list-item {
	margin: 0 0 8px;
	padding: 12px 18px;
	transition: background 0.15s ease;
}

html[data-theme] .web-list-item:hover {
	background: var(--g-card-hover);
}

html[data-theme] .input-group .btn,
html[data-theme] .input-group-append .btn,
html[data-theme] .search-btn {
	color: var(--ink-gray-8);
	background: var(--surface-gray-3);
	border: 1px solid var(--g-edge);
}

html[data-theme] .text-muted,
html[data-theme] small {
	color: var(--g-subtitle) !important;
}

html[data-theme] .page_content a:not(.btn, .ac-row, .ac-stat, .ac-notice) {
	color: var(--g-link);
}

html[data-theme] .frappe-card,
html[data-theme] .web-list-item,
html[data-theme] .web-list-table {
	color: var(--ink-gray-8);
	background: var(--g-card);
	border: 1px solid var(--g-edge);
	border-radius: var(--g-radius-md);
}

html[data-theme] .table {
	color: var(--ink-gray-8);
	background: var(--g-card);
	border-radius: var(--g-radius-md);
}

html[data-theme] .table th,
html[data-theme] .table td {
	border-color: var(--outline-gray-1);
}

html[data-theme] .table th {
	color: var(--g-subtitle);
	font-weight: 500;
}

html[data-theme] .form-control {
	color: var(--ink-gray-9);
	background-color: var(--surface-gray-2);
	border: 1px solid var(--g-edge);
	border-radius: 10px;
}

html[data-theme] .form-control::placeholder {
	color: var(--placeholder-color);
}

html[data-theme] .btn {
	border-radius: 10px;
}

html[data-theme] .btn-primary {
	color: #fff;
	background: var(--g-accent);
	border: 0;
}

html[data-theme] .btn-primary:hover {
	background: var(--g-accent-hover);
}

html[data-theme] .btn-default,
html[data-theme] .btn-secondary {
	color: var(--ink-gray-8);
	background: var(--surface-gray-2);
	border: 1px solid var(--g-edge);
}

html[data-theme] .dropdown-menu,
html[data-theme] .modal-content {
	color: var(--ink-gray-8);
	background: var(--g-overlay);
	border: 1px solid var(--g-edge-strong);
	box-shadow: var(--g-shadow);
}

html[data-theme] .alert-info {
	color: var(--ink-gray-8);
	background: var(--surface-gray-2);
	border: 1px solid var(--g-edge);
	border-radius: var(--g-radius-md);
}

html[data-theme] .progress {
	background: var(--surface-gray-3);
}

html[data-theme] .progress-bar {
	background: var(--g-accent);
}

/* ---------- One layout for every tab ---------- */

/* Frappe's www pages, list pages and web forms each place and size their title differently, and web
   forms sit in a narrower column, so the content jumped whenever someone changed tab. */
html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content {
	max-width: none;
	margin: 0;
}

html[data-theme] .page_content h1,
html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content h1,
html[data-theme] .my-account-header {
	margin-top: 0;
	color: var(--g-title);
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content .web-list-container,
html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content .web-form-container,
html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content .web-form,
html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content .web-form-header {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

html[data-theme] [data-doctype="Web Form"] .page-content-wrapper .container .page_content .web-form {
	padding-top: 20px;
}

/* The form template puts a fixed spacer above its title. */
html[data-theme] .web-form-container > div[style*="height: 3rem"] {
	display: none;
}

html[data-theme] .website-list {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Client dashboard ---------- */

.ac-hero h1 {
	margin: 0;
}

.ac-hero p {
	margin: 6px 0 0;
	color: var(--g-subtitle);
	font-size: 16px;
}

.ac-notice {
	display: block;
	margin-top: 20px;
	padding: 12px 16px;
	color: var(--ink-gray-8);
	border: 1px solid var(--g-edge-strong);
	border-radius: var(--g-radius-md);
	background: var(--surface-gray-2);
}

.ac-notice:hover {
	color: var(--ink-gray-9);
	text-decoration: none;
	background: var(--surface-gray-3);
}

.ac-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-top: 24px;
}

.ac-stat {
	display: block;
	padding: 16px 18px;
	color: inherit;
	border: 1px solid var(--g-edge-strong);
	border-radius: var(--g-radius-md);
	background: var(--g-card);
	transition: background 0.15s ease;
}

.ac-stat:hover {
	color: inherit;
	text-decoration: none;
	background: var(--g-card-hover);
}

.ac-stat-label {
	color: var(--g-subtitle);
	font-size: 14px;
}

.ac-stat-value {
	margin-top: 6px;
	color: var(--g-title);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.ac-stat-attention .ac-stat-value {
	color: #e0922f;
}

.ac-panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.ac-panel {
	padding: 18px 20px;
	border: 1px solid var(--g-edge);
	border-radius: var(--g-radius-md);
	background: var(--g-card);
}

.ac-panel-wide {
	grid-column: 1 / -1;
}

.ac-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.ac-panel-head h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.ac-row {
	display: block;
	padding: 10px 0;
	color: var(--ink-gray-8);
	border-top: 1px solid var(--outline-gray-1);
}

a.ac-row:hover {
	color: var(--ink-gray-9);
	text-decoration: none;
}

.ac-row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.ac-row-title {
	color: var(--g-title);
	font-weight: 500;
}

.ac-row-meta {
	display: block;
	margin-top: 2px;
	color: var(--g-subtitle);
	font-size: 13px;
}

.ac-empty {
	margin: 0;
	color: var(--g-subtitle);
}

.ac-progress {
	height: 6px;
	margin: 8px 0 4px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--surface-gray-3);
}

.ac-progress span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--g-accent);
}

/* ---------- Employee portal ---------- */

.ac-pill {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 8px;
	font-size: 12px;
	color: var(--ink-gray-7);
	border-radius: 999px;
	background: var(--surface-gray-3);
}

.ac-pill-overdue,
.ac-pill-urgent {
	color: #fff;
	background: #d9534f;
}

.ac-pill-done {
	color: #fff;
	background: #2f9e6b;
}

.ac-details {
	display: grid;
	grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0 0 14px;
}

.ac-details dt {
	color: var(--g-subtitle);
	font-weight: 400;
}

.ac-details dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--g-title);
}

.ac-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ac-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.ac-form-grid label {
	margin-bottom: 4px;
	color: var(--g-subtitle);
	font-size: 13px;
}

.ac-form-wide {
	grid-column: 1 / -1;
}

.ac-day-head {
	margin-top: 14px;
	color: var(--g-title);
	font-weight: 600;
}

.ac-day-head:first-of-type {
	margin-top: 0;
}

.ac-log-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* .ac-row:first-of-type counts every div, so the rows under a day heading keep their rule. */
.ac-day-head + .ac-row {
	margin-top: 6px;
}

.ac-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0;
}

.ac-cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--g-edge);
	border-radius: var(--g-radius-md);
	background: var(--g-card);
}

.ac-cal-weekday {
	padding: 8px 10px;
	color: var(--g-subtitle);
	font-size: 13px;
	border-bottom: 1px solid var(--outline-gray-1);
}

.ac-cal-day {
	min-height: 104px;
	padding: 6px;
	border-top: 1px solid var(--outline-gray-1);
	border-left: 1px solid var(--outline-gray-1);
}

.ac-cal-day:nth-child(7n + 1) {
	border-left: 0;
}

.ac-cal-other {
	opacity: 0.45;
}

.ac-cal-date {
	width: 24px;
	height: 24px;
	margin-bottom: 4px;
	color: var(--ink-gray-7);
	font-size: 13px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
}

.ac-cal-today .ac-cal-date {
	color: #fff;
	font-weight: 600;
	background: var(--g-accent);
}

html[data-theme] .ac-cal-event,
html[data-theme] .page_content a.ac-cal-event {
	display: block;
	margin-bottom: 3px;
	padding: 1px 6px;
	overflow: hidden;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-radius: 6px;
	background: #6d5ce7;
}

.ac-cal-legend .ac-cal-event {
	margin-bottom: 0;
}

html[data-theme] .ac-cal-overdue,
html[data-theme] .page_content a.ac-cal-overdue {
	background: #d9534f;
}

html[data-theme] .ac-cal-start,
html[data-theme] .page_content a.ac-cal-start {
	background: #3f8fd2;
}

html[data-theme] .ac-cal-deadline,
html[data-theme] .page_content a.ac-cal-deadline {
	background: #c26a12;
}

html[data-theme] .ac-cal-milestone,
html[data-theme] .page_content a.ac-cal-milestone {
	background: #1f8a70;
}

html[data-theme] .ac-cal-holiday {
	background: #7a7f99;
}

html[data-theme] .ac-cal-done,
html[data-theme] .page_content a.ac-cal-done {
	background: #7a7f99;
	text-decoration: line-through;
}

@media (max-width: 767.98px) {
	/* A wide table scrolls inside itself, rather than making the whole page scroll sideways. */
	html[data-theme] .page_content .table {
		display: block;
		overflow-x: auto;
	}
	.ac-cal-day {
		min-height: 58px;
		padding: 3px;
	}
	/* Too narrow for titles: each event becomes a coloured mark, and the list below has the words. */
	html[data-theme] .page_content .ac-cal-day a.ac-cal-event,
	html[data-theme] .page_content .ac-cal-day span.ac-cal-event {
		display: inline-block;
		width: 8px;
		height: 8px;
		margin: 0 2px 0 0;
		padding: 0;
		font-size: 0;
		text-overflow: clip;
		border-radius: 50%;
	}
	.ac-cal-weekday {
		padding: 6px 4px;
		font-size: 12px;
		text-align: center;
	}
	.ac-panels {
		grid-template-columns: minmax(0, 1fr);
	}
	.ac-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ac-stat {
		padding: 14px;
	}
	.ac-stat-value {
		font-size: 19px;
	}
	html[data-theme] .page_content h1 {
		font-size: 28px;
	}
}


/* ---------- Client portal ---------- */

.ac-health {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: baseline;
}
.ac-health-green { background: #22a06b; }
.ac-health-amber { background: #e2a400; }
.ac-health-red { background: #e5484d; }

.ac-panel-actions { margin-top: 16px; }
.ac-row-split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
}
summary.ac-row-split { list-style: none; }
summary.ac-row-split::-webkit-details-marker { display: none; }
.ac-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0;
}
.ac-tabs {
	display: flex;
	gap: 4px;
	margin: 14px 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--g-border, rgba(127, 127, 160, 0.25));
}
.ac-tab {
	padding: 8px 12px;
	white-space: nowrap;
	color: inherit;
	opacity: 0.7;
	border-bottom: 2px solid transparent;
}
.ac-tab:hover { opacity: 1; text-decoration: none; color: inherit; }
.ac-tab.active {
	opacity: 1;
	font-weight: 600;
	border-bottom-color: var(--g-link);
}
.ac-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}
.ac-card {
	display: block;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid var(--g-border, rgba(127, 127, 160, 0.25));
	background: var(--g-card, rgba(255, 255, 255, 0.5));
	color: inherit;
}
.ac-card:hover { text-decoration: none; color: inherit; }
.ac-card-head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.ac-card-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 12px;
	margin: 12px 0 0;
}
.ac-card-facts dt { font-weight: 400; font-size: 11px; opacity: 0.65; }
.ac-card-facts dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.ac-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
}
.ac-filter .form-control { width: auto; min-width: 150px; flex: 1 1 150px; }
.ac-filter label { display: flex; align-items: center; gap: 6px; margin: 0; }
.ac-select { width: auto; max-width: 220px; }
.ac-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-table-wrap { overflow-x: auto; }
.ac-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.ac-unread .ac-row-title { font-weight: 700; }
@media print { .ac-no-print, .web-sidebar, .g-theme-toggle, .navbar, footer { display: none !important; } }

.ac-chat {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	height: calc(100vh - 190px);
	min-height: 460px;
	margin-top: 12px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--g-border, rgba(127, 127, 160, 0.25));
	background: var(--g-card, rgba(255, 255, 255, 0.5));
}
.ac-chat-list {
	padding: 12px;
	overflow-y: auto;
	border-right: 1px solid var(--g-border, rgba(127, 127, 160, 0.25));
}
.ac-chat-group {
	margin: 14px 0 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.6;
}
.ac-chat-item {
	display: block;
	padding: 8px 10px;
	border-radius: 10px;
	color: inherit;
}
.ac-chat-item:hover { text-decoration: none; color: inherit; background: rgba(127, 127, 160, 0.12); }
.ac-chat-item.active { background: rgba(110, 100, 240, 0.16); }
.ac-chat-item .ac-row-meta {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ac-chat-unread {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #6e64f0;
	color: #fff;
	font-size: 11px;
	text-align: center;
}
.ac-chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ac-chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--g-border, rgba(127, 127, 160, 0.25));
}
.ac-chat-back { display: none; }
.ac-chat-pins { padding: 8px 16px; font-size: 13px; background: rgba(110, 100, 240, 0.08); }
.ac-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.ac-chat-typing { min-height: 18px; padding: 0 16px; }
.ac-chat-compose { padding: 10px 16px 14px; border-top: 1px solid var(--g-border, rgba(127, 127, 160, 0.25)); }
.ac-chat-replying { font-size: 12px; opacity: 0.75; margin-bottom: 4px; }
.ac-chat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ac-chat-send { margin-left: auto; }
.ac-chat-internal { font-size: 12px; }
.ac-msg { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px; }
.ac-msg.mine { align-items: flex-end; }
.ac-msg-body {
	max-width: min(560px, 85%);
	padding: 8px 12px;
	border-radius: 12px;
	background: rgba(127, 127, 160, 0.14);
	overflow-wrap: anywhere;
}
.ac-msg.mine .ac-msg-body { background: rgba(110, 100, 240, 0.18); }
.ac-msg.internal .ac-msg-body { background: rgba(226, 164, 0, 0.2); border: 1px dashed rgba(226, 164, 0, 0.7); }
.ac-msg-deleted { font-style: italic; opacity: 0.65; }
.ac-msg-head { font-size: 12px; margin-bottom: 2px; }
.ac-msg-meta { font-size: 11px; opacity: 0.6; margin-top: 4px; }
.ac-msg-quote {
	margin-bottom: 4px;
	padding: 4px 8px;
	border-left: 3px solid var(--g-link);
	font-size: 12px;
	opacity: 0.8;
}
.ac-msg-tools { display: none; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.ac-msg:hover .ac-msg-tools, .ac-msg:focus-within .ac-msg-tools { display: flex; }
.ac-msg-tools button, .ac-reaction {
	padding: 1px 6px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 12px;
}
.ac-msg-tools button:hover { background: rgba(127, 127, 160, 0.18); }
.ac-reaction { border-color: rgba(127, 127, 160, 0.35); margin: 4px 4px 0 0; }
.ac-chat-image { display: block; max-width: 280px; max-height: 240px; margin-top: 6px; border-radius: 8px; }
.ac-chat-file { display: inline-block; margin-top: 6px; font-weight: 600; }
.ac-chat-link { display: block; font-size: 11px; opacity: 0.6; }
.ac-chat-mention { color: var(--g-link); }
.ac-msg audio { display: block; max-width: 260px; margin-top: 6px; }

@media (max-width: 768px) {
	.ac-chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 150px); }
	.ac-chat[data-empty="0"] .ac-chat-list { display: none; }
	.ac-chat[data-empty="1"] .ac-chat-thread { display: none; }
	.ac-chat-back { display: inline-block; }
	.ac-msg-tools { display: flex; }
	.ac-row-split { flex-wrap: wrap; }
	.ac-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Employee portal */
.g-menu-group {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	color: var(--g-subtitle);
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.g-menu-group::after { content: " \25BE"; }
.g-menu-group[aria-expanded="false"]::after { content: " \25B8"; }
.g-menu-search { margin-bottom: 6px; }

.ac-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.ac-toolbar .form-control { width: auto; min-width: 130px; flex: 0 1 auto; }
.ac-toolbar input[type="search"] { flex: 1 1 200px; }
.ac-view-switch { display: inline-flex; gap: 4px; margin-left: auto; }
.ac-view-switch .btn.active { background: var(--g-active); box-shadow: inset 0 0 0 1px var(--g-edge-strong); }

.ac-board {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: 10px;
	margin-top: 16px;
	padding-bottom: 8px;
	overflow-x: auto;
	scrollbar-color: var(--g-edge-strong) transparent;
	scrollbar-width: thin;
}
.ac-board-col {
	min-height: 160px;
	padding: 10px;
	border: 1px solid var(--g-edge);
	border-radius: var(--g-radius-md);
	background: var(--g-card);
}
.ac-board-col.ac-drop { box-shadow: inset 0 0 0 2px var(--g-accent); }
.ac-board-col h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--g-title); }
.ac-card {
	display: block;
	margin-bottom: 8px;
	padding: 10px;
	border: 1px solid var(--g-edge);
	border-radius: 10px;
	background: var(--g-card-hover);
}
.ac-card[draggable="true"] { cursor: grab; }
.ac-card a { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ac-card .ac-row-meta { display: block; margin-top: 4px; }
.ac-card select { width: 100%; margin-top: 8px; }

.ac-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ac-chart h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--g-subtitle); }
.ac-bars { display: flex; align-items: flex-end; gap: 6px; }
.ac-bar { position: relative; flex: 1 1 0; min-width: 0; text-align: center; }
.ac-bar-track { display: flex; flex-direction: column; justify-content: flex-end; height: 100px; }
.ac-bar-fill { display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--g-accent); }
.ac-bar-value { display: block; font-size: 11px; color: var(--g-title); }
.ac-bar-label { display: block; min-height: 14px; margin-top: 4px; font-size: 11px; color: var(--g-subtitle); white-space: nowrap; }
.ac-bar:hover .ac-bar-fill, .ac-bar:focus .ac-bar-fill { background: var(--g-accent-hover); }
.ac-bar::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 2;
	display: none;
	padding: 4px 8px;
	border: 1px solid var(--g-edge-strong);
	border-radius: 6px;
	background: var(--g-overlay);
	color: var(--g-title);
	font-size: 11px;
	white-space: nowrap;
	transform: translateX(-50%);
}
.ac-bar:hover::after, .ac-bar:focus::after { display: block; }
.ac-hbar { margin-bottom: 10px; font-size: 13px; }
.ac-split { display: flex; gap: 20px; margin-bottom: 10px; }
.ac-split b { display: block; font-size: 22px; font-weight: 500; color: var(--g-title); }
.ac-split span { font-size: 12px; color: var(--g-subtitle); }

.ac-customise { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--g-edge); border-radius: var(--g-radius-md); background: var(--g-card); }
.ac-customise label { margin: 0; font-size: 13px; }

.ac-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--g-active);
	color: var(--g-title);
	font-weight: 600;
	object-fit: cover;
}
.ac-avatar-lg { width: 72px; height: 72px; font-size: 24px; }
.ac-profile-head { display: flex; align-items: center; gap: 16px; }

.ac-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.ac-person { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--g-edge); border-radius: var(--g-radius-md); background: var(--g-card); }
.ac-person > div { min-width: 0; }
.ac-person b { display: block; color: var(--g-title); }
.ac-person .ac-row-meta { display: block; overflow-wrap: anywhere; }
.ac-skill { display: inline-block; margin: 4px 4px 0 0; padding: 1px 8px; border-radius: 10px; background: var(--g-active); font-size: 11px; }

.ac-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.ac-form-grid label { display: block; margin: 0; font-size: 13px; color: var(--g-subtitle); }
.ac-form-grid .form-control { margin-top: 3px; color: inherit; }
.ac-form-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ac-form-row .form-control { flex: 1 1 140px; width: auto; }
.ac-scroll { max-height: 460px; overflow-y: auto; }
.ac-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ac-row-actions select { width: auto; }

/* Bootstrap's fixed height cuts off the browser's file button. */
input[type="file"].form-control {
	height: auto;
	padding: 4px 8px;
}

/* Employee portal, phase 2 */
.ac-cal-meeting { background: rgba(120, 90, 230, 0.2); color: inherit; }
.ac-article img { max-width: 100%; height: auto; }
.ac-prewrap-block { white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-chat-head .ml-auto { flex: none; }