/**
 * HAQ Member Document Drive front end styles.
 *
 * Every rule is scoped under .haqmedod-root, which wraps each shortcode. Nothing
 * outside that wrapper is ever touched, so the plugin cannot restyle a theme.
 *
 * The reverse problem is harder: themes style bare `table`, `button`, `input`,
 * `ul` and `p` inside post content, and those rules would otherwise reshape the
 * drive. The reset below neutralises the elements the plugin renders, and the
 * component rules that follow carry enough specificity to sit above a typical
 * theme content selector without resorting to !important.
 *
 * Colours are expressed as tokens derived from currentColor, so the drive
 * follows the theme's own light or dark palette instead of forcing white
 * panels onto a dark page. Override any --haqmedod-* custom property to restyle.
 *
 * Layout responds to the width of its container rather than the viewport, so
 * the drive stacks correctly inside a narrow theme column or page builder
 * section, not only on small screens. The wrapper is centred and capped at
 * --haqmedod-max-width so a full width page template does not stretch it edge to
 * edge; set that property to `none` to opt out.
 */

/* ---------------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------------ */

.haqmedod-root {
	--haqmedod-accent: #2271b1;
	--haqmedod-accent-contrast: #fff;
	--haqmedod-success: #007017;
	--haqmedod-warning: #8a6100;
	--haqmedod-danger: #b32d2e;

	/* Neutral greys read acceptably on both light and dark backgrounds; the
	   @supports block below replaces them with theme-aware equivalents. */
	--haqmedod-border: rgba(128, 128, 128, 0.35);
	--haqmedod-border-strong: rgba(128, 128, 128, 0.55);
	--haqmedod-soft: rgba(128, 128, 128, 0.1);
	--haqmedod-softer: rgba(128, 128, 128, 0.05);
	--haqmedod-muted: rgba(128, 128, 128, 1);

	/* Widest the drive is allowed to grow, so it lines up with a theme content
	   column instead of stretching edge to edge on a full width template. */
	--haqmedod-max-width: 1200px;

	--haqmedod-radius: 6px;
	--haqmedod-radius-sm: 4px;
	--haqmedod-gap: 16px;
	--haqmedod-font-size: 15px;
	--haqmedod-font-size-sm: 13px;
	--haqmedod-font-size-xs: 12px;
	--haqmedod-line: 1.5;
	--haqmedod-focus-width: 2px;
	--haqmedod-transition: 0.15s ease;

	/* Console palette defaults; Appearance settings override these on .haqmedod-root. */
	--haqmedod-console-link: var(--haqmedod-accent);
	--haqmedod-console-navy: #16324f;
	--haqmedod-console-tabs: #16324f;
	--haqmedod-console-green: var(--haqmedod-success);
	--haqmedod-console-red: var(--haqmedod-danger);
}

@supports (color: color-mix(in srgb, red, blue)) {
	.haqmedod-root {
		--haqmedod-border: color-mix(in srgb, currentColor 22%, transparent);
		--haqmedod-border-strong: color-mix(in srgb, currentColor 42%, transparent);
		--haqmedod-soft: color-mix(in srgb, currentColor 7%, transparent);
		--haqmedod-softer: color-mix(in srgb, currentColor 4%, transparent);
		--haqmedod-muted: color-mix(in srgb, currentColor 65%, transparent);
	}
}

/* ---------------------------------------------------------------------------
 * Scope and reset
 * ------------------------------------------------------------------------ */

.haqmedod-root {
	/* Keep any positioned child out of the theme's stacking contexts. */
	isolation: isolate;

	box-sizing: border-box;
	max-width: 100%;
	max-width: min(100%, var(--haqmedod-max-width));
	margin-block: 0;
	margin-inline: auto;
	color: inherit;
	font-family: inherit;
	font-size: var(--haqmedod-font-size);
	font-weight: 400;
	font-style: normal;
	line-height: var(--haqmedod-line);
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
}

.haqmedod-root *,
.haqmedod-root *::before,
.haqmedod-root *::after {
	box-sizing: border-box;
}

/* Neutralise theme styling of the elements the plugin renders. Component rules
   below add back exactly what is wanted. */
.haqmedod-root p,
.haqmedod-root h2,
.haqmedod-root h3,
.haqmedod-root ul,
.haqmedod-root ol,
.haqmedod-root li,
.haqmedod-root form,
.haqmedod-root fieldset,
.haqmedod-root legend,
.haqmedod-root figure,
.haqmedod-root table,
.haqmedod-root thead,
.haqmedod-root tbody,
.haqmedod-root tr,
.haqmedod-root th,
.haqmedod-root td {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	text-transform: none;
	letter-spacing: normal;
	list-style: none;
}

.haqmedod-root table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
}

.haqmedod-root h2,
.haqmedod-root h3 {
	font-weight: 600;
	line-height: 1.3;
}

.haqmedod-root h2 {
	font-size: 1.25em;
}

.haqmedod-root h3 {
	font-size: 1.05em;
}

.haqmedod-root p + p,
.haqmedod-root h2 + *,
.haqmedod-root h3 + * {
	margin-block-start: 12px;
}

.haqmedod-root button,
.haqmedod-root input,
.haqmedod-root select,
.haqmedod-root textarea {
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.haqmedod-root button {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	text-align: start;
	text-decoration: none;
	width: auto;
	min-height: 0;
}

.haqmedod-root textarea {
	resize: vertical;
}

.haqmedod-root a {
	box-shadow: none;
}

/* A visible, theme independent focus ring on every interactive element. */
.haqmedod-root :focus-visible {
	outline: var(--haqmedod-focus-width) solid var(--haqmedod-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-hidden,
.haqmedod-root [hidden] {
	display: none !important;
}

.haqmedod-root .haqmedod-visually-hidden,
.haqmedod-root .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Icons
 *
 * Every glyph is inline SVG that inherits currentColor, so it takes on the
 * colour of the button, link or cell around it and needs no second palette for
 * dark themes. Size is left to the svg element's own width and height
 * attributes unless a component asks for something different, which keeps the
 * set optically consistent without a rule per context.
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * Notices
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	margin-block-end: var(--haqmedod-gap);
	border: 1px solid var(--haqmedod-border);
	border-inline-start: 4px solid var(--haqmedod-accent);
	border-radius: var(--haqmedod-radius);
	background: var(--haqmedod-softer);
	font-size: var(--haqmedod-font-size-sm);
}

.haqmedod-root .haqmedod-notice:last-child {
	margin-block-end: 0;
}

.haqmedod-root .haqmedod-notice-success {
	border-inline-start-color: var(--haqmedod-success);
}

.haqmedod-root .haqmedod-notice-error {
	border-inline-start-color: var(--haqmedod-danger);
}

.haqmedod-root .haqmedod-notice-warning,
.haqmedod-root .haqmedod-warning {
	border-inline-start-color: var(--haqmedod-warning);
}

.haqmedod-root .haqmedod-warning {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	margin-block-end: var(--haqmedod-gap);
	border: 1px solid var(--haqmedod-border);
	border-inline-start: 4px solid var(--haqmedod-warning);
	border-radius: var(--haqmedod-radius);
	background: var(--haqmedod-softer);
	font-size: var(--haqmedod-font-size-sm);
}

/* The leading glyph is tinted per notice type, while the message keeps the
   theme's own text colour so it stays readable against any background. */
.haqmedod-root .haqmedod-notice > .haqmedod-icon,
.haqmedod-root .haqmedod-warning > .haqmedod-icon {
	margin-block-start: 1px;
	color: var(--haqmedod-accent);
}

.haqmedod-root .haqmedod-notice-success > .haqmedod-icon {
	color: var(--haqmedod-success);
}

.haqmedod-root .haqmedod-notice-error > .haqmedod-icon {
	color: var(--haqmedod-danger);
}

.haqmedod-root .haqmedod-notice-warning > .haqmedod-icon,
.haqmedod-root .haqmedod-warning > .haqmedod-icon {
	color: var(--haqmedod-warning);
}

.haqmedod-root .haqmedod-notice-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* A few notices stack a message and a quoted detail inside the body. */
.haqmedod-root .haqmedod-notice-body > span,
.haqmedod-root .haqmedod-notice-body > em {
	display: block;
}

.haqmedod-root .haqmedod-notice-body > span + em {
	margin-block-start: 6px;
}

.haqmedod-root .haqmedod-error-list {
	margin: 0;
	padding-inline-start: 18px;
	list-style: disc;
}

.haqmedod-root .haqmedod-error-list li {
	list-style: inherit;
}

.haqmedod-root .haqmedod-messages:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--haqmedod-border-strong);
	border-radius: var(--haqmedod-radius);
	background: transparent;
	color: inherit;
	font-size: var(--haqmedod-font-size-sm);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--haqmedod-transition), border-color var(--haqmedod-transition), opacity var(--haqmedod-transition);
}

.haqmedod-root .haqmedod-btn:hover,
.haqmedod-root .haqmedod-btn:focus {
	background: var(--haqmedod-soft);
	color: inherit;
	text-decoration: none;
}

.haqmedod-root .haqmedod-btn-primary,
.haqmedod-root .haqmedod-btn-primary:hover,
.haqmedod-root .haqmedod-btn-primary:focus {
	border-color: var(--haqmedod-accent);
	background: var(--haqmedod-accent);
	color: var(--haqmedod-accent-contrast);
}

.haqmedod-root .haqmedod-btn-primary:hover,
.haqmedod-root .haqmedod-btn-primary:focus {
	opacity: 0.88;
}

.haqmedod-root .haqmedod-btn-danger,
.haqmedod-root .haqmedod-btn-danger:hover,
.haqmedod-root .haqmedod-btn-danger:focus {
	border-color: var(--haqmedod-danger);
	background: var(--haqmedod-danger);
	color: #fff;
}

.haqmedod-root .haqmedod-btn-danger:hover,
.haqmedod-root .haqmedod-btn-danger:focus {
	opacity: 0.88;
}

.haqmedod-root .haqmedod-btn-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--haqmedod-muted);
}

.haqmedod-root .haqmedod-btn[disabled],
.haqmedod-root .haqmedod-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.haqmedod-root .haqmedod-btn-spinner {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	flex-shrink: 0;
	animation: haqmedod-spin 0.65s linear infinite;
}

@keyframes haqmedod-spin {
	to {
		transform: rotate(360deg);
	}
}

.haqmedod-root .haqmedod-btn.is-busy,
.haqmedod-root .haqmedod-tool-link.is-busy,
.haqmedod-root .haqmedod-action.is-busy,
.haqmedod-root .haqmedod-link.is-busy,
.haqmedod-root .haqmedod-users-group-toggle.is-busy,
.haqmedod-root .haqmedod-folder-item.is-busy {
	pointer-events: none;
	cursor: wait;
	opacity: 0.78;
}

.haqmedod-root .haqmedod-action.is-busy {
	min-width: 22px;
	min-height: 22px;
}

.haqmedod-root .haqmedod-tool-link[disabled],
.haqmedod-root .haqmedod-tool-link.is-busy {
	opacity: 0.7;
	cursor: wait;
}

.haqmedod-root .haqmedod-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--haqmedod-accent);
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Icons beside body copy are cut back from the 16px the set defaults to, which
   would otherwise overpower the small type these links use. */
.haqmedod-root .haqmedod-link > .haqmedod-icon {
	width: 14px;
	height: 14px;
}

.haqmedod-root .haqmedod-link:hover,
.haqmedod-root .haqmedod-link:focus {
	text-decoration: none;
}

.haqmedod-root .haqmedod-link-danger {
	color: var(--haqmedod-danger);
}

/* ---------------------------------------------------------------------------
 * Form controls
 *
 * Three class levels so a theme rule such as
 * `.entry-content input[type="text"]` cannot win on specificity.
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-form input[type="text"],
.haqmedod-root .haqmedod-form input[type="email"],
.haqmedod-root .haqmedod-form input[type="password"],
.haqmedod-root .haqmedod-form input[type="search"],
.haqmedod-root .haqmedod-form input[type="tel"],
.haqmedod-root .haqmedod-form input[type="url"],
.haqmedod-root .haqmedod-form input[type="number"],
.haqmedod-root .haqmedod-form select,
.haqmedod-root .haqmedod-form textarea,
.haqmedod-root .haqmedod-input {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	padding: 8px 12px;
	border: 1px solid var(--haqmedod-border-strong);
	border-radius: var(--haqmedod-radius);
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--haqmedod-font-size-sm);
	line-height: var(--haqmedod-line);
	box-shadow: none;
}

.haqmedod-root .haqmedod-form input:focus,
.haqmedod-root .haqmedod-form select:focus,
.haqmedod-root .haqmedod-form textarea:focus,
.haqmedod-root .haqmedod-input:focus {
	border-color: var(--haqmedod-accent);
	box-shadow: 0 0 0 1px var(--haqmedod-accent);
	outline: var(--haqmedod-focus-width) solid transparent;
}

.haqmedod-root .haqmedod-form input[disabled],
.haqmedod-root .haqmedod-form textarea[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.haqmedod-root .haqmedod-form input[type="checkbox"],
.haqmedod-root .haqmedod-form input[type="radio"] {
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.haqmedod-root .haqmedod-field {
	margin: 0 0 var(--haqmedod-gap);
}

.haqmedod-root .haqmedod-field > label {
	display: block;
	margin-block-end: 6px;
	color: inherit;
	font-size: var(--haqmedod-font-size-sm);
	font-weight: 600;
	line-height: 1.4;
}

.haqmedod-root .haqmedod-field-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.haqmedod-root .haqmedod-field-inline > label {
	margin: 0;
	font-weight: 400;
}

.haqmedod-root .haqmedod-field-error {
	margin: 6px 0 0;
	color: var(--haqmedod-danger);
	font-size: var(--haqmedod-font-size-sm);
	line-height: 1.4;
}

.haqmedod-root .haqmedod-input.is-invalid,
.haqmedod-root .haqmedod-input:invalid:focus {
	border-color: var(--haqmedod-danger);
	box-shadow: 0 0 0 1px var(--haqmedod-danger);
}

.haqmedod-root .haqmedod-field-full {
	grid-column: 1 / -1;
}

.haqmedod-root .haqmedod-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

.haqmedod-root .haqmedod-hint {
	display: block;
	margin-block-start: 4px;
	color: var(--haqmedod-muted);
	font-size: var(--haqmedod-font-size-xs);
	font-weight: 400;
}

.haqmedod-root .haqmedod-required {
	color: var(--haqmedod-danger);
}

.haqmedod-root .haqmedod-form-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--haqmedod-font-size-sm);
}

.haqmedod-root .haqmedod-form-links a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.haqmedod-root .haqmedod-form-links a > .haqmedod-icon {
	width: 14px;
	height: 14px;
}

/* ---------------------------------------------------------------------------
 * Drive layout
 * ------------------------------------------------------------------------ */

/* The container query below cannot style its own container, so the wrapper
   establishes the containment and an inner element carries the layout. */
.haqmedod-drive {
	container-type: inline-size;
	container-name: haqmedod-drive;
}

.haqmedod-drive-grid {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.haqmedod-drive-sidebar {
	flex: 0 0 240px;
	min-width: 0;
	max-width: 240px;
}

.haqmedod-drive-main {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.haqmedod-drive-main.is-loading,
.haqmedod-console .haqmedod-users-detail.is-loading {
	pointer-events: none;
}

.haqmedod-drive-main.is-loading::before,
.haqmedod-console .haqmedod-users-detail.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.78);
	z-index: 20;
}

.haqmedod-drive-main.is-loading::after,
.haqmedod-console .haqmedod-users-detail.is-loading::after,
.haqmedod-console .haqmedod-console-panel.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 3px solid rgba(47, 128, 237, 0.18);
	border-top-color: var(--haqmedod-console-navy, #2f5080);
	border-radius: 50%;
	animation: haqmedod-spin 0.65s linear infinite;
	z-index: 21;
}

.haqmedod-console .haqmedod-console-panel.is-loading {
	position: relative;
	min-height: 220px;
	pointer-events: none;
}

.haqmedod-console .haqmedod-console-panel.is-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.78);
	z-index: 20;
}

.haqmedod-root .haqmedod-folder-items {
	margin-block-start: 12px;
}

.haqmedod-root .haqmedod-folder-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--haqmedod-radius);
	background: transparent;
	color: inherit;
	font-size: var(--haqmedod-font-size-sm);
	text-align: start;
	cursor: pointer;
	transition: background var(--haqmedod-transition);
}

.haqmedod-root .haqmedod-folder-item:hover {
	background: var(--haqmedod-soft);
}

.haqmedod-root .haqmedod-folder-item.is-active {
	background: var(--haqmedod-accent);
	color: var(--haqmedod-accent-contrast);
	font-weight: 600;
}

.haqmedod-root .haqmedod-folder-count {
	flex: 0 0 auto;
	font-size: var(--haqmedod-font-size-xs);
	font-weight: 400;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Folder view
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-folder-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: var(--haqmedod-gap);
	padding-block-end: 12px;
	border-block-end: 1px solid var(--haqmedod-border);
}

.haqmedod-root .haqmedod-folder-title {
	margin: 0;
	font-size: 1.25em;
	overflow-wrap: anywhere;
}

.haqmedod-root .haqmedod-folder-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.haqmedod-root .haqmedod-folder-actions .haqmedod-input {
	display: inline-block;
	width: auto;
	min-width: 170px;
}

.haqmedod-root .haqmedod-empty,
.haqmedod-root .haqmedod-empty-small {
	padding: 32px 16px;
	color: var(--haqmedod-muted);
	font-size: var(--haqmedod-font-size-sm);
	text-align: center;
}

.haqmedod-root .haqmedod-empty-small {
	padding: 14px 0;
	text-align: start;
}

/* An empty state leads with an oversized, faded glyph so the panel reads as
   deliberately empty rather than as content that failed to load. */
.haqmedod-root .haqmedod-empty > .haqmedod-icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	opacity: 0.5;
}

.haqmedod-root .haqmedod-empty-small > .haqmedod-icon {
	width: 14px;
	height: 14px;
	margin-inline-end: 6px;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * File table
 * ------------------------------------------------------------------------ */

.haqmedod-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.haqmedod-root .haqmedod-table {
	width: 100%;
	font-size: var(--haqmedod-font-size-sm);
}

.haqmedod-root .haqmedod-table th,
.haqmedod-root .haqmedod-table td {
	padding: 10px 12px;
	border-block-end: 1px solid var(--haqmedod-border);
	text-align: start;
	vertical-align: middle;
}

.haqmedod-root .haqmedod-table thead th {
	background: var(--haqmedod-soft);
	font-weight: 600;
	white-space: nowrap;
}

.haqmedod-root .haqmedod-table thead th:first-child {
	border-start-start-radius: var(--haqmedod-radius-sm);
}

.haqmedod-root .haqmedod-table thead th:last-child {
	border-start-end-radius: var(--haqmedod-radius-sm);
}

.haqmedod-root .haqmedod-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.haqmedod-root .haqmedod-sort::after {
	content: "\2195";
	font-size: 0.9em;
	opacity: 0.35;
}

.haqmedod-root th[aria-sort="ascending"] .haqmedod-sort::after {
	content: "\2191";
	opacity: 1;
}

.haqmedod-root th[aria-sort="descending"] .haqmedod-sort::after {
	content: "\2193";
	opacity: 1;
}

.haqmedod-root .haqmedod-table tbody tr:hover {
	background: var(--haqmedod-softer);
}

.haqmedod-root .haqmedod-table tbody tr.is-removing {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.haqmedod-root .haqmedod-col-check {
	width: 36px;
}

.haqmedod-root .haqmedod-col-actions {
	white-space: nowrap;
}

.haqmedod-root .haqmedod-col-actions > * + * {
	margin-inline-start: 10px;
}

.haqmedod-root .haqmedod-name-cell {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.haqmedod-root .haqmedod-file-name {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The file type is carried by the colour of the glyph rather than by a solid
   block, so the icon still says "document" or "image" at a glance and the
   colour reads as a tint instead of a heavy swatch. */
.haqmedod-root .haqmedod-file-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--haqmedod-muted);
}

.haqmedod-root .haqmedod-icon-pdf { color: #d63638; }
.haqmedod-root .haqmedod-icon-document { color: #2271b1; }
.haqmedod-root .haqmedod-icon-spreadsheet { color: #007a2f; }
.haqmedod-root .haqmedod-icon-presentation { color: #b3690a; }
.haqmedod-root .haqmedod-icon-archive { color: #8c5e00; }
.haqmedod-root .haqmedod-icon-image { color: #7c3aed; }
.haqmedod-root .haqmedod-icon-text { color: #50575e; }

/* Inline delete confirmation, used instead of window.confirm() so nothing
   depends on a blocking browser dialog. */
.haqmedod-root .haqmedod-confirm {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.haqmedod-root .haqmedod-confirm-label {
	color: var(--haqmedod-muted);
	font-size: var(--haqmedod-font-size-xs);
}

/* ---------------------------------------------------------------------------
 * Uploader
 * ------------------------------------------------------------------------ */

.haqmedod-root .haqmedod-uploader {
	margin-block-end: 20px;
	padding: var(--haqmedod-gap);
	border: 1px solid var(--haqmedod-border);
	border-radius: var(--haqmedod-radius);
	background: var(--haqmedod-softer);
}

.haqmedod-root .haqmedod-dropzone {
	padding: 28px 16px;
	border: 2px dashed var(--haqmedod-border-strong);
	border-radius: var(--haqmedod-radius);
	text-align: center;
	transition: border-color var(--haqmedod-transition), background var(--haqmedod-transition);
}

.haqmedod-root .haqmedod-dropzone.is-dragging {
	border-color: var(--haqmedod-accent);
	background: var(--haqmedod-soft);
}

.haqmedod-root .haqmedod-dropzone-icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	color: var(--haqmedod-muted);
}

.haqmedod-root .haqmedod-dropzone-text {
	margin-block-end: 10px;
	font-size: var(--haqmedod-font-size);
}

.haqmedod-root .haqmedod-dropzone-hint {
	margin-block-start: 12px;
	color: var(--haqmedod-muted);
	font-size: var(--haqmedod-font-size-xs);
	overflow-wrap: anywhere;
}

.haqmedod-root .haqmedod-queue {
	margin-block-start: 12px;
}

.haqmedod-root .haqmedod-queue-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	margin-block-end: 4px;
	border: 1px solid var(--haqmedod-border);
	border-radius: var(--haqmedod-radius-sm);
	font-size: var(--haqmedod-font-size-sm);
}

.haqmedod-root .haqmedod-queue-item.is-error {
	border-color: var(--haqmedod-danger);
}

.haqmedod-root .haqmedod-queue-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.haqmedod-root .haqmedod-queue-message {
	flex: 0 1 auto;
	color: var(--haqmedod-danger);
	font-size: var(--haqmedod-font-size-xs);
}

.haqmedod-root .haqmedod-queue-remove {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--haqmedod-muted);
	font-size: 15px;
	line-height: 1;
	text-align: center;
}

.haqmedod-root .haqmedod-queue-remove > .haqmedod-icon {
	width: 13px;
	height: 13px;
}

.haqmedod-root .haqmedod-queue-remove:hover {
	background: var(--haqmedod-soft);
}

.haqmedod-root .haqmedod-progress {
	height: 8px;
	margin-block-start: 12px;
	border-radius: 999px;
	background: var(--haqmedod-soft);
	overflow: hidden;
}

.haqmedod-root .haqmedod-progress-bar {
	width: 0;
	height: 100%;
	background: var(--haqmedod-accent);
	transition: width 0.2s ease;
}

.haqmedod-root .haqmedod-uploader-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 12px;
}

/* ---------------------------------------------------------------------------
 * Auth forms
 * ------------------------------------------------------------------------ */

.haqmedod-auth {
	container-type: inline-size;
	container-name: haqmedod-auth;
	max-width: 420px;
	margin-inline: auto;
}

.haqmedod-auth-wide {
	max-width: 760px;
}

.haqmedod-root .haqmedod-brand {
	display: flex;
	justify-content: center;
	margin-block-end: var(--haqmedod-gap);
}

.haqmedod-root .haqmedod-brand-logo {
	display: block;
	max-width: min(220px, 70%);
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.haqmedod-console > .haqmedod-brand {
	justify-content: flex-start;
	margin: 0;
	padding: 14px 16px 0;
	background-color: var(--haqmedod-console-navy);
}

.haqmedod-console > .haqmedod-brand .haqmedod-brand-logo {
	max-height: 40px;
	max-width: 180px;
}

/* ---------------------------------------------------------------------------
 * Profile tabs
 * ------------------------------------------------------------------------ */

.haqmedod-profile {
	container-type: inline-size;
	container-name: haqmedod-profile;
}

.haqmedod-root .haqmedod-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-block-end: 24px;
	border-block-end: 1px solid var(--haqmedod-border);
}

.haqmedod-root .haqmedod-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border: 0;
	border-block-end: 2px solid transparent;
	background: none;
	color: var(--haqmedod-muted);
	font-size: var(--haqmedod-font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition: color var(--haqmedod-transition), border-color var(--haqmedod-transition);
}

.haqmedod-root .haqmedod-tab:hover {
	color: inherit;
}

.haqmedod-root .haqmedod-tab.is-active {
	border-block-end-color: var(--haqmedod-accent);
	color: var(--haqmedod-accent);
	font-weight: 600;
}

.haqmedod-root .haqmedod-panel > h2:first-child {
	margin-block-end: var(--haqmedod-gap);
}

/* ---------------------------------------------------------------------------
 * Management console
 *
 * The console is the one part of the plugin that does not inherit the theme's
 * palette. It is a working tool rather than page content, so it paints its own
 * light chrome and keeps the same appearance on every theme. The tokens below
 * are local to .haqmedod-console, so the auth forms and the profile area still
 * follow the theme as before.
 *
 * These rules sit above the responsive block that follows, which reflows the
 * grid and turns the tables into stacked cards on narrow containers.
 * ------------------------------------------------------------------------ */

.haqmedod-console {
	--haqmedod-console-ink: #2a3038;
	--haqmedod-console-muted: #7b8794;
	--haqmedod-console-line: #e4e7eb;
	--haqmedod-console-line-strong: #cdd3da;
	--haqmedod-console-surface: #fff;
	--haqmedod-console-canvas: #f3f5f8;
	--haqmedod-console-shadow: 0 1px 2px rgba(22, 50, 79, 0.05), 0 8px 24px rgba(22, 50, 79, 0.04);

	/* The console is a full application surface, not a column of prose. */
	--haqmedod-max-width: none;

	container-type: inline-size;
	container-name: haqmedod-drive;

	border: 1px solid var(--haqmedod-console-line);
	border-radius: 10px;
	background: var(--haqmedod-console-canvas);
	color: var(--haqmedod-console-ink);
	font-size: 13px;
	overflow: hidden;
	box-shadow: var(--haqmedod-console-shadow);
}

/* --- Tab bar ------------------------------------------------------------ */

.haqmedod-console .haqmedod-console-bar {
	/* Soft highlights over the configurable tab colour from Appearance settings. */
	background-color: var(--haqmedod-console-tabs, var(--haqmedod-console-navy));
	background-image:
		radial-gradient(120% 180% at 12% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
	border-block-end: 3px solid #fff;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.haqmedod-console .haqmedod-console-bar {
		background-image:
			radial-gradient(120% 180% at 12% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--haqmedod-console-tabs, var(--haqmedod-console-navy)) 72%, white) 0%,
				var(--haqmedod-console-tabs, var(--haqmedod-console-navy)) 100%
			);
	}
}

.haqmedod-console .haqmedod-console-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	border: 0;
}

.haqmedod-console .haqmedod-console-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--haqmedod-transition), color var(--haqmedod-transition), box-shadow var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-console-tab:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.haqmedod-console .haqmedod-console-tab.is-active {
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-tabs, var(--haqmedod-console-navy));
	font-weight: 700;
	border-radius: 8px 8px 0 0;
	margin-block-end: -3px;
	padding-block-end: 16px;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.haqmedod-console .haqmedod-console-body {
	padding: 18px;
}

.haqmedod-console .haqmedod-messages:not(:empty) {
	margin-block-end: 14px;
}

.haqmedod-console .haqmedod-btn-secondary,
.haqmedod-console .haqmedod-btn-secondary:hover,
.haqmedod-console .haqmedod-btn-secondary:focus {
	border-color: var(--haqmedod-console-line-strong);
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-ink);
}

.haqmedod-console .haqmedod-btn-secondary:hover,
.haqmedod-console .haqmedod-btn-secondary:focus {
	border-color: var(--haqmedod-console-navy);
	color: var(--haqmedod-console-navy);
	background: #eef3f8;
}

.haqmedod-console .haqmedod-premium-table-wrap,
.haqmedod-console .haqmedod-access-table-wrap {
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 8px;
	background: var(--haqmedod-console-surface);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
	overflow: hidden;
}

.haqmedod-console .haqmedod-premium-table-wrap .haqmedod-table,
.haqmedod-console .haqmedod-access-table-wrap .haqmedod-table {
	margin: 0;
}

.haqmedod-console .haqmedod-premium-table-wrap .haqmedod-table thead th,
.haqmedod-console .haqmedod-files-table thead th,
.haqmedod-console .haqmedod-logs-table thead th {
	padding: 12px 14px;
	border-block-end: 1px solid var(--haqmedod-console-line-strong);
	background: #f3f6f9;
	font-size: 12px;
	letter-spacing: 0.01em;
}

.haqmedod-console .haqmedod-premium-table-wrap .haqmedod-table tbody tr:nth-child(even),
.haqmedod-console .haqmedod-files-table tbody tr:nth-child(even),
.haqmedod-console .haqmedod-logs-table tbody tr:nth-child(even) {
	background: #fafbfc;
}

.haqmedod-console .haqmedod-premium-table-wrap .haqmedod-table tbody tr:hover,
.haqmedod-console .haqmedod-files-table tbody tr:hover,
.haqmedod-console .haqmedod-logs-table tbody tr:hover {
	background: #f0f5fb;
}

.haqmedod-console .haqmedod-premium-table-wrap .haqmedod-table tbody tr:last-child td,
.haqmedod-console .haqmedod-files-table tbody tr:last-child td,
.haqmedod-console .haqmedod-logs-table tbody tr:last-child td {
	border-block-end: 0;
}

/* --- Icons -------------------------------------------------------------- */

.haqmedod-console .haqmedod-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

.haqmedod-console .haqmedod-icon-muted {
	color: var(--haqmedod-console-muted);
}

/* --- Sidebar ------------------------------------------------------------ */

.haqmedod-console .haqmedod-drive-grid {
	gap: 18px;
	align-items: stretch;
}

.haqmedod-console .haqmedod-drive-sidebar,
.haqmedod-console .haqmedod-fm-sidebar {
	flex-basis: 230px;
	max-width: 230px;
	padding: 14px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 10px;
	background: var(--haqmedod-console-surface);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-fm-folders {
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--haqmedod-console-surface);
}

.haqmedod-console .haqmedod-fm-folders-head {
	padding: 10px 12px;
	background: var(--haqmedod-console-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.haqmedod-console .haqmedod-fm-folders .haqmedod-folder-nav {
	max-height: 420px;
	overflow: auto;
}

.haqmedod-console .haqmedod-fm-folders .haqmedod-folder-items {
	margin: 0;
	padding: 4px 0;
}

.haqmedod-console .haqmedod-sidebar-search {
	position: relative;
	margin-block-end: 14px;
}

.haqmedod-console .haqmedod-sidebar-search .haqmedod-icon,
.haqmedod-console .haqmedod-table-filter .haqmedod-icon {
	position: absolute;
	inset-inline-start: 10px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Three class levels plus the attribute, so the shared
   `.haqmedod-root .haqmedod-form input[type="search"]` padding cannot win here. */
.haqmedod-console .haqmedod-sidebar-search input[type="search"].haqmedod-input,
.haqmedod-console .haqmedod-table-filter input[type="search"].haqmedod-input {
	padding: 8px 12px 8px 32px;
	border-color: transparent;
	border-radius: 999px;
	background: #eef1f4;
	color: var(--haqmedod-console-ink);
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-folder-items {
	margin: 0;
}

.haqmedod-console .haqmedod-folder-item {
	gap: 9px;
	justify-content: flex-start;
	padding: 9px 12px;
	border-radius: 0;
	border-inline-start: 3px solid transparent;
	color: var(--haqmedod-console-ink);
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-folder-item .haqmedod-folder-icon {
	color: #5b7c99;
}

.haqmedod-console .haqmedod-folder-item:hover {
	background: rgba(22, 50, 79, 0.05);
}

.haqmedod-console .haqmedod-folder-item.is-active {
	background: rgba(47, 128, 237, 0.12);
	border-inline-start-color: var(--haqmedod-console-navy);
	color: var(--haqmedod-console-navy);
	font-weight: 700;
}

.haqmedod-console .haqmedod-folder-item.is-active .haqmedod-folder-icon {
	color: var(--haqmedod-console-navy);
}

.haqmedod-console .haqmedod-folder-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-folder-tools {
	margin-block-start: 16px;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--haqmedod-console-line);
}

.haqmedod-console .haqmedod-btn-block {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	background: #2f6fa8;
	border-color: #2f6fa8;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.12);
}

.haqmedod-console .haqmedod-tool-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 8px;
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-ink);
	font-size: 12.5px;
	cursor: pointer;
	transition: background var(--haqmedod-transition), border-color var(--haqmedod-transition), color var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-folder-toolbar .haqmedod-tool-link:hover {
	border-color: rgba(47, 128, 237, 0.35);
	background: #f3f8fd;
	color: var(--haqmedod-console-link);
}

.haqmedod-console .haqmedod-folder-tools .haqmedod-tool-link {
	display: flex;
	width: 100%;
	margin-block-start: 8px;
	justify-content: flex-start;
}

.haqmedod-console .haqmedod-tool-link:hover {
	color: var(--haqmedod-console-link);
}

.haqmedod-console .haqmedod-tool-link .haqmedod-icon {
	color: var(--haqmedod-console-link);
}

.haqmedod-console .haqmedod-tool-link-success {
	border-color: rgba(0, 112, 23, 0.2);
	background: #f2faf4;
}

.haqmedod-console .haqmedod-tool-link-success .haqmedod-icon {
	color: var(--haqmedod-console-green);
}

.haqmedod-console .haqmedod-tool-link-danger {
	border-color: rgba(179, 45, 46, 0.18);
	background: #fdf4f4;
}

.haqmedod-console .haqmedod-tool-link-danger .haqmedod-icon {
	color: var(--haqmedod-console-red);
}

.haqmedod-console .haqmedod-folder-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px 18px;
	margin-block-end: 16px;
	padding: 16px 18px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 10px;
	background:
		linear-gradient(180deg, #fbfcfe 0%, var(--haqmedod-console-surface) 100%);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-folder-heading {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.haqmedod-console .haqmedod-folder-heading-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(22, 50, 79, 0.08);
	color: var(--haqmedod-console-navy);
}

.haqmedod-console .haqmedod-folder-heading-text {
	min-width: 0;
}

.haqmedod-console .haqmedod-folder-subtitle {
	margin: 5px 0 0;
	color: var(--haqmedod-console-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

.haqmedod-console .haqmedod-folder-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
}

.haqmedod-console .haqmedod-files-card {
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-files-table .haqmedod-col-name {
	max-width: 360px;
}

.haqmedod-console .haqmedod-files-table .haqmedod-name-cell {
	align-items: center;
	min-width: 0;
}

.haqmedod-console .haqmedod-files-table .haqmedod-file-name {
	flex: 1 1 auto;
}

.haqmedod-console .haqmedod-files-table .haqmedod-action {
	width: 30px;
	height: 30px;
	border-radius: 8px;
}

/* --- Panels and toolbars ------------------------------------------------ */

.haqmedod-console .haqmedod-panel-card {
	padding: 16px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 10px;
	background: var(--haqmedod-console-surface);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 12px;
}

.haqmedod-console .haqmedod-panel-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.haqmedod-console .haqmedod-panel-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-panel-foot {
	margin-block-start: 14px;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--haqmedod-console-line);
}

.haqmedod-console .haqmedod-uploader {
	border-color: var(--haqmedod-console-line);
	border-radius: 10px;
	background: var(--haqmedod-console-surface);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

/* --- Table controls ----------------------------------------------------- */

.haqmedod-console .haqmedod-table-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 10px;
}

.haqmedod-console .haqmedod-table-length {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-table-length select,
.haqmedod-console .haqmedod-panel-filters select {
	display: inline-block;
	width: auto;
	min-width: 64px;
	padding: 5px 8px;
	border: 1px solid var(--haqmedod-console-line-strong);
	border-radius: 3px;
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-ink);
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-table-filter {
	position: relative;
	min-width: 220px;
}

/* --- Tables ------------------------------------------------------------- */

.haqmedod-console .haqmedod-table {
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-table thead th {
	padding: 9px 10px;
	border-block-end: 2px solid var(--haqmedod-console-line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--haqmedod-console-ink);
	font-weight: 700;
}

.haqmedod-console .haqmedod-table td {
	padding: 7px 10px;
	border-block-end: 1px solid var(--haqmedod-console-line);
	color: var(--haqmedod-console-ink);
}

.haqmedod-console .haqmedod-table tbody tr:hover {
	background: #fafbfc;
}

.haqmedod-console .haqmedod-sort {
	justify-content: space-between;
	color: inherit;
	font-weight: 700;
}

/* The icon set draws the sort arrows here, so the text arrow the plain tables
   fall back on is suppressed rather than stacked beside it. Both selectors
   carry enough weight to sit above the `th[aria-sort]` rules that set it. */
.haqmedod-console .haqmedod-table .haqmedod-sort::after,
.haqmedod-console th[aria-sort] .haqmedod-sort::after {
	content: none;
}

.haqmedod-console .haqmedod-sort-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	opacity: 0.4;
}

.haqmedod-console th[aria-sort] .haqmedod-sort-icon {
	color: var(--haqmedod-console-link);
	opacity: 1;
}

/* Once a column is sorted only the arrow describing that direction is kept. */
.haqmedod-console th[aria-sort="ascending"] .haqmedod-sort-down,
.haqmedod-console th[aria-sort="descending"] .haqmedod-sort-up {
	display: none;
}

.haqmedod-console .haqmedod-col-type,
.haqmedod-console .haqmedod-col-date,
.haqmedod-console .haqmedod-col-status {
	width: 1%;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-col-toggle {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-col-toggle .haqmedod-toggle-column {
	display: block;
	font-size: 11px;
	font-weight: 400;
}

.haqmedod-console .haqmedod-file-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 0;
	background: none;
	color: #8b95a1;
}

.haqmedod-console .haqmedod-icon-pdf { color: #d64545; }
.haqmedod-console .haqmedod-icon-document { color: #2f6fa8; }
.haqmedod-console .haqmedod-icon-spreadsheet { color: #2f9e44; }
.haqmedod-console .haqmedod-icon-presentation { color: #d98500; }
.haqmedod-console .haqmedod-icon-archive { color: #8c5e00; }
.haqmedod-console .haqmedod-icon-image { color: #7048c8; }
.haqmedod-console .haqmedod-icon-text { color: #6b7480; }
.haqmedod-console .haqmedod-icon-folder { color: #9aa5b1; }
.haqmedod-console .haqmedod-icon-user { color: #6b7480; }

.haqmedod-console .haqmedod-name-cell {
	gap: 7px;
	align-items: flex-start;
}

.haqmedod-console .haqmedod-member-name {
	display: block;
	font-weight: 600;
}

.haqmedod-console .haqmedod-member-email {
	display: block;
	color: var(--haqmedod-console-muted);
	font-size: 11.5px;
}

.haqmedod-console .haqmedod-inline-form {
	display: flex;
	align-items: center;
	gap: 6px;
}

.haqmedod-console .haqmedod-inline-form select {
	display: inline-block;
	width: auto;
	padding: 4px 6px;
	border: 1px solid var(--haqmedod-console-line-strong);
	border-radius: 3px;
	background: var(--haqmedod-console-surface);
	font-size: 12px;
}

/* --- Row actions -------------------------------------------------------- */

.haqmedod-console .haqmedod-col-actions {
	width: 1%;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	border: 0;
	border-radius: 3px;
	background: none;
	color: var(--haqmedod-console-link);
	cursor: pointer;
	transition: background var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-action + .haqmedod-action {
	margin-inline-start: 2px;
}

.haqmedod-console .haqmedod-action:hover {
	background: rgba(26, 95, 168, 0.1);
}

.haqmedod-console .haqmedod-action-get {
	color: var(--haqmedod-console-link);
	text-decoration: none;
}

.haqmedod-console .haqmedod-action-delete {
	color: var(--haqmedod-console-red);
}

.haqmedod-console .haqmedod-action-delete:hover {
	background: rgba(214, 69, 69, 0.1);
}

/* --- Badges ------------------------------------------------------------- */

.haqmedod-console .haqmedod-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	background: #eef0f3;
	color: #52606d;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-badge-approved,
.haqmedod-console .haqmedod-badge-action-1 { background: #e4f5e9; color: #1e7d34; }
.haqmedod-console .haqmedod-badge-pending,
.haqmedod-console .haqmedod-badge-warning { background: #fdf1dc; color: #8a6100; }
.haqmedod-console .haqmedod-badge-rejected,
.haqmedod-console .haqmedod-badge-blocked,
.haqmedod-console .haqmedod-badge-action-3 { background: #fbe6e6; color: #a82a2a; }
.haqmedod-console .haqmedod-badge-action-2 { background: #e7eef7; color: #1a5fa8; }
.haqmedod-console .haqmedod-badge-action-4 { background: #eae6fa; color: #543aa0; }

/* --- Table footer and pagination ---------------------------------------- */

.haqmedod-console .haqmedod-table-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 12px 6px;
}

.haqmedod-console .haqmedod-table-info {
	margin: 0;
	color: var(--haqmedod-console-ink);
	font-size: 12.5px;
}

.haqmedod-console .haqmedod-pagination {
	display: flex;
	align-items: center;
	gap: 4px;
}

.haqmedod-console .haqmedod-page {
	min-width: 30px;
	padding: 5px 9px;
	border: 1px solid var(--haqmedod-console-line-strong);
	border-radius: 3px;
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-ink);
	font-size: 12.5px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-page:hover:not(:disabled) {
	background: #eef1f5;
}

.haqmedod-console .haqmedod-page:disabled {
	color: #b4bcc5;
	cursor: default;
}

.haqmedod-console .haqmedod-page.is-current {
	border-color: var(--haqmedod-console-navy);
	background: var(--haqmedod-console-navy);
	color: #fff;
	font-weight: 600;
}

/* --- Modal -------------------------------------------------------------- */

.haqmedod-console .haqmedod-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.haqmedod-console .haqmedod-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 34, 0.55);
}

.haqmedod-console .haqmedod-modal-box {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 20px;
	border-radius: 4px;
	background: var(--haqmedod-console-surface);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.haqmedod-console .haqmedod-modal-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
}

.haqmedod-console .haqmedod-modal-text {
	margin: 0 0 14px;
	color: #52606d;
	font-size: 13px;
}

.haqmedod-console .haqmedod-modal-box .haqmedod-input {
	border-color: var(--haqmedod-console-line-strong);
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-ink);
}

.haqmedod-console .haqmedod-modal-box .haqmedod-input.is-invalid {
	border-color: var(--haqmedod-console-red);
	box-shadow: 0 0 0 1px var(--haqmedod-console-red);
}

.haqmedod-console .haqmedod-modal-box .haqmedod-field-error {
	color: var(--haqmedod-console-red);
}

.haqmedod-console .haqmedod-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-block-start: 4px;
}

.haqmedod-console .haqmedod-empty,
.haqmedod-console .haqmedod-empty-small {
	color: var(--haqmedod-console-muted);
	padding: 36px 20px;
	border: 1px dashed var(--haqmedod-console-line-strong);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.65);
}

.haqmedod-console .haqmedod-empty > .haqmedod-icon,
.haqmedod-console .haqmedod-empty-small > .haqmedod-icon {
	color: #8fa0b3;
}

/* --- User Manager ------------------------------------------------------- */

.haqmedod-console .haqmedod-users-card {
	margin: -18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
}

.haqmedod-console .haqmedod-users-layout {
	display: grid;
	grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
	min-height: 520px;
}

.haqmedod-console .haqmedod-users-sidebar {
	padding: 14px 12px 16px;
	border-inline-end: 1px solid var(--haqmedod-console-line);
	background: var(--haqmedod-console-canvas);
}

.haqmedod-console .haqmedod-users-sidebar .haqmedod-sidebar-search {
	margin-block-end: 12px;
}

.haqmedod-console .haqmedod-users-sidebar .haqmedod-sidebar-search input[type="search"].haqmedod-input {
	border-radius: 999px;
	background: #e7ebf0;
	border-color: transparent;
}

.haqmedod-console .haqmedod-users-accordions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.haqmedod-console .haqmedod-users-group {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--haqmedod-console-line);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-users-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: #8e9aaa;
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}

.haqmedod-console .haqmedod-users-group.is-open .haqmedod-users-group-toggle {
	border-radius: 8px 8px 0 0;
	background: var(--haqmedod-console-navy);
}

.haqmedod-console .haqmedod-users-group-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.haqmedod-console .haqmedod-users-group-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.haqmedod-console .haqmedod-users-group-chevron {
	display: inline-flex;
	color: #fff;
}

.haqmedod-console .haqmedod-users-group-body {
	border: 0;
	border-block-start: 1px solid var(--haqmedod-console-line);
	border-radius: 0;
	background: var(--haqmedod-console-surface);
	max-height: 220px;
	overflow: auto;
}

.haqmedod-console .haqmedod-users-empty {
	margin: 0;
	padding: 12px;
	color: var(--haqmedod-console-muted);
	font-size: 12px;
}

.haqmedod-console .haqmedod-users-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}

.haqmedod-console .haqmedod-users-list-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-inline-start: 3px solid transparent;
	background: transparent;
	color: var(--haqmedod-console-ink);
	font: inherit;
	font-size: 12px;
	text-align: start;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-users-list-btn:hover {
	background: rgba(22, 50, 79, 0.05);
}

.haqmedod-console .haqmedod-users-list-btn.is-active {
	color: var(--haqmedod-console-navy);
	font-weight: 700;
	background: rgba(47, 128, 237, 0.12);
	border-inline-start-color: var(--haqmedod-console-navy);
}

.haqmedod-console .haqmedod-users-detail,
.haqmedod-console .haqmedod-users-manager-detail,
.haqmedod-console .haqmedod-logs-detail {
	position: relative;
	padding: 20px 22px 24px;
	background:
		linear-gradient(180deg, #fbfcfe 0%, var(--haqmedod-console-surface) 140px);
	min-width: 0;
}

.haqmedod-console .haqmedod-users-detail-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	padding-block-end: 16px;
	margin-block-end: 16px;
	border-block-end: 1px solid var(--haqmedod-console-line);
}

.haqmedod-console .haqmedod-users-identity {
	justify-content: flex-start;
}

.haqmedod-console .haqmedod-users-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.haqmedod-console .haqmedod-users-meta p {
	margin: 0;
	color: var(--haqmedod-console-link);
	font-size: 13px;
	line-height: 1.45;
}

.haqmedod-console .haqmedod-users-meta-label {
	font-weight: 500;
}

.haqmedod-console .haqmedod-users-meta-sep {
	margin-inline: 6px;
	opacity: 0.7;
}

.haqmedod-console .haqmedod-users-meta-value {
	font-weight: 700;
}

.haqmedod-console .haqmedod-users-toggles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 10px;
	padding: 10px 12px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 10px;
	background: #f7f9fb;
}

.haqmedod-console .haqmedod-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	user-select: none;
}

.haqmedod-console .haqmedod-switch-label {
	color: var(--haqmedod-console-ink);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.haqmedod-console .haqmedod-switch-track {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #c5ccd4;
	transition: background var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-switch-thumb {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-switch input:checked + .haqmedod-switch-track {
	background: #2f80ed;
}

.haqmedod-console .haqmedod-switch input:checked + .haqmedod-switch-track .haqmedod-switch-thumb {
	transform: translateX(18px);
}

.haqmedod-console .haqmedod-switch input:focus-visible + .haqmedod-switch-track {
	outline: 2px solid var(--haqmedod-console-link);
	outline-offset: 2px;
}

.haqmedod-console .haqmedod-switch-solo {
	justify-content: center;
}

.haqmedod-console .haqmedod-members-group {
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--haqmedod-console-line);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-members-group-head {
	padding: 10px 14px;
	background: var(--haqmedod-console-navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.haqmedod-console .haqmedod-members-group-body {
	max-height: 420px;
	overflow: auto;
	background: var(--haqmedod-console-surface);
}

.haqmedod-console .haqmedod-members-sidebar {
	background: var(--haqmedod-console-canvas);
}

.haqmedod-console .haqmedod-members-sidebar .haqmedod-users-list-btn {
	padding: 9px 12px;
	border-inline-start: 3px solid transparent;
	border-radius: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-members-sidebar .haqmedod-users-list-btn:hover {
	background: rgba(22, 50, 79, 0.05);
}

.haqmedod-console .haqmedod-members-sidebar .haqmedod-users-list-btn.is-active {
	background: rgba(47, 128, 237, 0.12);
	border-inline-start-color: var(--haqmedod-console-navy);
	color: var(--haqmedod-console-navy);
	font-weight: 700;
}

.haqmedod-console .haqmedod-members-sidebar .haqmedod-users-list-btn.is-active:hover {
	background: rgba(47, 128, 237, 0.16);
	color: var(--haqmedod-console-navy);
}

.haqmedod-console .haqmedod-access-head,
.haqmedod-console .haqmedod-logs-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin-block-end: 18px;
}

.haqmedod-console .haqmedod-access-head .haqmedod-panel-title,
.haqmedod-console .haqmedod-logs-head .haqmedod-panel-title {
	margin: 0;
}

.haqmedod-console .haqmedod-access-heading {
	min-width: 0;
}

.haqmedod-console .haqmedod-access-subtitle {
	margin: 6px 0 0;
	color: var(--haqmedod-console-muted);
	font-size: 12.5px;
	line-height: 1.45;
	max-width: 36em;
}

.haqmedod-console .haqmedod-access-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-end;
	gap: 10px;
}

.haqmedod-console .haqmedod-access-user,
.haqmedod-console .haqmedod-access-date {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 8px;
	background: linear-gradient(180deg, #fbfcfd 0%, #f4f7fa 100%);
}

.haqmedod-console .haqmedod-access-user-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(22, 50, 79, 0.08);
	color: var(--haqmedod-console-navy);
}

.haqmedod-console .haqmedod-access-user-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.haqmedod-console .haqmedod-access-user-name {
	color: var(--haqmedod-console-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.haqmedod-console .haqmedod-access-user-email {
	overflow: hidden;
	color: var(--haqmedod-console-muted);
	font-size: 11.5px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-access-date {
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2px;
	min-width: 96px;
}

.haqmedod-console .haqmedod-access-date .haqmedod-users-meta-label {
	color: var(--haqmedod-console-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.haqmedod-console .haqmedod-access-date .haqmedod-users-meta-value {
	color: var(--haqmedod-console-navy);
	font-size: 13px;
	font-weight: 700;
}

.haqmedod-console .haqmedod-access-detail {
	background:
		linear-gradient(180deg, #fbfcfe 0%, var(--haqmedod-console-surface) 120px);
}

.haqmedod-console .haqmedod-access-table .haqmedod-col-folder {
	width: auto;
	max-width: 280px;
}

.haqmedod-console .haqmedod-access-table .haqmedod-col-toggle,
.haqmedod-console .haqmedod-access-table th.haqmedod-col-toggle {
	text-align: center;
	width: 18%;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-access-table td {
	padding: 13px 14px;
	border-block-end: 1px solid var(--haqmedod-console-line);
}

.haqmedod-console .haqmedod-access-table tbody tr:last-child td {
	border-block-end: 0;
}

.haqmedod-console .haqmedod-access-table tbody tr:nth-child(even) {
	background: #fafbfc;
}

.haqmedod-console .haqmedod-access-table tbody tr:hover {
	background: #f0f5fb;
}

.haqmedod-console .haqmedod-access-folder {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.haqmedod-console .haqmedod-access-folder .haqmedod-file-icon {
	color: #5b7c99;
}

.haqmedod-console .haqmedod-access-folder-name {
	display: block;
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.haqmedod-console .haqmedod-access-table .haqmedod-switch-solo {
	min-height: 22px;
	padding: 2px 4px;
	border-radius: 999px;
	transition: background var(--haqmedod-transition);
}

.haqmedod-console .haqmedod-access-table .haqmedod-switch-solo:hover {
	background: rgba(47, 128, 237, 0.08);
}

.haqmedod-console .haqmedod-access-table .haqmedod-switch-track {
	width: 34px;
	height: 18px;
	background: #cfd6de;
}

.haqmedod-console .haqmedod-access-table .haqmedod-switch-thumb {
	width: 14px;
	height: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 34, 0.22);
}

.haqmedod-console .haqmedod-access-table .haqmedod-switch input:checked + .haqmedod-switch-track {
	background: #2f80ed;
}

.haqmedod-console .haqmedod-access-table .haqmedod-switch input:checked + .haqmedod-switch-track .haqmedod-switch-thumb {
	transform: translateX(16px);
}

.haqmedod-console .haqmedod-access-foot {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-block-start: 18px;
	padding: 14px 0 0;
	border-block-start: 1px solid var(--haqmedod-console-line);
}

.haqmedod-console .haqmedod-access-foot .haqmedod-btn-primary {
	min-height: 40px;
	padding-inline: 18px;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.12);
}

.haqmedod-console .haqmedod-access-detail .haqmedod-panel-foot {
	margin-block-start: 18px;
}

.haqmedod-console .haqmedod-logs-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
	margin-block-end: 14px;
}

.haqmedod-console .haqmedod-logs-export {
	display: flex;
	gap: 8px;
}

.haqmedod-console .haqmedod-logs-export .haqmedod-btn {
	min-width: 86px;
	justify-content: center;
	border-radius: 8px;
}

.haqmedod-console .haqmedod-logs-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 220px;
}

.haqmedod-console .haqmedod-logs-search .haqmedod-input {
	min-width: 220px;
}

.haqmedod-console .haqmedod-logs-table .haqmedod-col-sno {
	width: 64px;
	text-align: center;
}

.haqmedod-console .haqmedod-logs-table .haqmedod-col-file {
	max-width: 280px;
}

.haqmedod-console .haqmedod-logs-table .haqmedod-name-cell {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.haqmedod-console .haqmedod-logs-table .haqmedod-file-name {
	flex: 1 1 auto;
}

.haqmedod-console .haqmedod-logs-table .haqmedod-action-get {
	display: inline-flex;
	color: var(--haqmedod-console-link);
}

.haqmedod-console .haqmedod-logs-table .haqmedod-badge {
	font-size: 11px;
}

.haqmedod-console .haqmedod-users-subject {
	margin-block-end: 18px;
	padding: 11px 16px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--haqmedod-console-navy) 0%, #1f466d 100%);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.16);
}

.haqmedod-console .haqmedod-users-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 10px;
	background: var(--haqmedod-console-surface);
	box-shadow: 0 1px 2px rgba(22, 50, 79, 0.04);
}

.haqmedod-console .haqmedod-users-field-row {
	display: grid;
	gap: 14px 16px;
}

.haqmedod-console .haqmedod-users-field-row-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.haqmedod-console .haqmedod-users-field-row-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haqmedod-console .haqmedod-users-field-row-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.haqmedod-console .haqmedod-users-field-label {
	display: block;
	margin-block-end: 6px;
	color: var(--haqmedod-console-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.haqmedod-console .haqmedod-users-field-value {
	min-height: 38px;
	padding: 9px 12px;
	border: 1px solid var(--haqmedod-console-line);
	border-radius: 8px;
	background: #f4f7fa;
	color: var(--haqmedod-console-ink);
	font-size: 13px;
	line-height: 1.4;
	word-break: break-word;
}

.haqmedod-console .haqmedod-users-field-value-multiline {
	min-height: 72px;
	white-space: pre-wrap;
}

.haqmedod-console .haqmedod-users-deletion {
	margin-block-start: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--haqmedod-console-line);
}

.haqmedod-console .haqmedod-users-deletion-date {
	margin: 10px 0 0;
	color: var(--haqmedod-console-muted);
	font-size: 12px;
}

.haqmedod-console .haqmedod-users-deletion-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 14px;
}

.haqmedod-console .haqmedod-users-deletion-actions .haqmedod-btn-secondary {
	border: 1px solid var(--haqmedod-console-line-strong);
	background: var(--haqmedod-console-surface);
	color: var(--haqmedod-console-ink);
}

.haqmedod-console .haqmedod-users-deletion-actions .haqmedod-btn-secondary:hover,
.haqmedod-console .haqmedod-users-deletion-actions .haqmedod-btn-secondary:focus {
	border-color: var(--haqmedod-console-navy);
	color: var(--haqmedod-console-navy);
}

@container haqmedod-drive (max-width: 900px) {
	.haqmedod-console .haqmedod-users-layout {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.haqmedod-console .haqmedod-users-sidebar {
		border-inline-end: 0;
		border-block-end: 1px solid var(--haqmedod-console-line);
	}

	.haqmedod-console .haqmedod-users-field-row-3,
	.haqmedod-console .haqmedod-users-field-row-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.haqmedod-console .haqmedod-access-meta {
		justify-content: flex-start;
		width: 100%;
	}

	.haqmedod-console .haqmedod-access-user {
		flex: 1 1 220px;
	}
}

@container haqmedod-drive (max-width: 560px) {
	.haqmedod-console .haqmedod-users-detail-head {
		flex-direction: column;
	}

	.haqmedod-console .haqmedod-users-toggles {
		justify-content: flex-start;
	}

	.haqmedod-console .haqmedod-users-field-row-2,
	.haqmedod-console .haqmedod-users-field-row-3,
	.haqmedod-console .haqmedod-users-field-row-4 {
		grid-template-columns: 1fr;
	}

	.haqmedod-console .haqmedod-access-head {
		flex-direction: column;
	}

	.haqmedod-console .haqmedod-access-user,
	.haqmedod-console .haqmedod-access-date {
		width: 100%;
	}

	.haqmedod-console .haqmedod-access-table .haqmedod-col-folder {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Navigation menu links
 *
 * The drive links are appended to the theme's own menu, so they sit outside the
 * .haqmedod-root wrapper every other rule is scoped to and need their own. Only the
 * icon is positioned here; colour, spacing and type are left entirely to the
 * theme so the links match the menu items beside them.
 * ------------------------------------------------------------------------ */

.haqmedod-menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.haqmedod-menu-item > a > .haqmedod-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * Container queries, so the drive reflows inside narrow theme columns and page
 * builder sections rather than only at small viewport widths.
 * ------------------------------------------------------------------------ */

@container haqmedod-drive (max-width: 720px) {
	.haqmedod-drive-grid {
		flex-direction: column;
	}

	.haqmedod-drive-sidebar {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}
}

@container haqmedod-drive (max-width: 560px) {
	.haqmedod-root .haqmedod-folder-header {
		align-items: stretch;
		flex-direction: column;
	}

	.haqmedod-root .haqmedod-folder-actions .haqmedod-input {
		width: 100%;
	}

	.haqmedod-root .haqmedod-table thead {
		display: none;
	}

	.haqmedod-root .haqmedod-table tbody tr {
		display: block;
		margin-block-end: 12px;
		border: 1px solid var(--haqmedod-border);
		border-radius: var(--haqmedod-radius);
	}

	.haqmedod-root .haqmedod-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-block-end: 0;
	}

	/* Repeat the column heading beside each value in the stacked layout. */
	.haqmedod-root .haqmedod-table td[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--haqmedod-muted);
		font-size: var(--haqmedod-font-size-xs);
		font-weight: 600;
	}
}

@container haqmedod-profile (max-width: 560px) {
	.haqmedod-root .haqmedod-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container haqmedod-auth (max-width: 560px) {
	.haqmedod-root .haqmedod-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Viewport fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
	@media screen and (max-width: 782px) {
		.haqmedod-drive-grid {
			flex-direction: column;
		}

		.haqmedod-drive-sidebar {
			flex: 1 1 auto;
			width: 100%;
			max-width: none;
		}

		.haqmedod-root .haqmedod-form-grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.haqmedod-root .haqmedod-table thead {
			display: none;
		}

		.haqmedod-root .haqmedod-table tbody tr {
			display: block;
			margin-block-end: 12px;
			border: 1px solid var(--haqmedod-border);
			border-radius: var(--haqmedod-radius);
		}

		.haqmedod-root .haqmedod-table td {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			border-block-end: 0;
		}

		.haqmedod-root .haqmedod-table td[data-label]::before {
			content: attr(data-label);
			flex: 0 0 auto;
			color: var(--haqmedod-muted);
			font-size: var(--haqmedod-font-size-xs);
			font-weight: 600;
		}
	}
}

/* ---------------------------------------------------------------------------
 * User preferences
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.haqmedod-root *,
	.haqmedod-root *::before,
	.haqmedod-root *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (prefers-contrast: more) {
	.haqmedod-root {
		--haqmedod-border: currentColor;
		--haqmedod-border-strong: currentColor;
	}
}

@media print {
	.haqmedod-root .haqmedod-uploader,
	.haqmedod-root .haqmedod-folder-actions,
	.haqmedod-root .haqmedod-col-check,
	.haqmedod-root .haqmedod-col-actions,
	.haqmedod-root .haqmedod-tabs {
		display: none !important;
	}
}