/*
 * Copyright (c) 1996-2026 by citadel.org (Art Cancro et al)
 * This program is open source software.  Use, duplication, or disclosure is subject to the GNU General Public License version 3.
 */


/*
 * Theme tokens (C40 dark mode). Light defaults on :root; dark overrides
 * under html[data-theme="dark"]. Structural chrome uses these vars;
 * a dark override block at the end covers remaining hardcoded surfaces.
 */
:root {
	color-scheme: light;
	--ctdl-bg-page: #f5f5f5;		/* WhiteSmoke */
	--ctdl-bg-surface: #ffffff;
	--ctdl-bg-elevated: #f8fafc;
	--ctdl-bg-muted: #f1f5f9;
	--ctdl-bg-hover: #e2e8f0;
	--ctdl-bg-selected: #dcdcdc;	/* Gainsboro */
	--ctdl-bg-banner: #0f172a;
	--ctdl-bg-input: #ffffff;
	--ctdl-bg-code: #edf2f7;
	--ctdl-fg: #0f172a;
	--ctdl-fg-secondary: #334155;
	--ctdl-fg-muted: #64748b;
	--ctdl-fg-on-banner: #f8fafc;
	--ctdl-fg-on-accent: #ffffff;
	--ctdl-border: #e2e8f0;
	--ctdl-border-strong: #94a3b8;
	--ctdl-border-input: #cbd5e1;
	--ctdl-accent: #3182ce;
	--ctdl-accent-hover: #2b6cb0;
	--ctdl-accent-strong: #1d4ed8;
	--ctdl-accent-soft: #eff6ff;
	--ctdl-accent-soft-border: #3b82f6;
	--ctdl-danger: #e53e3e;
	--ctdl-success: #16a34a;
	--ctdl-grid-gap-line: #2f4f4f;	/* DarkSlateGrey */
	--ctdl-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
	--ctdl-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
	--ctdl-link: #2563eb;
	--ctdl-scrollbar-track: #e2e8f0;
	--ctdl-scrollbar-thumb: #94a3b8;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--ctdl-bg-page: #0b1220;
	--ctdl-bg-surface: #111827;
	--ctdl-bg-elevated: #1e293b;
	--ctdl-bg-muted: #1e293b;
	--ctdl-bg-hover: #334155;
	--ctdl-bg-selected: #334155;
	--ctdl-bg-banner: #020617;
	--ctdl-bg-input: #0f172a;
	--ctdl-bg-code: #1e293b;
	--ctdl-fg: #e2e8f0;
	--ctdl-fg-secondary: #cbd5e1;
	--ctdl-fg-muted: #94a3b8;
	--ctdl-fg-on-banner: #f1f5f9;
	--ctdl-fg-on-accent: #ffffff;
	--ctdl-border: #334155;
	--ctdl-border-strong: #475569;
	--ctdl-border-input: #475569;
	--ctdl-accent: #60a5fa;
	--ctdl-accent-hover: #3b82f6;
	--ctdl-accent-strong: #93c5fd;
	--ctdl-accent-soft: #1e3a5f;
	--ctdl-accent-soft-border: #3b82f6;
	--ctdl-danger: #f87171;
	--ctdl-success: #4ade80;
	--ctdl-grid-gap-line: #1e293b;
	--ctdl-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	--ctdl-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	--ctdl-link: #93c5fd;
	--ctdl-scrollbar-track: #0f172a;
	--ctdl-scrollbar-thumb: #475569;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;			/* Prevent viewport-level scroll bars from breaking the grid layout */
}

* {						/* This makes grids consume exactly 100% of their parent containers */
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

[contenteditable]:focus {
	outline: 0px solid transparent;
}
 
.ctdl-main-grid-container {			/* This grid implements the "holy grail layout" of the screen */
	display: grid;
	grid-template-rows: minmax(50px, auto) minmax(0, 1fr);
	grid-template-columns: 12vw minmax(0, 1fr);
	grid-template-areas:
		'ctdl-mg-banner ctdl-mg-banner'
		'ctdl-mg-menu ctdl-mg-main';
	gap: 1px;				/* This is the thickness of the lines between the boxes */
	background-color: var(--ctdl-grid-gap-line);	/* This is the color of the lines between the boxes */
	padding: 0;				/* This is the border around the edges of the screen (0 for no border) */
	width: 100vw;
	height: 100vh;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}

.ctdl-grid-banner-item {			/* Top banner, referenced by the grid container */
	grid-area: ctdl-mg-banner;
	min-height: 50px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--ctdl-bg-banner);
	color: var(--ctdl-fg-on-banner);
	border-bottom: 1px solid var(--ctdl-border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.ctdl-grid-sidebar-item {			/* Side bar, referenced by the grid container */
	grid-area: ctdl-mg-menu;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--ctdl-bg-page);
}

.ctdl-grid-main-item {				/* Main content area of the screen, referenced by the grid container */
	grid-area: ctdl-mg-main;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

.ctdl-main-grid-container > div {
	text-align: left;
	min-width: 0;				/* Allow grid elements to shrink and enable scrolling without expanding the grid */
	min-height: 0;
}

.ctdl-banner-buttons {				/* Flexbox container for everything we stick into the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	min-height: 100%;
	padding: 0 1rem;
	box-sizing: border-box;
}

.ctdl-banner-left {				/* Items which should be grouped to the LEFT side of the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
}

.ctdl-banner-center {				/* Items which should be grouped to the MIDDLE of the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-banner-right {				/* Items which should be grouped to the RIGHT side of the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-banner-buttons li {
	list-style: none;
	display: inline-flex;
	align-items: center;
	height: 100%;
}

.ctdl-banner-buttons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.75rem;
	background-color: #1e293b;
	color: #f8fafc;
	border: 1px solid #334155;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	margin: 0;
}

.ctdl-banner-buttons button:hover {
	background-color: #334155;
	border-color: #475569;
	color: #ffffff;
}

.ctdl-banner-buttons button:active {
	transform: scale(0.96);
}

.ctdl-banner-buttons button#ctdl-goto-button,
.ctdl-banner-buttons button#ctdl-abandon-button,
.ctdl-banner-buttons button#ctdl-newmsg-button,
.ctdl-banner-buttons button#ctdl-ungoto-button,
.ctdl-banner-buttons button#ctdl-skip-button {
	background-color: #3182ce;
	border-color: #4299e1;
	color: #ffffff;
}

.ctdl-banner-buttons button#ctdl-goto-button:hover,
.ctdl-banner-buttons button#ctdl-abandon-button:hover,
.ctdl-banner-buttons button#ctdl-newmsg-button:hover,
.ctdl-banner-buttons button#ctdl-ungoto-button:hover,
.ctdl-banner-buttons button#ctdl-skip-button:hover {
	background-color: #2b6cb0;
	border-color: #3182ce;
}

.ctdl-banner-buttons button#ctdl-delete-button {
	background-color: #e53e3e;
	border-color: #fc8181;
	color: #ffffff;
}

.ctdl-banner-buttons button#ctdl-delete-button:hover {
	background-color: #c53030;
	border-color: #e53e3e;
}

.ctdl-banner-buttons button#ctdl_banner_title {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0;
	cursor: pointer;
}

.ctdl-banner-buttons button#ctdl_banner_title:hover {
	background: transparent;
	border: none;
	text-decoration: underline;
}

.ctdl-banner-buttons button#current_user_avatar {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	cursor: pointer;
}

.ctdl-banner-buttons button#current_user_avatar:hover {
	background: transparent;
	border: none;
}

.ctdl-banner-buttons button#current_user {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #f8fafc;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0;
	cursor: default;
}

.ctdl-banner-buttons button#current_user:hover {
	background: transparent;
	border: none;
}

.ctdl-banner-buttons button#ctdl_banner_title:active,
.ctdl-banner-buttons button#current_user_avatar:active,
.ctdl-banner-buttons button#current_user:active {
	transform: none;
}

.ctdl-banner-buttons a {			/* For example, the Login / Log Off button */
	color: #cbd5e1;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	transition: color 0.2s ease;
}

.ctdl-banner-buttons a:hover {
	color: #ffffff;
}

.ctdl-banner-buttons span {			/* For example, the name of the logged in user */
	color: #cbd5e1;
	font-weight: 600;
	font-size: 0.85rem;
}

.ctdl-logo-img {
	background-color: #ffffff;
	border-radius: 4px;
	padding: 2px 4px;
	height: calc(100% - 8px);
	max-height: calc(100% - 8px);
	object-fit: contain;
	display: block;
}

.ctdl-banner-buttons #ctdl-room-icon {
	color: #f8fafc;
}

html,body,h1,h2,h3,h4,h5 {
	font-family: sans-serif;
}

.ctdl-modal-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(5px);
	z-index: 1000;
}

.ctdl-modal {
	display: none;				/* set to "block" to make the modal appear */
	z-index: 1005;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 16px;
	justify-content: center;
	align-items: center;
	padding: 0px;
	background-color: #FFFFFF;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

/*.ctdl-modal-header {
	background-color: WhiteSmoke;
	padding: 10px;
}

.ctdl-modal-main {
	padding: 10px;
}

.ctdl-modal-footer {
	background-color: WhiteSmoke;
	padding: 10px;
}*/

/* Left-sidebar room controls card (view / files / RSS) */
#ctdl-room-controls-wrap {
	margin: 0;
	padding: 0;
}

.ctdl-room-controls {
	margin: 0.55rem 0.45rem 0.7rem;
	padding: 0.7rem 0.55rem 0.55rem;
	background-color: var(--ctdl-bg-surface);
	border: 1px solid var(--ctdl-border-strong);
	border-radius: 10px;
	box-shadow: var(--ctdl-shadow), var(--ctdl-shadow-inset);
}

.ctdl-room-controls-heading {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0 0.2rem 0.55rem;
	padding: 0 0.15rem 0.45rem;
	border-bottom: 1px solid var(--ctdl-border);
	min-width: 0;
}

.ctdl-room-controls-kicker {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ctdl-fg-muted);
	line-height: 1.2;
}

.ctdl-room-controls-roomname {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ctdl-fg);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ctdl-room-controls button.ctdl-room-controls-btn {
	display: flex;			/* overridden by inline display:none when hidden */
	width: 100%;
	align-items: center;
	gap: 0.45rem;
	padding: 0.48rem 0.55rem;
	margin: 0.18rem 0;
	text-align: left;
	border: 1px solid var(--ctdl-border-input);
	background-color: var(--ctdl-bg-muted);
	color: var(--ctdl-fg);
	font-size: 0.84em;
	font-weight: 500;
	border-radius: 7px;
	cursor: pointer;
	line-height: 1.25;
	box-sizing: border-box;
}

#ctdl-room-controls button.ctdl-room-controls-btn i {
	width: 1.1em;
	text-align: center;
	color: var(--ctdl-fg-secondary);
	flex-shrink: 0;
}

#ctdl-room-controls button.ctdl-room-controls-btn > span:not(.ctdl-files-badge) {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#ctdl-room-controls button.ctdl-room-controls-btn .ctdl-files-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 0.35rem;
	margin-left: 0.15rem;
	border-radius: 999px;
	background: #1e40af;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

#ctdl-room-controls button.ctdl-room-controls-btn:hover {
	border-color: var(--ctdl-accent-soft-border);
	background-color: var(--ctdl-accent-soft);
	color: var(--ctdl-fg);
}

#ctdl-room-controls button.ctdl-room-controls-btn:hover i {
	color: var(--ctdl-accent-strong);
}

#ctdl-room-controls button.ctdl-room-controls-btn.ctdl-theme-active {
	border-color: var(--ctdl-accent-soft-border);
	background-color: var(--ctdl-accent-soft);
}

#ctdl-room-controls button.ctdl-room-controls-btn:active {
	transform: scale(0.98);
}

.ctdl-sidebar-button {
	width: 100%;
	padding: 10px;
	text-align: left;
	border: 1px solid var(--ctdl-bg-page);
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
	color: Black;
	font-size: 0.9em;
	border-radius: 5px;
}

.ctdl-sidebar-button:hover {
	border-color: Blue;
}

.ctdl-sidebar-button-selected {
	font-weight: bold;
	background-color: var(--ctdl-bg-selected);
	color: var(--ctdl-fg);
}

/* Custom banner button styles handled in .ctdl-banner-buttons button */

.ctdl-forum-reading-pane {
	background-color: transparent;		/* Background behind the message boxes */
	max-width: 100ch;
	margin: 0 auto;
}

.ctdl-fmsg-wrapper,
.ctdl-formgrid-fieldset {
	background-color: var(--ctdl-bg-surface);
	border: 1px solid var(--ctdl-border);
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ctdl-fmsg-wrapper {				/* message wrapper for forum view */
	overflow: hidden;
	margin: 1.5rem 1vw;
	padding: 1.5rem;				/* inside the box */
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.ctdl-fmsg-wrapper .ctdl-avatar {
	float: none;
	padding-right: 0;
	flex-shrink: 0;
}

.ctdl-fmsg-wrapper .ctdl-fmsg-content {
	margin-left: 0;
	flex-grow: 1;
	min-width: 0;
}

.ctdl-mmsg-wrapper {				/* message wrapper for mailbox view */
	overflow: hidden;
	background-color: White;
	padding: 5px;				/* inside the box */
}

.ctdl-msg-reply {
	margin-left: 5vw;
}

.ctdl-msg-header-card {
	padding: 0.5rem 0.75rem;
	background-color: #f8fafc;
	border-radius: 8px;
	border: 1px solid #edf2f7;
	margin-bottom: 1.25rem;
}

.ctdl-msg-header-card .ctdl-msg-header {
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 0;
	border-radius: 0;
	box-shadow: none;
}

.ctdl-msg-header-card .ctdl-msg-to,
.ctdl-msg-header-card .ctdl-msg-cc,
.ctdl-msg-header-card .ctdl-msgsubject {
	margin-top: 0.5rem;
}

.ctdl-msg-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background-color: #f8fafc;
	border-radius: 8px;
	border: 1px solid #edf2f7;
	margin-bottom: 1.25rem;
}

.ctdl-msg-header-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-msg-header-buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-msg-button {
	display: inline-flex;
	align-items: center;
	background-color: #edf2f7;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	margin-left: 0.2em;
}

.ctdl-msg-button:hover {
	background-color: #e2e8f0;
}

.ctdl-msg-button:active {
	transform: scale(0.98);
}

.ctdl-msg-button i {				/* This will get applied to Font Awesome icons stuck into the buttons */
	margin-right: 0.35rem;
}

.ctdl-msg-button a {
	color: #4a5568;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.75rem;
}

.ctdl-msg-button a:hover {
	color: #2d3748;
	cursor: pointer;
}

.ctdl-avatar {
	width: 32px;
}

.ctdl-avatar img {
	clip-path: circle(50%);
}

.ctdl-username {
	font-weight: bold;
	color: #000055;
	cursor: pointer;
}

.ctdl-username a {
	text-decoration: none;
	padding-right: 4px;
}

.ctdl-msgdate {
	padding-left: 4px;
}

.ctdl-msgsubject {
	font-weight: bold;
}

.ctdl-fmsg-content {				/* message text, when in forum view */
	margin-left: 32px;
}

.ctdl-mmsg-content {				/* message text, when in mailbox view */
	margin-left: 0;
}

.ctdl-mail-body-wrapper {
	/*max-width: 100ch;*/			/* Adjust here if you want big margins for mail */
	margin: 0 auto;
	height: 100%;
}

.ctdl_mail_folders,
.ctdl_chat_rooms {
	list-style: none;
	padding: 0.2rem 0;
	margin: 0;
}

.ctdl_mail_folders li,
.ctdl_chat_rooms li {
	color: #475569;
	padding: 0.35rem 0.6rem 0.35rem 1.2rem;
	cursor: pointer;
	border-radius: 5px;
	font-size: 0.88rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.15s, color 0.15s;
	margin: 1px 0;
}

.ctdl_mail_folders li:hover,
.ctdl_chat_rooms li:hover {
	background-color: #e2e8f0;
	color: #0f172a;
}

.ctdl_mail_folders li.ctdl_folder_selected,
.ctdl_chat_rooms li.ctdl_chat_room_selected {
	background-color: #cbd5e1;
	color: #0f172a;
	font-weight: 600;
}

.ctdl_mail_folders li.ctdl-has-unread,
.ctdl_chat_rooms li.ctdl-has-unread {
	font-weight: 700 !important;
	color: #0f172a !important;
}

.ctdl-unread-dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	border-radius: 50%;
	background-color: #2563eb;
	box-shadow: 0 0 5px rgba(37, 99, 235, 0.7);
	display: inline-block;
	margin-left: 0.5rem;
}

.ctdl_mail_folder_droppable {
	background-color: LightGrey;
	font-weight: bold;
}

.ctdl_mail_folders li.ctdl-new-mailbox-item {
	margin-top: 0.25rem;
}

.ctdl_mail_folders li.ctdl-new-mailbox-editing,
.ctdl_mail_folders li.ctdl-new-mailbox-editing:hover {
	cursor: default;
	background-color: transparent;
	padding: 0.2rem 0.4rem 0.2rem 0.8rem;
}

.ctdl-new-mailbox-link {
	display: flex;
	align-items: center;
	width: 100%;
	color: #64748b;
}

.ctdl-new-mailbox-link:hover {
	color: #0f172a;
}

.ctdl-new-mailbox-form {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 4px;
}

.ctdl-new-mailbox-input {
	flex: 1;
	min-width: 0;
	padding: 0.25rem 0.4rem;
	font-size: 0.85rem;
	border: 1px solid #94a3b8;
	border-radius: 4px;
	outline: none;
	background-color: #ffffff;
	color: #0f172a;
	box-sizing: border-box;
}

.ctdl-new-mailbox-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 1px #2563eb;
}

.ctdl-new-mailbox-btn {
	background: none;
	border: none;
	padding: 0.25rem 0.35rem;
	cursor: pointer;
	font-size: 0.85rem;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ctdl-new-mailbox-btn-confirm {
	color: #16a34a;
}

.ctdl-new-mailbox-btn-confirm:hover {
	background-color: #dcfce7;
}

.ctdl-new-mailbox-btn-cancel {
	color: #dc2626;
}

.ctdl-new-mailbox-btn-cancel:hover {
	background-color: #fee2e2;
}

.ctdl-avatar {
	float: left;
	padding-right: 2px;
}

.ctdl-forum-nav {
	text-align: center;
	color: Black;
	background-color: Gainsboro;
	padding-top: 5px;
	padding-bottom: 5px;
}

.ctdl-forum-nav a {
	text-decoration: none;
}

.ctdl-msg-body {
	overflow-wrap: break-word;
}

.ctdl-msg-body img,
.ctdl-forum-editor-body img,
#ctdl-editor-body img {
	max-width: 100%;
	height: auto;
}

.ctdl-forum-editor-body {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 1px black;
	padding-bottom: 1px black;
}

#ctdl-editor-body {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: none;
	font-family: sans-serif;
	overflow-wrap: break-word;
}

#ctdl-editor-body.raw-mode {
	font-family: monospace;
	white-space: pre-wrap;
	resize: none;
	overflow-y: auto;
}

blockquote {
	background-color: #f5f5f5 !important;
	color: Navy !important;
	border-left: 2px solid Navy;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-left: 1em;
	padding-left: 1em;
}

blockquote blockquote {
	background-color: #ebebeb !important;
	color: Maroon !important;
	border-left: 2px solid Maroon;
}

blockquote blockquote blockquote {
	background-color: #e1e1e1 !important;
	color: Green !important;
	border-left: 2px solid Green;
}

blockquote blockquote blockquote blockquote {
	background-color: #d7d7d7 !important;
	color: Purple !important;
	border-left: 2px solid Purple;
}

blockquote blockquote blockquote blockquote blockquote {
	background-color: #cdcdcd !important;
	color: Teal !important;
	border-left: 2px solid Teal;
}

blockquote pre {
	margin-left: 1%;
	margin-right: 1%;
}

.ctdl-forum-urlmodal {
	width: 75%;
}

.ctdl-url-entry-box-legend {
	overflow: none;
	margin-left: 2em;
	margin-right: 2em;
}

/* use this class for any small item that needs to be centered on the screen in the main div */
.ctdl-middle {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	min-height: 100%;
	width: 100%;
	max-width: 100%;
	padding-top: 1.5rem;
	padding-bottom: 2rem;
	box-sizing: border-box;
	background-color: WhiteSmoke;
	overflow: visible;
	border: none;
}

.ctdl-middle form {
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.ctdl-roomlist-top {
	width: 100%;
	height: 100%;
	overflow: auto;
	border: none;
	padding: 1rem 0;
}

.ctdl-roomlist-floor {
	margin-bottom: 2rem;
}

.ctdl-roomlist-floor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 1vw 0.75rem 1vw;
	padding: 0 1vw;
}

.ctdl-roomlist-floor-label {
	font-size: 1.25rem;
	font-weight: 700;
	color: #2d3748;
	margin: 0;
}

.ctdl-roomlist-create-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #3182ce;
	background-color: #ebf8ff;
	border: 1px solid #bee3f8;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.ctdl-roomlist-create-button:hover {
	background-color: #3182ce;
	color: #ffffff;
	border-color: #3182ce;
	box-shadow: 0 4px 6px -1px rgba(49, 130, 206, 0.2);
}

.ctdl-roomlist-create-button:active {
	transform: translateY(1px);
}

.ctdl-roomlist-floor-rooms {
	/* Forums directory: 2 columns on wider viewports, scaling down to
	   1 column below 960px before room titles and timestamps start wrapping. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	padding: 0 1vw;
}

@media (max-width: 960px) {
	.ctdl-roomlist-floor-rooms {
		grid-template-columns: 1fr;
	}
}

.ctdl-roomlist-room {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1.25rem;
	min-height: 3.75rem;
	background-color: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	margin-left: 0;
	margin-right: 0;
	min-width: 0;					/* allow shrink inside CSS grid */
	box-sizing: border-box;
}

.ctdl-roomlist-room:hover {
	background-color: #f8fafc;
	border-color: #e2e8f0;
	transform: translateY(-1px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

.ctdl-roomlist-room:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.ctdl-roomlist-left {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	flex: 1 1 auto;
}

.ctdl-roomlist-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.1rem;
	transition: all 0.2s ease;
}

.ctdl-roomlist-icon-container.ctdl-roomlist-icon-new {
	background-color: #ebf8ff;
	color: #3182ce;
}

.ctdl-roomlist-icon-container.ctdl-roomlist-icon-old {
	background-color: #f7fafc;
	color: #a0aec0;
}

.ctdl-roomlist-roomname {
	font-size: 1.05rem;
	font-weight: 500;
	color: #4a5568;
	transition: color 0.2s ease;
	/* Wrap at word boundaries (spaces) only; tiles may grow for 2+ lines.
	   No overflow-wrap:anywhere (that broke German compounds mid-word). */
	overflow-wrap: break-word;		/* last resort for a single ultra-long token */
	word-break: normal;
	hyphens: none;
	line-height: 1.35;
	min-width: 0;
}

.ctdl-roomlist-room:hover .ctdl-roomlist-roomname {
	color: #2d3748;
}

.ctdl-roomlist-roomname-hasnewmsgs {
	font-weight: 700;
	color: #2b6cb0;
}

.ctdl-roomlist-mtime {
	font-size: 0.85rem;
	color: #a0aec0;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: 0.75rem;
}

.ctdl-roomlist-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ctdl-roomlist-forget-btn {
	background: transparent;
	border: none;
	color: #a0aec0;
	font-size: 0.95rem;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
}

.ctdl-roomlist-forget-btn:hover {
	color: #e53e3e;
	background-color: #fff5f5;
	opacity: 1;
	transform: scale(1.1);
}

.ctdl-mailbox-grid-container {
	display: grid;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: WhiteSmoke;
	grid-template-rows: 15vw 1fr;		/* "1fr" means "all of the remaining space" */
}

.ctdl-mailbox-pane {				/* list of messages when in mailbox view */
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #DDDDDD;
	border-bottom: solid 3px SlateGrey;	/* We can probably turn this into a drag handle */
}

.ctdl-mailbox-table {
	width: 100%;
	background-color: WhiteSmoke;
	border-collapse: collapse;
}

.ctdl-mailbox-table td {
	padding: 5px;
}

.ctdl-mailbox-table tr {
	cursor: pointer;
	border-top: solid 1px LightGrey;
}

.ctdl-mailbox-table tr:hover {
	border-top: solid 1px Blue;
	border-bottom: solid 1px Blue;
	background-color: LightGrey;
}

.ctdl-mailbox-table th {
	position: sticky;
	top: 0;
	z-index: 6;
	background-color: SlateGrey;
	color: White;
	padding-top: 5px;
	padding-bottom: 5px;
	cursor: pointer;
	user-select: none;
}

.ctdl-mailbox-table th:hover {
	background-color: #64748b;
	color: White;
	cursor: pointer;
}

.ctdl-mail-selected {
	background-color: Blue;
	color: White;
}

.ctdl-mail-unread {
	font-weight: bold;
}

.ctdl-mail-subject {				/* Subject column in mailbox message list */
}

.ctdl-mail-sender {				/* Sender column in mailbox message list */
}

.ctdl-mail-date {				/* Date column in mailbox message list */
	white-space: nowrap;
}

.ctdl-mail-msgnum {				/* # column in mailbox message list */
	white-space: nowrap;
}

.ctdl-mailbox-reading-pane {			/* message reading pane when in mailbox view */
	overflow: auto;
	background-color: WhiteSmoke;
	padding: 5px;
	border: none;
	/*max-width: 100ch;
	margin: 0 auto;*/
}

/* This makes up an editor/composition window for several applications.
 * To customize it, just subclass it and define which grid-template-areas you want to include.
 */
.ctdl-compose {
	width: 100%;
	height: 100%;
	overflow: none;
	border: none;
	padding: 0;
	background-color: WhiteSmoke;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px;
}

.ctdl-compose.ctdl-compose-mail {		/* composition window subclass for email */
	grid-template-rows: auto auto auto auto auto 1fr auto;
	grid-template-areas:
		'ctdl-compose-from-label ctdl-compose-from-line'
		'ctdl-compose-to-label ctdl-compose-to-line'
		'ctdl-compose-cc-label ctdl-compose-cc-field'
		'ctdl-compose-bcc-label ctdl-compose-bcc-field'
		'ctdl-compose-subject-label ctdl-compose-subject-field'
		'ctdl-compose-message-box ctdl-compose-message-box'
		'ctdl-compose-actionbar ctdl-compose-actionbar';
}

.ctdl-compose.ctdl-compose-wiki {		/* composition window subclass for wiki editor */
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'ctdl-compose-editor-buttons ctdl-compose-editor-buttons'
		'ctdl-compose-message-box ctdl-compose-message-box'
		'ctdl-compose-actionbar ctdl-compose-actionbar';
}

.ctdl-compose.ctdl-compose-blog {		/* composition window subclass for blog post */
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'ctdl-compose-subject-label ctdl-compose-subject-field'
		'ctdl-compose-message-box ctdl-compose-message-box'
		'ctdl-compose-actionbar ctdl-compose-actionbar';
}


.ctdl-compose-from-label {
	grid-area: ctdl-compose-from-label;
	padding: 0.5vw;
}

.ctdl-compose-from-line {
	grid-area: ctdl-compose-from-line;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 1px;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-compose-to-label {
	grid-area: ctdl-compose-to-label;
	padding: 0.5vw;
}

.ctdl-compose-to-line {
	grid-area: ctdl-compose-to-line;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 1px;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-compose-to-field {
	flex-grow: 1;

}

.ctdl-cc-bcc-buttons {
	margin-left: auto;
}

.ctdl-compose-cc-label {
	grid-area: ctdl-compose-cc-label;
	padding: 0.5vw;
	display: none;
}

.ctdl-compose-cc-field {
	grid-area: ctdl-compose-cc-field;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: none;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 0;
}

.ctdl-compose-bcc-label {
	grid-area: ctdl-compose-bcc-label;
	padding: 0.5vw;
	display: none;
}

.ctdl-compose-bcc-field {
	grid-area: ctdl-compose-bcc-field;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 0;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: none;
}

.ctdl-compose-subject-label {
	grid-area: ctdl-compose-subject-label;
	padding: 0.5vw;
}

.ctdl-compose-subject-field {
	grid-area: ctdl-compose-subject-field;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 0;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
}

.ctdl-compose-editor-buttons {
	grid-area: ctdl-compose-editor-buttons;
	overflow: hidden;
	padding: 0.5vw;
	border-bottom: 1px solid Grey;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	background-color: Gainsboro;
}

.ctdl-compose-message-box {
	grid-area: ctdl-compose-message-box;
	overflow-x: wrap;
	overflow-y: auto;
	padding: 0.5vw;
	border-bottom: 1px solid Grey;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
}

.ctdl-compose-actionbar {
	grid-area: ctdl-compose-actionbar;
	overflow: none;
	padding: 0.5vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-upload {
	display: none;				/* set to 'block' to make it appear when needed */
	width: 95%;
	height: 95%;
	border: 2px dashed #ccc;
	border-radius: 20px;
	border-color: Black;
	justify-content: center;
	align-items: center;
	padding: 1em;
	background-color: WhiteSmoke;
}

.ctdl-upload.fixed {
	position: fixed;
	top: 2.5%;
	right: 2.5%;
}

.ctdl-upload.highlight {
	border-color: Blue;
}

.ctdl-compose-attachments-title {
	padding: 1em;
	background: Gainsboro;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: auto;
	align-content: start
}

.ctdl-upload-form {
	text-align: center;
	margin-bottom: 10px;
}

.ctdl-login-screen-grid-container {
	display: grid;
	grid-template-columns: auto auto;
}

.ctdl-login-screen-grid-item {
	padding: 20px;
	font-size: 1.25em;
	vertical-align: middle;
}

.ctdl-login-screen-grid-item input {
	height: 100%;
	border: none;
	font-size: 1.25em;
}

.ctdl-fatal-error {
	background-color: DarkRed;
	margin-left: 1em;
	margin-right: 1em;
	padding: 1em;
	font-size: 2em;
	color: White;
}

.ctdl-calendar-container {			/* Flexbox container for calendars; child elements are headings and content */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-calendar-toplabels {			/* days and numbers of the week, up top */
	width: 100%;				/* No height specified.  Take what we need. */
}

.ctdl-calendar-content {			/* days and numbers of the week, up top */
	flex-grow: 1;				/* make the content take up all vertical space not used by the headings */
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;			/* Scrolling this div will scroll all days in view + the ruler */
	transform: translateZ(0);		/* Creates a containing block for all descendants; see https://www.w3.org/TR/css-transforms-1/#containing-block-for-all-descendants */
}

.ctdl-calendar-week-labels {			/* Flexbox container for LABELS of day, 3-day, 5-day, week view */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-calendar-week {				/* Flexbox container for day, 3-day, 5-day, week view */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;				/* Height will be adjusted by javascript to zoom as needed */
	overflow: hidden;
}

.ctdl-calendar-ruler {				/* This appears on the left side and shows the hours of the day */
	display: flex;				/* It is both a flexbox parent and child */
	flex-direction: column;
	height: 100%;				/* Occupy the entire height of the main pane */
	border: 1px solid WhiteSmoke;
}

.ctdl-calendar-label {				/* Flexbox child for LABEL of one day of the week */
	width: 100%;				/* Fill the width of the main pane; don't compress them into narrow boxes */
	height: 100%;				/* Fill the height of the toplabels div so the tops line up */
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: bold;
}

.ctdl-calendar-day {				/* Flexbox child for CONTENT of one day of the week */
	background-color: White;
	border: 1px solid SlateGrey;
	height: 100%;				/* Occupy the entire height of the main pane */
	width: 100%;				/* Fill the width of the parent */
	overflow: hidden;
	transform: translateZ(0);		/* Creates a containing block for all descendants; see https://www.w3.org/TR/css-transforms-1/#containing-block-for-all-descendants */
}

.ctdl-calendar-ruler-hour {			/* Flexbox child of ctdl-calendar-ruler */
	flex-grow: 0;				/* Keep all hours the same size */
	height: 100%;				/* Occupy the entire height of the main pane */
	width: 100%;				/* Fill the width of the main pane; don't compress them into narrow boxes */
	text-align: right;
	border-top: 1px dotted SlateGrey;
	padding-left: 0.2ex;
	padding-right: 0.2ex;
}

.ctdl-calendar-item {				/* We can position relative to the parent because of the translateZ() transform */
	color: #1e293b;
	background-color: #e0edff;
	border: 1px solid #bfdbfe;
	border-left: 4px solid #2563eb;
	text-align: left;
	border-radius: 6px;
	overflow: hidden;
	padding: 4px 6px;
	font-size: 0.8rem;
	line-height: 1.25;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: width 0.2s ease, left 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}

.ctdl-calendar-item.ctdl-calendar-item-allday {
	background-color: #2563eb;
	color: #ffffff;
	border: 1px solid #1d4ed8;
	border-left: 4px solid #1e40af;
	margin: 2px 0;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.75rem;
}

.ctdl-calendar-item.ctdl-calendar-item-allday:hover {
	background-color: #1d4ed8;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.ctdl-calendar-item.ctdl-calendar-item-in-day {
	width: 98%;
	top: 0;
	left: 1%;
	position: fixed;
	box-sizing: border-box;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ctdl-calendar-item.ctdl-calendar-item-in-day:hover {
	z-index: 25;
	background-color: #dbeafe;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.ctdl-calendar-item-time {
	font-size: 0.7rem;
	font-weight: 700;
	color: #1d4ed8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctdl-calendar-item-title {
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.ctdl-calendar-item.ctdl-calendar-item-allday .ctdl-calendar-item-title {
	color: #ffffff;
	white-space: nowrap;
}

.ctdl-calendar-item-location,
.ctdl-calendar-item-organizer {
	font-size: 0.7rem;
	color: #475569;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ctdl-calendar-item-location i,
.ctdl-calendar-item-organizer i {
	font-size: 0.68rem;
	color: #64748b;
	flex-shrink: 0;
}

.ctdl-calendar-item-source {
	font-size: 0.68rem;
	font-weight: 600;
	color: #7c3aed;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ctdl-calendar-item-source i {
	font-size: 0.65rem;
	color: #8b5cf6;
	flex-shrink: 0;
}

.ctdl-calendar-item.ctdl-calendar-item-overlay {
	background-color: #f3e8ff;
	border-color: #e9d5ff;
	border-left-color: #7c3aed;
}

.ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-in-day:hover {
	background-color: #ede9fe;
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22);
}

.ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-allday {
	background-color: #7c3aed;
	border-color: #6d28d9;
	border-left-color: #5b21b6;
}

/* Overlay chips: room line always visible, title yields space (in-day + allday) */
.ctdl-calendar-item.ctdl-calendar-item-overlay .ctdl-calendar-item-title {
	-webkit-line-clamp: 1;
}

.ctdl-calendar-item.ctdl-calendar-item-overlay .ctdl-calendar-item-source {
	display: flex;
	flex-shrink: 0;
	min-height: 1.1em;
	font-size: 0.7rem;
}

.ctdl-calendar-item.ctdl-calendar-item-overlay .ctdl-calendar-item-source span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-allday .ctdl-calendar-item-source {
	color: #f5f3ff;
}

.ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-allday .ctdl-calendar-item-source i {
	color: #ede9fe;
}

.ctdl-calendar-hour-in-day {			/* This is the little rule line that goes across each hour of the day */
	border-top: 1px solid LightGrey;
	top: 0;
	text-align: center;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.ctdl-calendar-half-hour-in-day {		/* This is the little rule line that goes across each half hour of the day */
	border-top: 1px dotted LightGrey;
	top: 0;
	text-align: center;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.ctdl-multiple-fieldsets {			/* When you have multiple fieldsets on the same screen, enclose all in this */
	width: 75em;
	max-width: 100%;
	box-sizing: border-box;
}

.ctdl-tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	margin-bottom: 1.25rem;
	padding: 0 0.5rem;
}

.ctdl-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 0.6rem 0.25rem 0.75rem 0.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	font-family: inherit;
	color: #64748b;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	outline: none;
}

.ctdl-tab-btn:hover {
	color: #1e293b;
}

.ctdl-tab-btn.ctdl-tab-active {
	color: #059669;
	font-weight: 600;
	border-bottom-color: #059669;
}

.ctdl-tab-btn i {
	font-size: 1rem;
}

.ctdl-tab-panes {
	width: 100%;
}

.ctdl-tab-pane {
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	box-sizing: border-box;
}

.ctdl-formgrid-section-heading {
	font-size: 1.5em;
	margin: 1vw;
	margin-bottom: 1em;
}

.ctdl-formgrid-section-subheading {
	font-size: 1.25em;
	margin: 1vw;
	margin-bottom: 1em;
}

.ctdl-formgrid-fieldset {
	min-width: 50em;
	max-width: 99%;
	min-height: 5em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-size: 1rem;
	overflow: hidden;
}

.ctdl-formgrid-fieldset.ctdl-formgrid-fieldset-collapsed {
	min-height: 1em;
	max-height: 1em;
	overflow: hidden;
}

.ctdl-formgrid-fieldset.ctdl-formgrid-fieldset-stealth {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.ctdl-formgrid-fieldset legend {
	background-color: #f8fafc;
	color: #2d3748;
	border-bottom: 1px solid #edf2f7;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0.5rem 1rem;
	font-weight: 700;
	box-sizing: border-box;
}

.ctdl-legendleft {
	padding-left: 1ex;
	padding-right: 1ex;
	float: left;
}

.ctdl-legendmiddle {
	padding-left: 1ex;
	padding-right: 1ex;
	font-weight: bold;
}

.ctdl-legendright {
	padding-left: 1ex;
	padding-right: 1ex;
	float: right;
}

.ctdl-formgrid {				/* Grid layout for forms -- shamelessly swiped from https://www.sitepoint.com/css-grid-web-form-layout */
	display: grid;
	grid-template-columns: 1fr 1em 2fr;
	grid-gap: 0.3em 0.6em;
	grid-auto-flow: dense;
	align-items: center;
	margin: 1em;
}

.ctdl-formgrid p {
	max-width: 40em;
	margin: 1em auto;
}

.ctdl-formgrid input, output, textarea, select, button {
	box-sizing: border-box;
	padding: 0.2em 0.4em;
	margin: 0.2em 0;
	outline: 0 none;
	border: 0 none;
	box-shadow: none;
}

.ctdl-formgrid button {				/* sort of styled after ctdl-msg-button */
	margin-left: 2px;
	border-radius: 5px;
	background-color: Blue;
	color: Black;
	padding: 0.2em 2em;
	background-color: WhiteSmoke;
	border-style: solid;
	border-width: thin;
	border-color: Black;
	cursor: pointer;
	font-size: 1em;
	max-width: 9em;
}

.ctdl-formgrid button:hover {
	background-color: #123456;
	color: WhiteSmoke;
	transition: .4s;
	border-color: #123456;
	cursor: default;
}

.ctdl-formgrid button:disabled {
	background-color: #e0e0e0;
	color: #a0a0a0;
	border-color: #c0c0c0;
	cursor: not-allowed;
}

.ctdl-formgrid button:disabled:hover {
	background-color: #e0e0e0;
	color: #a0a0a0;
	border-color: #c0c0c0;
	cursor: not-allowed;
}


.ctdl-formgrid label {
	box-sizing: border-box;
	user-select: none;
	cursor: pointer;
}

.ctdl-formgrid input:focus + label, textarea:focus + label, select:focus + label {
	color: #933;
}

.ctdl-formgrid input:checked + label {
	font-weight: bold;
}

.ctdl-formgrid input[type="datetime-local"] {
	width: 18em;				/* Make the date/time picker only as big as it needs to be */
}

.ctdl-formgrid input[type="date"] {
	width: 18em;				/* Make the date picker the same width as the date/time picker */
}

.ctdl-formgrid button, input[type="checkbox"], input[type="radio"] {
	width: auto;
	float: left;
	margin: 0.5em 0.5em 0 30%;
}

.ctdl-formgrid-hack1 {
	grid-column: 1 / 1;
	justify-self: end;
}

.ctdl-formgrid-hack2 {
	grid-column: 2 / 2;
}

.ctdl-formgrid-hack3 {
	grid-column: 3 / 3;
	justify-self: start;
}

.ctdl-formgrid .ctdl-msg-button {
	margin-left: 0;
}

.ctdl-formgrid button.ctdl-msg-button {
	grid-column: auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0.4rem 0.75rem;
	border: none;
	border-radius: 8px;
	background-color: #edf2f7;
	color: #4a5568;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-formgrid button.ctdl-msg-button:hover {
	background-color: #e2e8f0;
	color: #2d3748;
	border-color: transparent;
}

.ctdl-formgrid input, output, textarea, select, button {
	grid-column: 2 / 4;
	width: auto;
	margin: 0;
	font-size: 1rem;
	border: 1px solid slategrey;
}

.ctdl-formgrid input[type="checkbox"], input[type="radio"] {
	grid-column: 1 / 3;
	justify-self: end;
	margin: 0;
}

.ctdl-formgrid label {
	float: left;
	width: 30%;
	text-align: right;
	padding: 0.25em 1em 0 0;
}

.ctdl-formgrid input[type="checkbox"] + label {
	width: auto;
	text-align: left;
}

.ctdl-formgrid input[type="radio"] + label {
	width: auto;
	text-align: left;
	padding: 0;
	margin: 0;
}

.ctdl-formgrid label, input[type="checkbox"] + label {
	width: auto;
	padding: 0;
	margin: 0;
}

.ctdl-formgrid textarea + label {
	align-self: start;
}

.ctdl-formgrid table {
	border: 1px solid SlateGrey;
	grid-column: 2 / 4;
	width: auto;
	margin: 0;
	font-size: 1rem;
	max-width: 100%;
	table-layout: fixed;
}

.ctdl-formgrid tr {
	max-width: 100%;
}

.ctdl-formgrid th {
	background-color: Gainsboro;
}

.ctdl-formgrid td {
	/*width: 100%;*/
	max-width: 100%;
	overflow: hidden;
}

.ctdl-formgrid td input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.ctdl-configscreen-title {
	font-size: 1.5rem;
	margin-bottom: 1ex;
}

.ctdl-configscreen-instructions {
	margin: 1em;
}

.ctdl-wiki-encap {
	margin: 0.5em;
	padding: 0.5em;
	background-color: White;
}

/* This sits directly inside the HGL "Main" section */
.ctdl-contacts_container {
	display: flex;
	flex-direction: row;		/* Horizontal split */
	width: 100%;
	height: 100%;			/* Lock to the height of the HGL pane */
	overflow: hidden;		/* Ensure no scrollbars at this level */
	margin: 0;
	padding: 0;
}

/* Master List Pane */
.ctdl-contacts_list {
	flex: 0 0 350px;		/* Fixed width for the list */
	height: 100%;			/* Fill vertical space */
	overflow-y: auto;		/* Scroll independently */
	border-right: 1px solid #333;	/* Visual separator */
	background-color: #f9f9f9;	/* Optional: subtle distinction */
}

/* Detail/Editor Pane */
.ctdl-contacts_viewer {
	flex: 1;			/* Fluid width for the detail view */
	height: 100%;			/* Fill vertical space */
	overflow-y: auto;		/* Scroll independently */
	padding: 20px;			/* Content breathing room */
}

/* Search boxes */
.ctdl-search-container {
	margin-bottom: 20px;
}

.ctdl-search-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 400px;
}

.ctdl-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
}

.ctdl-search-input {
	width: 100%;
	padding: 8px 10px 8px 35px;
	border: 1px solid #ccc;
	border-radius: 20px;
	outline: none;
	box-sizing: border-box;
}

/* Access Denied / Error Card Styles */
.ctdl-error-card {
	background: white;
	padding: 2.5rem;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	text-align: center;
	max-width: 400px;
	width: 90%;
	border-top: 5px solid #dc3545;
}

.ctdl-error-icon {
	color: #dc3545;
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
}

.ctdl-error-title {
	margin: 0 0 0.75rem 0;
	color: #343a40;
	font-size: 1.5rem;
	font-weight: 600;
}

.ctdl-error-message {
	margin: 0;
	color: #6c757d;
	font-size: 1rem;
	line-height: 1.5;
}

/* Blog View Styles */
.ctdl-blog-container {
	display: flex;
	flex-direction: column;
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	gap: 2.5rem;
}

.ctdl-blog-header {
	text-align: center;
	padding-bottom: 2rem;
	border-bottom: 1px dashed #e1e8ed;
}

.ctdl-blog-title {
	font-size: 2.5rem;
	color: #1a202c;
	margin-bottom: 0.5rem;
	font-weight: 800;
}

.ctdl-blog-description {
	font-size: 1.1rem;
	color: #718096;
	max-width: 100%;
	margin: 0 auto;
	line-height: 1.6;
	white-space: pre-wrap;
	text-align: center;
}

.ctdl-blog-feed {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.ctdl-blog-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
	border: 1px solid #edf2f7;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ctdl-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.ctdl-blog-card-new {
	border-left: 4px solid #3182ce;
}

.ctdl-blog-new-badge {
	background-color: #3182ce;
	color: #ffffff;
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 9999px;
	margin-left: 0.5rem;
	display: inline-block;
	vertical-align: middle;
	font-weight: 600;
}

.ctdl-blog-new-comments-badge {
	background-color: #ebf8ff;
	color: #2b6cb0;
	font-size: 0.75rem;
	padding: 0.1rem 0.4rem;
	border-radius: 9999px;
	margin-left: 0.25rem;
	display: inline-block;
	vertical-align: middle;
	font-weight: 600;
}

.ctdl-blog-card-content {
	padding: 2rem;
}

.ctdl-blog-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.85rem;
	color: #a0aec0;
	margin-bottom: 1rem;
	font-weight: 500;
}

.ctdl-blog-meta-item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ctdl-blog-post-title {
	font-size: 1.75rem;
	color: #2d3748;
	margin: 0 0 1rem 0;
	font-weight: 700;
	line-height: 1.3;
}

.ctdl-blog-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ctdl-blog-post-title a:hover {
	color: #3182ce;
}

.ctdl-blog-excerpt {
	color: #4a5568;
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.ctdl-blog-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #f7fafc;
	padding-top: 1.25rem;
}

.ctdl-blog-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ctdl-blog-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4a5568;
	font-weight: bold;
	font-size: 0.9rem;
}

.ctdl-blog-author-info {
	display: flex;
	flex-direction: column;
}

.ctdl-blog-author-name {
	font-weight: 600;
	color: #2d3748;
	font-size: 0.9rem;
}

.ctdl-blog-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #3182ce;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

.ctdl-blog-read-more:hover {
	color: #2b6cb0;
	transform: translateX(3px);
}

.ctdl-blog-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #edf2f7;
	color: #4a5568;
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	margin-bottom: 1.5rem;
}

.ctdl-blog-back-btn:hover {
	background: #e2e8f0;
	color: #2d3748;
}

.ctdl-blog-post-body {
	font-size: 1.15rem;
	line-height: 1.8;
	color: #2d3748;
	margin-bottom: 3rem;
}

.ctdl-blog-post-body p {
	margin-bottom: 1.5rem;
}

.ctdl-blog-comments-section {
	border-top: 2px solid #edf2f7;
	padding-top: 2.5rem;
	margin-top: 2rem;
}

.ctdl-blog-comments-title {
	font-size: 1.5rem;
	color: #2d3748;
	margin: 0 0 2rem 0;
	font-weight: 700;
}

.ctdl-blog-comments-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ctdl-blog-comment-card {
	background: #f8fafc;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	padding: 1.5rem;
}

.ctdl-blog-comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.ctdl-blog-comment-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ctdl-blog-comment-author {
	font-weight: 600;
	color: #2d3748;
	font-size: 0.95rem;
}

.ctdl-blog-comment-date {
	font-size: 0.85rem;
	color: #a0aec0;
}

.ctdl-blog-comment-body {
	color: #4a5568;
	line-height: 1.6;
	font-size: 1rem;
}

.ctdl-blog-add-comment-card {
	background-color: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.ctdl-blog-add-comment-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0 0 1rem 0;
}

.ctdl-blog-add-comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.95rem;
	color: #4a5568;
	background-color: #f8fafc;
	resize: vertical;
	transition: all 0.2s ease-in-out;
	font-family: sans-serif;
}

.ctdl-blog-add-comment-form textarea:focus {
	outline: none;
	border-color: #3182ce;
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.ctdl-blog-add-comment-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
}

.ctdl-blog-post-comment-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.2rem;
	background-color: #3182ce;
	color: #ffffff;
	border: 1px solid #4299e1;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.ctdl-blog-post-comment-btn:hover {
	background-color: #2b6cb0;
	border-color: #3182ce;
}

.ctdl-blog-post-comment-btn:active {
	transform: scale(0.98);
}

.ctdl-blog-comment-delete-link,
.ctdl-blog-post-delete-link {
	color: #a0aec0;
	text-decoration: none;
	transition: color 0.2s ease;
	cursor: pointer;
	font-weight: 500;
}

.ctdl-blog-comment-delete-link {
	margin-left: 0.25rem;
}

.ctdl-blog-comment-delete-link:hover,
.ctdl-blog-post-delete-link:hover {
	color: #e53e3e;
	text-decoration: underline;
}


/* Generic Card Layout Styles */
.ctdl-card {
	background-color: var(--ctdl-bg-surface);
	color: var(--ctdl-fg);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
}

/* Sizing Modifiers */
.ctdl-card-sm {
	width: 380px;
	padding: 2.5rem 2rem;
}

.ctdl-card-md {
	width: 500px;
	padding: 2.5rem;
}

.ctdl-card-lg {
	width: 800px;
	padding: 3rem;
}

.ctdl-card-header {
	text-align: center;
}

.ctdl-card-header-icon {
	font-size: 3.5rem;
	color: #3182ce;
	margin-bottom: 0.75rem;
}

.ctdl-card-header h2 {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: #2d3748;
}

.ctdl-card-header p {
	margin: 0.25rem 0 0 0;
	font-size: 0.9rem;
	color: #718096;
}

.ctdl-card-error-message {
	padding: 0.75rem 1rem;
	background-color: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 8px;
	color: #c53030;
	font-size: 0.85rem;
	text-align: center;
	font-weight: 500;
}

.ctdl-form-error-box {
	padding: 0.75rem 1rem;
	background-color: #fff5f5;
	border: 1px solid #feb2b2;
	border-left: 5px solid #e53e3e;
	border-radius: 8px;
	color: #9b2c2c;
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ctdl-card-body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ctdl-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ctdl-form-group label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #4a5568;
}

.ctdl-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.ctdl-input-wrapper i {
	position: absolute;
	left: 1rem;
	color: #a0aec0;
	font-size: 1rem;
}

.ctdl-input-wrapper input {
	width: 100%;
	padding: 0.75rem 1rem 0.75rem 2.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	outline: none;
	font-size: 0.95rem;
	color: #2d3748;
	transition: all 0.2s ease;
}

.ctdl-input-wrapper input:focus {
	border-color: #3182ce;
	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.ctdl-form-options {
	display: flex;
	align-items: center;
}

.ctdl-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #4a5568;
	cursor: pointer;
	user-select: none;
}

.ctdl-checkbox-label input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	cursor: pointer;
}

.ctdl-card-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.ctdl-btn-primary {
	flex: 2;
	padding: 0.75rem;
	background-color: #3182ce;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-btn-primary:hover {
	background-color: #2b6cb0;
}

.ctdl-btn-primary:active {
	transform: scale(0.98);
}

.ctdl-btn-secondary {
	flex: 1;
	padding: 0.75rem;
	background-color: #edf2f7;
	color: #4a5568;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-btn-secondary:hover {
	background-color: #e2e8f0;
}

.ctdl-btn-secondary:active {
	transform: scale(0.98);
}

.ctdl-auth-tabs {
	display: flex;
	border-bottom: 2px solid #edf2f7;
	margin-bottom: 0.5rem;
}

.ctdl-auth-tab {
	flex: 1;
	padding: 0.6rem 1rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	font-weight: 600;
	font-size: 0.95rem;
	color: #718096;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ctdl-auth-tab:hover {
	color: #3182ce;
}

.ctdl-auth-tab.active {
	color: #3182ce;
	border-bottom-color: #3182ce;
}

.ctdl-card-footer {
	text-align: center;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: #718096;
}

.ctdl-card-footer a {
	color: #3182ce;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ctdl-card-footer a:hover {
	text-decoration: underline;
}


.ctdl-ical-invite-card {
	padding: 1rem;
	margin-bottom: 1.25rem;
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.ctdl-ical-invite-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.ctdl-ical-invite-icon {
	font-size: 1.5rem;
	color: #16a34a;
}

.ctdl-ical-invite-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #166534;
}

.ctdl-ical-invite-details {
	margin-bottom: 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ctdl-ical-invite-detail-item {
	margin-bottom: 0.25rem;
}

.ctdl-ical-invite-detail-item strong {
	color: #374151;
}

.ctdl-ical-invite-conflicts {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0.75rem 1rem;
	background-color: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	color: #991b1b;
}

.ctdl-ical-conflict-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: #991b1b;
}

.ctdl-ical-conflict-icon {
	color: #dc2626;
	font-size: 1.1rem;
}

.ctdl-ical-conflict-list {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.ctdl-ical-conflict-list li {
	margin-bottom: 0.2rem;
}

.ctdl-ical-invite-rsvp-status {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0.75rem 1rem;
	background-color: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 6px;
	color: #166534;
}

.ctdl-ical-rsvp-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: #166534;
}

.ctdl-ical-rsvp-icon {
	color: #16a34a;
	font-size: 1.1rem;
}

.ctdl-ical-invite-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.75rem;
}

.ctdl-ical-btn-accept {
	padding: 0.4rem 0.8rem;
	background-color: #16a34a;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.ctdl-ical-btn-accept:hover {
	background-color: #15803d;
}

.ctdl-ical-btn-tentative {
	padding: 0.4rem 0.8rem;
	background-color: #ca8a04;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.ctdl-ical-btn-tentative:hover {
	background-color: #a16207;
}

.ctdl-ical-btn-decline {
	padding: 0.4rem 0.8rem;
	background-color: #dc2626;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.ctdl-ical-btn-decline:hover {
	background-color: #b91c1c;
}

.ctdl-show-msg-text {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.ctdl-show-msg-text a {
	color: #2563eb;
	text-decoration: underline;
	cursor: pointer;
}

.ctdl-show-msg-text a:hover {
	color: #1d4ed8;
}

/* SMTP Queue Cards */
.ctdl-queue-container {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 900px;
	margin: 1.5rem auto;
	padding: 0 1rem 2rem 1rem;
}

.ctdl-queue-card {
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ctdl-queue-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.ctdl-queue-card-header {
	background-color: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 0.85rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ctdl-queue-card-title {
	font-weight: 700;
	font-size: 1rem;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-queue-card-time {
	font-size: 0.825rem;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ctdl-queue-card-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ctdl-queue-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #f1f5f9;
}

.ctdl-queue-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ctdl-queue-meta-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.ctdl-queue-meta-value {
	font-size: 0.9rem;
	color: #334155;
	font-weight: 500;
	word-break: break-all;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-queue-recipients-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ctdl-queue-recipients-heading {
	font-size: 0.825rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #475569;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-queue-recipients-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ctdl-queue-recipient-row {
	display: flex;
	flex-direction: column;
	background: #f8fafc;
	border-radius: 8px;
	padding: 0.6rem 0.85rem;
	border: 1px solid #f1f5f9;
}

.ctdl-queue-recipient-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-queue-recipient-addr {
	font-family: monospace;
	font-size: 0.9rem;
	color: #1e293b;
	font-weight: 600;
}

.ctdl-queue-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.ctdl-queue-badge-pending {
	background-color: #f1f5f9;
	color: #475569;
}

.ctdl-queue-badge-success {
	background-color: #dcfce7;
	color: #15803d;
}

.ctdl-queue-badge-retrying {
	background-color: #fef3c7;
	color: #b45309;
}

.ctdl-queue-badge-failed {
	background-color: #fee2e2;
	color: #b91c1c;
}

.ctdl-queue-recipient-msg {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #64748b;
	font-family: monospace;
	background: #ffffff;
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
}

.ctdl-queue-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: #64748b;
	font-size: 1rem;
	background: #ffffff;
	border-radius: 12px;
	border: 1px dashed #cbd5e1;
}

.ctdl-queue-delete-btn {
	background-color: #ef4444;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.35rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-queue-delete-btn:hover {
	background-color: #dc2626;
	transform: translateY(-1px);
}

.ctdl-queue-delete-btn:active {
	background-color: #b91c1c;
	transform: translateY(0);
}


/* Room Floor Management Screen Styles */
.ctdl-floor-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	width: 100%;
}

.ctdl-floor-card {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.25rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ctdl-floor-card:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border-color: #cbd5e0;
}

.ctdl-floor-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.ctdl-floor-card-badge {
	background-color: #ebf8ff;
	color: #2b6cb0;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
}

.ctdl-floor-card-refcount {
	font-size: 0.8rem;
	color: #718096;
}

.ctdl-floor-card-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0.5rem 0;
	word-break: break-word;
}

.ctdl-floor-card-input {
	width: 100%;
	padding: 0.4rem 0.6rem;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	font-size: 0.95rem;
	box-sizing: border-box;
}

.ctdl-floor-card-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.ctdl-floor-card-error {
	color: #c53030;
	background-color: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 4px;
	padding: 0.5rem;
	font-size: 0.85rem;
	margin-top: 0.5rem;
}

.ctdl-add-floor-box {
	background-color: #f7fafc;
	border: 1px dashed #cbd5e0;
	border-radius: 8px;
	padding: 1.25rem;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.ctdl-add-floor-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}


/* Instant Messaging / Chat Dock in Bottom Right Quadrant */
.ctdl-chat-dock {
	position: fixed;
	bottom: 0;
	right: 1.5rem;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	gap: 0.75rem;
	z-index: 100;
	pointer-events: none;
	max-width: calc(100vw - 3rem);
}

.ctdl-chat-box {
	width: 330px;
	height: 420px;
	background-color: #ffffff;
	border: 1px solid #cbd5e1;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: auto;
	transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
}

.ctdl-chat-box.ctdl-chat-minimized {
	height: 42px;
}

.ctdl-chat-header {
	height: 42px;
	background-color: #0f172a;
	color: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.75rem;
	cursor: pointer;
	user-select: none;
	border-bottom: 1px solid #1e293b;
	flex-shrink: 0;
}

.ctdl-chat-header-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ctdl-chat-status-dot {
	color: #22c55e;
	font-size: 0.55rem;
}

.ctdl-chat-title {
	font-weight: 600;
	font-size: 0.88rem;
	color: #f8fafc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ctdl-chat-controls {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.ctdl-chat-btn {
	background: transparent;
	border: none;
	color: #94a3b8;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	transition: background-color 0.15s, color 0.15s;
	padding: 0;
}

.ctdl-chat-btn:hover {
	background-color: #334155;
	color: #ffffff;
}

.ctdl-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.75rem;
	background-color: #f8fafc;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ctdl-chat-system-notice {
	align-self: center;
	font-size: 0.75rem;
	color: #64748b;
	background-color: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 0.25rem 0.65rem;
	margin-bottom: 0.25rem;
	text-align: center;
}

.ctdl-chat-msg {
	display: flex;
	flex-direction: column;
	max-width: 80%;
}

.ctdl-chat-msg-incoming {
	align-self: flex-start;
}

.ctdl-chat-msg-outgoing {
	align-self: flex-end;
}

.ctdl-chat-bubble {
	padding: 0.5rem 0.75rem;
	font-size: 0.84rem;
	line-height: 1.35;
	word-break: break-word;
	white-space: pre-wrap;
}

.ctdl-chat-msg-incoming .ctdl-chat-bubble {
	background-color: #e2e8f0;
	color: #1e293b;
	border-radius: 14px 14px 14px 2px;
}

.ctdl-chat-msg-outgoing .ctdl-chat-bubble {
	background-color: #2563eb;
	color: #ffffff;
	border-radius: 14px 14px 2px 14px;
}

.ctdl-chat-msg-time {
	font-size: 0.68rem;
	color: #94a3b8;
	margin-top: 0.15rem;
	padding: 0 0.25rem;
}

.ctdl-chat-msg-incoming .ctdl-chat-msg-time {
	text-align: left;
}

.ctdl-chat-msg-outgoing .ctdl-chat-msg-time {
	text-align: right;
}

.ctdl-chat-footer {
	padding: 0.5rem 0.65rem;
	background-color: #ffffff;
	border-top: 1px solid #e2e8f0;
	display: flex;
	gap: 0.4rem;
	align-items: center;
	flex-shrink: 0;
}

.ctdl-chat-input {
	flex: 1;
	border: 1px solid #cbd5e1;
	border-radius: 18px;
	padding: 0.4rem 0.75rem;
	font-size: 0.84rem;
	outline: none;
	background-color: #f8fafc;
	font-family: inherit;
	transition: border-color 0.15s, background-color 0.15s;
}

.ctdl-chat-input:focus {
	border-color: #2563eb;
	background-color: #ffffff;
}

.ctdl-chat-send-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #2563eb;
	color: #ffffff;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	transition: background-color 0.15s, transform 0.1s;
	flex-shrink: 0;
}

.ctdl-chat-send-btn:hover {
	background-color: #1d4ed8;
}

.ctdl-chat-send-btn:active {
	transform: scale(0.92);
}

@media (max-width: 600px) {
	.ctdl-chat-dock {
		right: 0;
		left: 0;
		max-width: 100vw;
	}
	.ctdl-chat-box {
		width: 100vw;
		border-radius: 0;
	}
}


/* ==========================================================================
   Real-Time Chat Room View (Slack / Teams / Discord style)
   ========================================================================== */

.ctdl-cr-container {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
}

.ctdl-cr-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background-color: #ffffff;
}

/* Chat Room Sub-Header */
.ctdl-cr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid #e2e8f0;
	background-color: #ffffff;
	flex-shrink: 0;
}

.ctdl-cr-header-left {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.ctdl-cr-header-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-cr-header-topic {
	font-size: 0.85rem;
	color: #64748b;
	border-left: 1px solid #cbd5e1;
	padding-left: 0.6rem;
	margin-left: 0.3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctdl-cr-header-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.ctdl-cr-header-btn {
	background: transparent;
	border: 1px solid transparent;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	color: #475569;
	cursor: pointer;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.15s, color 0.15s;
}

.ctdl-cr-header-btn:hover {
	background-color: #f1f5f9;
	color: #0f172a;
}

.ctdl-cr-header-btn.active {
	background-color: #e2e8f0;
	color: #0f172a;
}

/* Messages Stream */
.ctdl-cr-stream {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background-color: #ffffff;
}

/* Date separator */
.ctdl-cr-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 1rem 0 0.5rem 0;
	color: #94a3b8;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ctdl-cr-divider::before,
.ctdl-cr-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #e2e8f0;
}

.ctdl-cr-divider span {
	padding: 0 0.8rem;
}

/* Message Item */
.ctdl-cr-msg {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
	transition: background-color 0.1s;
	position: relative;
}

.ctdl-cr-msg:hover {
	background-color: #f8fafc;
}

.ctdl-cr-msg-avatar {
	flex-shrink: 0;
	cursor: pointer;
}

.ctdl-cr-msg-avatar img,
.ctdl-cr-msg-avatar .ctdl-avatar-fallback {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
}

.ctdl-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e2e8f0;
	color: #475569;
	font-weight: 600;
	font-size: 0.95rem;
}

.ctdl-cr-msg-body-wrapper {
	flex: 1;
	min-width: 0;
}

.ctdl-cr-msg-header {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.2rem;
}

.ctdl-cr-msg-author {
	font-weight: 600;
	color: #1e293b;
	cursor: pointer;
	font-size: 0.95rem;
}

.ctdl-cr-msg-author:hover {
	text-decoration: underline;
}

.ctdl-cr-msg-badge {
	font-size: 0.68rem;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background-color: #e0e7ff;
	color: #3730a3;
	font-weight: 600;
	text-transform: uppercase;
}

.ctdl-cr-msg-time {
	font-size: 0.75rem;
	color: #94a3b8;
}

.ctdl-cr-msg-text {
	font-size: 0.92rem;
	line-height: 1.45;
	color: #334155;
	word-break: break-word;
	white-space: pre-wrap;
}

.ctdl-cr-msg-code {
	background-color: #0f172a;
	color: #f8fafc;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	font-family: monospace;
	font-size: 0.85rem;
	margin-top: 0.4rem;
	overflow-x: auto;
}

/* System notice message */
.ctdl-cr-system-msg {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #64748b;
	font-size: 0.82rem;
	padding: 0.2rem 0.6rem;
	font-style: italic;
}

.ctdl-cr-system-msg i {
	color: #94a3b8;
}

/* Bottom Input Area */
.ctdl-cr-input-dock {
	padding: 0.75rem 1.25rem 1rem 1.25rem;
	background-color: #ffffff;
	border-top: 1px solid #e2e8f0;
	flex-shrink: 0;
}

.ctdl-cr-input-box {
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background-color: #f8fafc;
	transition: border-color 0.15s, box-shadow 0.15s;
	display: flex;
	flex-direction: column;
	padding: 0.4rem 0.6rem;
}

.ctdl-cr-input-box:focus-within {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
	background-color: #ffffff;
}

.ctdl-cr-input-textarea {
	width: 100%;
	min-height: 42px;
	max-height: 150px;
	resize: none;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 0.92rem;
	line-height: 1.4;
	color: #0f172a;
	padding: 0.25rem 0.4rem;
}

.ctdl-cr-input-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.25rem;
	border-top: 1px solid #f1f5f9;
}

.ctdl-cr-input-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-cr-input-toolbtn {
	background: transparent;
	border: none;
	color: #64748b;
	cursor: pointer;
	padding: 0.35rem 0.5rem;
	border-radius: 4px;
	font-size: 0.95rem;
	transition: color 0.1s, background-color 0.1s;
}

.ctdl-cr-input-toolbtn:hover {
	color: #0f172a;
	background-color: #e2e8f0;
}

.ctdl-cr-send-btn {
	background-color: #2563eb;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.15s;
}

.ctdl-cr-send-btn:hover {
	background-color: #1d4ed8;
}

.ctdl-cr-input-hint {
	font-size: 0.72rem;
	color: #94a3b8;
	margin-top: 0.35rem;
	text-align: right;
}

/* Chatters Sidebar */
.ctdl-cr-sidebar {
	width: 240px;
	border-left: 1px solid #e2e8f0;
	background-color: #f8fafc;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-shrink: 0;
	transition: width 0.2s, margin 0.2s;
}

.ctdl-cr-sidebar.collapsed {
	display: none;
}

.ctdl-cr-sidebar-header {
	padding: 0.85rem 1rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ctdl-cr-sidebar-list {
	list-style: none;
	padding: 0.5rem 0.6rem;
	overflow-y: auto;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ctdl-cr-user-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.12s;
}

.ctdl-cr-user-item:hover {
	background-color: #e2e8f0;
}

.ctdl-cr-user-avatar-wrap {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.ctdl-cr-user-avatar-wrap img,
.ctdl-cr-user-avatar-wrap .ctdl-avatar-fallback {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.ctdl-cr-status-dot {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #22c55e;
	border: 2px solid #ffffff;
}

.ctdl-cr-user-info {
	min-width: 0;
	flex: 1;
}

.ctdl-cr-user-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctdl-cr-user-sub {
	font-size: 0.72rem;
	color: #64748b;
}

.ctdl-cr-history-start {
	text-align: center;
	padding: 1.5rem 1rem 0.5rem 1rem;
	color: #94a3b8;
	font-size: 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-cr-history-start i {
	font-size: 1.6rem;
	color: #cbd5e1;
}

.ctdl-cr-history-loader {
	text-align: center;
	padding: 0.75rem;
	color: #64748b;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.ctdl-cr-history-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	margin: 0.5rem auto;
	background-color: #f1f5f9;
	color: #2563eb;
	border: 1px solid #cbd5e1;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, transform 0.1s;
	width: fit-content;
}

.ctdl-cr-history-banner:hover {
	background-color: #e2e8f0;
	color: #1d4ed8;
	transform: translateY(-1px);
}

/* --- 0016: chat emoji picker + attachments --- */
.ctdl-emoji-picker {
	position: absolute;
	z-index: 1200;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
	max-height: min(50vh, 320px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-bottom: 0.35rem;
}
.ctdl-emoji-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.45rem 0.65rem;
	border-bottom: 1px solid #e2e8f0;
	background: #f8fafc;
}
.ctdl-emoji-picker-title {
	font-weight: 600;
	font-size: 0.9rem;
	color: #334155;
}
.ctdl-emoji-picker-close {
	border: none;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: #64748b;
	padding: 0.15rem 0.4rem;
}
.ctdl-emoji-picker-body {
	overflow-y: auto;
	padding: 0.4rem 0.5rem 0.6rem;
	-webkit-overflow-scrolling: touch;
}
.ctdl-emoji-group-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0.35rem 0.15rem;
}
.ctdl-emoji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
	gap: 0.15rem;
}
.ctdl-emoji-btn {
	border: none;
	background: transparent;
	font-size: 1.35rem;
	line-height: 1.4;
	cursor: pointer;
	border-radius: 8px;
	padding: 0.15rem;
}
.ctdl-emoji-btn:hover,
.ctdl-emoji-btn:focus {
	background: #e2e8f0;
	outline: none;
}
.ctdl-cr-msg-attach {
	margin-top: 0.35rem;
}
.ctdl-cr-msg-attach img {
	display: block;
	max-width: min(100%, 360px);
	max-height: 280px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	cursor: pointer;
}
.ctdl-cr-msg-attach a.ctdl-cr-file-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #2563eb;
	text-decoration: none;
	font-size: 0.92rem;
	word-break: break-all;
}
.ctdl-cr-msg-attach a.ctdl-cr-file-link:hover {
	text-decoration: underline;
}
.ctdl-cr-attach-status {
	font-size: 0.8rem;
	color: #64748b;
	margin: 0.25rem 0.15rem 0;
	min-height: 1.1em;
}
.ctdl-cr-input-toolbtn[aria-expanded="true"] {
	background: #e2e8f0;
}
@media (max-width: 640px) {
	.ctdl-emoji-picker {
		max-height: 45vh;
		left: 0.25rem !important;
		right: 0.25rem !important;
		max-width: none !important;
	}
}
/* ===== Sticky notes (VIEW_NOTES) ===== */
.ctdl-notes-container {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 60vh;
	overflow: auto;
	background:
		linear-gradient(90deg, rgba(148,163,184,0.12) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(rgba(148,163,184,0.12) 1px, transparent 1px) 0 0 / 24px 24px,
		#f8fafc;
}
.ctdl-notes-board {
	position: relative;
	min-width: 100%;
	min-height: 70vh;
	padding: 0.5rem;
}
.ctdl-notes-empty {
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	color: #64748b;
	font-size: 1.05rem;
	text-align: center;
}
.ctdl-stickynote {
	position: absolute;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: 4px;
	box-shadow: 2px 3px 8px rgba(15, 23, 42, 0.18);
	overflow: hidden;
	z-index: 1;
	min-width: 120px;
	min-height: 80px;
}
.ctdl-stickynote-dragging {
	z-index: 20;
	opacity: 0.95;
	box-shadow: 4px 6px 16px rgba(15, 23, 42, 0.28);
}
.ctdl-stickynote-titlebar {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.25rem;
	cursor: move;
	user-select: none;
	min-height: 1.6rem;
}
.ctdl-stickynote-drag-hint {
	flex: 1;
}
.ctdl-stickynote-titlebar button {
	appearance: none;
	border: none;
	background: transparent;
	color: rgba(15, 23, 42, 0.75);
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	line-height: 1;
	font-size: 0.85rem;
}
.ctdl-stickynote-titlebar button:hover {
	color: #0f172a;
	background: rgba(255,255,255,0.25);
	border-radius: 3px;
}
.ctdl-stickynote-body {
	flex: 1;
	width: 100%;
	border: none;
	resize: none;
	padding: 0.4rem 0.5rem;
	background: transparent;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.35;
	color: #0f172a;
	outline: none;
	box-sizing: border-box;
}
.ctdl-stickynote-resize {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	cursor: nwse-resize;
	background:
		linear-gradient(135deg, transparent 50%, rgba(15,23,42,0.35) 50%);
}
.ctdl-stickynote-palette {
	position: absolute;
	top: 1.7rem;
	left: 0.25rem;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 3px;
	box-shadow: 0 2px 8px rgba(15,23,42,0.2);
	z-index: 30;
}
.ctdl-stickynote-palette table {
	border-collapse: collapse;
}
.ctdl-stickynote-palette td {
	width: 18px;
	height: 18px;
	cursor: pointer;
	border: 1px solid rgba(15,23,42,0.15);
}
.ctdl-stickynote-palette td:hover {
	outline: 2px solid #0f172a;
}
@media (max-width: 700px) {
	.ctdl-notes-board {
		min-height: 60vh;
	}
	.ctdl-stickynote {
		max-width: 95%;
	}
}

/* ===== Tasks (VIEW_TASKS) ===== */
.ctdl-tasks-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 0.75rem 1rem 2rem;
	box-sizing: border-box;
}
.ctdl-tasks-container {
	max-width: 56rem;
	margin: 0 auto;
}
.ctdl-tasks-empty {
	text-align: center;
	color: #64748b;
	padding: 3rem 1rem;
	font-size: 1.05rem;
}
.ctdl-tasks-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ctdl-tasks-table th {
	text-align: left;
	background: #f1f5f9;
	color: #334155;
	font-weight: 600;
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid #e2e8f0;
	font-size: 0.9rem;
}
.ctdl-tasks-table td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
	font-size: 0.95rem;
}
.ctdl-tasks-row:hover {
	background: #f8fafc;
}
.ctdl-tasks-row-done td {
	color: #94a3b8;
	text-decoration: none;
}
.ctdl-tasks-row-done .ctdl-tasks-name-link {
	text-decoration: line-through;
	color: #94a3b8;
}
.ctdl-tasks-row-overdue .ctdl-tasks-col-due {
	color: #dc2626;
	font-weight: 600;
}
.ctdl-tasks-name-link {
	color: #1d4ed8;
	text-decoration: none;
	font-weight: 500;
}
.ctdl-tasks-name-link:hover {
	text-decoration: underline;
}
.ctdl-tasks-col-done {
	width: 5.5rem;
	text-align: center;
}
.ctdl-tasks-col-due {
	width: 8rem;
	white-space: nowrap;
}
.ctdl-tasks-col-cat {
	width: 9rem;
}
.ctdl-tasks-label {
	display: block;
	margin: 0.6rem 0;
	font-size: 0.9rem;
	color: #334155;
}
.ctdl-tasks-input {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.45rem 0.55rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
}
.ctdl-tasks-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.75rem 0 1rem;
}
.ctdl-tasks-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.ctdl-tasks-danger {
	margin-left: auto;
	color: #b91c1c;
}
@media (max-width: 700px) {
	.ctdl-tasks-col-cat { display: none; }
	.ctdl-tasks-table th:nth-child(4),
	.ctdl-tasks-table td:nth-child(4) { display: none; }
}





/* C40: Dark mode toggle in banner-right (between search and Log in/off) */
.ctdl-banner-buttons button#ctdl-theme-button {
	min-width: 2.35rem;
	padding: 0 0.75rem;
	background-color: #1e293b;
	border-color: #334155;
	color: #f8fafc;
}

.ctdl-banner-buttons button#ctdl-theme-button:hover {
	background-color: #334155;
	border-color: #475569;
	color: #ffffff;
}

.ctdl-banner-buttons button#ctdl-theme-button.ctdl-theme-active {
	background-color: #3182ce;
	border-color: #4299e1;
	color: #ffffff;
}

html[data-theme="dark"] .ctdl-banner-buttons button#ctdl-theme-button {
	background-color: #1e293b;
	border-color: #475569;
	color: #fde68a;
}

html[data-theme="dark"] .ctdl-banner-buttons button#ctdl-theme-button:hover,
html[data-theme="dark"] .ctdl-banner-buttons button#ctdl-theme-button.ctdl-theme-active {
	background-color: #3b82f6;
	border-color: #60a5fa;
	color: #ffffff;
}

/* =========================================================================
 * C40 Dark mode — component surface overrides
 * Covers remaining hardcoded light colors for the main chrome and views.
 * Semantic status colors (red/green icon accents in JS) stay as-is.
 * ========================================================================= */
html[data-theme="dark"] body,
html[data-theme="dark"] .ctdl-grid-main-item,
html[data-theme="dark"] .ctdl-grid-sidebar-item {
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-sidebar-button {
	border-color: var(--ctdl-bg-page);
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-sidebar-button:hover {
	background-color: var(--ctdl-bg-hover);
}

html[data-theme="dark"] .ctdl-sidebar-button-selected {
	background-color: var(--ctdl-bg-selected);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-modal {
	background-color: var(--ctdl-bg-surface);
	color: var(--ctdl-fg);
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-modal-footer {
	background-color: var(--ctdl-bg-elevated);
}

html[data-theme="dark"] .ctdl-fmsg-wrapper,
html[data-theme="dark"] .ctdl-formgrid-fieldset,
html[data-theme="dark"] .ctdl-card,
html[data-theme="dark"] .ctdl-mail-body-wrapper,
html[data-theme="dark"] .ctdl-note-card,
html[data-theme="dark"] .ctdl-task-card,
html[data-theme="dark"] .ctdl-wiki-page,
html[data-theme="dark"] .ctdl-blog-post {
	background-color: var(--ctdl-bg-surface) !important;
	border-color: var(--ctdl-border) !important;
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-mailbox-grid-container,
html[data-theme="dark"] .ctdl-mailbox-table,
html[data-theme="dark"] .ctdl-mailbox-reading-pane,
html[data-theme="dark"] .ctdl-mailbox-pane {
	background-color: var(--ctdl-bg-page) !important;
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-mailbox-table th {
	background-color: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg-secondary);
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-mailbox-table tr:hover,
html[data-theme="dark"] .ctdl-mailbox-table tr.ctdl-mail-selected {
	background-color: var(--ctdl-bg-hover) !important;
}

html[data-theme="dark"] .ctdl-mail-unread {
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] [contenteditable="true"] {
	background-color: var(--ctdl-bg-input);
	color: var(--ctdl-fg);
	border-color: var(--ctdl-border-input);
}

html[data-theme="dark"] a {
	color: var(--ctdl-link);
}

html[data-theme="dark"] .ctdl-msg-button a,
html[data-theme="dark"] .ctdl-msg-button {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-chat-dock,
html[data-theme="dark"] .ctdl-chat-window,
html[data-theme="dark"] .ctdl-im-window {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-formgrid-section-subheading,
html[data-theme="dark"] .ctdl-formgrid-section-heading {
	color: var(--ctdl-fg-secondary);
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-emoji-grid,
html[data-theme="dark"] .ctdl-emoji-picker {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--ctdl-scrollbar-track);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: var(--ctdl-scrollbar-thumb);
}

/* Soften common light-only utility backgrounds that appear in views */
html[data-theme="dark"] .ctdl-fmsg-wrapper .ctdl-fmsg-content,
html[data-theme="dark"] .ctdl-quoted-text,
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
	background-color: var(--ctdl-bg-code);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] #ctdl-room-controls button.ctdl-room-controls-btn .ctdl-files-badge {
	background: var(--ctdl-accent-strong);
	color: var(--ctdl-fg-on-accent);
}


/* =========================================================================
 * C41 Dark polish — forum message headers + forums directory tiles
 * Fixes: post header card stayed #f8fafc (unreadable light fg on white);
 *        roomlist tiles stayed #ffffff in dark theme.
 * Light theme unchanged (selectors scoped to html[data-theme="dark"]).
 * ========================================================================= */

/* Post header (author / date / reply buttons) */
html[data-theme="dark"] .ctdl-msg-header-card,
html[data-theme="dark"] .ctdl-msg-header {
	background-color: var(--ctdl-bg-elevated);
	border-color: var(--ctdl-border);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-msg-header-card .ctdl-msgsubject,
html[data-theme="dark"] .ctdl-msgsubject {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-username,
html[data-theme="dark"] .ctdl-username a {
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-msgdate {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-msg-button {
	background-color: var(--ctdl-bg-hover);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-msg-button:hover {
	background-color: var(--ctdl-border-strong);
}

html[data-theme="dark"] .ctdl-msg-button a {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-msg-button a:hover {
	color: var(--ctdl-fg);
}

/* Forums overview tiles (C35 2-col roomlist) */
html[data-theme="dark"] .ctdl-roomlist-room {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	box-shadow: var(--ctdl-shadow);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-roomlist-room:hover {
	background-color: var(--ctdl-bg-elevated);
	border-color: var(--ctdl-border-strong);
}

html[data-theme="dark"] .ctdl-roomlist-floor-label {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-roomlist-roomname {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-roomlist-room:hover .ctdl-roomlist-roomname {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-roomlist-roomname-hasnewmsgs {
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-roomlist-mtime {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-roomlist-icon-container.ctdl-roomlist-icon-new {
	background-color: var(--ctdl-accent-soft);
	color: var(--ctdl-accent);
}

html[data-theme="dark"] .ctdl-roomlist-icon-container.ctdl-roomlist-icon-old {
	background-color: var(--ctdl-bg-muted);
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-roomlist-forget-btn {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-roomlist-forget-btn:hover {
	color: var(--ctdl-danger);
	background-color: rgba(248, 113, 113, 0.12);
}

html[data-theme="dark"] .ctdl-roomlist-create-button {
	color: var(--ctdl-accent);
	background-color: var(--ctdl-accent-soft);
	border-color: var(--ctdl-accent-soft-border);
}

html[data-theme="dark"] .ctdl-roomlist-create-button:hover {
	background-color: var(--ctdl-accent-hover);
	color: var(--ctdl-fg-on-accent);
	border-color: var(--ctdl-accent-hover);
}


/* =========================================================================
 * C42 Dark polish — sidebar unread labels, brighter sidebar text,
 *                   mail attachment strip
 * ========================================================================= */

/* Brighter left-sidebar chrome text */
html[data-theme="dark"] .ctdl-grid-sidebar-item,
html[data-theme="dark"] .ctdl-sidebar-button,
html[data-theme="dark"] .ctdl-sidebar-button-selected {
	color: #f1f5f9;
}

html[data-theme="dark"] .ctdl-room-controls-kicker {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-room-controls-roomname,
html[data-theme="dark"] #ctdl-room-controls button.ctdl-room-controls-btn,
html[data-theme="dark"] #ctdl-room-controls button.ctdl-room-controls-btn > span:not(.ctdl-files-badge) {
	color: #f1f5f9;
}

html[data-theme="dark"] #ctdl-room-controls button.ctdl-room-controls-btn i {
	color: #e2e8f0;
}

/* Mail / chat folder list in left sidebar — brighter default labels */
html[data-theme="dark"] .ctdl_mail_folders li,
html[data-theme="dark"] .ctdl_chat_rooms li {
	color: #f1f5f9;
}

html[data-theme="dark"] .ctdl_mail_folders li:hover,
html[data-theme="dark"] .ctdl_chat_rooms li:hover {
	background-color: var(--ctdl-bg-hover);
	color: #ffffff;
}

html[data-theme="dark"] .ctdl_mail_folders li.ctdl_folder_selected,
html[data-theme="dark"] .ctdl_chat_rooms li.ctdl_chat_room_selected {
	background-color: var(--ctdl-bg-selected);
	color: #ffffff;
}

/* Must beat the light-theme !important near-black unread color */
html[data-theme="dark"] .ctdl_mail_folders li.ctdl-has-unread,
html[data-theme="dark"] .ctdl_chat_rooms li.ctdl-has-unread {
	color: #f1f5f9 !important;
}

html[data-theme="dark"] .ctdl-unread-dot {
	background-color: var(--ctdl-accent);
	box-shadow: 0 0 5px rgba(96, 165, 250, 0.7);
}

html[data-theme="dark"] .ctdl-new-mailbox-link {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-new-mailbox-link:hover {
	color: #f1f5f9;
}

html[data-theme="dark"] .ctdl_mail_folder_droppable {
	background-color: var(--ctdl-bg-hover);
	color: #f1f5f9;
}

/* Mail message wrapper (attachment list sits between header and body) */
html[data-theme="dark"] .ctdl-mmsg-wrapper {
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

/* Bare <ul> of attachments rendered by mailRenderOne (no class) */
html[data-theme="dark"] .ctdl-mmsg-content > ul {
	background-color: var(--ctdl-bg-elevated);
	border: 1px solid var(--ctdl-border);
	border-radius: 8px;
	padding: 0.5rem 0.75rem 0.5rem 1.5rem;
	margin: 0 0 1rem 0;
	list-style: none;
}

html[data-theme="dark"] .ctdl-mmsg-content > ul li {
	color: var(--ctdl-fg-secondary);
	margin: 0.2rem 0;
}

html[data-theme="dark"] .ctdl-mmsg-content > ul a {
	color: var(--ctdl-link);
}


/* =========================================================================
 * C43 Dark polish — Wiki + Blog content readability
 * ========================================================================= */

/* --- Wiki view --- */
html[data-theme="dark"] .ctdl-wiki-encap {
	background-color: var(--ctdl-bg-surface);
	color: var(--ctdl-fg);
	border: 1px solid var(--ctdl-border);
	border-radius: 8px;
}

html[data-theme="dark"] .ctdl-wiki-encap h1,
html[data-theme="dark"] .ctdl-wiki-encap h2,
html[data-theme="dark"] .ctdl-wiki-encap h3,
html[data-theme="dark"] .ctdl-wiki-encap h4,
html[data-theme="dark"] .ctdl-wiki-encap h5,
html[data-theme="dark"] .ctdl-wiki-encap h6 {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-wiki-encap p,
html[data-theme="dark"] .ctdl-wiki-encap li,
html[data-theme="dark"] .ctdl-wiki-encap td,
html[data-theme="dark"] .ctdl-wiki-encap th,
html[data-theme="dark"] .ctdl-wiki-encap span,
html[data-theme="dark"] .ctdl-wiki-encap div {
	color: inherit;
}

html[data-theme="dark"] .ctdl-wiki-encap a {
	color: var(--ctdl-link);
}

html[data-theme="dark"] .ctdl-wiki-encap code,
html[data-theme="dark"] .ctdl-wiki-encap pre {
	background-color: var(--ctdl-bg-code);
	color: var(--ctdl-fg-secondary);
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-wiki-encap table,
html[data-theme="dark"] .ctdl-wiki-encap th,
html[data-theme="dark"] .ctdl-wiki-encap td {
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-wiki-encap blockquote {
	border-left-color: var(--ctdl-accent);
	color: var(--ctdl-fg-secondary);
	background-color: var(--ctdl-bg-elevated);
}

/* Wiki / blog compose shells (editor already covers mail-body-wrapper) */
html[data-theme="dark"] .ctdl-compose.ctdl-compose-wiki,
html[data-theme="dark"] .ctdl-compose.ctdl-compose-blog {
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

/* --- Blog feed + post --- */
html[data-theme="dark"] .ctdl-blog-container {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-header {
	border-bottom-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-blog-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-description {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-blog-card {
	background: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	box-shadow: var(--ctdl-shadow);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-card:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	border-color: var(--ctdl-border-strong);
}

html[data-theme="dark"] .ctdl-blog-card-new {
	border-left-color: var(--ctdl-accent);
}

html[data-theme="dark"] .ctdl-blog-new-badge {
	background-color: var(--ctdl-accent);
	color: var(--ctdl-fg-on-accent);
}

html[data-theme="dark"] .ctdl-blog-new-comments-badge {
	background-color: var(--ctdl-accent-soft);
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-blog-meta,
html[data-theme="dark"] .ctdl-blog-meta-item {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-blog-post-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-post-title a {
	color: inherit;
}

html[data-theme="dark"] .ctdl-blog-post-title a:hover {
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-blog-excerpt {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-blog-footer {
	border-top-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-blog-avatar {
	background-color: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-blog-author-name {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-read-more {
	color: var(--ctdl-link);
}

html[data-theme="dark"] .ctdl-blog-read-more:hover {
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-blog-back-btn {
	background: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-blog-back-btn:hover {
	background: var(--ctdl-bg-hover);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-post-body {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-post-body h1,
html[data-theme="dark"] .ctdl-blog-post-body h2,
html[data-theme="dark"] .ctdl-blog-post-body h3,
html[data-theme="dark"] .ctdl-blog-post-body h4,
html[data-theme="dark"] .ctdl-blog-post-body h5,
html[data-theme="dark"] .ctdl-blog-post-body h6 {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-post-body a {
	color: var(--ctdl-link);
}

html[data-theme="dark"] .ctdl-blog-post-body code,
html[data-theme="dark"] .ctdl-blog-post-body pre {
	background-color: var(--ctdl-bg-code);
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-blog-comments-section {
	border-top-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-blog-comments-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-comment-card {
	background: var(--ctdl-bg-elevated);
	border-color: var(--ctdl-border);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-comment-author {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-comment-date {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-blog-comment-body {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-blog-add-comment-card {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	box-shadow: var(--ctdl-shadow);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-add-comment-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-add-comment-form textarea {
	background-color: var(--ctdl-bg-input);
	color: var(--ctdl-fg);
	border-color: var(--ctdl-border-input);
}

html[data-theme="dark"] .ctdl-blog-add-comment-form textarea:focus {
	border-color: var(--ctdl-accent);
	background-color: var(--ctdl-bg-input);
	box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

html[data-theme="dark"] .ctdl-blog-post-comment-btn {
	background-color: var(--ctdl-accent);
	color: var(--ctdl-fg-on-accent);
	border-color: var(--ctdl-accent-hover);
}

html[data-theme="dark"] .ctdl-blog-post-comment-btn:hover {
	background-color: var(--ctdl-accent-hover);
	border-color: var(--ctdl-accent-hover);
}

html[data-theme="dark"] .ctdl-blog-comment-delete-link,
html[data-theme="dark"] .ctdl-blog-post-delete-link {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-blog-comment-delete-link:hover,
html[data-theme="dark"] .ctdl-blog-post-delete-link:hover {
	color: var(--ctdl-danger);
}

/* Empty-state / error card used inside blog feed */
html[data-theme="dark"] .ctdl-blog-container .ctdl-error-card {
	background: var(--ctdl-bg-surface);
	box-shadow: var(--ctdl-shadow);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-container .ctdl-error-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-blog-container .ctdl-error-message {
	color: var(--ctdl-fg-muted);
}

/* ===== C44 Dark polish: Notes board (VIEW_NOTES) ===== */
html[data-theme="dark"] .ctdl-notes-container {
	background:
		linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--ctdl-bg-page);
}
html[data-theme="dark"] .ctdl-notes-board { background: transparent; }
html[data-theme="dark"] .ctdl-notes-empty { color: var(--ctdl-fg-muted); }
/* Sticky paper stays colorful (inline bg) -> keep dark text on it */
html[data-theme="dark"] .ctdl-stickynote { border-color: rgba(0,0,0,0.35); box-shadow: 2px 3px 10px rgba(0,0,0,0.5); }
html[data-theme="dark"] .ctdl-stickynote-body { color: #0f172a; background: transparent; caret-color: #0f172a; }
html[data-theme="dark"] .ctdl-stickynote-titlebar button { color: rgba(15,23,42,0.8); background: transparent; }
html[data-theme="dark"] .ctdl-stickynote-titlebar button:hover { color: #0f172a; background: rgba(255,255,255,0.3); }
html[data-theme="dark"] .ctdl-stickynote-palette {
	background: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	box-shadow: var(--ctdl-shadow);
}
html[data-theme="dark"] .ctdl-stickynote-palette td { border-color: var(--ctdl-border); }
html[data-theme="dark"] .ctdl-stickynote-palette td:hover { outline-color: var(--ctdl-fg); }

/* ===== C46 Notes sticky body readable on dark (overrides dark textarea input bg) ===== */
html[data-theme="dark"] .ctdl-stickynote textarea.ctdl-stickynote-body,
html[data-theme="dark"] textarea.ctdl-stickynote-body {
	background-color: transparent;
	background: transparent;
	color: #0f172a;
	caret-color: #0f172a;
	border-color: transparent;
}

/* ===== C47 Instant Messaging + Chat room dark (IM dock + VIEW_CHAT) ===== */

/* --- Instant Message popup (chat.js → .ctdl-chat-box) --- */
html[data-theme="dark"] .ctdl-chat-box {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-chat-body {
	background-color: var(--ctdl-bg-page);
}

html[data-theme="dark"] .ctdl-chat-system-notice {
	color: var(--ctdl-fg-muted);
	background-color: var(--ctdl-bg-muted);
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-chat-msg-incoming .ctdl-chat-bubble {
	background-color: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-chat-footer {
	background-color: var(--ctdl-bg-surface);
	border-top-color: var(--ctdl-border);
}

/* Beat .ctdl-chat-input:focus { background:#fff } (0,2,0) vs dark input (0,1,2) */
html[data-theme="dark"] .ctdl-chat-input,
html[data-theme="dark"] .ctdl-chat-input:focus {
	background-color: var(--ctdl-bg-input);
	color: var(--ctdl-fg);
	border-color: var(--ctdl-border-input);
	caret-color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-chat-input:focus {
	border-color: var(--ctdl-accent);
}

html[data-theme="dark"] .ctdl-chat-input::placeholder {
	color: var(--ctdl-fg-muted);
	opacity: 1;
}

/* --- Real-time chat room (view_chat.js → Mopeds etc.) --- */
html[data-theme="dark"] .ctdl-cr-container,
html[data-theme="dark"] .ctdl-cr-main {
	background-color: var(--ctdl-bg-surface);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-cr-header {
	background-color: var(--ctdl-bg-surface);
	border-bottom-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-header-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-cr-header-topic {
	color: var(--ctdl-fg-muted);
	border-left-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-header-btn {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-cr-header-btn:hover,
html[data-theme="dark"] .ctdl-cr-header-btn.active {
	background-color: var(--ctdl-bg-hover);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-cr-stream {
	background-color: var(--ctdl-bg-page);
}

html[data-theme="dark"] .ctdl-cr-divider::before,
html[data-theme="dark"] .ctdl-cr-divider::after {
	border-bottom-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-msg:hover {
	background-color: var(--ctdl-bg-hover);
}

html[data-theme="dark"] .ctdl-cr-msg-author {
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-cr-msg-text {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-cr-msg-badge {
	background-color: var(--ctdl-accent-soft);
	color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-cr-system-msg,
html[data-theme="dark"] .ctdl-cr-system-msg i {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-avatar-fallback {
	background: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-cr-input-dock {
	background-color: var(--ctdl-bg-surface);
	border-top-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-input-box,
html[data-theme="dark"] .ctdl-cr-input-box:focus-within {
	background-color: var(--ctdl-bg-input);
	border-color: var(--ctdl-border-input);
}

html[data-theme="dark"] .ctdl-cr-input-box:focus-within {
	border-color: var(--ctdl-accent);
	box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}

/* Transparent textarea over dark box; override hardcoded color:#0f172a */
html[data-theme="dark"] .ctdl-cr-input-textarea,
html[data-theme="dark"] textarea.ctdl-cr-input-textarea {
	color: var(--ctdl-fg);
	caret-color: var(--ctdl-fg);
	background: transparent;
	background-color: transparent;
}

html[data-theme="dark"] .ctdl-cr-input-textarea::placeholder {
	color: var(--ctdl-fg-muted);
	opacity: 1;
}

html[data-theme="dark"] .ctdl-cr-input-toolbar {
	border-top-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-input-toolbtn {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-cr-input-toolbtn:hover {
	color: var(--ctdl-fg);
	background-color: var(--ctdl-bg-hover);
}

html[data-theme="dark"] .ctdl-cr-sidebar {
	background-color: var(--ctdl-bg-muted);
	border-left-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-sidebar-header {
	color: var(--ctdl-fg-secondary);
	border-bottom-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-user-item:hover {
	background-color: var(--ctdl-bg-hover);
}

html[data-theme="dark"] .ctdl-cr-user-name {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-cr-status-dot {
	border-color: var(--ctdl-bg-muted);
}

html[data-theme="dark"] .ctdl-cr-history-banner {
	background-color: var(--ctdl-bg-elevated);
	color: var(--ctdl-accent-strong);
	border-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-cr-history-banner:hover {
	background-color: var(--ctdl-bg-hover);
	color: var(--ctdl-accent);
}

html[data-theme="dark"] .ctdl-cr-history-start,
html[data-theme="dark"] .ctdl-cr-history-loader {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-cr-history-start i {
	color: var(--ctdl-border-strong);
}

/* ===== C48 User Profile + .ctdl-middle dark (Benutzerprofil) ===== */

/* Page chrome used by user_profile / local_users / many config screens */
html[data-theme="dark"] .ctdl-middle {
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-configscreen-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-configscreen-instructions {
	color: var(--ctdl-fg-secondary);
}

/* Fieldset legend strip (profile card header with icon + username) */
html[data-theme="dark"] .ctdl-formgrid-fieldset legend {
	background-color: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg);
	border-bottom-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-legendmiddle,
html[data-theme="dark"] .ctdl-legendleft,
html[data-theme="dark"] .ctdl-legendright {
	color: var(--ctdl-fg);
}

/* Profile detail rows (Last seen / Full name / …) */
html[data-theme="dark"] .ctdl-formgrid-hack1,
html[data-theme="dark"] .ctdl-formgrid-hack1 label,
html[data-theme="dark"] .ctdl-formgrid-hack3,
html[data-theme="dark"] .ctdl-formgrid label {
	color: var(--ctdl-fg-secondary);
}

html[data-theme="dark"] .ctdl-formgrid-hack3 {
	color: var(--ctdl-fg);
}

/* Beat user_profile.js inline color:#1e293b on the large display name */
html[data-theme="dark"] .ctdl-msg-header .ctdl-username {
	color: var(--ctdl-fg) !important;
}

/* Beat user_profile.js inline color:#334155 on biography body */
html[data-theme="dark"] .ctdl-formgrid-fieldset div[style*="color: #334155"],
html[data-theme="dark"] .ctdl-formgrid-fieldset div[style*="color:#334155"] {
	color: var(--ctdl-fg-secondary) !important;
}

/* Light border under avatar header (inline border-bottom: #e2e8f0) */
html[data-theme="dark"] .ctdl-msg-header {
	border-bottom-color: var(--ctdl-border);
}

/* Missing-profile / validation box on same screen */
html[data-theme="dark"] .ctdl-form-error-box {
	background-color: #3f1d1d;
	border-color: #7f1d1d;
	border-left-color: var(--ctdl-danger);
	color: #fecaca;
}

/* ===== C50 Settings/Config tab panes dark (User Settings + System Configuration) ===== */

/* Tabbed config dialogs (userconf.js / sysconf.js via util.js renderTabs) */
html[data-theme="dark"] .ctdl-tab-pane {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	color: var(--ctdl-fg);
	box-shadow: var(--ctdl-shadow);
}

html[data-theme="dark"] .ctdl-tab-nav {
	border-bottom-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-tab-btn {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-tab-btn:hover {
	color: var(--ctdl-fg);
}

/* Active tab keeps green accent (#059669) — readable on dark */
html[data-theme="dark"] .ctdl-tab-btn.ctdl-tab-active {
	color: #34d399;
	border-bottom-color: #34d399;
}

/* Section headings inside tab panes (sysconf "General site configuration…") */
html[data-theme="dark"] .ctdl-formgrid-subsection-heading {
	color: var(--ctdl-fg-secondary);
}

/* ===== C51 Calendar week/day Dark Mode (Kalender) =====
 * Fixes Michael 2026-10-26:
 *   - Kalender week grid stayed bright White while chrome was dark
 * Root cause: .ctdl-calendar-day { background-color: White } and
 *   ruler/hour/event colors hardcoded (WhiteSmoke / SlateGrey /
 *   LightGrey / #e0edff / #0f172a / #1d4ed8) — no dark overrides.
 * view_calendar.js builds week/day/3-day/5-day from these classes only
 *   (no separate month-view CSS classes found).
 * Light theme unchanged. Palette = C40 tokens. Apply AFTER C50.
 */

/* Calendar chrome / layout wrappers */
html[data-theme="dark"] .ctdl-calendar-container,
html[data-theme="dark"] .ctdl-calendar-content,
html[data-theme="dark"] .ctdl-calendar-toplabels,
html[data-theme="dark"] .ctdl-calendar-week,
html[data-theme="dark"] .ctdl-calendar-week-labels {
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

/* Day column headers (Mo 2026-Okt-26 …) */
html[data-theme="dark"] .ctdl-calendar-label {
	color: var(--ctdl-fg);
}

/* Day columns — primary white-grid bug */
html[data-theme="dark"] .ctdl-calendar-day {
	background-color: var(--ctdl-bg-surface);
	border-color: var(--ctdl-border);
	color: var(--ctdl-fg);
}

/* Hours ruler (left) */
html[data-theme="dark"] .ctdl-calendar-ruler {
	border-color: var(--ctdl-border);
	background-color: var(--ctdl-bg-elevated);
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-calendar-ruler-hour {
	border-top-color: var(--ctdl-border-strong);
	color: var(--ctdl-fg-muted);
}

/* Hour / half-hour grid lines inside day columns */
html[data-theme="dark"] .ctdl-calendar-hour-in-day {
	border-top-color: var(--ctdl-border);
}

html[data-theme="dark"] .ctdl-calendar-half-hour-in-day {
	border-top-color: var(--ctdl-border-strong);
}

/* Timed event chips */
html[data-theme="dark"] .ctdl-calendar-item {
	color: var(--ctdl-fg);
	background-color: var(--ctdl-accent-soft);
	border-color: var(--ctdl-accent-soft-border);
	border-left-color: var(--ctdl-accent);
	box-shadow: var(--ctdl-shadow);
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-in-day:hover {
	background-color: var(--ctdl-bg-hover);
	box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

html[data-theme="dark"] .ctdl-calendar-item-time {
	color: var(--ctdl-accent);
}

html[data-theme="dark"] .ctdl-calendar-item-title {
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-calendar-item-location,
html[data-theme="dark"] .ctdl-calendar-item-organizer {
	color: var(--ctdl-fg-muted);
}

html[data-theme="dark"] .ctdl-calendar-item-location i,
html[data-theme="dark"] .ctdl-calendar-item-organizer i {
	color: var(--ctdl-fg-muted);
}

/* All-day events: keep strong accent bar + white text (readable on dark) */
html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-allday {
	background-color: var(--ctdl-accent-hover);
	color: var(--ctdl-fg-on-accent);
	border-color: var(--ctdl-accent);
	border-left-color: var(--ctdl-accent-strong);
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-allday:hover {
	background-color: var(--ctdl-accent);
	box-shadow: 0 2px 6px rgba(96, 165, 250, 0.35);
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-allday .ctdl-calendar-item-title {
	color: var(--ctdl-fg-on-accent);
}

html[data-theme="dark"] .ctdl-calendar-item-source {
	color: #c4b5fd;
}

html[data-theme="dark"] .ctdl-calendar-item-source i {
	color: #a78bfa;
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-overlay {
	background-color: rgba(124, 58, 237, 0.22);
	border-color: rgba(167, 139, 250, 0.35);
	border-left-color: #a78bfa;
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-in-day:hover {
	background-color: rgba(124, 58, 237, 0.32);
	box-shadow: 0 4px 12px rgba(167, 139, 250, 0.28);
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-allday {
	background-color: #6d28d9;
	border-color: #7c3aed;
	border-left-color: #a78bfa;
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-allday .ctdl-calendar-item-source {
	color: #ede9fe;
}

html[data-theme="dark"] .ctdl-calendar-item.ctdl-calendar-item-overlay.ctdl-calendar-item-allday .ctdl-calendar-item-source i {
	color: #ddd6fe;
}

/* ===== C45 Mobile Safari / narrow viewport =====
 * Goals at ~390px (iPhone Safari):
 *  - Collapse permanent 12vw sidebar → off-canvas drawer + hamburger
 *  - Keep #lilo (Log on / Log in) fully visible and tappable
 *  - Truncate banner title so "Home | home" no longer looks like "Homehome"
 *  - Dark-mode chrome stays consistent (uses theme tokens)
 * Needs index.html hamburger + overlay + body.ctdl-sidebar-open toggle.
 * ---------------------------------------------------------------------- */

/* Hamburger: hidden on desktop; shown in mobile MQ below */
#ctdl-sidebar-open {
	display: none;
	list-style: none;
}
#ctdl-sidebar-open button,
button#ctdl-sidebar-open-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	min-height: 2.35rem;
	padding: 0 0.65rem;
	background-color: transparent;
	border: 1px solid rgba(248, 250, 252, 0.35);
	border-radius: 8px;
	color: var(--ctdl-fg-on-banner, #f8fafc);
	cursor: pointer;
}
#ctdl-sidebar-open button:hover,
button#ctdl-sidebar-open-btn:hover {
	background-color: rgba(248, 250, 252, 0.12);
	border-color: rgba(248, 250, 252, 0.55);
}

/* Drawer overlay (sibling of grid; inert until open) */
#ctdl-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(2px);
	z-index: 1090;
}

@media (max-width: 768px) {
	/* Holy-grail → single column; main gets full width */
	.ctdl-main-grid-container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			'ctdl-mg-banner'
			'ctdl-mg-main';
	}

	/* Sidebar becomes off-canvas drawer (still in DOM for JS roomlist) */
	.ctdl-grid-sidebar-item {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(82vw, 288px);
		max-width: 288px;
		grid-area: unset;
		z-index: 1100;
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		overflow-x: hidden;
		overflow-y: auto;
		box-shadow: none;
		border-right: 1px solid var(--ctdl-border, #334155);
		background-color: var(--ctdl-bg-page);
	}
	body.ctdl-sidebar-open .ctdl-grid-sidebar-item {
		transform: translateX(0);
		box-shadow: 8px 0 28px rgba(0, 0, 0, 0.35);
	}
	body.ctdl-sidebar-open #ctdl-sidebar-overlay {
		display: block;
	}

	/* Show hamburger */
	#ctdl-sidebar-open {
		display: list-item;
	}
	#ctdl-sidebar-open button,
	button#ctdl-sidebar-open-btn {
		display: inline-flex;
	}

	/* Banner: prioritize right cluster (theme + Log on) */
	.ctdl-banner-buttons {
		padding: 0 0.4rem;
		gap: 0.25rem;
	}
	.ctdl-banner-left {
		flex: 1 1 auto;
		min-width: 0;
		gap: 0.35rem;
	}
	.ctdl-banner-center {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 42%;
		overflow: hidden;
		justify-content: flex-end;
		padding: 0;
	}
	.ctdl-banner-right {
		flex: 0 0 auto;
		gap: 0.35rem;
	}

	/* Reclaim width: hide Citadel logo mark on phone */
	#ctdl-logo {
		display: none !important;
	}

	/* Title: single-line ellipsis — kills visual "Homehome" */
	.ctdl-banner-buttons button#ctdl_banner_title {
		display: inline-block;
		max-width: min(34vw, 8.5rem);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
		font-size: 0.88rem;
	}
	/* Drop wiki page suffix (" | home") on narrow; room name is enough */
	.ctdl-banner-buttons button#ctdl_banner_title #ctdl_page_title {
		display: none;
	}

	.ctdl-banner-buttons #ctdl-room-icon {
		flex-shrink: 0;
	}
	.ctdl-banner-buttons #ctdl-room-icon i {
		font-size: 1.1rem !important;
	}

	/* Compact action pills in center (Edit this page etc.) */
	.ctdl-banner-center button {
		padding: 0 0.55rem;
		font-size: 0.72rem;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Log on / theme must never shrink away */
	.ctdl-banner-buttons button#lilo {
		flex-shrink: 0;
		padding: 0 0.7rem;
		font-size: 0.8rem;
		min-width: 4.5rem;
	}
	.ctdl-banner-buttons button#ctdl-theme-button {
		flex-shrink: 0;
	}

	/* Sidebar labels readable once drawer is open (full 288px) */
	.ctdl-sidebar-button {
		font-size: 0.95em;
		white-space: nowrap;
	}
	.ctdl-room-controls {
		margin: 0.5rem 0.55rem 0.65rem;
	}
}

/* Extra-narrow phones (~390 and below): hide center actions; Edit still
 * reachable after Log on / from wiki content affordances later if needed.
 * Keeps Log on fully on-screen even with long German strings. */
@media (max-width: 420px) {
	.ctdl-banner-center {
		display: none;
	}
	.ctdl-banner-buttons button#ctdl_banner_title {
		max-width: min(46vw, 11rem);
	}
}

/* Dark: drawer edge uses theme border already; overlay same for both themes */
html[data-theme="dark"] #ctdl-sidebar-overlay {
	background: rgba(0, 0, 0, 0.55);
}

/* Dark theme: contacts (Adressen) list pane + viewer */
html[data-theme="dark"] .ctdl-contacts_container,
html[data-theme="dark"] .ctdl-contacts_viewer {
	background-color: var(--ctdl-bg-page);
	color: var(--ctdl-fg);
}

html[data-theme="dark"] .ctdl-contacts_list {
	background-color: var(--ctdl-bg-page);
	border-right-color: var(--ctdl-border);
	color: var(--ctdl-fg);
}