html, body {
	overflow: hidden;
	height: 100vh;
	margin: 0;
	padding: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}
body {
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
	background-color: #ffffff;
	color: #333333;
}

/* Dark mode styles - Global styles applied to all pages */
body.dark-mode,
html.dark-mode body {
	background-color: #000000;
	color: #ffffff;
}

html.dark-mode {
	background-color: #000000;
}

body.dark-mode .main-button-container {
	background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .confirmation-box {
	background-color: #2d2d2d;
	color: #e0e0e0;
}

body.dark-mode #doc-body {
	background-color: #1a1a1a;
	color: #ffffff;
	border-color: #444;
}

/* Reader page specific dark mode */
body.dark-mode #docpage,
body.dark-mode #docpage-wrapper,
html.dark-mode #docpage,
html.dark-mode #docpage-wrapper {
	background-color: #1a1a1a;
	color: #ffffff;
}

/* Reader / doc body links: light blue on dark (unvisited + dataset) */
body.dark-mode #doc-body a:link,
html.dark-mode #doc-body a:link {
	color: #7ec8ff;
}
body.dark-mode #doc-body a:hover,
html.dark-mode #doc-body a:hover {
	color: #b3ddff;
}
body.dark-mode #doc-body .dataset,
body.dark-mode #doc-body .dataset-ref,
html.dark-mode #doc-body .dataset,
html.dark-mode #doc-body .dataset-ref {
	color: #7ec8ff !important;
}
body.dark-mode #doc-body .dataset:hover,
html.dark-mode #doc-body .dataset:hover {
	color: #b3ddff !important;
}

body.dark-mode #profile {
	background-color: #2d2d2d;
	color: #ffffff;
}

body.dark-mode #stamp,
body.dark-mode #share {
	color: #e0e0e0;
}

body.dark-mode #site-notes {
	background-color: #2d2d2d !important;
	color: #e0e0e0 !important;
}

body.dark-mode hr {
	border-color: #444;
}

/* Frontpage (embedded in main.html) */
body.dark-mode #feed-main,
html.dark-mode #feed-main {
	background-color: transparent;
	color: #e8e8f0;
}

body.dark-mode .front-col,
html.dark-mode .front-col {
	background-color: #1a1a1f;
}

body.dark-mode .front-col h2,
html.dark-mode .front-col h2 {
	color: #c8cce8;
}

body.dark-mode .doc-card,
html.dark-mode .doc-card {
	border-bottom-color: #2d3145;
}

body.dark-mode .doc-title,
html.dark-mode .doc-title {
	color: #f0f0f8;
}

body.dark-mode .doc-meta,
body.dark-mode .loading-row,
body.dark-mode .empty-row,
html.dark-mode .doc-meta,
html.dark-mode .loading-row,
html.dark-mode .empty-row {
	color: #9aa0b8;
}

body.dark-mode .doc-snippet,
html.dark-mode .doc-snippet {
	color: #c4c8dc;
}

body.dark-mode .doc-more-btn,
html.dark-mode .doc-more-btn {
	color: #9eb4ff;
}

/* Header styles — opaque scrim so scrolling text does not show through the bar */
header.color-scheme-gradient,
#page-header.color-scheme-gradient {
	margin: 0;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.88);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(224, 224, 255, 0.88));
	border-bottom: 1px solid rgba(186, 192, 255, 0.75);
	width: 100%;
	box-sizing: border-box;
	min-height: 55px; /* 54px toolbar row + 1px border (border-box) */
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

header.color-scheme-gradient nav,
#page-header.color-scheme-gradient nav {
	background: inherit;
}

header.color-scheme-gradient nav {
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}

header.color-scheme-gradient nav > div {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

/* Header logo: flush to header edges (no gap); SVG may still have internal whitespace */
header.color-scheme-gradient #logo,
#page-header #logo {
	display: block;
	height: 54px;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
}

/* Adjust main padding to account for fixed header + 20px extra spacing - matching head.css */
main {
	padding-top: 75px; /* ~55px header (54px row + border) + 20px extra spacing */
}

/*
 * Dark header: deep navy when body/html are dark — do not rely on .dark-mode on the header
 * (cookie loader only toggles body/html; user iframe sync may not have run yet).
 */
html.dark-mode header.color-scheme-gradient,
html.dark-mode #page-header.color-scheme-gradient,
body.dark-mode header.color-scheme-gradient,
body.dark-mode #page-header.color-scheme-gradient,
.color-scheme-gradient.dark-mode,
header.color-scheme-gradient.dark-mode,
#page-header.color-scheme-gradient.dark-mode {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 26, 61, 0.5) 58%, rgba(0, 188, 212, 0.5) 100%) !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
	border-bottom-color: rgba(30, 58, 74, 0.85) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Fixed header + hide-on-scroll (main.html; phone rules live in main_phone.css) */
#page-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: transform 160ms ease-in-out;
	will-change: transform;
	z-index: 1000;
}

#page-header.hidden {
	transform: translateY(-100%);
}

/* SVG styling for dark mode - invert colors */
body.dark-mode img[src$=".svg"],
html.dark-mode img[src$=".svg"],
body.dark-mode .share-icon,
body.dark-mode .geopin-icon {
	filter: brightness(0) invert(1);
}

/* Header logo: keep original SVG colors (reads fine on dark header) */
body.dark-mode img#logo,
html.dark-mode img#logo {
	filter: none !important;
}

/* Toolbar SVGs (dajia, data search): win over .main-button-img and layout rules */
html.dark-mode header.color-scheme-gradient img.main-button-img[src$=".svg"],
html.dark-mode #page-header.color-scheme-gradient img.main-button-img[src$=".svg"],
body.dark-mode header.color-scheme-gradient img.main-button-img[src$=".svg"],
body.dark-mode #page-header.color-scheme-gradient img.main-button-img[src$=".svg"],
html.dark-mode #search-header-icon,
body.dark-mode #search-header-icon {
	filter: brightness(0) invert(1) !important;
}

html.dark-mode header.color-scheme-gradient img#person,
html.dark-mode #page-header.color-scheme-gradient img#person,
body.dark-mode header.color-scheme-gradient img#person,
body.dark-mode #page-header.color-scheme-gradient img#person {
	filter: brightness(0) invert(1) !important;
}

/* Keep colored SVGs as-is (like heart.svg, light.svg, palette.svg, brain.svg, logos) */
/* More specific selectors to ensure they override the general rule above */
body.dark-mode img[src*="heart.svg"],
body.dark-mode img[src*="light.svg"],
body.dark-mode img[src*="source.svg"],
body.dark-mode img[src*="palette.svg"],
body.dark-mode img[src$="palette.svg"],
body.dark-mode img[src*="/img/palette.svg"],
body.dark-mode img[src*="brain.svg"],
body.dark-mode img[src$="brain.svg"],
body.dark-mode img[src*="/img/brain.svg"],
body.dark-mode img[src*="li_logo.svg"],
body.dark-mode img[src$="li_logo.svg"],
body.dark-mode img[src*="/img/li_logo.svg"],
body.dark-mode img[src*="fb_logo.svg"],
body.dark-mode img[src$="fb_logo.svg"],
body.dark-mode img[src*="/img/fb_logo.svg"],
body.dark-mode img[src*="logo.svg"],
body.dark-mode img[src$="logo.svg"],
body.dark-mode img[src*="/img/logo.svg"],
body.dark-mode img[src*="qr_logo.png"],
body.dark-mode img[src$="qr_logo.png"],
body.dark-mode img[src*="/img/qr_logo.png"],
/* Exclude share-icons that are logos from filter */
body.dark-mode .share-icon[src*="li_logo.svg"],
body.dark-mode .share-icon[src*="fb_logo.svg"],
body.dark-mode img[src*="standard.svg"],
html.dark-mode img[src*="standard.svg"],
body.dark-mode img[src*="/img/standard.svg"],
html.dark-mode img[src*="/img/standard.svg"],
body.dark-mode img[src*="zoom.svg"],
html.dark-mode img[src*="zoom.svg"],
body.dark-mode img[src*="/img/zoom.svg"],
html.dark-mode img[src*="/img/zoom.svg"],
body.dark-mode img[src*="expand.svg"],
html.dark-mode img[src*="expand.svg"],
body.dark-mode img[src*="/img/expand.svg"],
html.dark-mode img[src*="/img/expand.svg"] {
	filter: none !important;
}

/* Zoom-level icons: grey frame stays; dots use currentColor on the img */
img[src*="standard.svg"],
img[src*="/img/standard.svg"],
img[src*="zoom.svg"],
img[src*="/img/zoom.svg"],
img[src*="expand.svg"],
img[src*="/img/expand.svg"] {
	color: #1a1a1a;
}
body.dark-mode img[src*="standard.svg"],
html.dark-mode img[src*="standard.svg"],
body.dark-mode img[src*="/img/standard.svg"],
html.dark-mode img[src*="/img/standard.svg"],
body.dark-mode img[src*="zoom.svg"],
html.dark-mode img[src*="zoom.svg"],
body.dark-mode img[src*="/img/zoom.svg"],
html.dark-mode img[src*="/img/zoom.svg"],
body.dark-mode img[src*="expand.svg"],
html.dark-mode img[src*="expand.svg"],
body.dark-mode img[src*="/img/expand.svg"],
html.dark-mode img[src*="/img/expand.svg"] {
	color: #f5f5f5;
}

/* Visited links in dark mode - use a lighter color instead of purple */
body.dark-mode a:visited,
html.dark-mode a:visited {
	color: #9bb5ff !important;
}
body.dark-mode a:visited:hover,
html.dark-mode a:visited:hover {
	color: #b8cfff !important;
}

/* SVG elements that use currentColor will inherit text color */
body.dark-mode svg {
	color: #ffffff;
}

/* Only apply currentColor to SVG elements that don't have explicit fill/stroke colors */
/* Exclude colored SVGs like palette.svg that have explicit fill colors */
body.dark-mode svg:not([data-preserve-colors]) path:not([fill]),
body.dark-mode svg:not([data-preserve-colors]) circle:not([fill]),
body.dark-mode svg:not([data-preserve-colors]) line:not([stroke]),
body.dark-mode svg:not([data-preserve-colors]) rect:not([fill]) {
	stroke: currentColor;
	fill: currentColor;
}

/* For palette.svg specifically, preserve all colors and only change stroke to white */
body.dark-mode svg[data-palette] path[stroke] {
	stroke: #ffffff;
}

/* Unified color scheme approach - using direct class on elements */
.color-scheme.dark-mode {
	color: #ffffff;
}

/* Chart canvas - needs black background */
.color-scheme.dark-mode.chart-canvas,
canvas.color-scheme.dark-mode.chart-canvas {
	background-color: #000000 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Chart container */
.color-scheme.dark-mode.chart {
	background-color: #000000 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 10px auto;
}

.color-scheme.dark-mode.chart h3 {
	color: #d8d8e8;
}

/* Feature wrapper */
.color-scheme.dark-mode.feature-wrapper,
.feature-wrapper.dark-mode {
	background-color: transparent;
}

/* Feature content (no dashed border — reads as a bright frame around charts) */
#doc-body .color-scheme.dark-mode.feature-content,
.doc-body .color-scheme.dark-mode.feature-content,
.color-scheme.dark-mode.feature-content {
	background-color: #2a2a30 !important;
	border: none !important;
}

/* Feature content containing charts - remove padding and border to eliminate grey frame */
#doc-body .color-scheme.dark-mode.feature-content:has(.chart),
.doc-body .color-scheme.dark-mode.feature-content:has(.chart),
.color-scheme.dark-mode.feature-content:has(.chart) {
	padding: 0 !important;
	background-color: transparent !important;
	border: none !important;
}

/* Source note */
.color-scheme.dark-mode.source-note {
	color: #b0b0b0;
}

/* Analysis item */
.color-scheme.dark-mode.analysis-item {
	border-color: #444 !important;
}
searchPage {
    top: 0;
    left: 0;
    padding-left: 0px;
    width: 100%;
	align-items: center;
}

#search-main-layout {
    position: relative;
}

.selected-data-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    width: fit-content;
    max-width: min(42vw, 520px);
    max-height: calc(100% - 24px);
    padding: 8px 10px 10px 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    opacity: 0.35;
    transition: opacity 150ms ease, max-height 180ms ease, min-width 180ms ease, padding 180ms ease;
    overflow: hidden;
}

.selected-data-panel:hover,
.selected-data-panel:focus-within {
    opacity: 1;
}

.selected-data-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
}

.selected-data-title {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.selected-data-toggle {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f7f7f7;
    cursor: pointer;
    width: 22px;
    height: 22px;
    line-height: 18px;
    padding: 0;
    font-size: 16px;
}

.selected-data-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: auto;
}

.selected-data-panel.is-collapsed {
    min-width: 52px;
    max-height: 28px;
    padding: 3px 6px;
    opacity: 0.9;
}

.selected-data-panel.is-collapsed .selected-data-title,
.selected-data-panel.is-collapsed .selected-data-list {
    display: none;
}
.line {
	position: absolute;
	border-left: 1px dotted #ccc;
	height: 100%;
	left: 10px;
	top: 0;
	z-index: -1;
}
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

	
/* Menu container styles */
.menu-container {
	border: 1px solid grey;
	padding: 5px;
	margin: 5px 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.menu-container-title {
	font-weight: bold;
	padding: 5px;
}

.menu-container-body {
	display: flex;
	gap: 10px;
	padding: 5px;
}

.menu-item-wrapper {
	margin: 5px 0;
}

/* Hover styling (replaces JS `mouseOverItem()` usage in main.html) */
.search-hit-item {
	cursor: pointer;
	transition: color 120ms ease;
}
.search-hit-item:hover {
	color: #1a73e8;
}
body.dark-mode .search-hit-item:hover {
	color: #8ab4f8;
}

.fc {
    padding: 5px;
    width: 100%; 
    height: 100%; 
    margin: 0 auto;
    overflow-y: hidden; 
}
.fc-toolbar {
    padding: 0;
    margin: 0;
}
.fc-col-header-cell {
    padding: 2px;
    margin: 0;
}
.fc-event {
    padding: 2px;
    margin: 1px;
    font-size: 10px;
}
.fc-event-dot {
    display: none;
}
.fc-daygrid-day {
    padding: 5px;
    margin: 0;
}
.fc-event-title {
    padding: 0;
    margin: 0;
}
/* Calendar: match header blue theme (FC6 defaults today cell to yellow/cream) */
#calendarPage,
#calendarPage .fc {
    --fc-page-bg-color: #f7f9ff;
    --fc-neutral-bg-color: #f4f7ff;
    --fc-today-bg-color: #eef3ff;
    background-color: #f7f9ff;
}
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
    background-color: #eef3ff !important;
}
.fc-day-past {
    background-color: #f2f5fc;
    color: #999;
    opacity: 0.5;
}
body.dark-mode #calendarPage,
body.dark-mode #calendarPage .fc,
html.dark-mode #calendarPage,
html.dark-mode #calendarPage .fc {
    --fc-page-bg-color: #141820 !important;
    --fc-neutral-bg-color: #1a2030 !important;
    --fc-today-bg-color: #1e2840 !important;
    background-color: #141820 !important;
    color: #e8e8e8 !important;
}
body.dark-mode .fc .fc-daygrid-day.fc-day-today,
body.dark-mode .fc .fc-timegrid-col.fc-day-today,
html.dark-mode .fc .fc-daygrid-day.fc-day-today,
html.dark-mode .fc .fc-timegrid-col.fc-day-today {
    background-color: #1e2840 !important;
}
body.dark-mode .fc-day-past,
html.dark-mode .fc-day-past {
    background-color: #181c28 !important;
    color: #888 !important;
}
.fc-daygrid-day-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fc-timegrid-slot-lane:hover {
    background-color: lightgrey;
}
.fc-timegrid-slot-lane.dragover {
    background-color: lightgrey;
}
#calendarPage {
    height: 90vh;
    width: 100%;
    padding: 15px;
    max-height: 100%;
    overflow-y: auto;
}
.dataset {
    color: blue;             
    text-decoration: underline;
    cursor: pointer;
}
.dataset:hover {
    color: darkblue;
    text-decoration: none;
}

/* Dataset linkage without "link" styling (used for inline math variables, etc.) */
.dataset-ref {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.dataset-ref:hover {
    color: inherit;
    text-decoration: none;
}
.div {
    padding: 10px;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

/* Main header toolbar buttons (main.html + head.html): 54px slot fits 50px icon + 2px border (box-sizing) */
header.color-scheme-gradient .main-button-container,
#page-header .main-button-container,
.main-button-container.main-button-link {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible; /* default .main-button-container is hidden; clips 50px SVGs */
}

#files-dropdown > summary.main-button-container {
    display: inline-flex;
    list-style: none;
}

/* User icon in header: align with toolbar row */
header.color-scheme-gradient #person-link,
#page-header #person-link {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    min-width: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

header.color-scheme-gradient #person-link #person,
#page-header #person-link #person,
header.color-scheme-gradient #person,
#page-header #person {
    height: 50px;
    width: auto;
    min-width: 24px;
    flex-shrink: 0;
    vertical-align: middle;
    display: block;
}

/* Main Button Styling - now targeting the <a> tags directly */
.main-button-container {
    text-decoration: none;
    margin-right: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.main-button-container:hover {
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.main-button-container:active {
    transform: scale(0.98);
}

.main-button-container.active {
    background: rgba(224, 224, 224, 0.3);
    border: 2px solid #bdbdbd;
}

.main-button-img {
    height: 50px;
    max-height: 50px;
    width: auto;
    border-radius: 6px;
    transition: all 0.3s ease;
    filter: brightness(1) contrast(1);
    display: block;
    object-fit: contain;
}

/* Toolbar icons: 50px tall inside 54px border-box slot (2px border each side) */
header.color-scheme-gradient .main-button-container .main-button-img,
#page-header .main-button-container .main-button-img {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/*
 * data.svg in header (search data): fill the #search-btn box (54×54 border-box) and center the graphic.
 * Absolute fill avoids flex + global img rules leaving a tiny bitmap pinned top-left.
 */
#search-header-icon,
header.color-scheme-gradient #search-header-icon,
#page-header #search-header-icon {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    box-sizing: border-box !important;
    pointer-events: none;
}

.main-button-container.active .main-button-img {
    filter: brightness(1.1) contrast(1.1) saturate(1.2);
}

/* All buttons use the same active styling */
#dajia-btn,
#search-btn,
#doc-btn,
#files-summary.main-button-container,
#cal-btn {
    border: 2px solid transparent;
    box-sizing: border-box;
}

#search-btn {
    position: relative;
    width: 54px;
    min-width: 54px;
    height: 54px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Disabled button styling */
.main-button-container.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.8);
}

/* (settings page removed) */

/* Expanded content padding */
.child .desc {
    padding: 12px 16px !important;
    margin-top: 8px;
}

/* Editor shell: dashed frame + min height (typography lives in docviewer.css) */
#doc-page.doc-shell--edit #doc-body {
    min-height: 500px;
    padding: 10px;
    padding-top: 30px;
    border: 1px dashed lightgrey;
}

/* Empty doc body: hint until first real content (true :empty only; stray <br> hides hint—acceptable tradeoff) */
#doc-page.doc-shell--edit #doc-body[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #8a90a8;
    font-weight: normal;
    font-style: italic;
    pointer-events: none;
}

body.dark-mode #doc-page.doc-shell--edit #doc-body[data-placeholder]:empty:before,
html.dark-mode #doc-page.doc-shell--edit #doc-body[data-placeholder]:empty:before {
    color: #64748b !important;
}

#docPage {
    /* Allow inner scroll containers to actually scroll inside a flex layout */
    min-height: 0;
    background-color: rgb(215, 237, 255);
    border-bottom: 10px solid #d3d3d3;
}

#doc-page {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 0;
    /* Keep child features from "sticking out" horizontally */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    background-color: #ffffff;
}

body.dark-mode #docPage,
html.dark-mode #docPage {
    background-color: #0b1220;
    border-bottom-color: #1e3a4a;
}

body.dark-mode #doc-page,
html.dark-mode #doc-page {
    background-color: #1a1a1a;
    color: #e8e8e8;
}

/* Print/export: avoid clipping content inside fixed-height/overflow containers.
   Let the "page" grow to the end of the written content. */
@media print {
    html, body {
        height: auto !important;
        overflow: visible !important;
    }
    main {
        height: auto !important;
        overflow: visible !important;
    }
    #docPage {
        height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        border-bottom: none !important;
    }
    #doc-page {
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        padding: 0 !important;
    }
    /* Hide left editor toolbar in print */
    #edit-tools,
    .edit-tools {
        display: none !important;
    }
}

/* Phone template adds this handle; keep it off desktop layout */
.edit-tools-phone-handle {
    display: none !important;
}

/* Remove focus border/outline from dataset search input while typing */
.search-text-input {
    border: none;
    outline: none;
    box-shadow: none;
}
.search-text-input:focus,
.search-text-input:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
}

/* Confirmation modal */
#confirmation-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.confirmation-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Files dropdown animation */
#files-dropdown .files-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    width: 54px;
    min-width: 54px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(-6px) scaleY(0.98);
    transform-origin: top left;
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    visibility: hidden;
    pointer-events: none;
}
#files-dropdown[open] .files-menu {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    visibility: visible;
    pointer-events: auto;
}

#files-dropdown .files-menu-action {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
}

#files-dropdown .files-menu-action:hover {
    background: #f7f7f7;
    border-color: #cfcfcf;
}

#files-dropdown .files-menu-icon {
    width: 24px;
    height: 24px;
    display: block;
}

#files-dropdown .files-menu-link {
    text-decoration: none;
}