/* [next]/internal/font/google/instrument_sans_64bf3bc2.module.css [app-client] (css) */
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/c7f47671e39f7787-s.06cvo47x4w1en.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/f06bf9da926bae75-s.p.0pz0x0eczp58u.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/c7f47671e39f7787-s.06cvo47x4w1en.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/f06bf9da926bae75-s.p.0pz0x0eczp58u.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/c7f47671e39f7787-s.06cvo47x4w1en.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/f06bf9da926bae75-s.p.0pz0x0eczp58u.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/c7f47671e39f7787-s.06cvo47x4w1en.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Instrument Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/f06bf9da926bae75-s.p.0pz0x0eczp58u.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Instrument Sans Fallback;
src: local(Arial);
ascent-override: 94.42%;
descent-override: 24.33%;
line-gap-override: 0.0%;
size-adjust: 102.74%;
}
.instrument_sans_64bf3bc2-module__kMvudW__className {
font-family: Instrument Sans, Instrument Sans Fallback;
font-style: normal;
}
.instrument_sans_64bf3bc2-module__kMvudW__variable {
--font-sans: "Instrument Sans", "Instrument Sans Fallback";
}
/* [next]/internal/font/google/ibm_plex_mono_e06d9437.module.css [app-client] (css) */
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/e390973e931a41c5-s.08hd0g.321csk.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/59b15b4bcd7b1eb5-s.0x08jh8vondwt.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/e532fa1b9921e1cd-s.0~wrfy7sm-h4g.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/2fe89d53234c61d4-s.0k_.i63k_i_qa.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/99e609270109b47d-s.p.16-z~2sp29ex6.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/5e05ae5b48faa55e-s.0m9hhkgdlzukj.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/a7afbb44bec2bb18-s.0juuwbcf7uz~t.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/02263ebadd758ea4-s.0qg7j5o.yrclm.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/68757d6cddeff913-s.0hkrq11n-dhos.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/effe91970fc4db64-s.p.07ig5l8azj~hy.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/6ff74e33ebd7bca3-s.0_n_qwbzcushi.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/1a69062cfe6f77f8-s.07r2ragk8ph~z.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/9a4838fcda0d1bca-s.0787d67~10694.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/2e95a7d252b9825a-s.0dgq8lqrj3gc_.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: IBM Plex Mono;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/23b7a97ae3b5c134-s.p.0o14nraug8u5s.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: IBM Plex Mono Fallback;
src: local(Arial);
ascent-override: 76.16%;
descent-override: 20.43%;
line-gap-override: 0.0%;
size-adjust: 134.59%;
}
.ibm_plex_mono_e06d9437-module__v8ILfq__className {
font-family: IBM Plex Mono, IBM Plex Mono Fallback;
font-style: normal;
}
.ibm_plex_mono_e06d9437-module__v8ILfq__variable {
--font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
}
/* [project]/packages/ui/src/app-identity.css [app-client] (css) */
:root {
--app-environment-background: #edf3fe;
--app-environment-ink: #2d67cb;
}
/* [project]/packages/ui/src/tokens.css [app-client] (css) */
:root {
--bg: #fff;
--bg-2: #fff;
--fg: #101418;
--muted: #5b6774;
--stroke: #10141833;
--accent: #f8b014;
--focus: #377df7;
--ok: #1f883d;
--warn: #b35a00;
--danger: #d1252f;
--calendar-absence-base: #60758e;
--calendar-absence-fill: #edf1f6;
--calendar-absence-border: var(--calendar-absence-base);
--calendar-absence-text: #43566f;
--calendar-day-off-base: #6659d4;
--calendar-day-off-fill: #ebe9f9;
--calendar-day-off-border: var(--calendar-day-off-base);
--calendar-day-off-text: #4e43a8;
--calendar-holiday-base: #2f91c5;
--calendar-holiday-fill: #e4f1f7;
--calendar-holiday-border: var(--calendar-holiday-base);
--calendar-holiday-text: #246c91;
--calendar-worked-fill: #f1f8f3;
--calendar-worked-border: #8fc79e;
--calendar-worked-text: #2e6b46;
--calendar-attention-fill: #fcf5ec;
--calendar-attention-border: #d9a66b;
--calendar-attention-text: #8a4f1d;
--calendar-missing-fill: #fdf1f2;
--calendar-missing-border: #e58a95;
--calendar-missing-text: #b4232c;
--calendar-blank-fill: #fff;
--calendar-blank-border: #e5e7eb;
--calendar-blank-text: #98a2b3;
--calendar-weekend-fill: #f8fafc;
--calendar-weekend-border: #d0d5dd;
--calendar-weekend-text: #667085;
--calendar-neutral-fill: #fcfcfd;
--calendar-neutral-border: #d5d9df;
--calendar-neutral-text: #667085;
--calendar-readonly-fill: #fcfcfd;
--calendar-readonly-border: #d5d9df;
--calendar-readonly-text: #667085;
--calendar-readonly-stripe: #94a3b826;
--page-title-size: 28px;
--page-title-size-phone: 24px;
--radius: 10px;
--shadow: 0 1px 2px #10141814;
--shadow-2: 0 8px 24px #10141829;
--cm-grid: #1014180f;
--cm-blob-warm: #f8b0140e;
--cm-blob-cool: #0000;
}
/* [project]/node_modules/.pnpm/pdfjs-dist@5.7.284/node_modules/pdfjs-dist/web/pdf_viewer.css [app-client] (css) */
.messageBar {
--closing-button-icon: url("../media/messageBar_closingButton.15rqkmbgrfbfy.svg");
--message-bar-close-button-color: var(--text-primary-color);
--message-bar-close-button-color-hover: var(--text-primary-color);
--message-bar-close-button-border-radius: 4px;
--message-bar-close-button-border: none;
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) #fbfbfe24;
--message-bar-close-button-hover-bg-color: var(--csstools-light-dark-toggle--0, #15141a24);
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) #fbfbfe36;
--message-bar-close-button-active-bg-color: var(--csstools-light-dark-toggle--1, #15141a36);
--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) #fbfbfe12;
--message-bar-close-button-focus-bg-color: var(--csstools-light-dark-toggle--2, #15141a12);
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.messageBar {
--message-bar-close-button-hover-bg-color: light-dark(#15141a24, #fbfbfe24);
--message-bar-close-button-active-bg-color: light-dark(#15141a36, #fbfbfe36);
--message-bar-close-button-focus-bg-color: light-dark(#15141a12, #fbfbfe12);
}
}
@supports not (color: light-dark(tan, tan)) {
.messageBar * {
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) #fbfbfe24;
--message-bar-close-button-hover-bg-color: var(--csstools-light-dark-toggle--0, #15141a24);
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) #fbfbfe36;
--message-bar-close-button-active-bg-color: var(--csstools-light-dark-toggle--1, #15141a36);
--csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) #fbfbfe12;
--message-bar-close-button-focus-bg-color: var(--csstools-light-dark-toggle--2, #15141a12);
}
}
@media screen and (forced-colors: active) {
.messageBar {
--message-bar-close-button-color: ButtonText;
--message-bar-close-button-border: 1px solid ButtonText;
--message-bar-close-button-hover-bg-color: ButtonText;
--message-bar-close-button-active-bg-color: ButtonText;
--message-bar-close-button-focus-bg-color: ButtonText;
--message-bar-close-button-color-hover: HighlightText;
}
}
.messageBar {
-webkit-user-select: none;
user-select: none;
border: 1px solid var(--message-bar-border-color);
background: var(--message-bar-bg-color);
color: var(--message-bar-fg-color);
border-radius: 4px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 16px;
display: flex;
position: relative;
}
.messageBar > div {
align-self: stretch;
align-items: flex-start;
gap: 8px;
display: flex;
}
:is(.messageBar > div):before {
content: "";
width: 16px;
height: 16px;
-webkit-mask-image: var(--message-bar-icon);
-webkit-mask-image: var(--message-bar-icon);
mask-image: var(--message-bar-icon);
background-color: var(--message-bar-icon-color);
flex-shrink: 0;
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
}
.messageBar button {
cursor: pointer;
}
:is(.messageBar button):focus-visible {
outline: var(--focus-ring-outline);
outline-offset: 2px;
}
.messageBar .closeButton {
border-radius: var(--message-bar-close-button-border-radius);
border: var(--message-bar-close-button-border);
background: none;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
display: flex;
}
:is(.messageBar .closeButton):before {
content: "";
width: 16px;
height: 16px;
-webkit-mask-image: var(--closing-button-icon);
-webkit-mask-image: var(--closing-button-icon);
mask-image: var(--closing-button-icon);
background-color: var(--message-bar-close-button-color);
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
}
:is(.messageBar .closeButton):is(:hover, :active, :focus):before {
background-color: var(--message-bar-close-button-color-hover);
}
:is(.messageBar .closeButton):hover {
background-color: var(--message-bar-close-button-hover-bg-color);
}
:is(.messageBar .closeButton):active {
background-color: var(--message-bar-close-button-active-bg-color);
}
:is(.messageBar .closeButton):focus {
background-color: var(--message-bar-close-button-focus-bg-color);
}
:is(.messageBar .closeButton) > span {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
}
#editorUndoBar {
--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) #fbfbfe;
--text-primary-color: var(--csstools-light-dark-toggle--3, #15141a);
--message-bar-icon: url("../media/messageBar_info.17crwltyl6qk5.svg");
--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #73a7f3;
--message-bar-icon-color: var(--csstools-light-dark-toggle--4, #0060df);
--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) #003070;
--message-bar-bg-color: var(--csstools-light-dark-toggle--5, #deeafc);
--message-bar-fg-color: var(--text-primary-color);
--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) #ffffff14;
--message-bar-border-color: var(--csstools-light-dark-toggle--6, #00000014);
--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) #ffffff14;
--undo-button-bg-color: var(--csstools-light-dark-toggle--7, #15141a12);
--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) #ffffff24;
--undo-button-bg-color-hover: var(--csstools-light-dark-toggle--8, #15141a24);
--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) #ffffff36;
--undo-button-bg-color-active: var(--csstools-light-dark-toggle--9, #15141a36);
--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) #0df;
--undo-button-border: 1px solid var(--csstools-light-dark-toggle--10, #0060df);
--undo-button-fg-color: var(--message-bar-fg-color);
--undo-button-fg-color-hover: var(--undo-button-fg-color);
--undo-button-fg-color-active: var(--undo-button-fg-color);
}
@supports (color: light-dark(red, red)) {
#editorUndoBar {
--text-primary-color: light-dark(#15141a, #fbfbfe);
--message-bar-icon-color: light-dark(#0060df, #73a7f3);
--message-bar-bg-color: light-dark(#deeafc, #003070);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#editorUndoBar {
--message-bar-border-color: light-dark(#00000014, #ffffff14);
--undo-button-bg-color: light-dark(#15141a12, #ffffff14);
--undo-button-bg-color-hover: light-dark(#15141a24, #ffffff24);
--undo-button-bg-color-active: light-dark(#15141a36, #ffffff36);
}
}
@supports (color: light-dark(red, red)) {
#editorUndoBar {
--undo-button-border: 1px solid light-dark(#0060df, #0df);
}
}
@supports not (color: light-dark(tan, tan)) {
#editorUndoBar * {
--csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) #fbfbfe;
--text-primary-color: var(--csstools-light-dark-toggle--3, #15141a);
--csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #73a7f3;
--message-bar-icon-color: var(--csstools-light-dark-toggle--4, #0060df);
--csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) #003070;
--message-bar-bg-color: var(--csstools-light-dark-toggle--5, #deeafc);
--csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) #ffffff14;
--message-bar-border-color: var(--csstools-light-dark-toggle--6, #00000014);
--csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) #ffffff14;
--undo-button-bg-color: var(--csstools-light-dark-toggle--7, #15141a12);
--csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) #ffffff24;
--undo-button-bg-color-hover: var(--csstools-light-dark-toggle--8, #15141a24);
--csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) #ffffff36;
--undo-button-bg-color-active: var(--csstools-light-dark-toggle--9, #15141a36);
--csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) #0df;
--undo-button-border: 1px solid var(--csstools-light-dark-toggle--10, #0060df);
}
}
@media screen and (forced-colors: active) {
#editorUndoBar {
--text-primary-color: CanvasText;
--message-bar-icon-color: CanvasText;
--message-bar-bg-color: Canvas;
--message-bar-border-color: CanvasText;
--undo-button-bg-color: ButtonText;
--undo-button-bg-color-hover: SelectedItem;
--undo-button-bg-color-active: SelectedItem;
--undo-button-fg-color: ButtonFace;
--undo-button-fg-color-hover: SelectedItemText;
--undo-button-fg-color-active: SelectedItemText;
--undo-button-border: none;
}
}
#editorUndoBar {
z-index: 10;
font: menu;
cursor: default;
padding-block: 8px;
padding-inline: 16px 8px;
font-size: 15px;
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%);
}
#editorUndoBar button {
cursor: pointer;
}
#editorUndoBar #editorUndoBarUndoButton {
color: var(--undo-button-fg-color);
border: var(--undo-button-border);
background-color: var(--undo-button-bg-color);
border-radius: 4px;
height: 32px;
margin-inline-start: 8px;
padding: 4px 16px;
font-weight: 590;
line-height: 19.5px;
}
:is(#editorUndoBar #editorUndoBarUndoButton):hover {
background-color: var(--undo-button-bg-color-hover);
color: var(--undo-button-fg-color-hover);
}
:is(#editorUndoBar #editorUndoBarUndoButton):active {
background-color: var(--undo-button-bg-color-active);
color: var(--undo-button-fg-color-active);
}
#editorUndoBar > div {
align-items: center;
}
.dialog {
--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #1c1b22;
--dialog-bg-color: var(--csstools-light-dark-toggle--11, white);
--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #1c1b22;
--dialog-border-color: var(--csstools-light-dark-toggle--12, white);
--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #15141a;
--dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--13, #3a394433);
--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #fbfbfe;
--text-primary-color: var(--csstools-light-dark-toggle--14, #15141a);
--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #cfcfd8;
--text-secondary-color: var(--csstools-light-dark-toggle--15, #5b5b66);
--hover-filter: brightness(.9);
--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #0df;
--link-fg-color: var(--csstools-light-dark-toggle--16, #0060df);
--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #80ebff;
--link-hover-fg-color: var(--csstools-light-dark-toggle--17, #0250bb);
--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #52525e;
--separator-color: var(--csstools-light-dark-toggle--18, #f0f0f4);
--textarea-border-color: #8f8f9d;
--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #42414d;
--textarea-bg-color: var(--csstools-light-dark-toggle--19, white);
--textarea-fg-color: var(--text-secondary-color);
--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #2b2a33;
--radio-bg-color: var(--csstools-light-dark-toggle--20, #f0f0f4);
--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #15141a;
--radio-checked-bg-color: var(--csstools-light-dark-toggle--21, #fbfbfe);
--radio-border-color: #8f8f9d;
--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #0df;
--radio-checked-border-color: var(--csstools-light-dark-toggle--22, #0060df);
--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) #fbfbfe12;
--button-secondary-bg-color: var(--csstools-light-dark-toggle--23, #15141a12);
--button-secondary-fg-color: var(--text-primary-color);
--button-secondary-border-color: var(--button-secondary-bg-color);
--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) #fbfbfe36;
--button-secondary-active-bg-color: var(--csstools-light-dark-toggle--24, #15141a36);
--button-secondary-active-fg-color: var(--button-secondary-fg-color);
--button-secondary-active-border-color: var(--button-secondary-bg-color);
--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) #fbfbfe24;
--button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--25, #15141a24);
--button-secondary-hover-fg-color: var(--button-secondary-fg-color);
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
--button-secondary-disabled-bg-color: var(--button-secondary-bg-color);
--button-secondary-disabled-border-color: var(--button-secondary-border-color);
--button-secondary-disabled-fg-color: var(--button-secondary-fg-color);
--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #0df;
--button-primary-bg-color: var(--csstools-light-dark-toggle--26, #0060df);
--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #15141a;
--button-primary-fg-color: var(--csstools-light-dark-toggle--27, #fbfbfe);
--button-primary-border-color: var(--button-primary-bg-color);
--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #aaf2ff;
--button-primary-active-bg-color: var(--csstools-light-dark-toggle--28, #054096);
--button-primary-active-fg-color: var(--button-primary-fg-color);
--button-primary-active-border-color: var(--button-primary-active-bg-color);
--csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #80ebff;
--button-primary-hover-bg-color: var(--csstools-light-dark-toggle--29, #0250bb);
--button-primary-hover-fg-color: var(--button-primary-fg-color);
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
--button-primary-disabled-bg-color: var(--button-primary-bg-color);
--button-primary-disabled-border-color: var(--button-primary-border-color);
--button-primary-disabled-fg-color: var(--button-primary-fg-color);
--button-disabled-opacity: .4;
--csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #42414d;
--input-text-bg-color: var(--csstools-light-dark-toggle--30, white);
--input-text-fg-color: var(--text-primary-color);
}
@supports (color: light-dark(red, red)) {
.dialog {
--dialog-bg-color: light-dark(#fff, #1c1b22);
--dialog-border-color: light-dark(#fff, #1c1b22);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.dialog {
--dialog-shadow: 0 2px 14px 0 light-dark(#3a394433, #15141a);
}
}
@supports (color: light-dark(red, red)) {
.dialog {
--text-primary-color: light-dark(#15141a, #fbfbfe);
--text-secondary-color: light-dark(#5b5b66, #cfcfd8);
--link-fg-color: light-dark(#0060df, #0df);
--link-hover-fg-color: light-dark(#0250bb, #80ebff);
--separator-color: light-dark(#f0f0f4, #52525e);
--textarea-bg-color: light-dark(#fff, #42414d);
--radio-bg-color: light-dark(#f0f0f4, #2b2a33);
--radio-checked-bg-color: light-dark(#fbfbfe, #15141a);
--radio-checked-border-color: light-dark(#0060df, #0df);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.dialog {
--button-secondary-bg-color: light-dark(#15141a12, #fbfbfe12);
--button-secondary-active-bg-color: light-dark(#15141a36, #fbfbfe36);
--button-secondary-hover-bg-color: light-dark(#15141a24, #fbfbfe24);
}
}
@supports (color: light-dark(red, red)) {
.dialog {
--button-primary-bg-color: light-dark(#0060df, #0df);
--button-primary-fg-color: light-dark(#fbfbfe, #15141a);
--button-primary-active-bg-color: light-dark(#054096, #aaf2ff);
--button-primary-hover-bg-color: light-dark(#0250bb, #80ebff);
--input-text-bg-color: light-dark(#fff, #42414d);
}
}
@supports not (color: light-dark(tan, tan)) {
.dialog * {
--csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #1c1b22;
--dialog-bg-color: var(--csstools-light-dark-toggle--11, white);
--csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #1c1b22;
--dialog-border-color: var(--csstools-light-dark-toggle--12, white);
--csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #15141a;
--dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--13, #3a394433);
--csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #fbfbfe;
--text-primary-color: var(--csstools-light-dark-toggle--14, #15141a);
--csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #cfcfd8;
--text-secondary-color: var(--csstools-light-dark-toggle--15, #5b5b66);
--csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #0df;
--link-fg-color: var(--csstools-light-dark-toggle--16, #0060df);
--csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #80ebff;
--link-hover-fg-color: var(--csstools-light-dark-toggle--17, #0250bb);
--csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #52525e;
--separator-color: var(--csstools-light-dark-toggle--18, #f0f0f4);
--csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #42414d;
--textarea-bg-color: var(--csstools-light-dark-toggle--19, white);
--csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #2b2a33;
--radio-bg-color: var(--csstools-light-dark-toggle--20, #f0f0f4);
--csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #15141a;
--radio-checked-bg-color: var(--csstools-light-dark-toggle--21, #fbfbfe);
--csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #0df;
--radio-checked-border-color: var(--csstools-light-dark-toggle--22, #0060df);
--csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) #fbfbfe12;
--button-secondary-bg-color: var(--csstools-light-dark-toggle--23, #15141a12);
--csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) #fbfbfe36;
--button-secondary-active-bg-color: var(--csstools-light-dark-toggle--24, #15141a36);
--csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) #fbfbfe24;
--button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--25, #15141a24);
--csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #0df;
--button-primary-bg-color: var(--csstools-light-dark-toggle--26, #0060df);
--csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #15141a;
--button-primary-fg-color: var(--csstools-light-dark-toggle--27, #fbfbfe);
--csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #aaf2ff;
--button-primary-active-bg-color: var(--csstools-light-dark-toggle--28, #054096);
--csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #80ebff;
--button-primary-hover-bg-color: var(--csstools-light-dark-toggle--29, #0250bb);
--csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #42414d;
--input-text-bg-color: var(--csstools-light-dark-toggle--30, white);
}
}
@media (prefers-color-scheme: dark) {
.dialog {
--hover-filter: brightness(1.4);
--button-disabled-opacity: .6;
}
}
@media screen and (forced-colors: active) {
.dialog {
--dialog-bg-color: Canvas;
--dialog-border-color: CanvasText;
--dialog-shadow: none;
--text-primary-color: CanvasText;
--text-secondary-color: CanvasText;
--hover-filter: none;
--link-fg-color: LinkText;
--link-hover-fg-color: LinkText;
--separator-color: CanvasText;
--textarea-border-color: ButtonBorder;
--textarea-bg-color: Field;
--textarea-fg-color: ButtonText;
--radio-bg-color: ButtonFace;
--radio-checked-bg-color: ButtonFace;
--radio-border-color: ButtonText;
--radio-checked-border-color: ButtonText;
--button-secondary-bg-color: ButtonFace;
--button-secondary-fg-color: ButtonText;
--button-secondary-border-color: ButtonText;
--button-secondary-active-bg-color: HighlightText;
--button-secondary-active-fg-color: SelectedItem;
--button-secondary-active-border-color: ButtonText;
--button-secondary-hover-bg-color: HighlightText;
--button-secondary-hover-fg-color: SelectedItem;
--button-secondary-hover-border-color: SelectedItem;
--button-secondary-disabled-fg-color: GrayText;
--button-secondary-disabled-border-color: GrayText;
--button-primary-bg-color: ButtonText;
--button-primary-fg-color: ButtonFace;
--button-primary-border-color: ButtonText;
--button-primary-active-bg-color: SelectedItem;
--button-primary-active-fg-color: HighlightText;
--button-primary-active-border-color: ButtonText;
--button-primary-hover-bg-color: SelectedItem;
--button-primary-hover-fg-color: HighlightText;
--button-primary-hover-border-color: SelectedItem;
--button-primary-disabled-bg-color: GrayText;
--button-primary-disabled-fg-color: ButtonFace;
--button-primary-disabled-border-color: GrayText;
--button-disabled-opacity: 1;
--input-text-bg-color: Field;
--input-text-fg-color: FieldText;
}
}
.dialog {
font: message-box;
border: 1px solid var(--dialog-border-color);
background: var(--dialog-bg-color);
color: var(--text-primary-color);
box-shadow: var(--dialog-shadow);
border-radius: 4px;
padding: 12px 16px;
font-size: 13px;
font-weight: 400;
line-height: 150%;
}
:is(.dialog .mainContainer) :focus-visible {
outline: var(--focus-ring-outline);
outline-offset: 2px;
}
:is(.dialog .mainContainer) .title {
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 12px;
width: auto;
display: flex;
}
:is(:is(.dialog .mainContainer) .title) > span {
font-size: 13px;
font-style: normal;
font-weight: 590;
line-height: 150%;
}
:is(.dialog .mainContainer) .dialogSeparator {
border-top: 1px solid var(--separator-color);
border-bottom: none;
width: 100%;
height: 0;
margin-block: 4px;
}
:is(.dialog .mainContainer) .dialogButtonsGroup {
align-self: flex-end;
gap: 12px;
display: flex;
}
:is(.dialog .mainContainer) .radio {
flex-direction: column;
align-items: flex-start;
gap: 4px;
display: flex;
}
:is(:is(.dialog .mainContainer) .radio) > .radioButton {
align-self: stretch;
align-items: center;
gap: 8px;
display: flex;
}
:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input {
appearance: none;
box-sizing: border-box;
background-color: var(--radio-bg-color);
border: 1px solid var(--radio-border-color);
border-radius: 50%;
width: 16px;
height: 16px;
}
:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover {
filter: var(--hover-filter);
}
:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked {
background-color: var(--radio-checked-bg-color);
border: 4px solid var(--radio-checked-border-color);
}
:is(:is(.dialog .mainContainer) .radio) > .radioLabel {
align-self: stretch;
align-items: flex-start;
gap: 10px;
padding-inline-start: 24px;
display: flex;
}
:is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span {
color: var(--text-secondary-color);
flex: 1 0 0;
font-size: 11px;
}
:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton)) {
font: menu;
border: 1px solid;
border-radius: 4px;
width: auto;
height: 32px;
padding: 4px 16px;
font-size: 13px;
font-weight: 590;
}
:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):hover {
cursor: pointer;
filter: var(--hover-filter);
}
:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))) > span {
color: inherit;
font: inherit;
}
.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))) {
color: var(--button-secondary-fg-color);
background-color: var(--button-secondary-bg-color);
border-color: var(--button-secondary-border-color);
}
.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):hover {
color: var(--button-secondary-hover-fg-color);
background-color: var(--button-secondary-hover-bg-color);
border-color: var(--button-secondary-hover-border-color);
}
.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):active {
color: var(--button-secondary-active-fg-color);
background-color: var(--button-secondary-active-bg-color);
border-color: var(--button-secondary-active-border-color);
}
.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):disabled {
background-color: var(--button-secondary-disabled-bg-color);
border-color: var(--button-secondary-disabled-border-color);
color: var(--button-secondary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))) {
color: var(--button-primary-fg-color);
background-color: var(--button-primary-bg-color);
border-color: var(--button-primary-border-color);
opacity: 1;
}
.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):hover {
color: var(--button-primary-hover-fg-color);
background-color: var(--button-primary-hover-bg-color);
border-color: var(--button-primary-hover-border-color);
}
.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):active {
color: var(--button-primary-active-fg-color);
background-color: var(--button-primary-active-bg-color);
border-color: var(--button-primary-active-border-color);
}
.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):disabled {
background-color: var(--button-primary-disabled-bg-color);
border-color: var(--button-primary-disabled-border-color);
color: var(--button-primary-disabled-fg-color);
opacity: var(--button-disabled-opacity);
}
:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button, .closeButton, .clearInputButton))):disabled {
pointer-events: none;
}
:is(.dialog .mainContainer) a {
color: var(--link-fg-color);
}
:is(:is(.dialog .mainContainer) a):hover {
color: var(--link-hover-fg-color);
}
:is(.dialog .mainContainer) textarea {
font: inherit;
resize: none;
box-sizing: border-box;
border: 1px solid var(--textarea-border-color);
background: var(--textarea-bg-color);
color: var(--textarea-fg-color);
border-radius: 4px;
margin: 0;
padding: 8px;
}
:is(:is(.dialog .mainContainer) textarea):focus {
outline-offset: 0;
border-color: #0000;
}
:is(:is(.dialog .mainContainer) textarea):disabled {
pointer-events: none;
opacity: .4;
}
:is(.dialog .mainContainer) input[type="text"] {
background-color: var(--input-text-bg-color);
color: var(--input-text-fg-color);
}
:is(.dialog .mainContainer) .messageBar {
--csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #5a3100;
--message-bar-bg-color: var(--csstools-light-dark-toggle--31, #ffebcd);
--csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #fbfbfe;
--message-bar-fg-color: var(--csstools-light-dark-toggle--32, #15141a);
--csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) #ffffff14;
--message-bar-border-color: var(--csstools-light-dark-toggle--33, #00000014);
--message-bar-icon: url("../media/messageBar_warning.0zri3991i~s-j.svg");
--csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #e49c49;
--message-bar-icon-color: var(--csstools-light-dark-toggle--34, #cd411e);
}
@supports (color: light-dark(red, red)) {
:is(.dialog .mainContainer) .messageBar {
--message-bar-bg-color: light-dark(#ffebcd, #5a3100);
--message-bar-fg-color: light-dark(#15141a, #fbfbfe);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
:is(.dialog .mainContainer) .messageBar {
--message-bar-border-color: light-dark(#00000014, #ffffff14);
}
}
@supports (color: light-dark(red, red)) {
:is(.dialog .mainContainer) .messageBar {
--message-bar-icon-color: light-dark(#cd411e, #e49c49);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(.dialog .mainContainer) .messageBar) * {
--csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #5a3100;
--message-bar-bg-color: var(--csstools-light-dark-toggle--31, #ffebcd);
--csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #fbfbfe;
--message-bar-fg-color: var(--csstools-light-dark-toggle--32, #15141a);
--csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) #ffffff14;
--message-bar-border-color: var(--csstools-light-dark-toggle--33, #00000014);
--csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #e49c49;
--message-bar-icon-color: var(--csstools-light-dark-toggle--34, #cd411e);
}
}
@media screen and (forced-colors: active) {
:is(.dialog .mainContainer) .messageBar {
--message-bar-bg-color: HighlightText;
--message-bar-fg-color: CanvasText;
--message-bar-border-color: CanvasText;
--message-bar-icon-color: CanvasText;
}
}
:is(.dialog .mainContainer) .messageBar {
align-self: stretch;
}
:is(:is(:is(.dialog .mainContainer) .messageBar) > div):before, :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div {
margin-block: 4px;
}
:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div {
flex-direction: column;
flex: 1 0 0;
align-items: flex-start;
gap: 8px;
display: flex;
}
:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title {
font-size: 13px;
font-weight: 590;
}
:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description {
font-size: 13px;
}
:is(.dialog .mainContainer) .toggler {
align-self: stretch;
align-items: center;
gap: 8px;
display: flex;
}
:is(:is(.dialog .mainContainer) .toggler) > .togglerLabel {
-webkit-user-select: none;
user-select: none;
}
.textLayer {
--csstools-color-scheme--light: initial;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light only;
text-align: initial;
opacity: 1;
-moz-text-size-adjust: none;
text-size-adjust: none;
forced-color-adjust: none;
transform-origin: 0 0;
caret-color: canvastext;
z-index: 0;
line-height: 1;
position: absolute;
inset: 0;
overflow: clip;
}
.textLayer.highlighting {
touch-action: none;
}
.textLayer :is(span, br) {
color: #0000;
white-space: pre;
cursor: text;
transform-origin: 0 0;
position: absolute;
}
.textLayer {
--min-font-size: 1;
--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
--min-font-size-inv: calc(1 / var(--min-font-size));
}
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
z-index: 1;
--font-height: 0;
font-size: calc(var(--text-scale-factor) * var(--font-height));
--scale-x: 1;
--rotate: 0deg;
transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent {
display: contents;
}
.textLayer span[role="img"] {
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.textLayer .highlight {
--highlight-bg-color: #b400aa40;
--highlight-selected-bg-color: #00640040;
--highlight-backdrop-filter: none;
--highlight-selected-backdrop-filter: none;
}
@media screen and (forced-colors: active) {
.textLayer .highlight {
--highlight-bg-color: transparent;
--highlight-selected-bg-color: transparent;
--highlight-backdrop-filter: var(--hcm-highlight-filter);
--highlight-selected-backdrop-filter: var(--hcm-highlight-selected-filter);
}
}
.textLayer .highlight {
background-color: var(--highlight-bg-color);
-webkit-backdrop-filter: var(--highlight-backdrop-filter);
backdrop-filter: var(--highlight-backdrop-filter);
border-radius: 4px;
margin: -1px;
padding: 1px;
}
.appended:is(.textLayer .highlight) {
position: initial;
}
.begin:is(.textLayer .highlight) {
border-radius: 4px 0 0 4px;
}
.end:is(.textLayer .highlight) {
border-radius: 0 4px 4px 0;
}
.middle:is(.textLayer .highlight) {
border-radius: 0;
}
.selected:is(.textLayer .highlight) {
background-color: var(--highlight-selected-bg-color);
-webkit-backdrop-filter: var(--highlight-selected-backdrop-filter);
backdrop-filter: var(--highlight-selected-backdrop-filter);
scroll-margin-top: 50px;
}
.textLayer ::selection {
background: #0000ff40;
background: color-mix(in srgb, AccentColor, transparent 75%);
}
.textLayer br::selection {
background: none;
}
.textLayer .endOfContent {
z-index: 0;
cursor: default;
-webkit-user-select: none;
user-select: none;
display: block;
position: absolute;
inset: 100% 0 0;
}
.textLayer.selecting .endOfContent {
top: 0;
}
.textLayerImages {
-webkit-user-select: none;
user-select: none;
position: absolute;
inset: 0;
}
.textLayerImages canvas {
transform-origin: 0 0;
position: absolute;
}
.annotationLayer {
--csstools-color-scheme--light: initial;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light only;
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,");
--input-focus-border-color: Highlight;
--input-focus-outline: 1px solid Canvas;
--input-unfocused-border-color: transparent;
--input-disabled-border-color: transparent;
--input-hover-border-color: black;
--link-outline: none;
}
@media screen and (forced-colors: active) {
.annotationLayer {
--input-focus-border-color: CanvasText;
--input-unfocused-border-color: ActiveText;
--input-disabled-border-color: GrayText;
--input-hover-border-color: Highlight;
--link-outline: 1.5px solid LinkText;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
outline: 1.5px solid selecteditem;
}
.annotationLayer .linkAnnotation {
outline: var(--link-outline);
}
:is(.annotationLayer .linkAnnotation):hover {
-webkit-backdrop-filter: var(--hcm-highlight-filter);
backdrop-filter: var(--hcm-highlight-filter);
}
:is(.annotationLayer .linkAnnotation) > a:hover {
box-shadow: none;
opacity: 0 !important;
background: none !important;
}
.annotationLayer .popupAnnotation .popup {
outline: calc(1.5px * var(--total-scale-factor)) solid CanvasText !important;
color: buttontext !important;
background-color: buttonface !important;
}
.annotationLayer .highlightArea:hover:after {
width: 100%;
height: 100%;
-webkit-backdrop-filter: var(--hcm-highlight-filter);
backdrop-filter: var(--hcm-highlight-filter);
content: "";
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
.annotationLayer .popupAnnotation.focused .popup {
outline: calc(3px * var(--total-scale-factor)) solid Highlight !important;
}
}
.annotationLayer {
pointer-events: none;
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.annotationLayer[data-main-rotation="90"] .norotate {
transform: rotate(270deg)translateX(-100%);
}
.annotationLayer[data-main-rotation="180"] .norotate {
transform: rotate(180deg)translate(-100%, -100%);
}
.annotationLayer[data-main-rotation="270"] .norotate {
transform: rotate(90deg)translateY(-100%);
}
.annotationLayer.disabled section, .annotationLayer.disabled .popup {
pointer-events: none;
}
.annotationLayer .annotationContent {
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
}
.freetext:is(.annotationLayer .annotationContent) {
white-space: nowrap;
background: none;
border: none;
font: 10px / 1.35 sans-serif;
inset: 0;
overflow: visible;
}
.annotationLayer section {
text-align: initial;
pointer-events: auto;
box-sizing: border-box;
transform-origin: 0 0;
-webkit-user-select: none;
user-select: none;
position: absolute;
}
:is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent {
display: none;
}
:is(.annotationLayer section) .overlaidText {
width: 0;
height: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.textLayer.selecting ~ .annotationLayer section {
pointer-events: none;
}
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
width: 100%;
height: 100%;
font-size: 1em;
position: absolute;
top: 0;
left: 0;
}
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
opacity: .2;
background-color: #ff0;
}
.annotationLayer .linkAnnotation.hasBorder:hover {
background-color: #ff03;
}
.annotationLayer .hasBorder {
background-size: 100% 100%;
}
.annotationLayer .textAnnotation img {
cursor: pointer;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
background-image: var(--annotation-unfocused-field-background);
border: 2px solid var(--input-unfocused-border-color);
box-sizing: border-box;
font: calc(9px * var(--total-scale-factor)) sans-serif;
vertical-align: top;
width: 100%;
height: 100%;
margin: 0;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
outline: 1.5px solid red;
}
.annotationLayer .choiceWidgetAnnotation select option {
padding: 0;
}
.annotationLayer .buttonWidgetAnnotation.radioButton input {
border-radius: 50%;
}
.annotationLayer .textWidgetAnnotation textarea {
resize: none;
}
.annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea), .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
border: 2px solid var(--input-disabled-border-color);
cursor: not-allowed;
background: none;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
border-radius: 2px;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus {
border: 2px solid var(--input-focus-border-color);
outline: var(--input-focus-outline);
background: none;
border-radius: 2px;
}
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
background-color: #0000;
background-image: none;
}
.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
border: 2px solid var(--input-focus-border-color);
outline: var(--input-focus-outline);
border-radius: 2px;
}
.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
border: 2px solid var(--input-focus-border-color);
outline: var(--input-focus-outline);
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after, .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
content: "";
background-color: canvastext;
display: block;
position: absolute;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
width: 1px;
height: 80%;
left: 45%;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
transform: rotate(45deg);
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
transform: rotate(-45deg);
}
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
border-radius: 50%;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
}
.annotationLayer .textWidgetAnnotation input.comb {
padding-left: 2px;
padding-right: 0;
font-family: monospace;
}
.annotationLayer .textWidgetAnnotation input.comb:focus {
width: 103%;
}
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
appearance: none;
}
.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
width: 100%;
height: 100%;
}
.annotationLayer .popupAnnotation {
font-size: calc(9px * var(--total-scale-factor));
pointer-events: none;
width: max-content;
max-width: 45%;
height: auto;
position: absolute;
}
.annotationLayer .popup {
color: #000;
box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;
border-radius: calc(2px * var(--total-scale-factor));
padding: calc(6px * var(--total-scale-factor));
cursor: pointer;
font: message-box;
white-space: normal;
word-wrap: break-word;
pointer-events: auto;
-webkit-user-select: text;
user-select: text;
background-color: #ff9;
outline: 1.5px solid #ffff4a;
}
.annotationLayer .popupAnnotation.focused .popup {
outline-width: 3px;
}
.annotationLayer .popup * {
font-size: calc(9px * var(--total-scale-factor));
}
.annotationLayer .popup > .header {
display: inline-block;
}
.annotationLayer .popup > .header > .title {
font-weight: bold;
display: inline;
}
.annotationLayer .popup > .header .popupDate {
margin-left: calc(5px * var(--total-scale-factor));
width: fit-content;
display: inline-block;
}
.annotationLayer .popupContent {
margin-top: calc(2px * var(--total-scale-factor));
padding-top: calc(2px * var(--total-scale-factor));
border-top: 1px solid #333;
}
.annotationLayer .richText > * {
white-space: pre-wrap;
font-size: calc(9px * var(--total-scale-factor));
}
.annotationLayer .popupTriggerArea {
cursor: pointer;
}
:is(.annotationLayer .popupTriggerArea):hover {
-webkit-backdrop-filter: var(--hcm-highlight-filter);
backdrop-filter: var(--hcm-highlight-filter);
}
.annotationLayer section svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.annotationLayer .annotationTextContent {
opacity: 0;
color: #0000;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
}
:is(.annotationLayer .annotationTextContent) span {
width: 100%;
display: inline-block;
}
.annotationLayer svg.quadrilateralsContainer {
contain: strict;
z-index: -1;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
:root {
--xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,");
--xfa-focus-outline: auto;
}
@media screen and (forced-colors: active) {
:root {
--xfa-focus-outline: 2px solid CanvasText;
}
.xfaLayer :required {
outline: 1.5px solid selecteditem;
}
}
.xfaLayer {
--csstools-color-scheme--light: initial;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light only;
background-color: #0000;
}
.xfaLayer .highlight {
background-color: #efcbed;
border-radius: 4px;
margin: -1px;
padding: 1px;
}
.xfaLayer .highlight.appended {
position: initial;
}
.xfaLayer .highlight.begin {
border-radius: 4px 0 0 4px;
}
.xfaLayer .highlight.end {
border-radius: 0 4px 4px 0;
}
.xfaLayer .highlight.middle {
border-radius: 0;
}
.xfaLayer .highlight.selected {
background-color: #cbdfcb;
}
.xfaPage {
position: relative;
overflow: hidden;
}
.xfaContentarea {
position: absolute;
}
.xfaPrintOnly {
display: none;
}
.xfaLayer {
text-align: initial;
transform-origin: 0 0;
line-height: 1.2;
position: absolute;
top: 0;
left: 0;
}
.xfaLayer * {
color: inherit;
font: inherit;
font-style: inherit;
font-weight: inherit;
font-kerning: inherit;
letter-spacing: -.01px;
text-align: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
box-sizing: border-box;
pointer-events: auto;
line-height: inherit;
background-color: #0000;
margin: 0;
padding: 0;
}
.xfaLayer :required {
outline: 1.5px solid red;
}
.xfaLayer div, .xfaLayer svg, .xfaLayer svg * {
pointer-events: none;
}
.xfaLayer a {
color: #00f;
}
.xfaRich li {
margin-left: 3em;
}
.xfaFont {
color: #000;
font-kerning: none;
letter-spacing: 0;
vertical-align: 0;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
.xfaCaption {
flex: none;
overflow: hidden;
}
.xfaCaptionForCheckButton {
flex: auto;
overflow: hidden;
}
.xfaLabel {
width: 100%;
height: 100%;
}
.xfaLeft {
flex-direction: row;
align-items: center;
display: flex;
}
.xfaRight {
flex-direction: row-reverse;
align-items: center;
display: flex;
}
:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
max-height: 100%;
}
.xfaTop {
flex-direction: column;
align-items: flex-start;
display: flex;
}
.xfaBottom {
flex-direction: column-reverse;
align-items: flex-start;
display: flex;
}
:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
width: 100%;
}
.xfaBorder {
pointer-events: none;
background-color: #0000;
position: absolute;
}
.xfaWrapped {
width: 100%;
height: 100%;
}
:is(.xfaTextfield, .xfaSelect):focus {
outline: var(--xfa-focus-outline);
outline-offset: -1px;
background-color: #0000;
background-image: none;
}
:is(.xfaCheckbox, .xfaRadio):focus {
outline: var(--xfa-focus-outline);
}
.xfaTextfield, .xfaSelect {
resize: none;
background-image: var(--xfa-unfocused-field-background);
border: none;
flex: auto;
width: 100%;
height: 100%;
}
.xfaSelect {
padding-inline: 2px;
}
:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) {
flex: 0 auto;
}
.xfaButton {
cursor: pointer;
text-align: center;
border: none;
width: 100%;
height: 100%;
}
.xfaLink {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.xfaCheckbox, .xfaRadio {
border: none;
flex: none;
width: 100%;
height: 100%;
}
.xfaRich {
white-space: pre-wrap;
width: 100%;
height: 100%;
}
.xfaImage {
-o-object-position: left top;
object-position: left top;
-o-object-fit: contain;
object-fit: contain;
width: 100%;
height: 100%;
}
.xfaLrTb, .xfaRlTb, .xfaTb {
flex-direction: column;
align-items: stretch;
display: flex;
}
.xfaLr {
flex-direction: row;
align-items: stretch;
display: flex;
}
.xfaRl {
flex-direction: row-reverse;
align-items: stretch;
display: flex;
}
.xfaTb > div {
justify-content: left;
}
.xfaPosition, .xfaArea {
position: relative;
}
.xfaValignMiddle {
align-items: center;
display: flex;
}
.xfaTable {
flex-direction: column;
align-items: stretch;
display: flex;
}
.xfaTable .xfaRow {
flex-direction: row;
align-items: stretch;
display: flex;
}
.xfaTable .xfaRlRow {
flex-direction: row-reverse;
flex: 1;
align-items: stretch;
display: flex;
}
.xfaTable .xfaRlRow > div {
flex: 1;
}
:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) {
background: initial;
}
@media print {
.xfaTextfield, .xfaSelect {
background: none;
}
.xfaSelect {
appearance: none;
text-indent: 1px;
text-overflow: "";
}
}
.canvasWrapper svg {
transform: none;
}
.moving:is(.canvasWrapper svg) {
z-index: 100000;
}
[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg), .highlightOutline:is(.canvasWrapper svg)) mask, [data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg), .highlightOutline:is(.canvasWrapper svg)) use:not(.clip, .mask) {
transform: matrix(0, 1, -1, 0, 1, 0);
}
[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg), .highlightOutline:is(.canvasWrapper svg)) mask, [data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg), .highlightOutline:is(.canvasWrapper svg)) use:not(.clip, .mask) {
transform: matrix(-1, 0, 0, -1, 1, 1);
}
[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg), .highlightOutline:is(.canvasWrapper svg)) mask, [data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg), .highlightOutline:is(.canvasWrapper svg)) use:not(.clip, .mask) {
transform: matrix(0, -1, 1, 0, 0, 1);
}
.draw:is(.canvasWrapper svg) {
mix-blend-mode: normal;
position: absolute;
}
.draw[data-draw-rotation="90"]:is(.canvasWrapper svg) {
transform: rotate(90deg);
}
.draw[data-draw-rotation="180"]:is(.canvasWrapper svg) {
transform: rotate(180deg);
}
.draw[data-draw-rotation="270"]:is(.canvasWrapper svg) {
transform: rotate(270deg);
}
.highlight:is(.canvasWrapper svg) {
--blend-mode: multiply;
}
@media screen and (forced-colors: active) {
.highlight:is(.canvasWrapper svg) {
--blend-mode: difference;
}
}
.highlight:is(.canvasWrapper svg) {
mix-blend-mode: var(--blend-mode);
position: absolute;
}
.highlight:is(.canvasWrapper svg):not(.free) {
fill-rule: evenodd;
}
.highlightOutline:is(.canvasWrapper svg) {
mix-blend-mode: normal;
fill-rule: evenodd;
fill: none;
position: absolute;
}
.highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected) {
stroke: var(--hover-outline-color);
stroke-width: var(--outline-width);
}
.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline {
stroke: var(--outline-around-color);
stroke-width: calc(var(--outline-width) + 2 * var(--outline-around-width));
}
.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline {
stroke: var(--outline-color);
stroke-width: var(--outline-width);
}
.highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected) {
stroke: var(--hover-outline-color);
stroke-width: calc(2 * var(--outline-width));
}
.highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline {
stroke: var(--outline-around-color);
stroke-width: calc(2 * (var(--outline-width) + var(--outline-around-width)));
}
.highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline {
stroke: var(--outline-color);
stroke-width: calc(2 * var(--outline-width));
}
.toggle-button {
--button-background-color: color-mix(in srgb, currentColor 7%, transparent);
--button-background-color-hover: color-mix(in srgb,
currentColor 14%,
transparent);
--button-background-color-active: color-mix(in srgb,
currentColor 21%,
transparent);
--csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #0df;
--color-accent-primary: var(--csstools-light-dark-toggle--35, #0060df);
--csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #80ebff;
--color-accent-primary-hover: var(--csstools-light-dark-toggle--36, #0250bb);
--csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #aaf2ff;
--color-accent-primary-active: var(--csstools-light-dark-toggle--37, #054096);
--border-radius-circle: 9999px;
--border-width: 1px;
--size-item-small: 16px;
--size-item-large: 32px;
--csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #1c1b22;
--color-canvas: var(--csstools-light-dark-toggle--38, white);
--background-color-canvas: var(--color-canvas);
--csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #f9f9fa;
--border-color-interactive: var(--csstools-light-dark-toggle--39, #8f8f9d);
--border-color-interactive-hover: var(--border-color-interactive);
--border-color-interactive-active: var(--border-color-interactive);
--focus-outline-offset: 2px;
}
@supports (color: light-dark(red, red)) {
.toggle-button {
--color-accent-primary: light-dark(#0060df, #0df);
--color-accent-primary-hover: light-dark(#0250bb, #80ebff);
--color-accent-primary-active: light-dark(#054096, #aaf2ff);
--color-canvas: light-dark(#fff, #1c1b22);
--border-color-interactive: light-dark(#8f8f9d, #f9f9fa);
}
}
@supports not (color: light-dark(tan, tan)) {
.toggle-button * {
--csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #0df;
--color-accent-primary: var(--csstools-light-dark-toggle--35, #0060df);
--csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #80ebff;
--color-accent-primary-hover: var(--csstools-light-dark-toggle--36, #0250bb);
--csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #aaf2ff;
--color-accent-primary-active: var(--csstools-light-dark-toggle--37, #054096);
--csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #1c1b22;
--color-canvas: var(--csstools-light-dark-toggle--38, white);
--csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #f9f9fa;
--border-color-interactive: var(--csstools-light-dark-toggle--39, #8f8f9d);
}
}
@media (forced-colors: active) {
.toggle-button {
--color-accent-primary: ButtonText;
--color-accent-primary-hover: SelectedItem;
--color-accent-primary-active: SelectedItem;
--button-background-color: ButtonFace;
--border-color-interactive: ButtonText;
--border-color-interactive-hover: SelectedItem;
--border-color-interactive-active: ButtonText;
--color-canvas: ButtonText;
--background-color-canvas: Canvas;
}
}
.toggle-button {
--toggle-background-color: var(--button-background-color);
--toggle-background-color-hover: var(--button-background-color-hover);
--toggle-background-color-active: var(--button-background-color-active);
--toggle-background-color-pressed: var(--color-accent-primary);
--toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
--toggle-background-color-pressed-active: var(--color-accent-primary-active);
--toggle-border-color: var(--border-color-interactive);
--toggle-border-color-hover: var(--toggle-border-color);
--toggle-border-color-active: var(--toggle-border-color);
--toggle-border-radius: var(--border-radius-circle);
--toggle-border-width: var(--border-width);
--toggle-height: var(--size-item-small);
--toggle-width: var(--size-item-large);
--toggle-dot-background-color: var(--toggle-border-color);
--toggle-dot-background-color-hover: var(--toggle-dot-background-color);
--toggle-dot-background-color-active: var(--toggle-dot-background-color);
--toggle-dot-background-color-on-pressed: var(--background-color-canvas);
--toggle-dot-margin: 1px;
--toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
var(--toggle-border-width));
--toggle-dot-width: var(--toggle-dot-height);
--toggle-dot-transform-x: calc(var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width));
--input-width: var(--toggle-width);
appearance: none;
border: var(--toggle-border-width) solid var(--toggle-border-color);
height: var(--toggle-height);
width: var(--toggle-width);
border-radius: var(--toggle-border-radius);
background-color: var(--toggle-background-color);
box-sizing: border-box;
padding: 0;
}
.toggle-button:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.toggle-button:enabled:hover {
background-color: var(--toggle-background-color-hover);
border-color: var(--toggle-border-color);
}
.toggle-button:enabled:hover:active {
background-color: var(--toggle-background-color-active);
border-color: var(--toggle-border-color);
}
.toggle-button:before {
content: "";
background-color: var(--toggle-dot-background-color);
height: var(--toggle-dot-height);
width: var(--toggle-dot-width);
margin: var(--toggle-dot-margin);
border-radius: var(--toggle-border-radius);
display: block;
translate: 0;
}
.toggle-button[aria-pressed="true"] {
background-color: var(--toggle-background-color-pressed);
border-color: #0000;
}
.toggle-button[aria-pressed="true"]:enabled:hover {
background-color: var(--toggle-background-color-pressed-hover);
border-color: #0000;
}
.toggle-button[aria-pressed="true"]:enabled:hover:active {
background-color: var(--toggle-background-color-pressed-active);
border-color: #0000;
}
.toggle-button[aria-pressed="true"]:before {
translate: var(--toggle-dot-transform-x);
background-color: var(--toggle-dot-background-color-on-pressed);
}
.toggle-button[aria-pressed="true"]:enabled:hover:before, .toggle-button[aria-pressed="true"]:enabled:hover:active:before {
background-color: var(--toggle-dot-background-color-on-pressed);
}
[dir="rtl"] .toggle-button[aria-pressed="true"]:before {
translate: calc(-1 * var(--toggle-dot-transform-x));
}
.toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl):before {
translate: calc(-1 * var(--toggle-dot-transform-x));
}
@media (prefers-reduced-motion: no-preference) {
.toggle-button:before {
transition: translate .1s;
}
}
@media (prefers-contrast) {
.toggle-button:enabled:hover {
border-color: var(--toggle-border-color-hover);
}
.toggle-button:enabled:hover:active {
border-color: var(--toggle-border-color-active);
}
.toggle-button[aria-pressed="true"]:enabled {
border-color: var(--toggle-border-color);
position: relative;
}
.toggle-button[aria-pressed="true"]:enabled:hover {
border-color: var(--toggle-border-color-hover);
}
.toggle-button[aria-pressed="true"]:enabled:hover:active {
background-color: var(--toggle-dot-background-color-active);
border-color: var(--toggle-dot-background-color-hover);
}
.toggle-button:enabled:hover:before, .toggle-button:enabled:hover:active:before {
background-color: var(--toggle-dot-background-color-hover);
}
}
@media (forced-colors) {
.toggle-button {
--toggle-dot-background-color: var(--color-accent-primary);
--toggle-dot-background-color-hover: var(--color-accent-primary-hover);
--toggle-dot-background-color-active: var(--color-accent-primary-active);
--toggle-dot-background-color-on-pressed: var(--button-background-color);
--toggle-border-color-hover: var(--border-color-interactive-hover);
--toggle-border-color-active: var(--border-color-interactive-active);
}
.toggle-button[aria-pressed="true"]:enabled:after {
border: 1px solid var(--button-background-color);
content: "";
height: var(--toggle-height);
width: var(--toggle-width);
border-radius: var(--toggle-border-radius);
display: block;
position: absolute;
inset: -2px;
}
.toggle-button[aria-pressed="true"]:enabled:hover:active:after {
border-color: var(--toggle-border-color-active);
}
}
:root {
--clear-signature-button-icon: url("../media/editor-toolbar-delete.03wunzr0m9rov.svg");
--csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #2b2a33;
--signature-bg: var(--csstools-light-dark-toggle--40, #f9f9fb);
--csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--signature-bg);
--signature-hover-bg: var(--csstools-light-dark-toggle--41, #f0f0f4);
--button-signature-bg: transparent;
--button-signature-color: var(--main-color);
--csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #5b5b66;
--button-signature-active-bg: var(--csstools-light-dark-toggle--42, #cfcfd8);
--button-signature-active-border: none;
--button-signature-active-color: var(--button-signature-color);
--button-signature-border: none;
--csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #52525e;
--button-signature-hover-bg: var(--csstools-light-dark-toggle--43, #e0e0e6);
--button-signature-hover-color: var(--button-signature-color);
}
@supports (color: light-dark(red, red)) {
:root {
--signature-bg: light-dark(#f9f9fb, #2b2a33);
--signature-hover-bg: light-dark(#f0f0f4, var(--signature-bg));
--button-signature-active-bg: light-dark(#cfcfd8, #5b5b66);
--button-signature-hover-bg: light-dark(#e0e0e6, #52525e);
}
}
@supports not (color: light-dark(tan, tan)) {
:root * {
--csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #2b2a33;
--signature-bg: var(--csstools-light-dark-toggle--40, #f9f9fb);
--csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--signature-bg);
--signature-hover-bg: var(--csstools-light-dark-toggle--41, #f0f0f4);
--csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #5b5b66;
--button-signature-active-bg: var(--csstools-light-dark-toggle--42, #cfcfd8);
--csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #52525e;
--button-signature-hover-bg: var(--csstools-light-dark-toggle--43, #e0e0e6);
}
}
@media screen and (forced-colors: active) {
:root {
--signature-bg: HighlightText;
--signature-hover-bg: var(--signature-bg);
--button-signature-bg: HighlightText;
--button-signature-color: ButtonText;
--button-signature-active-bg: ButtonText;
--button-signature-active-color: HighlightText;
--button-signature-border: 1px solid ButtonText;
--button-signature-hover-bg: Highlight;
--button-signature-hover-color: HighlightText;
}
}
.signatureDialog {
--primary-color: var(--text-primary-color);
--border-color: #8f8f9d;
--open-link-fg: var(--link-fg-color);
--open-link-hover-fg: var(--link-hover-fg-color);
}
@media screen and (forced-colors: active) {
.signatureDialog {
--primary-color: ButtonText;
--border-color: ButtonText;
--open-link-fg: ButtonText;
--open-link-hover-fg: ButtonText;
}
}
.signatureDialog {
width: 570px;
min-width: 300px;
max-width: 100%;
padding: 16px 0;
}
.signatureDialog .mainContainer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
display: flex;
}
:is(.signatureDialog .mainContainer) span:not([role="sectionhead"]) {
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
:is(.signatureDialog .mainContainer) .title {
margin-inline-start: 16px;
}
.signatureDialog .inputWithClearButton {
--button-dimension: 24px;
--clear-button-icon: url("../media/messageBar_closingButton.15rqkmbgrfbfy.svg");
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
}
:is(.signatureDialog .inputWithClearButton) > input {
width: 100%;
height: 32px;
padding-inline: 8px calc(4px + var(--button-dimension));
box-sizing: border-box;
border: 1px solid var(--border-color);
border-radius: 4px;
}
:is(.signatureDialog .inputWithClearButton) .clearInputButton {
width: var(--button-dimension);
height: var(--button-dimension);
background-color: var(--input-text-fg-color);
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-image: var(--clear-button-icon);
-webkit-mask-image: var(--clear-button-icon);
mask-image: var(--clear-button-icon);
border: 0;
padding: 0;
display: inline-block;
position: absolute;
inset-block-start: 4px;
inset-inline-end: 4px;
}
#addSignatureDialog {
--secondary-color: var(--text-secondary-color);
--bg-hover: #e0e0e6;
--tab-top-line-active-color: #0060df;
--tab-top-line-active-hover-color: var(--tab-text-hover-color);
--tab-top-line-hover-color: #8f8f9d;
--tab-top-line-inactive-color: #cfcfd8;
--tab-bottom-line-active-color: var(--tab-top-line-inactive-color);
--tab-bottom-line-hover-color: var(--tab-top-line-inactive-color);
--tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color);
--tab-bg: var(--dialog-bg-color);
--tab-bg-active-color: var(--tab-bg);
--tab-bg-active-hover-color: var(--bg-hover);
--tab-bg-hover: var(--bg-hover);
--tab-panel-border: none;
--tab-panel-border-radius: 4px;
--tab-text-color: var(--primary-color);
--tab-text-active-color: var(--tab-top-line-active-color);
--tab-text-active-hover-color: var(--tab-text-hover-color);
--tab-text-hover-color: var(--tab-text-color);
--signature-placeholder-color: var(--secondary-color);
--signature-draw-placeholder-color: var(--primary-color);
--signature-color: var(--primary-color);
--clear-signature-button-border-width: 0;
--clear-signature-button-border-style: solid;
--clear-signature-button-border-color: transparent;
--clear-signature-button-border-disabled-color: transparent;
--clear-signature-button-color: var(--primary-color);
--clear-signature-button-hover-color: var(--clear-signature-button-color);
--clear-signature-button-active-color: var(--clear-signature-button-color);
--clear-signature-button-disabled-color: var(--clear-signature-button-color);
--clear-signature-button-focus-color: var(--clear-signature-button-color);
--clear-signature-button-bg: var(--dialog-bg-color);
--clear-signature-button-bg-hover: var(--bg-hover);
--clear-signature-button-bg-active: #cfcfd8;
--clear-signature-button-bg-focus: #f0f0f4;
--clear-signature-button-bg-disabled: #f0f0f499;
--save-warning-color: var(--secondary-color);
--thickness-bg: var(--dialog-bg-color);
--thickness-label-color: var(--primary-color);
--thickness-slider-color: var(--primary-color);
--thickness-border: none;
--draw-cursor: url("../media/cursor-editorInk.0w~p4njb_q99n.svg") 0 16, pointer;
}
@media (prefers-color-scheme: dark) {
#addSignatureDialog {
--dialog-bg-color: #42414d;
--bg-hover: #52525e;
--primary-color: #fbfbfe;
--secondary-color: #cfcfd8;
--tab-top-line-active-color: #0df;
--tab-top-line-inactive-color: #8f8f9d;
--clear-signature-button-bg-active: #5b5b66;
--clear-signature-button-bg-focus: #2b2a33;
--clear-signature-button-bg-disabled: #2b2a3399;
}
}
@media screen and (forced-colors: active) {
#addSignatureDialog {
--secondary-color: ButtonText;
--bg: HighlightText;
--bg-hover: var(--bg);
--tab-top-line-active-color: ButtonText;
--tab-top-line-active-hover-color: HighlightText;
--tab-top-line-hover-color: SelectedItem;
--tab-top-line-inactive-color: ButtonText;
--tab-bottom-line-active-color: var(--tab-top-line-active-color);
--tab-bottom-line-hover-color: var(--tab-top-line-hover-color);
--tab-bg: var(--bg);
--tab-bg-active-color: SelectedItem;
--tab-bg-active-hover-color: SelectedItem;
--tab-panel-border: 1px solid ButtonText;
--tab-panel-border-radius: 8px;
--tab-text-color: ButtonText;
--tab-text-active-color: HighlightText;
--tab-text-active-hover-color: HighlightText;
--tab-text-hover-color: SelectedItem;
--signature-color: ButtonText;
--clear-signature-button-border-width: 1px;
--clear-signature-button-border-style: solid;
--clear-signature-button-border-color: ButtonText;
--clear-signature-button-border-disabled-color: GrayText;
--clear-signature-button-color: ButtonText;
--clear-signature-button-hover-color: HighlightText;
--clear-signature-button-active-color: SelectedItem;
--clear-signature-button-focus-color: CanvasText;
--clear-signature-button-disabled-color: GrayText;
--clear-signature-button-bg: var(--bg);
--clear-signature-button-bg-hover: SelectedItem;
--clear-signature-button-bg-active: var(--bg);
--clear-signature-button-bg-focus: var(--bg);
--clear-signature-button-bg-disabled: var(--bg);
--thickness-bg: Canvas;
--thickness-label-color: CanvasText;
--thickness-slider-color: ButtonText;
--thickness-border: 1px solid var(--border-color);
}
}
#addSignatureDialog #addSignatureDialogLabel {
width: 0;
height: 0;
position: absolute;
inset: 0;
overflow: hidden;
}
#addSignatureDialog.waiting:after {
content: "";
cursor: wait;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
:is(#addSignatureDialog .mainContainer) [role="tablist"] {
align-items: flex-start;
gap: 0;
width: 100%;
display: flex;
}
:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"] {
background-color: var(--tab-bg);
cursor: default;
border-block-style: solid;
border-block-width: 1px;
border-inline: 0;
border-block-start-color: var(--tab-top-line-inactive-color);
border-block-end-color: var(--tab-bottom-line-inactive-color);
font: menu;
color: var(--tab-text-color);
border-radius: 0;
flex: 1 0 0;
align-self: stretch;
padding-inline: 0;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover {
border-block-start-width: 2px;
border-block-start-color: var(--tab-top-line-hover-color);
border-block-end-color: var(--tab-bottom-line-hover-color);
background-color: var(--tab-bg-hover);
color: var(--tab-text-hover-color);
}
:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible {
outline: 2px solid var(--tab-top-line-active-color);
outline-offset: -2px;
}
[aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]) {
border-block-start-width: 2px;
border-block-start-color: var(--tab-top-line-active-color);
border-block-end-color: var(--tab-bottom-line-active-color);
background-color: var(--tab-bg-active-color);
color: var(--tab-text-active-color);
font-weight: 590;
}
[aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover {
border-block-start-color: var(--tab-top-line-active-hover-color);
background-color: var(--tab-bg-active-hover-color);
color: var(--tab-text-active-hover-color);
}
:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer {
box-sizing: border-box;
flex-direction: column;
align-self: stretch;
align-items: flex-end;
gap: 12px;
width: 100%;
height: auto;
padding-inline: 16px;
display: flex;
}
:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"] {
background-color: var(--signature-bg);
border: var(--tab-panel-border);
border-radius: var(--tab-panel-border-radius);
width: 100%;
height: 220px;
position: relative;
}
:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg {
background-color: #0000;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) {
display: none;
}
#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput {
text-align: center;
width: 100%;
height: 100%;
color: var(--signature-color);
border-radius: var(--tab-panel-border-radius);
background-color: #0000;
border: 0;
padding: 0;
font-family: Brush script, Apple Chancery, Segoe script, Freestyle Script, Palace Script MT, Brush Script MT, TK, cursive, serif;
font-size: 44px;
font-style: italic;
font-weight: 400;
position: absolute;
inset: 0;
}
:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::-moz-placeholder {
color: var(--signature-placeholder-color);
text-align: center;
font: menu;
font-size: 44px;
font-style: normal;
font-weight: 274;
line-height: normal;
}
:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder {
color: var(--signature-placeholder-color);
text-align: center;
font: menu;
font-size: 44px;
font-style: normal;
font-weight: 274;
line-height: normal;
}
#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) {
display: none;
}
#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span {
width: 100%;
height: 100%;
color: var(--signature-placeholder-color);
-webkit-user-select: none;
user-select: none;
background-color: #0000;
justify-content: center;
align-items: center;
display: grid;
position: absolute;
top: 0;
left: 0;
}
#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg {
stroke: var(--signature-color);
fill: none;
stroke-opacity: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg):hover {
cursor: var(--draw-cursor);
}
#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness {
pointer-events: none;
justify-content: center;
align-items: center;
width: 100%;
display: grid;
position: absolute;
inset-block-end: 0;
}
:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span {
color: var(--signature-draw-placeholder-color);
}
:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div {
background-color: var(--thickness-bg);
border-inline: var(--thickness-border);
border-top: var(--thickness-border);
pointer-events: auto;
border-radius: 4px 4px 0 0;
justify-content: center;
align-items: center;
gap: 8px;
width: auto;
height: auto;
margin: 0;
padding: 6px 8px 7px;
display: flex;
position: relative;
top: 1px;
}
:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label {
color: var(--thickness-label-color);
}
:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input {
background-color: #0000;
width: 100px;
height: 14px;
}
:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-runnable-track {
background-color: var(--thickness-slider-color);
}
:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-track {
background-color: var(--thickness-slider-color);
}
:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-progress {
background-color: var(--thickness-slider-color);
}
:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-thumb {
background-color: var(--thickness-bg);
}
:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-thumb {
background-color: var(--thickness-bg);
}
:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input {
color: var(--signature-color);
border: 0;
border-radius: 4.5px;
}
#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) {
display: none;
}
#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg {
stroke: none;
stroke-width: 0;
fill: var(--signature-color);
fill-opacity: 1;
}
#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder {
background-color: #0000;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
}
:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span {
color: var(--signature-placeholder-color);
}
:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a {
color: var(--open-link-fg);
cursor: pointer;
text-decoration: underline;
}
:is(:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a):hover {
color: var(--open-link-hover-fg);
}
#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker {
visibility: hidden;
width: 0;
height: 0;
position: relative;
}
[data-selected="type"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureTypeContainer, [data-selected="draw"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureDrawContainer, [data-selected="image"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureImageContainer {
display: block;
}
:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls {
flex-direction: column;
justify-content: center;
align-self: stretch;
align-items: flex-start;
gap: 12px;
display: flex;
}
:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer {
align-self: stretch;
align-items: flex-end;
gap: 16px;
display: flex;
}
:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer {
flex-direction: column;
flex: 1 0 0;
align-items: flex-start;
gap: 4px;
display: flex;
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer):has(input:disabled) > label {
opacity: .4;
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label {
width: auto;
}
:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton {
background-color: var(--clear-signature-button-bg);
border-width: var(--clear-signature-button-border-width);
border-style: var(--clear-signature-button-border-style);
border-color: var(--clear-signature-button-border-color);
border-radius: 4px;
align-items: center;
height: 32px;
padding: 4px 8px;
display: flex;
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span {
height: 24px;
color: var(--clear-signature-button-color);
flex-shrink: 0;
align-items: center;
gap: 4px;
display: flex;
}
:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span):after {
content: "";
width: 16px;
height: 16px;
-webkit-mask-image: var(--clear-signature-button-icon);
-webkit-mask-image: var(--clear-signature-button-icon);
mask-image: var(--clear-signature-button-icon);
background-color: var(--clear-signature-button-color);
flex-shrink: 0;
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover {
background-color: var(--clear-signature-button-bg-hover);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span {
color: var(--clear-signature-button-hover-color);
}
:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span):after {
background-color: var(--clear-signature-button-hover-color);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active {
background-color: var(--clear-signature-button-bg-active);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span {
color: var(--clear-signature-button-active-color);
}
:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span):after {
background-color: var(--clear-signature-button-active-color);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible {
background-color: var(--clear-signature-button-bg-focus);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span {
color: var(--clear-signature-button-focus-color);
}
:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span):after {
background-color: var(--clear-signature-button-focus-color);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled {
background-color: var(--clear-signature-button-bg-disabled);
border-color: var(--clear-signature-button-border-disabled-color);
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span {
color: var(--clear-signature-button-disabled-color);
}
:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span):after {
background-color: var(--clear-signature-button-disabled-color);
}
:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer {
grid-template-columns: max-content auto;
gap: 4px;
width: 100%;
display: grid;
}
:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input {
margin: 0;
}
:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label {
opacity: .4;
}
:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label {
-webkit-user-select: none;
user-select: none;
}
:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning {
display: none;
}
.fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning {
opacity: 1;
color: var(--save-warning-color);
font-size: 11px;
display: block;
}
#editSignatureDescriptionDialog .mainContainer {
box-sizing: border-box;
padding-inline: 16px;
}
:is(#editSignatureDescriptionDialog .mainContainer) .title {
margin-inline-start: 0;
}
:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView {
justify-content: flex-end;
align-self: stretch;
align-items: flex-start;
gap: 12px;
width: auto;
display: flex;
}
:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer {
flex-direction: column;
flex: auto;
align-items: flex-start;
gap: 4px;
display: flex;
}
:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg {
background-color: var(--signature-bg);
width: 210px;
height: 180px;
padding: 8px;
}
:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path {
stroke: var(--button-signature-color);
stroke-width: 1px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
vector-effect: non-scaling-stroke;
fill: none;
}
.contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path) {
fill: var(--button-signature-color);
stroke-width: .5px;
}
#editorSignatureParamsToolbar {
padding: 8px;
}
#editorSignatureParamsToolbar #addSignatureDoorHanger {
gap: 8px;
padding: 2px;
}
:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer {
justify-content: space-between;
align-self: stretch;
align-items: center;
gap: 8px;
height: 32px;
display: flex;
}
:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button {
border: var(--button-signature-border);
background-color: var(--button-signature-bg);
color: var(--button-signature-color);
border-radius: 4px;
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):hover {
background-color: var(--button-signature-hover-bg);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active {
border: var(--button-signature-active-border);
background-color: var(--button-signature-active-bg);
color: var(--button-signature-active-color);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active:before {
background-color: var(--button-signature-active-color);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible {
outline: var(--focus-ring-outline);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible:before {
background-color: var(--button-signature-color);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton):before {
-webkit-mask-image: var(--clear-signature-button-icon);
-webkit-mask-image: var(--clear-signature-button-icon);
mask-image: var(--clear-signature-button-icon);
}
:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton {
width: calc(.8 * var(--editor-toolbar-min-width));
height: 100%;
min-height: var(--menuitem-height);
aspect-ratio: unset;
box-sizing: border-box;
font: message-box;
text-align: start;
white-space: normal;
cursor: default;
border-radius: 4px;
outline: none;
flex: auto;
justify-content: flex-start;
align-items: center;
gap: 8px;
padding: 0;
display: flex;
position: relative;
overflow: hidden;
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg {
aspect-ratio: 1;
background-color: var(--signature-bg);
box-sizing: border-box;
border: none;
border-radius: 4px;
flex: none;
height: 100%;
padding: 4px;
display: inline-block;
}
:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path {
stroke: var(--button-signature-color);
stroke-width: 1px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
vector-effect: non-scaling-stroke;
fill: none;
}
.contours:is(:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path) {
fill: var(--button-signature-color);
stroke-width: .5px;
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is(:hover, :active) > svg {
background-color: var(--signature-hover-bg);
border-radius: 4px 0 0 4px;
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):hover > span {
color: var(--button-signature-hover-color);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):active {
background-color: var(--button-signature-active-bg);
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is([disabled="disabled"], [disabled]) {
opacity: .5;
pointer-events: none;
}
:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > span {
text-overflow: ellipsis;
white-space: nowrap;
height: auto;
font: menu;
flex: auto;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
overflow: hidden;
}
.editDescription.altText {
--alt-text-add-image: url("../media/editor-toolbar-edit.0hg-w4v6gf5-d.svg") !important;
}
.editDescription.altText:before {
width: 16px !important;
height: 16px !important;
}
.commentPopup, #commentManagerDialog {
box-sizing: border-box;
border-radius: 8px;
width: 360px;
min-width: 200px;
max-width: 100%;
margin-top: 0;
margin-left: 0;
padding: 8px 16px 16px;
position: absolute;
}
#commentManagerDialog {
--comment-close-button-icon: url("../media/comment-closeButton.09x_diuuox8.p.svg");
}
#commentManagerDialog .mainContainer {
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
height: auto;
display: flex;
}
:is(#commentManagerDialog .mainContainer) #commentManagerToolbar {
cursor: move;
justify-content: flex-start;
align-self: stretch;
align-items: flex-start;
gap: 8px;
width: 100%;
height: 32px;
display: flex;
}
:is(#commentManagerDialog .mainContainer) #commentManagerTextInput {
width: 100%;
min-height: 132px;
margin-bottom: 12px;
}
.annotationLayer.disabled .annotationCommentButton {
display: none;
}
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--csstools-color-scheme--light: initial;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light dark;
--csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #1c1b22;
--comment-button-bg: var(--csstools-light-dark-toggle--44, white);
--csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #fbfbfe;
--comment-button-fg: var(--csstools-light-dark-toggle--45, #5b5b66);
--csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #a6ecf4;
--comment-button-active-bg: var(--csstools-light-dark-toggle--46, #0041a4);
--csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) #15141a;
--comment-button-active-fg: var(--csstools-light-dark-toggle--47, white);
--csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #61dce9;
--comment-button-hover-bg: var(--csstools-light-dark-toggle--48, #0053cb);
--csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) #15141a;
--comment-button-hover-fg: var(--csstools-light-dark-toggle--49, white);
--csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #00cadb;
--comment-button-selected-bg: var(--csstools-light-dark-toggle--50, #0062fa);
--csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #bfbfc9;
--comment-button-border-color: var(--csstools-light-dark-toggle--51, #8f8f9d);
--comment-button-active-border-color: var(--comment-button-active-bg);
--csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #3a3944;
--comment-button-focus-border-color: var(--csstools-light-dark-toggle--52, #cfcfd8);
--comment-button-hover-border-color: var(--comment-button-hover-bg);
--comment-button-selected-border-color: var(--comment-button-selected-bg);
--csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #15141a;
--comment-button-selected-fg: var(--csstools-light-dark-toggle--53, white);
--comment-button-dim: 24px;
--csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) #0006;
--comment-button-box-shadow: 0 .25px .75px 0 var(--csstools-light-dark-toggle--54, #0000000d), 0 2px 6px 0 var(--csstools-light-dark-toggle--55, #0000001a);
--csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #00cadb;
--comment-button-focus-outline-color: var(--csstools-light-dark-toggle--56, #0062fa);
}
@media (prefers-color-scheme: dark) {
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--lightningcss-light: ;
--lightningcss-dark: initial;
}
}
@supports (color: light-dark(red, red)) {
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--comment-button-bg: light-dark(#fff, #1c1b22);
--comment-button-fg: light-dark(#5b5b66, #fbfbfe);
--comment-button-active-bg: light-dark(#0041a4, #a6ecf4);
--comment-button-active-fg: light-dark(#fff, #15141a);
--comment-button-hover-bg: light-dark(#0053cb, #61dce9);
--comment-button-hover-fg: light-dark(#fff, #15141a);
--comment-button-selected-bg: light-dark(#0062fa, #00cadb);
--comment-button-border-color: light-dark(#8f8f9d, #bfbfc9);
--comment-button-focus-border-color: light-dark(#cfcfd8, #3a3944);
--comment-button-selected-fg: light-dark(#fff, #15141a);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--comment-button-box-shadow: 0 .25px .75px 0 light-dark(#0000000d, #0003), 0 2px 6px 0 light-dark(#0000001a, #0006);
}
}
@supports (color: light-dark(red, red)) {
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--comment-button-focus-outline-color: light-dark(#0062fa, #00cadb);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton) * {
--csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #1c1b22;
--comment-button-bg: var(--csstools-light-dark-toggle--44, white);
--csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #fbfbfe;
--comment-button-fg: var(--csstools-light-dark-toggle--45, #5b5b66);
--csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #a6ecf4;
--comment-button-active-bg: var(--csstools-light-dark-toggle--46, #0041a4);
--csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) #15141a;
--comment-button-active-fg: var(--csstools-light-dark-toggle--47, white);
--csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #61dce9;
--comment-button-hover-bg: var(--csstools-light-dark-toggle--48, #0053cb);
--csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) #15141a;
--comment-button-hover-fg: var(--csstools-light-dark-toggle--49, white);
--csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #00cadb;
--comment-button-selected-bg: var(--csstools-light-dark-toggle--50, #0062fa);
--csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #bfbfc9;
--comment-button-border-color: var(--csstools-light-dark-toggle--51, #8f8f9d);
--csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #3a3944;
--comment-button-focus-border-color: var(--csstools-light-dark-toggle--52, #cfcfd8);
--csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #15141a;
--comment-button-selected-fg: var(--csstools-light-dark-toggle--53, white);
--csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) #0006;
--comment-button-box-shadow: 0 .25px .75px 0 var(--csstools-light-dark-toggle--54, #0000000d), 0 2px 6px 0 var(--csstools-light-dark-toggle--55, #0000001a);
--csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #00cadb;
--comment-button-focus-outline-color: var(--csstools-light-dark-toggle--56, #0062fa);
}
}
@media (prefers-color-scheme: dark) {
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--csstools-color-scheme--light: ;
}
}
@media screen and (forced-colors: active) {
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
--comment-button-bg: ButtonFace;
--comment-button-fg: ButtonText;
--comment-button-hover-bg: SelectedItemText;
--comment-button-hover-fg: SelectedItem;
--comment-button-active-bg: SelectedItemText;
--comment-button-active-fg: SelectedItem;
--comment-button-border-color: ButtonBorder;
--comment-button-active-border-color: ButtonBorder;
--comment-button-hover-border-color: SelectedItem;
--comment-button-box-shadow: none;
--comment-button-focus-outline-color: CanvasText;
--comment-button-selected-bg: ButtonBorder;
--comment-button-selected-fg: ButtonFace;
}
}
:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton {
width: var(--comment-button-dim);
height: var(--comment-button-dim);
background-color: var(--comment-button-bg);
border: 1px solid var(--comment-button-border-color);
box-shadow: var(--comment-button-box-shadow);
cursor: auto;
z-index: 1;
box-sizing: border-box;
pointer-events: auto;
border-radius: 6px 6px 6px 0;
margin: 0;
padding: 4px;
position: absolute;
}
[dir="rtl"] :is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton) {
border-radius: 6px 6px 0;
}
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):before {
content: "";
width: 100%;
height: 100%;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--comment-edit-button-icon);
-webkit-mask-image: var(--comment-edit-button-icon);
mask-image: var(--comment-edit-button-icon);
background-color: var(--comment-button-fg);
transform: scaleX(var(--dir-factor));
margin: 0;
padding: 0;
display: inline-block;
}
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):focus-visible {
outline: 2px solid var(--comment-button-focus-outline-color);
outline-offset: 1px;
border-color: var(--comment-button-focus-border-color);
}
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):hover {
border-color: var(--comment-button-hover-border-color);
background-color: var(--comment-button-hover-bg) !important;
}
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):hover:before {
background-color: var(--comment-button-hover-fg);
}
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):active {
border-color: var(--comment-button-active-border-color);
background-color: var(--comment-button-active-bg) !important;
}
:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):active:before {
background-color: var(--comment-button-active-fg);
}
.selected:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton) {
border-color: var(--comment-button-selected-border-color);
background-color: var(--comment-button-selected-bg) !important;
}
.selected:is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton):before {
background-color: var(--comment-button-selected-fg);
}
#editorCommentsSidebar, .commentPopup {
--comment-close-button-icon: url("../media/comment-closeButton.09x_diuuox8.p.svg");
--comment-popup-edit-button-icon: url("../media/comment-popup-editButton.0ncym9lg9cwyw.svg");
--comment-popup-delete-button-icon: url("../media/editor-toolbar-delete.03wunzr0m9rov.svg");
--csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) #fbfbfeb0;
--comment-date-fg-color: var(--csstools-light-dark-toggle--57, #15141ab0);
--csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #1c1b22;
--comment-bg-color: var(--csstools-light-dark-toggle--58, #f9f9fb);
--csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #2c2b33;
--comment-hover-bg-color: var(--csstools-light-dark-toggle--59, #e0e0e6);
--csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #3a3944;
--comment-active-bg-color: var(--csstools-light-dark-toggle--60, #d1d1d9);
--comment-hover-brightness: .89;
--comment-hover-filter: brightness(var(--comment-hover-brightness));
--comment-active-brightness: .825;
--comment-active-filter: brightness(var(--comment-active-brightness));
--csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #52525e;
--comment-border-color: var(--csstools-light-dark-toggle--61, #f0f0f4);
--csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #00cadb;
--comment-focus-outline-color: var(--csstools-light-dark-toggle--62, #0062fa);
--csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #fbfbfe;
--comment-fg-color: var(--csstools-light-dark-toggle--63, #15141a);
--csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) #00317e;
--comment-count-bg-color: var(--csstools-light-dark-toggle--64, #e2f7ff);
--csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #a6ecf4;
--comment-indicator-active-fg-color: var(--csstools-light-dark-toggle--65, #0041a4);
--comment-indicator-active-filter: brightness(calc(1 / var(--comment-active-brightness)));
--csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #fbfbfe;
--comment-indicator-focus-fg-color: var(--csstools-light-dark-toggle--66, #5b5b66);
--csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #61dce9;
--comment-indicator-hover-fg-color: var(--csstools-light-dark-toggle--67, #0053cb);
--comment-indicator-hover-filter: brightness(calc(1 / var(--comment-hover-brightness)));
--csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #00cadb;
--comment-indicator-selected-fg-color: var(--csstools-light-dark-toggle--68, #0062fa);
--button-comment-bg: transparent;
--button-comment-color: var(--main-color);
--csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #5b5b66;
--button-comment-active-bg: var(--csstools-light-dark-toggle--69, #cfcfd8);
--button-comment-active-border: none;
--button-comment-active-color: var(--button-comment-color);
--button-comment-border: none;
--csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #52525e;
--button-comment-hover-bg: var(--csstools-light-dark-toggle--70, #e0e0e6);
--button-comment-hover-color: var(--button-comment-color);
--csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #0df;
--link-fg-color: var(--csstools-light-dark-toggle--71, #0060df);
--csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) #80ebff;
--link-hover-fg-color: var(--csstools-light-dark-toggle--72, #0250bb);
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#editorCommentsSidebar, .commentPopup {
--comment-date-fg-color: light-dark(#15141ab0, #fbfbfeb0);
}
}
@supports (color: light-dark(red, red)) {
#editorCommentsSidebar, .commentPopup {
--comment-bg-color: light-dark(#f9f9fb, #1c1b22);
--comment-hover-bg-color: light-dark(#e0e0e6, #2c2b33);
--comment-active-bg-color: light-dark(#d1d1d9, #3a3944);
--comment-border-color: light-dark(#f0f0f4, #52525e);
--comment-focus-outline-color: light-dark(#0062fa, #00cadb);
--comment-fg-color: light-dark(#15141a, #fbfbfe);
--comment-count-bg-color: light-dark(#e2f7ff, #00317e);
--comment-indicator-active-fg-color: light-dark(#0041a4, #a6ecf4);
--comment-indicator-focus-fg-color: light-dark(#5b5b66, #fbfbfe);
--comment-indicator-hover-fg-color: light-dark(#0053cb, #61dce9);
--comment-indicator-selected-fg-color: light-dark(#0062fa, #00cadb);
--button-comment-active-bg: light-dark(#cfcfd8, #5b5b66);
--button-comment-hover-bg: light-dark(#e0e0e6, #52525e);
--link-fg-color: light-dark(#0060df, #0df);
--link-hover-fg-color: light-dark(#0250bb, #80ebff);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(#editorCommentsSidebar, .commentPopup) * {
--csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) #fbfbfeb0;
--comment-date-fg-color: var(--csstools-light-dark-toggle--57, #15141ab0);
--csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #1c1b22;
--comment-bg-color: var(--csstools-light-dark-toggle--58, #f9f9fb);
--csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #2c2b33;
--comment-hover-bg-color: var(--csstools-light-dark-toggle--59, #e0e0e6);
--csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #3a3944;
--comment-active-bg-color: var(--csstools-light-dark-toggle--60, #d1d1d9);
--csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #52525e;
--comment-border-color: var(--csstools-light-dark-toggle--61, #f0f0f4);
--csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #00cadb;
--comment-focus-outline-color: var(--csstools-light-dark-toggle--62, #0062fa);
--csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #fbfbfe;
--comment-fg-color: var(--csstools-light-dark-toggle--63, #15141a);
--csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) #00317e;
--comment-count-bg-color: var(--csstools-light-dark-toggle--64, #e2f7ff);
--csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #a6ecf4;
--comment-indicator-active-fg-color: var(--csstools-light-dark-toggle--65, #0041a4);
--csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #fbfbfe;
--comment-indicator-focus-fg-color: var(--csstools-light-dark-toggle--66, #5b5b66);
--csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #61dce9;
--comment-indicator-hover-fg-color: var(--csstools-light-dark-toggle--67, #0053cb);
--csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #00cadb;
--comment-indicator-selected-fg-color: var(--csstools-light-dark-toggle--68, #0062fa);
--csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #5b5b66;
--button-comment-active-bg: var(--csstools-light-dark-toggle--69, #cfcfd8);
--csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #52525e;
--button-comment-hover-bg: var(--csstools-light-dark-toggle--70, #e0e0e6);
--csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #0df;
--link-fg-color: var(--csstools-light-dark-toggle--71, #0060df);
--csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) #80ebff;
--link-hover-fg-color: var(--csstools-light-dark-toggle--72, #0250bb);
}
}
@media screen and (forced-colors: active) {
#editorCommentsSidebar, .commentPopup {
--comment-date-fg-color: CanvasText;
--comment-bg-color: Canvas;
--comment-hover-bg-color: Canvas;
--comment-hover-filter: none;
--comment-active-bg-color: Canvas;
--comment-active-filter: none;
--comment-border-color: CanvasText;
--comment-fg-color: CanvasText;
--comment-count-bg-color: Canvas;
--comment-indicator-active-fg-color: SelectedItem;
--comment-indicator-focus-fg-color: CanvasText;
--comment-indicator-hover-fg-color: CanvasText;
--comment-indicator-selected-fg-color: SelectedItem;
--button-comment-bg: ButtonFace;
--button-comment-color: ButtonText;
--button-comment-active-bg: Highlight;
--button-comment-active-color: HighlightText;
--button-comment-border: 1px solid ButtonText;
--button-comment-hover-bg: Highlight;
--button-comment-hover-color: HighlightText;
--link-fg-color: LinkText;
--link-hover-fg-color: LinkText;
}
}
#editorCommentsSidebar {
flex-direction: column;
align-items: flex-start;
height: auto;
padding-bottom: 16px;
display: flex;
overflow-y: visible;
}
#editorCommentsSidebar #editorCommentsSidebarHeader {
box-sizing: border-box;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px;
display: flex;
}
:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount {
-webkit-user-select: none;
user-select: none;
align-items: baseline;
gap: 6px;
display: flex;
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarTitle {
font: menu;
color: var(--comment-fg-color);
font-size: 17px;
font-style: normal;
font-weight: 590;
line-height: normal;
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarCount {
background-color: var(--comment-count-bg-color);
color: var(--comment-fg-color);
text-align: center;
font: menu;
border-radius: 4px;
padding: 0 4px;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton {
border: var(--button-comment-border);
background-color: var(--button-comment-bg);
cursor: pointer;
border-radius: 4px;
width: 32px;
height: 32px;
padding: 8px;
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):before {
content: "";
width: 100%;
height: 100%;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--comment-close-button-icon);
-webkit-mask-image: var(--comment-close-button-icon);
mask-image: var(--comment-close-button-icon);
background-color: var(--button-comment-color);
display: inline-block;
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover {
background-color: var(--button-comment-hover-bg);
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover:before {
background-color: var(--button-comment-hover-color);
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active {
border: var(--button-comment-active-border);
background-color: var(--button-comment-active-bg);
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active:before {
background-color: var(--button-comment-active-color);
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):focus-visible {
outline: var(--focus-ring-outline);
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton) > span {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
}
#editorCommentsSidebar #editorCommentsSidebarListContainer {
width: 100%;
overflow: auto;
}
:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList {
flex-direction: column;
align-items: flex-start;
gap: 10px;
width: auto;
padding: 4px 16px;
list-style-type: none;
display: flex;
}
:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment {
border: .5px solid var(--comment-border-color);
background-color: var(--comment-bg-color);
border-radius: 8px;
flex-direction: column;
align-self: stretch;
align-items: flex-start;
gap: 4px;
width: auto;
padding: 8px 16px 16px;
display: flex;
}
@media screen and (forced-colors: active) {
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover {
background-color: var(--comment-hover-bg-color);
}
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover {
filter: var(--comment-hover-filter);
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time:after {
background-color: var(--comment-indicator-hover-fg-color);
filter: var(--comment-indicator-hover-filter);
display: inline-block;
}
@media screen and (forced-colors: active) {
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active {
background-color: var(--comment-active-bg-color);
}
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active {
filter: var(--comment-active-filter);
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time:after {
background-color: var(--comment-indicator-active-fg-color);
filter: var(--comment-indicator-active-filter);
display: inline-block;
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus, :focus-visible) time:after {
background-color: var(--comment-indicator-focus-fg-color);
display: inline-block;
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible {
outline: 2px solid var(--comment-focus-outline-color);
outline-offset: 2px;
}
.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText {
-webkit-line-clamp: unset;
max-height: fit-content;
}
.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) time:after {
background-color: var(--comment-indicator-selected-fg-color);
display: inline-block;
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText {
font: menu;
-webkit-line-clamp: 2;
overflow-wrap: break-word;
-webkit-box-orient: vertical;
width: 100%;
height: fit-content;
max-height: 80px;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: -webkit-box;
overflow: hidden;
}
:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText) .richText {
--total-scale-factor: 1.5;
}
.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText {
-webkit-line-clamp: unset;
-webkit-user-select: none;
user-select: none;
max-height: fit-content;
}
.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a {
font: menu;
overflow-wrap: break-word;
width: 100%;
height: auto;
color: var(--link-fg-color);
margin-block-start: 15px;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):focus-visible {
outline: var(--focus-ring-outline);
}
:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):hover {
color: var(--link-hover-fg-color);
}
:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time {
width: 100%;
font: menu;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: inline-flex;
}
:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time):after {
content: "";
width: 16px;
height: 16px;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--comment-edit-button-icon);
-webkit-mask-image: var(--comment-edit-button-icon);
mask-image: var(--comment-edit-button-icon);
transform: scaleX(var(--dir-factor));
display: none;
}
.commentPopup {
--csstools-color-scheme--light: initial;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light dark;
--csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #3a3944;
--divider-color: var(--csstools-light-dark-toggle--73, #cfcfd8);
--csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #0006;
--comment-shadow: 0 .5px 2px 0 var(--csstools-light-dark-toggle--74, #0000000d), 0 4px 16px 0 var(--csstools-light-dark-toggle--75, #0000001a);
}
@media (prefers-color-scheme: dark) {
.commentPopup {
--lightningcss-light: ;
--lightningcss-dark: initial;
}
}
@supports (color: light-dark(red, red)) {
.commentPopup {
--divider-color: light-dark(#cfcfd8, #3a3944);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.commentPopup {
--comment-shadow: 0 .5px 2px 0 light-dark(#0000000d, #0003), 0 4px 16px 0 light-dark(#0000001a, #0006);
}
}
@supports not (color: light-dark(tan, tan)) {
.commentPopup * {
--csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #3a3944;
--divider-color: var(--csstools-light-dark-toggle--73, #cfcfd8);
--csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #0006;
--comment-shadow: 0 .5px 2px 0 var(--csstools-light-dark-toggle--74, #0000000d), 0 4px 16px 0 var(--csstools-light-dark-toggle--75, #0000001a);
}
}
@media (prefers-color-scheme: dark) {
.commentPopup {
--csstools-color-scheme--light: ;
}
}
@media screen and (forced-colors: active) {
.commentPopup {
--divider-color: CanvasText;
--comment-shadow: none;
}
}
.commentPopup {
z-index: 100001;
pointer-events: auto;
border: .5px solid var(--comment-border-color);
background: var(--comment-bg-color);
box-shadow: var(--comment-shadow);
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 2px;
display: flex;
}
.commentPopup:focus-visible {
outline: none;
}
.commentPopup.dragging, .commentPopup.dragging * {
cursor: move !important;
}
.commentPopup.dragging button {
pointer-events: none !important;
}
.commentPopup:not(.selected) .commentPopupButtons {
visibility: hidden !important;
}
.commentPopup hr {
border: none;
border-top: 1px solid var(--divider-color);
width: 100%;
height: 1px;
margin: 0;
padding: 0;
}
.commentPopup .commentPopupTop {
cursor: move;
-webkit-user-select: none;
user-select: none;
justify-content: space-between;
align-self: stretch;
align-items: center;
width: 100%;
height: auto;
padding-bottom: 4px;
display: flex;
}
:is(.commentPopup .commentPopupTop) .commentPopupTime {
font: menu;
color: var(--comment-date-fg-color);
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
:is(.commentPopup .commentPopupTop) .commentPopupButtons {
cursor: default;
align-items: center;
gap: 2px;
display: flex;
}
:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button {
border: var(--button-comment-border);
background-color: var(--button-comment-bg);
width: 32px;
height: 32px;
color: var(--button-comment-color);
border-radius: 4px;
padding: 8px;
}
:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover {
background-color: var(--button-comment-hover-bg);
}
:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover:before {
background-color: var(--button-comment-hover-color);
}
:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active {
border: var(--button-comment-active-border);
background-color: var(--button-comment-active-bg);
color: var(--button-comment-active-color);
}
:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active:before {
background-color: var(--button-comment-active-color);
}
:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):focus-visible {
background-color: var(--button-comment-hover-bg);
outline: 2px solid var(--comment-focus-outline-color);
outline-offset: 0;
}
:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):before {
content: "";
width: 100%;
height: 100%;
display: inline-block;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.commentPopupEdit:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):before {
-webkit-mask-image: var(--comment-popup-edit-button-icon);
-webkit-mask-image: var(--comment-popup-edit-button-icon);
mask-image: var(--comment-popup-edit-button-icon);
}
.commentPopupDelete:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):before {
-webkit-mask-image: var(--comment-popup-delete-button-icon);
-webkit-mask-image: var(--comment-popup-delete-button-icon);
mask-image: var(--comment-popup-delete-button-icon);
}
.commentPopup .commentPopupText {
width: 100%;
height: auto;
font: menu;
color: var(--comment-fg-color);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.commentPopupText, .sidebarCommentText .richText, :is(.commentPopupText, .sidebarCommentText .richText) p:first-of-type {
margin-block: 0;
}
:is(.commentPopupText, .sidebarCommentText .richText) > * {
white-space: pre-wrap;
font-size: max(15px, calc(10px * var(--total-scale-factor)));
overflow-wrap: break-word;
}
:is(.commentPopupText, .sidebarCommentText .richText) span {
color: var(--comment-fg-color) !important;
}
:root {
--editor-toolbar-vert-offset: 6px;
--outline-width: 2px;
--outline-color: #0060df;
--outline-around-width: 1px;
--outline-around-color: #f0f0f4;
--hover-outline-around-color: var(--outline-around-color);
--focus-outline: solid var(--outline-width) var(--outline-color);
--unfocus-outline: solid var(--outline-width) transparent;
--focus-outline-around: solid var(--outline-around-width) var(--outline-around-color);
--hover-outline-color: #8f8f9d;
--hover-outline: solid var(--outline-width) var(--hover-outline-color);
--hover-outline-around: solid var(--outline-around-width) var(--hover-outline-around-color);
--freetext-line-height: 1.35;
--freetext-padding: 2px;
--resizer-bg-color: var(--outline-color);
--resizer-size: 6px;
--resizer-shift: calc(0px - (var(--outline-width) + var(--resizer-size)) / 2 -
var(--outline-around-width));
--editorFreeText-editing-cursor: text;
--editorInk-editing-cursor: url("../media/cursor-editorInk.0w~p4njb_q99n.svg") 0 16, pointer;
--editorHighlight-editing-cursor: url("../media/cursor-editorTextHighlight.0e14z1tamqi61.svg") 24 24, text;
--editorFreeHighlight-editing-cursor: url("../media/cursor-editorFreeHighlight.089qa-ugkz~ml.svg") 1 18, pointer;
--new-alt-text-warning-image: url("../media/altText_warning.0uszsbnztiu38.svg");
}
.textLayer.highlighting {
cursor: var(--editorFreeHighlight-editing-cursor);
}
.textLayer.highlighting:not(.free) span {
cursor: var(--editorHighlight-editing-cursor);
}
[role="img"]:is(.textLayer.highlighting:not(.free) span), .textLayer.highlighting.free span {
cursor: var(--editorFreeHighlight-editing-cursor);
}
.page:has(.annotationEditorLayer.nonEditing) .annotationLayer .editorAnnotation {
pointer-events: none;
position: absolute;
}
:is(#viewerContainer.pdfPresentationMode:fullscreen, .annotationEditorLayer.disabled) .noAltTextBadge {
display: none !important;
}
@media (min-resolution: 1.1x) {
:root {
--editorFreeText-editing-cursor: url("../media/cursor-editorFreeText.13jy27m_lk2jb.svg") 0 16, text;
}
}
@media screen and (forced-colors: active) {
:root {
--outline-color: CanvasText;
--outline-around-color: ButtonFace;
--resizer-bg-color: ButtonText;
--hover-outline-color: Highlight;
--hover-outline-around-color: SelectedItemText;
}
}
[data-editor-rotation="90"] {
transform: rotate(90deg);
}
[data-editor-rotation="180"] {
transform: rotate(180deg);
}
[data-editor-rotation="270"] {
transform: rotate(270deg);
}
.annotationEditorLayer {
font-size: calc(100px * var(--total-scale-factor));
transform-origin: 0 0;
cursor: auto;
background: none;
position: absolute;
inset: 0;
}
.annotationEditorLayer .selectedEditor {
z-index: 100000 !important;
}
.annotationEditorLayer.drawing * {
pointer-events: none !important;
}
.annotationEditorLayer.getElements, .annotationEditorLayer.getElements > div {
pointer-events: auto !important;
}
.annotationEditorLayer.waiting {
content: "";
cursor: wait;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
.annotationEditorLayer.disabled {
pointer-events: none;
}
.annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor, .commentPopup) {
pointer-events: auto;
}
.annotationEditorLayer.freetextEditing {
cursor: var(--editorFreeText-editing-cursor);
}
.annotationEditorLayer.inkEditing {
cursor: var(--editorInk-editing-cursor);
}
.annotationEditorLayer .draw {
box-sizing: border-box;
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) {
z-index: 1;
transform-origin: 0 0;
cursor: auto;
border: var(--unfocus-outline);
background: none;
max-width: 100%;
max-height: 100%;
position: absolute;
}
.draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) {
cursor: move;
}
.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) {
border: var(--focus-outline);
outline: var(--focus-outline-around);
}
.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)):before {
content: "";
border: var(--focus-outline-around);
pointer-events: none;
position: absolute;
inset: 0;
}
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)):hover:not(.selectedEditor) {
border: var(--hover-outline);
outline: var(--hover-outline-around);
}
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)):hover:not(.selectedEditor):before {
content: "";
border: var(--focus-outline-around);
position: absolute;
inset: 0;
}
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
--editor-toolbar-delete-image: url("../media/editor-toolbar-delete.03wunzr0m9rov.svg");
--csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #2b2a33;
--editor-toolbar-bg-color: var(--csstools-light-dark-toggle--76, #f0f0f4);
--editor-toolbar-highlight-image: url("../media/toolbarButton-editorHighlight.0ni3w.c8~58pj.svg");
--csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #fbfbfe;
--editor-toolbar-fg-color: var(--csstools-light-dark-toggle--77, #2e2e56);
--editor-toolbar-border-color: #8f8f9d;
--editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
--csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #52525e;
--editor-toolbar-hover-bg-color: var(--csstools-light-dark-toggle--78, #e0e0e6);
--editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
--editor-toolbar-hover-outline: none;
--csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #0df;
--editor-toolbar-focus-outline-color: var(--csstools-light-dark-toggle--79, #0060df);
--editor-toolbar-shadow: 0 2px 6px 0 #3a394433;
--editor-toolbar-height: 28px;
--editor-toolbar-padding: 2px;
--csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #54ffbd;
--alt-text-done-color: var(--csstools-light-dark-toggle--80, #2ac3a2);
--csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #80ebff;
--alt-text-warning-color: var(--csstools-light-dark-toggle--81, #0090ed);
--alt-text-hover-done-color: var(--alt-text-done-color);
--alt-text-hover-warning-color: var(--alt-text-warning-color);
}
@supports (color: light-dark(red, red)) {
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
--editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33);
--editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe);
--editor-toolbar-hover-bg-color: light-dark(#e0e0e6, #52525e);
--editor-toolbar-focus-outline-color: light-dark(#0060df, #0df);
--alt-text-done-color: light-dark(#2ac3a2, #54ffbd);
--alt-text-warning-color: light-dark(#0090ed, #80ebff);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) * {
--csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #2b2a33;
--editor-toolbar-bg-color: var(--csstools-light-dark-toggle--76, #f0f0f4);
--csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #fbfbfe;
--editor-toolbar-fg-color: var(--csstools-light-dark-toggle--77, #2e2e56);
--csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #52525e;
--editor-toolbar-hover-bg-color: var(--csstools-light-dark-toggle--78, #e0e0e6);
--csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #0df;
--editor-toolbar-focus-outline-color: var(--csstools-light-dark-toggle--79, #0060df);
--csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #54ffbd;
--alt-text-done-color: var(--csstools-light-dark-toggle--80, #2ac3a2);
--csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #80ebff;
--alt-text-warning-color: var(--csstools-light-dark-toggle--81, #0090ed);
}
}
@media screen and (forced-colors: active) {
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
--editor-toolbar-bg-color: ButtonFace;
--editor-toolbar-fg-color: ButtonText;
--editor-toolbar-border-color: ButtonText;
--editor-toolbar-hover-border-color: AccentColor;
--editor-toolbar-hover-bg-color: ButtonFace;
--editor-toolbar-hover-fg-color: AccentColor;
--editor-toolbar-hover-outline: 2px solid var(--editor-toolbar-hover-border-color);
--editor-toolbar-focus-outline-color: ButtonBorder;
--editor-toolbar-shadow: none;
--alt-text-done-color: var(--editor-toolbar-fg-color);
--alt-text-warning-color: var(--editor-toolbar-fg-color);
--alt-text-hover-done-color: var(--editor-toolbar-hover-fg-color);
--alt-text-hover-warning-color: var(--editor-toolbar-hover-fg-color);
}
}
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar {
width: fit-content;
height: var(--editor-toolbar-height);
cursor: default;
pointer-events: auto;
box-sizing: content-box;
padding: var(--editor-toolbar-padding);
background-color: var(--editor-toolbar-bg-color);
border: 1px solid var(--editor-toolbar-border-color);
box-shadow: var(--editor-toolbar-shadow);
border-radius: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
inset-block-start: calc(100% + var(--editor-toolbar-vert-offset));
inset-inline-end: 0;
}
.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) {
display: none;
}
:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar):has(:focus-visible) {
border-color: #0000;
}
[dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) {
transform-origin: 100% 0;
}
[dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) {
transform-origin: 0 0;
}
:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons {
justify-content: center;
align-items: center;
gap: 0;
height: 100%;
display: flex;
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) button {
padding: 0;
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .divider {
width: 0;
height: calc(2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height));
border-left: 1px solid var(--editor-toolbar-border-color);
border-right: none;
margin-inline: 2px;
display: inline-block;
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .basic {
width: var(--editor-toolbar-height);
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .basic):before {
content: "";
background-color: var(--editor-toolbar-fg-color);
width: 100%;
height: 100%;
display: inline-block;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .basic):hover:before {
background-color: var(--editor-toolbar-hover-fg-color);
}
.highlightButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .basic):before {
-webkit-mask-image: var(--editor-toolbar-highlight-image);
-webkit-mask-image: var(--editor-toolbar-highlight-image);
mask-image: var(--editor-toolbar-highlight-image);
}
.commentButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .basic):before {
-webkit-mask-image: var(--comment-edit-button-icon);
-webkit-mask-image: var(--comment-edit-button-icon);
mask-image: var(--comment-edit-button-icon);
}
.deleteButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .basic):before {
-webkit-mask-image: var(--editor-toolbar-delete-image);
-webkit-mask-image: var(--editor-toolbar-delete-image);
mask-image: var(--editor-toolbar-delete-image);
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) > * {
height: var(--editor-toolbar-height);
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) > :not(.divider) {
cursor: pointer;
background-color: #0000;
border: none;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) > :not(.divider)):hover {
background-color: var(--editor-toolbar-hover-bg-color);
color: var(--editor-toolbar-hover-fg-color);
outline: var(--editor-toolbar-hover-outline);
outline-offset: 1px;
border-radius: 2px;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) > :not(.divider)):hover:active {
outline: none;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible {
outline: 2px solid var(--editor-toolbar-focus-outline-color);
border-radius: 2px;
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText {
--alt-text-add-image: url("../media/altText_add.11l4.nysz0z47.svg");
--alt-text-done-image: url("../media/altText_done.09w1jqvk3ga77.svg");
pointer-events: all;
width: max-content;
font: menu;
color: var(--editor-toolbar-fg-color);
justify-content: center;
align-items: center;
padding-inline: 8px;
font-size: 12px;
font-weight: 590;
display: flex;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):disabled {
pointer-events: none;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):before {
content: "";
-webkit-mask-image: var(--alt-text-add-image);
-webkit-mask-image: var(--alt-text-add-image);
mask-image: var(--alt-text-add-image);
background-color: var(--editor-toolbar-fg-color);
width: 12px;
height: 13px;
margin-inline-end: 4px;
display: inline-block;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):hover:before {
background-color: var(--editor-toolbar-hover-fg-color);
}
.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):before {
-webkit-mask-image: var(--alt-text-done-image);
-webkit-mask-image: var(--alt-text-done-image);
mask-image: var(--alt-text-done-image);
}
.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):before {
width: 16px;
height: 16px;
-webkit-mask-image: var(--new-alt-text-warning-image);
-webkit-mask-image: var(--new-alt-text-warning-image);
mask-image: var(--new-alt-text-warning-image);
background-color: var(--alt-text-warning-color);
-webkit-mask-size: cover;
mask-size: cover;
}
.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):hover:before {
background-color: var(--alt-text-hover-warning-color);
}
.new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):before {
-webkit-mask-image: var(--alt-text-done-image);
-webkit-mask-image: var(--alt-text-done-image);
mask-image: var(--alt-text-done-image);
background-color: var(--alt-text-done-color);
}
.new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText):hover:before {
background-color: var(--alt-text-hover-done-color);
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip {
word-wrap: anywhere;
display: none;
}
.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip) {
--csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #1c1b22;
--alt-text-tooltip-bg: var(--csstools-light-dark-toggle--82, #f0f0f4);
--csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #fbfbfe;
--alt-text-tooltip-fg: var(--csstools-light-dark-toggle--83, #15141a);
--alt-text-tooltip-border: #8f8f9d;
--csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #15141a;
--alt-text-tooltip-shadow: 0 2px 6px 0 var(--csstools-light-dark-toggle--84, #3a394433);
}
@supports (color: light-dark(red, red)) {
.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip) {
--alt-text-tooltip-bg: light-dark(#f0f0f4, #1c1b22);
--alt-text-tooltip-fg: light-dark(#15141a, #fbfbfe);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip) {
--alt-text-tooltip-shadow: 0 2px 6px 0 light-dark(#3a394433, #15141a);
}
}
@supports not (color: light-dark(tan, tan)) {
.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip) * {
--csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #1c1b22;
--alt-text-tooltip-bg: var(--csstools-light-dark-toggle--82, #f0f0f4);
--csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #fbfbfe;
--alt-text-tooltip-fg: var(--csstools-light-dark-toggle--83, #15141a);
--csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #15141a;
--alt-text-tooltip-shadow: 0 2px 6px 0 var(--csstools-light-dark-toggle--84, #3a394433);
}
}
@media screen and (forced-colors: active) {
.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip) {
--alt-text-tooltip-bg: Canvas;
--alt-text-tooltip-fg: CanvasText;
--alt-text-tooltip-border: CanvasText;
--alt-text-tooltip-shadow: none;
}
}
.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .altText) .tooltip) {
top: calc(100% + 2px);
border: .5px solid var(--alt-text-tooltip-border);
background: var(--alt-text-tooltip-bg);
width: max-content;
max-width: 300px;
height: auto;
box-shadow: var(--alt-text-tooltip-shadow);
color: var(--alt-text-tooltip-fg);
pointer-events: none;
flex-direction: column;
justify-content: center;
align-items: center;
padding-block: 2px 3px;
padding-inline: 3px;
font-size: 12px;
display: inline-flex;
position: absolute;
inset-inline-start: 0;
}
:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .comment {
width: var(--editor-toolbar-height);
}
:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor, .signatureEditor), .textLayer) .editToolbar) .buttons) .comment):before {
content: "";
-webkit-mask-image: var(--comment-edit-button-icon);
-webkit-mask-image: var(--comment-edit-button-icon);
mask-image: var(--comment-edit-button-icon);
background-color: var(--editor-toolbar-fg-color);
width: 100%;
height: 100%;
display: inline-block;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.annotationEditorLayer .freeTextEditor {
padding: calc(var(--freetext-padding) * var(--total-scale-factor));
touch-action: none;
width: auto;
height: auto;
}
.annotationEditorLayer .freeTextEditor .internal {
white-space: nowrap;
font: 10px sans-serif;
line-height: var(--freetext-line-height);
text-align: start;
-webkit-user-select: none;
user-select: none;
background: none;
border: none;
inset: 0;
overflow: visible;
}
.annotationEditorLayer .freeTextEditor .overlay {
background: none;
width: 100%;
height: 100%;
display: none;
position: absolute;
inset: 0;
}
.annotationEditorLayer freeTextEditor .overlay.enabled {
display: block;
}
.annotationEditorLayer .freeTextEditor .internal:empty:before {
content: attr(default-content);
color: gray;
}
.annotationEditorLayer .freeTextEditor .internal:focus {
-webkit-user-select: auto;
user-select: auto;
outline: none;
}
.annotationEditorLayer .inkEditor {
width: 100%;
height: 100%;
}
.annotationEditorLayer .inkEditor.editing {
cursor: inherit;
}
.annotationEditorLayer .inkEditor .inkEditorCanvas {
touch-action: none;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
.annotationEditorLayer .stampEditor {
width: auto;
height: auto;
}
:is(.annotationEditorLayer .stampEditor) canvas {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
:is(.annotationEditorLayer .stampEditor) .noAltTextBadge {
--csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #52525e;
--no-alt-text-badge-border-color: var(--csstools-light-dark-toggle--85, #f0f0f4);
--csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #fbfbfe;
--no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--86, #cfcfd8);
--csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #15141a;
--no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--87, #5b5b66);
}
@supports (color: light-dark(red, red)) {
:is(.annotationEditorLayer .stampEditor) .noAltTextBadge {
--no-alt-text-badge-border-color: light-dark(#f0f0f4, #52525e);
--no-alt-text-badge-bg-color: light-dark(#cfcfd8, #fbfbfe);
--no-alt-text-badge-fg-color: light-dark(#5b5b66, #15141a);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) * {
--csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #52525e;
--no-alt-text-badge-border-color: var(--csstools-light-dark-toggle--85, #f0f0f4);
--csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #fbfbfe;
--no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--86, #cfcfd8);
--csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #15141a;
--no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--87, #5b5b66);
}
}
@media screen and (forced-colors: active) {
:is(.annotationEditorLayer .stampEditor) .noAltTextBadge {
--no-alt-text-badge-border-color: ButtonText;
--no-alt-text-badge-bg-color: ButtonFace;
--no-alt-text-badge-fg-color: ButtonText;
}
}
:is(.annotationEditorLayer .stampEditor) .noAltTextBadge {
pointer-events: none;
z-index: 1;
border: 1px solid var(--no-alt-text-badge-border-color);
background: var(--no-alt-text-badge-bg-color);
border-radius: 2px;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
padding: 3px;
display: inline-flex;
position: absolute;
inset-block-end: 5px;
inset-inline-end: 5px;
}
:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge):before {
content: "";
width: 16px;
height: 16px;
-webkit-mask-image: var(--new-alt-text-warning-image);
-webkit-mask-image: var(--new-alt-text-warning-image);
mask-image: var(--new-alt-text-warning-image);
background-color: var(--no-alt-text-badge-fg-color);
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
}
:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers {
z-index: 1;
position: absolute;
inset: 0;
}
.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) {
display: none;
}
:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer {
width: var(--resizer-size);
height: var(--resizer-size);
background: content-box var(--resizer-bg-color);
border: var(--focus-outline-around);
border-radius: 2px;
position: absolute;
}
.topLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
top: var(--resizer-shift);
left: var(--resizer-shift);
}
.topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
top: var(--resizer-shift);
left: calc(50% + var(--resizer-shift));
}
.topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
top: var(--resizer-shift);
right: var(--resizer-shift);
}
.middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
top: calc(50% + var(--resizer-shift));
right: var(--resizer-shift);
}
.bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
bottom: var(--resizer-shift);
right: var(--resizer-shift);
}
.bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
bottom: var(--resizer-shift);
left: calc(50% + var(--resizer-shift));
}
.bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
bottom: var(--resizer-shift);
left: var(--resizer-shift);
}
.middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor)) > .resizers) > .resizer) {
top: calc(50% + var(--resizer-shift));
left: var(--resizer-shift);
}
.topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer), .bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer) {
cursor: nwse-resize;
}
.topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer), .bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer) {
cursor: ns-resize;
}
.topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer), .bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer) {
cursor: nesw-resize;
}
.middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer), .middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"], [data-editor-rotation="0"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"], [data-editor-rotation="270"])) > .resizers > .resizer) {
cursor: ew-resize;
}
.topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer), .bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer) {
cursor: nesw-resize;
}
.topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer), .bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer) {
cursor: ew-resize;
}
.topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer), .bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer) {
cursor: nwse-resize;
}
.middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer), .middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"], [data-editor-rotation="270"]), .annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"], [data-editor-rotation="180"]), .annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"], [data-editor-rotation="90"]), .annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"], [data-editor-rotation="0"])) > .resizers > .resizer) {
cursor: ns-resize;
}
:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"], [data-main-rotation="90"] [data-editor-rotation="0"], [data-main-rotation="180"] [data-editor-rotation="270"], [data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar {
rotate: 270deg;
}
[dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"], [data-main-rotation="90"] [data-editor-rotation="0"], [data-main-rotation="180"] [data-editor-rotation="270"], [data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar) {
inset-block-start: 0;
inset-inline-end: calc(0px - var(--editor-toolbar-vert-offset));
}
[dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"], [data-main-rotation="90"] [data-editor-rotation="0"], [data-main-rotation="180"] [data-editor-rotation="270"], [data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar) {
inset-block-start: 0;
inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
}
:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"], [data-main-rotation="90"] [data-editor-rotation="90"], [data-main-rotation="180"] [data-editor-rotation="0"], [data-main-rotation="270"] [data-editor-rotation="270"])) .editToolbar {
inset-block-start: calc(0px - var(--editor-toolbar-vert-offset));
inset-inline-end: 100%;
rotate: 180deg;
}
:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"], [data-main-rotation="90"] [data-editor-rotation="180"], [data-main-rotation="180"] [data-editor-rotation="90"], [data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar {
rotate: 90deg;
}
[dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"], [data-main-rotation="90"] [data-editor-rotation="180"], [data-main-rotation="180"] [data-editor-rotation="90"], [data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar) {
inset-block-start: 100%;
inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset));
}
[dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"], [data-main-rotation="90"] [data-editor-rotation="180"], [data-main-rotation="180"] [data-editor-rotation="90"], [data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar) {
inset-block-start: 0;
inset-inline-start: calc(0px - var(--editor-toolbar-vert-offset));
}
.dialog.altText::backdrop {
-webkit-mask: url("#alttext-manager-mask");
mask: url("#alttext-manager-mask");
}
.dialog.altText.positioned {
margin: 0;
}
.dialog.altText #altTextContainer {
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 300px;
height: fit-content;
display: inline-flex;
}
:is(.dialog.altText #altTextContainer) #overallDescription {
flex-direction: column;
align-self: stretch;
align-items: flex-start;
gap: 4px;
display: flex;
}
:is(:is(.dialog.altText #altTextContainer) #overallDescription) span {
align-self: stretch;
}
:is(:is(.dialog.altText #altTextContainer) #overallDescription) .title {
font-size: 13px;
font-style: normal;
font-weight: 590;
}
:is(.dialog.altText #altTextContainer) #addDescription {
flex-direction: column;
align-items: stretch;
gap: 8px;
display: flex;
}
:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea {
flex: 1;
padding-inline: 24px 10px;
}
:is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea {
width: 100%;
min-height: 75px;
}
:is(.dialog.altText #altTextContainer) #buttons {
justify-content: flex-end;
align-self: stretch;
align-items: flex-start;
gap: 8px;
display: flex;
}
.dialog.newAltText {
--new-alt-text-ai-disclaimer-icon: url("../media/altText_disclaimer.0-fkoyz3r4.vr.svg");
--new-alt-text-spinner-icon: url("../media/altText_spinner.011~3weg7vxwh.svg");
--csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #2b2a33;
--preview-image-bg-color: var(--csstools-light-dark-toggle--88, #f0f0f4);
--preview-image-border: none;
}
@supports (color: light-dark(red, red)) {
.dialog.newAltText {
--preview-image-bg-color: light-dark(#f0f0f4, #2b2a33);
}
}
@supports not (color: light-dark(tan, tan)) {
.dialog.newAltText * {
--csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #2b2a33;
--preview-image-bg-color: var(--csstools-light-dark-toggle--88, #f0f0f4);
}
}
@media screen and (forced-colors: active) {
.dialog.newAltText {
--preview-image-bg-color: ButtonFace;
--preview-image-border: 1px solid ButtonText;
}
}
.dialog.newAltText {
width: 80%;
min-width: 300px;
max-width: 570px;
padding: 0;
}
.dialog.newAltText.noAi #newAltTextDisclaimer, .dialog.newAltText.noAi #newAltTextCreateAutomatically, .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically {
display: none !important;
}
.dialog.newAltText.aiInstalling #newAltTextDownloadModel {
display: flex !important;
}
.dialog.newAltText.error #newAltTextNotNow {
display: none !important;
}
.dialog.newAltText.error #newAltTextCancel {
display: inline-block !important;
}
.dialog.newAltText:not(.error) #newAltTextError {
display: none !important;
}
.dialog.newAltText #newAltTextContainer {
flex-direction: column;
flex: 0 auto;
justify-content: flex-end;
align-items: flex-start;
gap: 12px;
width: auto;
padding: 16px;
line-height: normal;
display: flex;
}
:is(.dialog.newAltText #newAltTextContainer) #mainContent {
flex: auto;
justify-content: flex-end;
align-self: stretch;
align-items: flex-start;
gap: 12px;
display: flex;
}
:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings {
flex-direction: column;
flex: 1 0 0;
align-self: stretch;
align-items: flex-start;
gap: 16px;
display: flex;
}
:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction {
flex-direction: column;
flex: auto;
align-self: stretch;
align-items: flex-start;
gap: 8px;
display: flex;
}
:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer {
width: 100%;
height: 70px;
position: relative;
}
:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea {
width: 100%;
height: 100%;
padding: 8px;
}
:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder {
color: var(--text-secondary-color);
}
:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder {
color: var(--text-secondary-color);
}
:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner {
background-color: var(--text-secondary-color);
pointer-events: none;
width: 16px;
height: 16px;
display: none;
position: absolute;
inset-block-start: 8px;
inset-inline-start: 8px;
-webkit-mask-size: cover;
mask-size: cover;
}
.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder {
color: #0000;
}
.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder {
color: #0000;
}
.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner {
-webkit-mask-image: var(--new-alt-text-spinner-icon);
-webkit-mask-image: var(--new-alt-text-spinner-icon);
mask-image: var(--new-alt-text-spinner-icon);
display: inline-block;
}
:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription {
font-size: 11px;
}
:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer {
flex-direction: row;
align-items: flex-start;
gap: 4px;
font-size: 11px;
display: flex;
}
:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer):before {
content: "";
width: 17px;
height: 16px;
-webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon);
-webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon);
mask-image: var(--new-alt-text-ai-disclaimer-icon);
background-color: var(--text-secondary-color);
flex: 1 0 auto;
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
}
:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel {
align-self: stretch;
align-items: center;
gap: 4px;
display: flex;
}
:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel):before {
content: "";
width: 16px;
height: 16px;
-webkit-mask-image: var(--new-alt-text-spinner-icon);
-webkit-mask-image: var(--new-alt-text-spinner-icon);
mask-image: var(--new-alt-text-spinner-icon);
background-color: var(--text-secondary-color);
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
}
:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview {
aspect-ratio: 1;
background-color: var(--preview-image-bg-color);
border: var(--preview-image-border);
flex: none;
justify-content: center;
align-items: center;
width: 180px;
display: flex;
}
:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas {
max-width: 100%;
max-height: 100%;
}
.colorPicker {
--csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #80ebff;
--hover-outline-color: var(--csstools-light-dark-toggle--89, #0250bb);
--csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #aaf2ff;
--selected-outline-color: var(--csstools-light-dark-toggle--90, #0060df);
--csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #52525e;
--swatch-border-color: var(--csstools-light-dark-toggle--91, #cfcfd8);
}
@supports (color: light-dark(red, red)) {
.colorPicker {
--hover-outline-color: light-dark(#0250bb, #80ebff);
--selected-outline-color: light-dark(#0060df, #aaf2ff);
--swatch-border-color: light-dark(#cfcfd8, #52525e);
}
}
@supports not (color: light-dark(tan, tan)) {
.colorPicker * {
--csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #80ebff;
--hover-outline-color: var(--csstools-light-dark-toggle--89, #0250bb);
--csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #aaf2ff;
--selected-outline-color: var(--csstools-light-dark-toggle--90, #0060df);
--csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #52525e;
--swatch-border-color: var(--csstools-light-dark-toggle--91, #cfcfd8);
}
}
@media screen and (forced-colors: active) {
.colorPicker {
--hover-outline-color: Highlight;
--selected-outline-color: var(--hover-outline-color);
--swatch-border-color: ButtonText;
}
}
.colorPicker .swatch {
border: 1px solid var(--swatch-border-color);
outline-offset: 2px;
box-sizing: border-box;
forced-color-adjust: none;
border-radius: 100%;
width: 16px;
height: 16px;
}
.colorPicker button:is(:hover, .selected) > .swatch {
border: none;
}
.basicColorPicker {
width: 28px;
}
.basicColorPicker::-moz-color-swatch {
border-radius: 100%;
margin: 0;
}
.basicColorPicker::-webkit-color-swatch {
border-radius: 100%;
margin: 0;
}
.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar {
rotate: none;
}
.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar {
rotate: 270deg;
}
.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar {
rotate: 180deg;
}
.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar {
rotate: 90deg;
}
.annotationEditorLayer .highlightEditor {
z-index: 1;
cursor: auto;
pointer-events: none;
transform-origin: 0 0;
background: none;
border: none;
outline: none;
max-width: 100%;
max-height: 100%;
position: absolute;
}
:is(.annotationEditorLayer .highlightEditor):not(.free) {
transform: none;
}
:is(.annotationEditorLayer .highlightEditor) .internal {
pointer-events: auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.disabled:is(.annotationEditorLayer .highlightEditor) .internal {
pointer-events: none;
}
.selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal {
cursor: pointer;
}
:is(.annotationEditorLayer .highlightEditor) .editToolbar {
--editor-toolbar-colorpicker-arrow-image: url("../media/toolbarButton-menuArrow.0tx16jlj3l~wi.svg");
transform-origin: center !important;
}
:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker {
justify-content: center;
align-items: center;
gap: 4px;
width: auto;
padding: 4px;
display: flex;
position: relative;
}
:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):after {
content: "";
-webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image);
-webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image);
mask-image: var(--editor-toolbar-colorpicker-arrow-image);
background-color: var(--editor-toolbar-fg-color);
width: 12px;
height: 12px;
display: inline-block;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover:after {
background-color: var(--editor-toolbar-hover-fg-color);
}
:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)) {
background-color: var(--editor-toolbar-hover-bg-color);
}
:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)):after {
scale: -1;
}
:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown {
background-color: var(--editor-toolbar-bg-color);
border: 1px solid var(--editor-toolbar-border-color);
box-shadow: var(--editor-toolbar-shadow);
width: calc(100% + 2 * var(--editor-toolbar-padding));
border-radius: 6px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 11px;
padding-block: 8px;
display: flex;
position: absolute;
inset-block-start: calc(100% + 4px);
}
:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button {
cursor: pointer;
background: none;
border: none;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
display: flex;
}
:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active, :focus-visible) {
outline: none;
}
:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch {
outline-offset: 2px;
}
[aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch {
outline: 2px solid var(--selected-outline-color);
}
:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover, :active, :focus-visible) > .swatch {
outline: 2px solid var(--hover-outline-color);
}
.editorParamsToolbar:has(#highlightParamsToolbarContainer) {
padding: unset;
}
#highlightParamsToolbarContainer {
gap: 16px;
padding-block-end: 12px;
padding-inline: 10px;
}
#highlightParamsToolbarContainer .colorPicker {
flex-direction: column;
gap: 8px;
display: flex;
}
:is(#highlightParamsToolbarContainer .colorPicker) .dropdown {
flex-direction: row;
justify-content: space-between;
align-items: center;
height: auto;
display: flex;
}
:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button {
cursor: pointer;
background: none;
border: none;
flex: none;
justify-content: center;
align-items: center;
width: auto;
height: auto;
padding: 0;
display: flex;
}
:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch {
width: 24px;
height: 24px;
}
:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active, :focus-visible) {
outline: none;
}
[aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch {
outline: 2px solid var(--selected-outline-color);
}
:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover, :active, :focus-visible) > .swatch {
outline: 2px solid var(--hover-outline-color);
}
#highlightParamsToolbarContainer #editorHighlightThickness {
flex-direction: column;
align-self: stretch;
align-items: center;
gap: 4px;
display: flex;
}
:is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel {
align-self: stretch;
height: auto;
}
:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker {
--csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #80808e;
--example-color: var(--csstools-light-dark-toggle--92, #bfbfc9);
justify-content: space-between;
align-self: stretch;
align-items: center;
display: flex;
}
@supports (color: light-dark(red, red)) {
:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker {
--example-color: light-dark(#bfbfc9, #80808e);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) * {
--csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #80808e;
--example-color: var(--csstools-light-dark-toggle--92, #bfbfc9);
}
}
@media screen and (forced-colors: active) {
:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker {
--example-color: CanvasText;
}
}
:is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]) {
opacity: .4;
}
:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker):before, :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker):after {
content: "";
aspect-ratio: 1;
background-color: var(--example-color);
border-radius: 100%;
width: 8px;
display: block;
}
:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker):after {
width: 24px;
}
:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider {
width: unset;
height: 14px;
}
#highlightParamsToolbarContainer #editorHighlightVisibility {
flex-direction: column;
align-self: stretch;
align-items: flex-start;
gap: 8px;
display: flex;
}
:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider {
--csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #8f8f9d;
--divider-color: var(--csstools-light-dark-toggle--93, #d7d7db);
}
@supports (color: light-dark(red, red)) {
:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider {
--divider-color: light-dark(#d7d7db, #8f8f9d);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) * {
--csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #8f8f9d;
--divider-color: var(--csstools-light-dark-toggle--93, #d7d7db);
}
}
@media screen and (forced-colors: active) {
:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider {
--divider-color: CanvasText;
}
}
:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider {
background-color: var(--divider-color);
width: 100%;
height: 1px;
margin-block: 4px;
}
:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler {
justify-content: space-between;
align-self: stretch;
align-items: center;
display: flex;
}
#altTextSettingsDialog {
padding: 16px;
}
#altTextSettingsDialog #altTextSettingsContainer {
flex-direction: column;
gap: 16px;
width: 573px;
display: flex;
}
:is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer {
gap: 16px;
}
:is(#altTextSettingsDialog #altTextSettingsContainer) .description {
color: var(--text-secondary-color);
}
:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings {
flex-direction: column;
gap: 12px;
display: flex;
}
:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText, :is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor {
flex-direction: column;
gap: 8px;
display: flex;
}
:is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription, :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings, :is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription {
padding-inline-start: 40px;
}
:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings {
flex-direction: column;
gap: 16px;
display: flex;
}
button.hasPopupMenu[aria-expanded="true"] + menu {
visibility: visible;
}
button.hasPopupMenu[aria-expanded="false"] + menu {
visibility: hidden;
}
.popupMenu {
--menuitem-checkmark-icon: url("../media/checkmark.050t8eci2bj8v.svg");
--menu-mark-icon-size: 0;
--menu-icon-size: 16px;
--menuitem-gap: 5px;
--menuitem-border-color: transparent;
--menuitem-active-bg: color-mix(in srgb,
var(--menu-text-color),
transparent 79%);
--menuitem-text-active-fg: var(--menu-text-color);
--menuitem-active-border-color: var(--menuitem-border-color);
--menuitem-focus-bg: color-mix(in srgb,
var(--menu-text-color),
transparent 93%);
--csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #00cadb;
--menuitem-focus-outline-color: var(--csstools-light-dark-toggle--94, #0062fa);
--csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) black;
--menuitem-focus-border-color: var(--csstools-light-dark-toggle--95, white);
--csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) #23222b;
--menu-bg: var(--csstools-light-dark-toggle--96, white);
--menu-background-blend-mode: normal;
--csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #0006;
--menu-box-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--97, #0000000d), 0 3px 12px 0 var(--csstools-light-dark-toggle--98, #0000001a);
--csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) #fbfbfe1a;
--menu-border-color: var(--csstools-light-dark-toggle--99, #15141a1a);
--menuitem-border-radius: 8px;
--menu-backdrop-filter: none;
--csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) #fbfbfe;
--menu-text-color: var(--csstools-light-dark-toggle--100, #15141a);
--menu-text-disabled-color: var(--menu-text-color);
--menuitem-text-hover-fg: var(--menu-text-color);
--menuitem-hover-bg: color-mix(in srgb,
var(--menu-text-color),
transparent 86%);
--menuitem-hover-background-blend-mode: normal;
--disabled-opacity: .62;
}
@supports (color: light-dark(red, red)) {
.popupMenu {
--menuitem-focus-outline-color: light-dark(#0062fa, #00cadb);
--menuitem-focus-border-color: light-dark(#fff, #000);
--menu-bg: light-dark(#fff, #23222b);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.popupMenu {
--menu-box-shadow: 0 .375px 1.5px 0 light-dark(#0000000d, #0003), 0 3px 12px 0 light-dark(#0000001a, #0006);
--menu-border-color: light-dark(#15141a1a, #fbfbfe1a);
}
}
@supports (color: light-dark(red, red)) {
.popupMenu {
--menu-text-color: light-dark(#15141a, #fbfbfe);
}
}
@supports not (color: light-dark(tan, tan)) {
.popupMenu * {
--csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #00cadb;
--menuitem-focus-outline-color: var(--csstools-light-dark-toggle--94, #0062fa);
--csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) black;
--menuitem-focus-border-color: var(--csstools-light-dark-toggle--95, white);
--csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) #23222b;
--menu-bg: var(--csstools-light-dark-toggle--96, white);
--csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #0006;
--menu-box-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--97, #0000000d), 0 3px 12px 0 var(--csstools-light-dark-toggle--98, #0000001a);
--csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) #fbfbfe1a;
--menu-border-color: var(--csstools-light-dark-toggle--99, #15141a1a);
--csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) #fbfbfe;
--menu-text-color: var(--csstools-light-dark-toggle--100, #15141a);
}
}
@media screen and (forced-colors: active) {
.popupMenu {
--menu-bg: Canvas;
--menu-background-blend-mode: normal;
--menu-box-shadow: none;
--menu-backdrop-filter: none;
--menu-text-color: ButtonText;
--menu-text-disabled-color: GrayText;
--menu-border-color: CanvasText;
--menuitem-border-color: none;
--menuitem-hover-bg: SelectedItemText;
--menuitem-text-hover-fg: SelectedItem;
--menuitem-active-bg: SelectedItemText;
--menuitem-active-border-color: ButtonText;
--menuitem-text-active-fg: SelectedItem;
--menuitem-focus-bg: ButtonFace;
--menuitem-focus-outline-color: CanvasText;
--menuitem-focus-border-color: none;
--disabled-opacity: 1;
}
}
.popupMenu {
box-sizing: border-box;
background: var(--menu-bg);
background-blend-mode: var(--menu-background-blend-mode);
width: max-content;
height: auto;
box-shadow: var(--menu-box-shadow);
border: 1px solid var(--menu-border-color);
-webkit-backdrop-filter: var(--menu-backdrop-filter);
backdrop-filter: var(--menu-backdrop-filter);
border-radius: 6px;
flex-direction: column;
margin: 0;
padding: 5px;
display: flex;
position: relative;
top: 1px;
left: 0;
}
.popupMenu.withMark {
--menu-mark-icon-size: 16px;
}
.popupMenu > button {
width: 100%;
height: 26px;
padding-inline: calc(var(--menu-mark-icon-size) + var(--menuitem-gap)) var(--menuitem-gap);
align-items: center;
gap: var(--menuitem-gap);
box-sizing: border-box;
border-radius: var(--menuitem-border-radius);
border: 1px solid var(--menuitem-border-color);
background: none;
display: flex;
position: relative;
}
.selected:is(.popupMenu > button):after {
content: "";
width: 11px;
height: 11px;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--menuitem-checkmark-icon);
-webkit-mask-image: var(--menuitem-checkmark-icon);
mask-image: var(--menuitem-checkmark-icon);
background-color: var(--menu-text-color);
inset-inline-start: var(--menuitem-gap);
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
:is(.popupMenu > button):disabled {
opacity: var(--disabled-opacity);
}
.selected:is(.popupMenu > button):disabled:after, :is(.popupMenu > button):disabled:not(.noIcon):before {
background-color: var(--menu-text-disabled-color);
}
:is(.popupMenu > button):disabled > span {
color: var(--menu-text-disabled-color);
}
:is(.popupMenu > button):not(:disabled):hover {
background: var(--menuitem-hover-bg);
background-blend-mode: var(--menuitem-hover-background-blend-mode);
}
:is(.popupMenu > button):not(:disabled):hover:not(.noIcon):before {
background-color: var(--menuitem-text-hover-fg);
}
:is(.popupMenu > button):not(:disabled):hover > span {
color: var(--menuitem-text-hover-fg);
}
.selected:is(.popupMenu > button):not(:disabled):hover:after {
background-color: var(--menuitem-text-hover-fg);
}
:is(.popupMenu > button):not(:disabled):active {
background-color: var(--menuitem-active-bg);
border-color: var(--menuitem-active-border-color);
}
:is(.popupMenu > button):not(:disabled):active > span {
color: var(--menuitem-text-active-fg);
}
:is(.popupMenu > button):not(:disabled):focus-visible {
border-color: var(--menuitem-focus-border-color);
background-color: var(--menuitem-focus-bg);
outline: 2px solid var(--menuitem-focus-outline-color);
outline-offset: 2px;
}
:is(.popupMenu > button):not(.noIcon):before {
width: var(--menu-icon-size);
height: var(--menu-icon-size);
content: "";
background-color: var(--menu-text-color);
display: inline-block;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: cover;
mask-size: cover;
}
:is(.popupMenu > button) > span {
text-align: start;
width: 100%;
min-width: max-content;
color: var(--menu-text-color);
-webkit-user-select: none;
user-select: none;
font: menu;
align-self: stretch;
align-items: center;
padding-inline-start: 6px;
font-size: 13px;
font-style: normal;
font-weight: 510;
line-height: normal;
display: flex;
}
.treeView {
--csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #fffc;
--treeitem-color: var(--csstools-light-dark-toggle--101, #000c);
--csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) #ffffff26;
--treeitem-bg-color: var(--csstools-light-dark-toggle--102, #00000026);
--csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) #ffffffe6;
--treeitem-hover-color: var(--csstools-light-dark-toggle--103, #000000e6);
--csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) #ffffffe6;
--treeitem-selected-color: var(--csstools-light-dark-toggle--104, #000000e6);
--csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) #ffffff40;
--treeitem-selected-bg-color: var(--csstools-light-dark-toggle--105, #00000040);
--treeitem-expanded-icon: url("../media/treeitem-expanded.0m0lnxc6~qycj.svg");
--treeitem-collapsed-icon: url("../media/treeitem-collapsed.0~eobbrx5032d.svg");
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.treeView {
--treeitem-color: light-dark(#000c, #fffc);
--treeitem-bg-color: light-dark(#00000026, #ffffff26);
--treeitem-hover-color: light-dark(#000000e6, #ffffffe6);
--treeitem-selected-color: light-dark(#000000e6, #ffffffe6);
--treeitem-selected-bg-color: light-dark(#00000040, #ffffff40);
}
}
@supports not (color: light-dark(tan, tan)) {
.treeView * {
--csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #fffc;
--treeitem-color: var(--csstools-light-dark-toggle--101, #000c);
--csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) #ffffff26;
--treeitem-bg-color: var(--csstools-light-dark-toggle--102, #00000026);
--csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) #ffffffe6;
--treeitem-hover-color: var(--csstools-light-dark-toggle--103, #000000e6);
--csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) #ffffffe6;
--treeitem-selected-color: var(--csstools-light-dark-toggle--104, #000000e6);
--csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) #ffffff40;
--treeitem-selected-bg-color: var(--csstools-light-dark-toggle--105, #00000040);
}
}
:is(.treeView.withNesting .treeItemToggler):before {
content: "";
background-color: var(--toolbar-icon-bg-color);
width: 16px;
height: 16px;
-webkit-mask-image: var(--treeitem-expanded-icon);
-webkit-mask-image: var(--treeitem-expanded-icon);
mask-image: var(--treeitem-expanded-icon);
display: inline-block;
position: absolute;
inset-inline-end: 4px;
-webkit-mask-size: cover;
mask-size: cover;
}
.treeView.withNesting .treeItemToggler {
float: inline-start;
color: #ffffff80;
width: 0;
height: 0;
position: relative;
}
.treeItemsHidden:is(.treeView.withNesting .treeItemToggler):before {
-webkit-mask-image: var(--treeitem-collapsed-icon);
-webkit-mask-image: var(--treeitem-collapsed-icon);
mask-image: var(--treeitem-collapsed-icon);
transform: scaleX(var(--dir-factor));
}
.treeItemsHidden:is(.treeView.withNesting .treeItemToggler) ~ .treeItems {
display: none;
}
:is(.treeView.withNesting .treeItemToggler):hover + a, :is(.treeView.withNesting .treeItemToggler):hover ~ .treeItems {
background-color: var(--treeitem-bg-color);
color: var(--treeitem-hover-color);
background-clip: padding-box;
border-radius: 2px;
}
.treeView.withNesting > .treeItem, .treeView.withNesting .treeItem > .treeItems {
margin-inline-start: 20px;
}
:is(#layersView.treeView .treeItem > a) * {
cursor: pointer;
}
:is(#layersView.treeView .treeItem > a) > label {
align-items: center;
padding-inline-start: 4px;
display: flex;
}
:is(:is(#layersView.treeView .treeItem > a) > label) > input {
margin-top: 1px;
}
:is(.treeView .treeItem) > a {
min-width: calc(100% - 4px);
height: auto;
color: var(--treeitem-color);
-webkit-user-select: none;
user-select: none;
white-space: normal;
cursor: default;
border-radius: 2px;
margin-bottom: 1px;
padding: 2px 0 5px;
padding-inline-start: 4px;
font-size: 13px;
line-height: 15px;
text-decoration: none;
display: inline-block;
}
:is(:is(.treeView .treeItem) > a):hover {
background-color: var(--treeitem-bg-color);
color: var(--treeitem-hover-color);
background-clip: padding-box;
border-radius: 2px;
}
.selected:is(.treeView .treeItem) > a {
background-color: var(--treeitem-selected-bg-color);
color: var(--treeitem-selected-color);
}
#outerContainer.viewsManagerMoving #viewsManager {
visibility: visible;
}
#outerContainer.viewsManagerOpen #viewsManager {
visibility: visible;
inset-inline-start: 8px;
}
#outerContainer.viewsManagerOpen #viewerContainer:not(.pdfPresentationMode) {
transition-property: inset-inline-start;
inset-inline-start: var(--viewsManager-width, 0);
}
#outerContainer.viewsManagerResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) {
transition-duration: 0s;
}
#viewsManager {
--views-manager-button-icon: url("../media/pages_viewButton.0.z~8hanq9qo5.svg");
--views-manager-button-arrow-icon: url("../media/pages_viewArrow.0v-igw6kkf1c..svg");
--views-manager-add-file-button-icon: url("../media/toolbarButton-zoomIn.0ji4g7pe7s1re.svg");
--current-outline-button-icon: url("../media/toolbarButton-currentOutlineItem.0enw2u8_vd-8..svg");
--menuitem-thumbnailsView-icon: url("../media/pages_viewButton.0.z~8hanq9qo5.svg");
--menuitem-outlinesView-icon: url("../media/toolbarButton-viewOutline.00kc~kmzht_gq.svg");
--menuitem-attachmentsView-icon: url("../media/toolbarButton-viewAttachments.0wr1..qhfn~mc.svg");
--menuitem-layersView-icon: url("../media/toolbarButton-viewLayers.11a.ygzxzoom7.svg");
--manage-button-icon: url("../media/toolbarButton-pageDown.0n1yvj-f0flkn.svg");
--close-button-icon: url("../media/pages_closeButton.0xe.0xdkpyx81.svg");
--undo-label-icon: url("../media/altText_done.09w1jqvk3ga77.svg");
--pages-selected-icon: url("../media/pages_selected.0257p5hhb641w.svg");
--spinner-icon: url("../media/altText_spinner.011~3weg7vxwh.svg");
--csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) #42414deb;
--sidebar-bg-color: var(--csstools-light-dark-toggle--106, #ffffffeb);
--sidebar-backdrop-filter: blur(7px);
--sidebar-width: 230px;
--sidebar-min-width: min-content;
--sidebar-max-width: 50vw;
--sidebar-block-padding: 8px;
--csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) #fbfbfe;
--text-color: var(--csstools-light-dark-toggle--107, #15141a);
--button-fg: var(--text-color);
--button-no-bg: transparent;
--csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) #fbfbfe12;
--button-bg: var(--csstools-light-dark-toggle--108, #15141a12);
--button-border-color: transparent;
--csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) #fbfbfe24;
--button-hover-bg: var(--csstools-light-dark-toggle--109, #15141a24);
--button-hover-fg: var(--text-color);
--button-hover-border-color: var(--button-border-color);
--csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) #fbfbfe36;
--button-active-bg: var(--csstools-light-dark-toggle--110, #15141a36);
--button-active-fg: var(--text-color);
--button-active-border-color: var(--button-border-color);
--button-focus-no-bg: color-mix(in srgb, var(--text-color), transparent 93%);
--csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) #00cadb;
--button-focus-outline-color: var(--csstools-light-dark-toggle--111, #0062fa);
--csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) black;
--button-focus-border-color: var(--csstools-light-dark-toggle--112, white);
--status-border-color: transparent;
--csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) #fbfbfe08;
--status-actions-bg: var(--csstools-light-dark-toggle--113, #15141a08);
--csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) #00cadb14;
--status-undo-bg: var(--csstools-light-dark-toggle--114, #0062fa14);
--status-waiting-bg: var(--status-undo-bg);
--csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) #00cadb;
--indicator-color: var(--csstools-light-dark-toggle--115, #0062fa);
--csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) #6e001f;
--status-warning-bg: var(--csstools-light-dark-toggle--116, #ffe8ea);
--csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) #ffa0aa;
--indicator-warning-color: var(--csstools-light-dark-toggle--117, #b20037);
--csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) #0006;
--header-shadow: 0 .25px .75px -.75px var(--csstools-light-dark-toggle--118, #0000000d), 0 2px 6px -6px var(--csstools-light-dark-toggle--119, #0000001a);
--csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) #42414e;
--header-bg: var(--csstools-light-dark-toggle--120, #ffffffeb);
--image-outline: none;
--image-border-width: 6px;
--csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) #3a3944;
--image-border-color: var(--csstools-light-dark-toggle--121, #cfcfd8);
--image-hover-border-color: #bfbfc9;
--image-current-border-color: var(--button-focus-outline-color);
--image-current-focused-outline-color: var(--image-hover-border-color);
--csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) #42414d;
--image-page-number-bg: var(--csstools-light-dark-toggle--122, #f0f0f4);
--image-page-number-fg: var(--text-color);
--image-page-number-border-color: transparent;
--image-hover-page-number-bg: var(--image-page-number-bg);
--image-hover-page-number-fg: var(--image-page-number-fg);
--image-current-page-number-bg: var(--image-current-border-color);
--csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) #15141a;
--image-current-page-number-fg: var(--csstools-light-dark-toggle--123, #fff);
--image-current-hover-page-number-bg: var(--image-current-page-number-bg);
--image-current-hover-page-number-fg: var(--image-current-page-number-fg);
--csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) #0006;
--image-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--124, #0000000d), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--125, #0000001a);
--csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) #fbfbfe1a;
--csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) #0006;
--image-hover-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--126, #0000000d), 0 0 0 1px var(--csstools-light-dark-toggle--127, #15141a1a), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--128, #0000001a);
--csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) #0006;
--image-current-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--129, #0000000d), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--130, #0000001a);
--csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) #00cadb14;
--image-dragging-placeholder-bg: var(--csstools-light-dark-toggle--131, #0062fa14);
--image-dragging-placeholder-border: var(--image-outline);
--multiple-dragging-bg: white;
--image-multiple-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color), var(--image-border-width) var(--image-border-width) 0 calc(var(--image-border-width) / 2) var(--multiple-dragging-bg), var(--image-border-width) var(--image-border-width) 0 calc(3 * var(--image-border-width) / 2) var(--image-current-border-color);
--image-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color);
--multiple-dragging-indicator-bg: var(--indicator-color);
--csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) #15141a;
--multiple-dragging-text-color: var(--csstools-light-dark-toggle--132, #fbfbfe);
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#viewsManager {
--sidebar-bg-color: light-dark(#ffffffeb, #42414deb);
}
}
@supports (color: light-dark(red, red)) {
#viewsManager {
--text-color: light-dark(#15141a, #fbfbfe);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#viewsManager {
--button-bg: light-dark(#15141a12, #fbfbfe12);
--button-hover-bg: light-dark(#15141a24, #fbfbfe24);
--button-active-bg: light-dark(#15141a36, #fbfbfe36);
}
}
@supports (color: light-dark(red, red)) {
#viewsManager {
--button-focus-outline-color: light-dark(#0062fa, #00cadb);
--button-focus-border-color: light-dark(#fff, #000);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#viewsManager {
--status-actions-bg: light-dark(#15141a08, #fbfbfe08);
--status-undo-bg: light-dark(#0062fa14, #00cadb14);
}
}
@supports (color: light-dark(red, red)) {
#viewsManager {
--indicator-color: light-dark(#0062fa, #00cadb);
--status-warning-bg: light-dark(#ffe8ea, #6e001f);
--indicator-warning-color: light-dark(#b20037, #ffa0aa);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#viewsManager {
--header-shadow: 0 .25px .75px -.75px light-dark(#0000000d, #0003), 0 2px 6px -6px light-dark(#0000001a, #0006);
--header-bg: light-dark(#ffffffeb, #42414e);
}
}
@supports (color: light-dark(red, red)) {
#viewsManager {
--image-border-color: light-dark(#cfcfd8, #3a3944);
--image-page-number-bg: light-dark(#f0f0f4, #42414d);
--image-current-page-number-fg: light-dark(#fff, #15141a);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
#viewsManager {
--image-shadow: 0 .375px 1.5px 0 light-dark(#0000000d, #0003), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 light-dark(#0000001a, #0006);
--image-hover-shadow: 0 .375px 1.5px 0 light-dark(#0000000d, #0003), 0 0 0 1px light-dark(#15141a1a, #fbfbfe1a), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 light-dark(#0000001a, #0006);
--image-current-shadow: 0 .375px 1.5px 0 light-dark(#0000000d, #0003), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 light-dark(#0000001a, #0006);
--image-dragging-placeholder-bg: light-dark(#0062fa14, #00cadb14);
}
}
@supports (color: light-dark(red, red)) {
#viewsManager {
--multiple-dragging-text-color: light-dark(#fbfbfe, #15141a);
}
}
@supports not (color: light-dark(tan, tan)) {
#viewsManager * {
--csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) #42414deb;
--sidebar-bg-color: var(--csstools-light-dark-toggle--106, #ffffffeb);
--csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) #fbfbfe;
--text-color: var(--csstools-light-dark-toggle--107, #15141a);
--csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) #fbfbfe12;
--button-bg: var(--csstools-light-dark-toggle--108, #15141a12);
--csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) #fbfbfe24;
--button-hover-bg: var(--csstools-light-dark-toggle--109, #15141a24);
--csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) #fbfbfe36;
--button-active-bg: var(--csstools-light-dark-toggle--110, #15141a36);
--csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) #00cadb;
--button-focus-outline-color: var(--csstools-light-dark-toggle--111, #0062fa);
--csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) black;
--button-focus-border-color: var(--csstools-light-dark-toggle--112, white);
--csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) #fbfbfe08;
--status-actions-bg: var(--csstools-light-dark-toggle--113, #15141a08);
--csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) #00cadb14;
--status-undo-bg: var(--csstools-light-dark-toggle--114, #0062fa14);
--csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) #00cadb;
--indicator-color: var(--csstools-light-dark-toggle--115, #0062fa);
--csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) #6e001f;
--status-warning-bg: var(--csstools-light-dark-toggle--116, #ffe8ea);
--csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) #ffa0aa;
--indicator-warning-color: var(--csstools-light-dark-toggle--117, #b20037);
--csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) #0006;
--header-shadow: 0 .25px .75px -.75px var(--csstools-light-dark-toggle--118, #0000000d), 0 2px 6px -6px var(--csstools-light-dark-toggle--119, #0000001a);
--csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) #42414e;
--header-bg: var(--csstools-light-dark-toggle--120, #ffffffeb);
--csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) #3a3944;
--image-border-color: var(--csstools-light-dark-toggle--121, #cfcfd8);
--csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) #42414d;
--image-page-number-bg: var(--csstools-light-dark-toggle--122, #f0f0f4);
--csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) #15141a;
--image-current-page-number-fg: var(--csstools-light-dark-toggle--123, #fff);
--csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) #0006;
--image-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--124, #0000000d), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--125, #0000001a);
--csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) #fbfbfe1a;
--csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) #0006;
--image-hover-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--126, #0000000d), 0 0 0 1px var(--csstools-light-dark-toggle--127, #15141a1a), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--128, #0000001a);
--csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) #0006;
--image-current-shadow: 0 .375px 1.5px 0 var(--csstools-light-dark-toggle--129, #0000000d), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--130, #0000001a);
--csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) #00cadb14;
--image-dragging-placeholder-bg: var(--csstools-light-dark-toggle--131, #0062fa14);
--csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) #15141a;
--multiple-dragging-text-color: var(--csstools-light-dark-toggle--132, #fbfbfe);
}
}
@media screen and (forced-colors: active) {
#viewsManager {
--text-color: CanvasText;
--button-fg: ButtonText;
--button-bg: ButtonFace;
--button-no-bg: ButtonFace;
--button-border-color: ButtonText;
--button-hover-bg: SelectedItemText;
--button-hover-fg: SelectedItem;
--button-hover-border-color: SelectedItem;
--button-active-bg: SelectedItemText;
--button-active-fg: SelectedItem;
--button-active-border-color: ButtonText;
--button-focus-no-bg: ButtonFace;
--button-focus-outline-color: CanvasText;
--button-focus-border-color: none;
--status-border-color: CanvasText;
--status-undo-bg: none;
--indicator-color: CanvasText;
--status-warning-bg: none;
--indicator-warning-color: CanvasText;
--header-shadow: none;
--image-shadow: none;
--image-outline: 1px solid ButtonText;
--image-focus-outline-color: CanvasText;
--image-hover-border-color: SelectedItem;
--image-hover-page-number-bg: SelectedItemText;
--image-hover-page-number-fg: SelectedItem;
--image-current-page-number-bg: ButtonText;
--image-current-page-number-fg: ButtonFace;
--image-current-border-color: ButtonText;
--image-current-focused-outline-color: var(--image-hover-border-color);
--image-current-hover-page-number-bg: SelectedItem;
--image-current-hover-page-number-fg: SelectedItemText;
--image-page-number-bg: ButtonFace;
--image-page-number-fg: ButtonText;
--image-page-number-border-color: var(--image-page-number-fg);
--multiple-dragging-bg: Canvas;
--multiple-dragging-indicator-bg: ButtonBorder;
--multiple-dragging-text-color: Canvas;
--image-dragging-placeholder-bg: Canvas;
--image-dragging-placeholder-border: 1px GrayText solid;
}
}
#viewsManager {
height: calc(var(--viewer-container-height) - 2 * var(--sidebar-block-padding));
transition-property: inset-inline-start;
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
flex-direction: column;
align-items: flex-start;
padding-bottom: 16px;
display: flex;
position: absolute;
inset-block-start: calc(100% + var(--sidebar-block-padding));
inset-inline-start: calc(-1 * var(--viewsManager-width, --sidebar-width) - 1px);
}
#viewsManager .sidebarResizer {
inset-inline-start: calc(100% + 4px);
}
#viewsManager .viewsManagerButton {
width: auto;
color: var(--button-fg);
border: 1px solid var(--button-border-color);
background: var(--button-bg);
border-radius: 8px;
}
:is(#viewsManager .viewsManagerButton):hover {
background-color: var(--button-hover-bg) !important;
color: var(--button-hover-fg) !important;
border-color: var(--button-hover-border-color) !important;
}
:is(#viewsManager .viewsManagerButton):hover:before {
background-color: var(--button-hover-fg) !important;
}
:is(#viewsManager .viewsManagerButton):active {
background: var(--button-active-bg) !important;
color: var(--button-active-fg) !important;
border-color: var(--button-active-border-color) !important;
}
:is(#viewsManager .viewsManagerButton):active:before {
background-color: var(--button-active-fg) !important;
}
:is(#viewsManager .viewsManagerButton):focus-visible {
outline: 2px solid var(--button-focus-outline-color);
outline-offset: 2px;
border-color: var(--button-focus-border-color);
}
.viewsCloseButton:is(#viewsManager .viewsManagerButton) {
background: none;
border-radius: 8px;
width: 26px;
height: 26px;
padding: 4px;
}
.viewsCloseButton:is(#viewsManager .viewsManagerButton):before {
-webkit-mask-image: var(--close-button-icon);
-webkit-mask-image: var(--close-button-icon);
mask-image: var(--close-button-icon);
}
#viewsManager #viewsManagerHeader {
width: 100%;
box-shadow: var(--header-shadow);
background-color: var(--header-bg);
flex-direction: column;
flex: none;
align-self: stretch;
align-items: flex-start;
display: flex;
}
:is(#viewsManager #viewsManagerHeader) .viewsManagerLabel {
color: var(--text-color);
text-align: center;
-webkit-user-select: none;
user-select: none;
width: fit-content;
height: fit-content;
font: menu;
flex: auto;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle {
flex-direction: row;
justify-content: space-between;
align-self: stretch;
align-items: center;
width: auto;
padding: 12px 16px 12px 8px;
display: flex;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle):not(:has(#viewsManagerHeaderLabel ~ button:not([hidden]))):after {
content: "";
pointer-events: none;
flex: none;
width: 32px;
height: 32px;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector {
width: 48px;
height: 32px;
display: block;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button {
background: var(--button-no-bg);
width: 100%;
height: 100%;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):focus-visible {
background-color: var(--button-focus-no-bg);
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):before {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--views-manager-button-icon);
-webkit-mask-image: var(--views-manager-button-icon);
mask-image: var(--views-manager-button-icon);
background-color: var(--button-fg);
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):after {
content: "";
width: 12px;
height: 12px;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--views-manager-button-arrow-icon);
-webkit-mask-image: var(--views-manager-button-arrow-icon);
mask-image: var(--views-manager-button-arrow-icon);
background-color: var(--button-fg);
margin-left: 8px;
display: inline-block;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):hover:before, :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):hover:after {
background-color: var(--button-hover-fg) !important;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):active:before, :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):active:after {
background-color: var(--button-active-fg) !important;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu {
z-index: 1;
min-width: 182px;
}
#thumbnailsViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button):before {
-webkit-mask-image: var(--menuitem-thumbnailsView-icon);
-webkit-mask-image: var(--menuitem-thumbnailsView-icon);
mask-image: var(--menuitem-thumbnailsView-icon);
}
#outlinesViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button):before {
-webkit-mask-image: var(--menuitem-outlinesView-icon);
-webkit-mask-image: var(--menuitem-outlinesView-icon);
mask-image: var(--menuitem-outlinesView-icon);
}
#attachmentsViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button):before {
-webkit-mask-image: var(--menuitem-attachmentsView-icon);
-webkit-mask-image: var(--menuitem-attachmentsView-icon);
mask-image: var(--menuitem-attachmentsView-icon);
}
#layersViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button):before {
-webkit-mask-image: var(--menuitem-layersView-icon);
-webkit-mask-image: var(--menuitem-layersView-icon);
mask-image: var(--menuitem-layersView-icon);
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton {
background: var(--button-no-bg);
width: 32px;
height: 32px;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton):focus-visible {
background-color: var(--button-focus-no-bg);
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton):before {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--views-manager-add-file-button-icon);
-webkit-mask-image: var(--views-manager-add-file-button-icon);
mask-image: var(--views-manager-add-file-button-icon);
background-color: var(--button-fg);
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton) > input {
display: none;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton {
background: var(--button-no-bg);
width: 32px;
height: 32px;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton):focus-visible {
background-color: var(--button-focus-no-bg);
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton):before {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--current-outline-button-icon);
-webkit-mask-image: var(--current-outline-button-icon);
mask-image: var(--current-outline-button-icon);
background-color: var(--button-fg);
}
:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus {
border: 1px solid var(--status-border-color);
width: 100%;
display: grid;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) > div {
box-sizing: border-box;
grid-area: 1 / 1;
width: 100%;
min-height: 64px;
padding-inline: 16px;
}
.hidden:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) > div) {
visibility: hidden;
display: unset !important;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) .viewsManagerStatusLabel {
font: menu;
align-items: center;
gap: 8px;
font-size: 13px;
display: flex;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction {
background-color: var(--status-actions-bg);
justify-content: space-between;
align-self: stretch;
align-items: center;
display: flex;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #viewsManagerStatusActionLabelContainer > button {
width: var(--icon-size);
height: var(--icon-size);
border: none;
flex: none;
padding: 0;
position: relative;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #viewsManagerStatusActionLabelContainer > button):before {
content: "";
background-color: var(--indicator-color);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--pages-selected-icon);
-webkit-mask-image: var(--pages-selected-icon);
mask-image: var(--pages-selected-icon);
position: absolute;
inset: 0;
}
#viewsManagerStatusActionDeselectButton:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #viewsManagerStatusActionLabelContainer > button):focus-visible {
outline: 2px solid var(--button-focus-outline-color);
border: 1px solid var(--button-focus-border-color);
outline-offset: 1px;
border-radius: 2px;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector {
width: auto;
min-width: 115px;
height: 32px;
display: block;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton {
justify-content: space-between;
align-items: center;
gap: 8px;
width: 100%;
height: 100%;
padding: 4px 16px;
display: flex;
}
:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):after {
content: "";
width: var(--icon-size);
height: var(--icon-size);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--manage-button-icon);
-webkit-mask-image: var(--manage-button-icon);
mask-image: var(--manage-button-icon);
background-color: var(--button-fg);
display: inline-block;
}
:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):hover:after {
background-color: var(--button-hover-fg) !important;
}
:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):active:after {
background-color: var(--button-active-fg) !important;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) > .popupMenu {
z-index: 1;
width: 100%;
min-width: fit-content;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo {
background-color: var(--status-undo-bg);
justify-content: space-between;
align-self: stretch;
align-items: center;
display: flex;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > span:before {
content: "";
width: var(--icon-size);
height: var(--icon-size);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--undo-label-icon);
-webkit-mask-image: var(--undo-label-icon);
mask-image: var(--undo-label-icon);
background-color: var(--indicator-color);
display: inline-block;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > div {
align-items: center;
gap: 8px;
width: auto;
display: flex;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > div) #viewsManagerStatusUndoButton {
width: auto;
min-height: 24px;
padding: 4px 8px;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning {
background-color: var(--status-warning-bg);
justify-content: space-between;
align-items: center;
display: flex;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning) > span {
align-items: flex-start;
}
:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning) > span):before {
content: "";
width: var(--icon-size);
height: var(--icon-size);
background-color: var(--indicator-warning-color);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--undo-label-icon);
-webkit-mask-image: var(--undo-label-icon);
mask-image: var(--undo-label-icon);
flex: none;
display: inline-block;
}
:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWaiting {
background-color: var(--status-waiting-bg);
justify-content: space-between;
align-items: center;
display: flex;
}
:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWaiting) > span:before {
content: "";
width: var(--icon-size);
height: var(--icon-size);
background-color: var(--indicator-color);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--spinner-icon);
-webkit-mask-image: var(--spinner-icon);
mask-image: var(--spinner-icon);
flex: none;
display: inline-block;
}
#viewsManager #viewsManagerContent {
flex: 1;
width: 100%;
overflow: auto;
}
:is(#viewsManager #viewsManagerContent):has(#thumbnailsView.isDragging) {
overflow-x: hidden;
}
:is(#viewsManager #viewsManagerContent) #thumbnailsView {
--thumbnail-width: 126px;
--gap-between-input-and-thumbnail: 16px;
box-sizing: border-box;
flex-flow: wrap;
justify-content: space-evenly;
align-items: center;
gap: 44px;
width: 100%;
padding: 20px 32px;
display: flex;
position: relative;
}
.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView), :is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer:hover {
cursor: grabbing;
}
:is(:is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer:hover):not([aria-current="page"]) {
box-shadow: var(--image-shadow);
}
:is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input {
pointer-events: none;
}
.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .dragMarker {
border: 2px solid var(--indicator-color);
contain: strict;
position: absolute;
top: 0;
left: 0;
}
.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) {
gap: var(--gap-between-input-and-thumbnail);
}
.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail {
flex-direction: column;
}
:is(.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input {
display: none;
}
:is(.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailPasteButton {
min-height: 24px;
font: menu;
border-radius: 16px;
justify-content: center;
align-items: center;
padding: 4px 16px;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: flex;
}
:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView):not(.pasteMode) > .thumbnail > .thumbnailPasteButton {
display: none;
}
:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail {
--input-dim: 16px;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):not(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):has(input)) {
--input-dim: 0px;
--gap-between-input-and-thumbnail: 0px;
}
:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail {
justify-content: flex-end;
align-items: center;
gap: var(--gap-between-input-and-thumbnail);
width: calc(var(--thumbnail-width) + 2 *
(var(--input-dim) + var(--gap-between-input-and-thumbnail)));
flex-direction: row-reverse;
height: auto;
scroll-margin-top: 20px;
display: inline-flex;
position: relative;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) .thumbnailPasteButton {
text-align: center;
padding: 8px 0;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):not(.isDragging) > .thumbnailImageContainer:after {
content: attr(page-number);
border: 1px solid var(--image-page-number-border-color);
background-color: var(--image-page-number-bg);
color: var(--image-page-number-fg);
bottom: 5px;
text-align: center;
box-sizing: content-box;
min-width: 32px;
height: 16px;
translate: calc(var(--dir-factor) * 50%);
font: menu;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
border-radius: 8px;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: absolute;
inset-inline-end: 50%;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):has([aria-current="page"]):not(.isDragging) > .thumbnailImageContainer:after {
background-color: var(--image-current-page-number-bg);
color: var(--image-current-page-number-fg);
outline: 1px solid var(--image-current-border-color);
}
.isDragging:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input {
visibility: hidden;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input {
width: var(--input-dim);
height: var(--input-dim);
accent-color: var(--indicator-color);
margin: 0;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer {
--thumbnail-dragging-scale: 1.4;
width: var(--thumbnail-width);
box-shadow: var(--image-shadow);
box-sizing: content-box;
outline: var(--image-outline);
-webkit-user-select: none;
user-select: none;
border: none;
border-radius: 8px;
position: relative;
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) img {
-webkit-user-select: none;
user-select: none;
pointer-events: none;
border: none;
border-radius: 8px;
outline: none;
width: 100%;
height: 100%;
}
.missingThumbnailImage:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
content-visibility: hidden;
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover {
cursor: pointer;
box-shadow: var(--image-hover-shadow);
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover:after {
background-color: var(--image-hover-page-number-bg);
color: var(--image-hover-page-number-fg);
}
@media screen and (forced-colors: active) {
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover {
box-shadow: none;
outline: var(--image-border-width) var(--image-hover-border-color) solid;
}
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:not([aria-current="page"]) {
box-shadow: var(--image-hover-shadow);
outline: none;
}
@media screen and (forced-colors: active) {
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:not([aria-current="page"]) {
box-shadow: none;
outline: var(--image-border-width) var(--image-focus-outline-color) solid;
}
}
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible {
outline: var(--image-border-width) solid var(--image-current-focused-outline-color);
outline-offset: var(--image-border-width);
}
@media screen and (forced-colors: active) {
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible {
box-shadow: none;
outline: var(--image-border-width) var(--image-current-border-color) solid;
outline-offset: 0;
}
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible > img {
outline: var(--image-border-width) var(--image-focus-outline-color) solid;
outline-offset: var(--image-border-width);
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible {
box-shadow: none;
outline: var(--image-border-width) var(--image-current-border-color) solid;
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:hover > img {
outline: var(--image-border-width) var(--image-hover-border-color) solid;
outline-offset: var(--image-border-width);
}
}
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
box-shadow: var(--image-current-shadow);
}
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover:after {
background-color: var(--image-current-hover-page-number-bg);
color: var(--image-current-hover-page-number-fg);
}
@media screen and (forced-colors: active) {
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
box-shadow: none;
outline: var(--image-border-width) var(--image-current-border-color) solid;
}
[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover > img {
outline: var(--image-border-width) var(--image-hover-border-color) solid;
outline-offset: var(--image-border-width);
}
}
.placeholder:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
background-color: var(--image-dragging-placeholder-bg);
outline: var(--image-dragging-placeholder-border);
box-shadow: none !important;
}
.draggingThumbnail:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
z-index: 1;
transform-origin: 0 0 0;
scale: calc(1 / var(--thumbnail-dragging-scale));
pointer-events: none;
box-shadow: var(--image-dragging-shadow);
position: absolute;
top: 0;
left: 0;
}
.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
box-shadow: var(--image-multiple-dragging-shadow);
}
@media screen and (forced-colors: active) {
.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) {
forced-color-adjust: none;
box-shadow: var(--image-multiple-dragging-shadow);
}
}
.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) > .thumbnailImageContainer {
width: var(--thumbnail-width);
box-sizing: content-box;
-webkit-user-select: none;
user-select: none;
border: none;
border-radius: 8px;
outline: none;
position: absolute;
top: 0;
left: 0;
}
.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):after {
content: attr(data-multiple-count);
border-radius: calc(8px * var(--thumbnail-dragging-scale));
background-color: var(--multiple-dragging-indicator-bg);
color: var(--multiple-dragging-text-color);
min-width: calc(32px * var(--thumbnail-dragging-scale));
height: calc(16px * var(--thumbnail-dragging-scale));
text-align: center;
font: menu;
font-size: calc(13px * var(--thumbnail-dragging-scale));
contain: strict;
font-style: normal;
font-weight: 400;
line-height: normal;
position: absolute;
inset-block-end: calc(4px * var(--thumbnail-dragging-scale));
inset-inline-start: calc(4px * var(--thumbnail-dragging-scale));
}
:is(#viewsManager #viewsManagerContent) #attachmentsView {
--csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) #fffc;
--attachment-color: var(--csstools-light-dark-toggle--133, #000c);
--csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) #ffffff26;
--attachment-bg-color: var(--csstools-light-dark-toggle--134, #00000026);
--csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) #ffffffe6;
--attachment-hover-color: var(--csstools-light-dark-toggle--135, #000000e6);
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
:is(#viewsManager #viewsManagerContent) #attachmentsView {
--attachment-color: light-dark(#000c, #fffc);
--attachment-bg-color: light-dark(#00000026, #ffffff26);
--attachment-hover-color: light-dark(#000000e6, #ffffffe6);
}
}
@supports not (color: light-dark(tan, tan)) {
:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) * {
--csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) #fffc;
--attachment-color: var(--csstools-light-dark-toggle--133, #000c);
--csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) #ffffff26;
--attachment-bg-color: var(--csstools-light-dark-toggle--134, #00000026);
--csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) #ffffffe6;
--attachment-hover-color: var(--csstools-light-dark-toggle--135, #000000e6);
}
}
:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul {
padding: 0;
list-style-type: none;
}
:is(:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul) > li > a {
min-width: calc(100% - 4px);
height: auto;
color: var(--attachment-color);
-webkit-user-select: none;
user-select: none;
white-space: normal;
cursor: pointer;
border-radius: 2px;
margin-bottom: 1px;
padding: 2px 0 5px;
padding-inline-start: 4px;
font-size: 13px;
line-height: 15px;
text-decoration: none;
display: inline-block;
}
:is(:is(:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul) > li > a):hover {
background-color: var(--attachment-bg-color);
color: var(--attachment-hover-color);
background-clip: padding-box;
border-radius: 2px;
}
.sidebar {
--csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) #23222b;
--sidebar-bg-color: var(--csstools-light-dark-toggle--136, #fff);
--csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) #fbfbfe1a;
--sidebar-border-color: var(--csstools-light-dark-toggle--137, #15141a1a);
--csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) #0006;
--sidebar-box-shadow: 0 .25px .75px var(--csstools-light-dark-toggle--138, #0000000d), 0 2px 6px 0 var(--csstools-light-dark-toggle--139, #0000001a);
--sidebar-backdrop-filter: none;
--sidebar-border-radius: 8px;
--sidebar-padding: 5px;
--sidebar-min-width: 180px;
--sidebar-max-width: 632px;
--sidebar-width: 239px;
--resizer-width: 4px;
--resizer-shift: calc(0px - var(--resizer-width) - 2px);
--csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) #00cadb;
--resizer-hover-bg-color: var(--csstools-light-dark-toggle--140, #0062fa);
}
@supports (color: light-dark(red, red)) {
.sidebar {
--sidebar-bg-color: light-dark(#fff, #23222b);
}
}
@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
.sidebar {
--sidebar-border-color: light-dark(#15141a1a, #fbfbfe1a);
--sidebar-box-shadow: 0 .25px .75px light-dark(#0000000d, #0003), 0 2px 6px 0 light-dark(#0000001a, #0006);
}
}
@supports (color: light-dark(red, red)) {
.sidebar {
--resizer-hover-bg-color: light-dark(#0062fa, #00cadb);
}
}
@supports not (color: light-dark(tan, tan)) {
.sidebar * {
--csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) #23222b;
--sidebar-bg-color: var(--csstools-light-dark-toggle--136, #fff);
--csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) #fbfbfe1a;
--sidebar-border-color: var(--csstools-light-dark-toggle--137, #15141a1a);
--csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) #0003;
--csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) #0006;
--sidebar-box-shadow: 0 .25px .75px var(--csstools-light-dark-toggle--138, #0000000d), 0 2px 6px 0 var(--csstools-light-dark-toggle--139, #0000001a);
--csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) #00cadb;
--resizer-hover-bg-color: var(--csstools-light-dark-toggle--140, #0062fa);
}
}
@media screen and (forced-colors: active) {
.sidebar {
--sidebar-bg-color: Canvas;
--sidebar-border-color: CanvasText;
--sidebar-box-shadow: none;
--resizer-hover-bg-color: CanvasText;
}
}
.sidebar {
border-radius: var(--sidebar-border-radius);
box-shadow: var(--sidebar-box-shadow);
border: 1px solid var(--sidebar-border-color);
background-color: var(--sidebar-bg-color);
padding-block: var(--sidebar-padding);
width: var(--sidebar-width);
min-width: var(--sidebar-min-width);
max-width: var(--sidebar-max-width);
-webkit-backdrop-filter: var(--sidebar-backdrop-filter);
backdrop-filter: var(--sidebar-backdrop-filter);
box-sizing: border-box;
position: relative;
inset-block-start: calc(100% + var(--doorhanger-height) - 2px);
}
.sidebar .sidebarResizer {
width: var(--resizer-width);
forced-color-adjust: none;
cursor: ew-resize;
box-sizing: border-box;
border: 1px solid #0000;
background-color: #0000;
background-clip: content-box;
border-block-width: 0;
transition: background-color .5s ease-in-out, border-color .5s ease-in-out;
position: absolute;
inset-block: 0;
inset-inline-start: var(--resizer-shift);
}
:is(.sidebar .sidebarResizer):hover {
background-color: var(--resizer-hover-bg-color);
border-color: #fff;
}
:is(.sidebar .sidebarResizer):focus-visible {
background-color: var(--resizer-hover-bg-color);
outline: none;
}
.sidebar.resizing {
cursor: ew-resize;
-webkit-user-select: none;
user-select: none;
}
.sidebar.resizing :not(.sidebarResizer) {
pointer-events: none;
}
.sidebar.resizing .sidebarResizer {
background-color: var(--resizer-hover-bg-color);
}
:root {
--csstools-color-scheme--light: initial;
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light dark;
--viewer-container-height: 0;
--pdfViewer-padding-bottom: 0;
--page-margin: 1px auto -8px;
--page-border: 9px solid transparent;
--spreadHorizontalWrapped-margin-LR: -3.5px;
--loading-icon-delay: .4s;
--csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) #0df;
--focus-ring-color: var(--csstools-light-dark-toggle--141, #0060df);
--focus-ring-outline: 2px solid var(--focus-ring-color);
--csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) #37b847;
--new-badge-bg: var(--csstools-light-dark-toggle--142, #070);
--csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) #15141a;
--new-badge-color: var(--csstools-light-dark-toggle--143, #fff);
--new-badge-border-color: var(--lightningcss-light, #fbfbfe / 40%) var(--lightningcss-dark, #15141a / 40%);
}
@media (prefers-color-scheme: dark) {
:root {
--lightningcss-light: ;
--lightningcss-dark: initial;
}
}
@supports (color: light-dark(red, red)) {
:root {
--focus-ring-color: light-dark(#0060df, #0df);
--new-badge-bg: light-dark(#070, #37b847);
--new-badge-color: light-dark(#fff, #15141a);
}
}
@supports not (color: light-dark(tan, tan)) {
:root * {
--csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) #0df;
--focus-ring-color: var(--csstools-light-dark-toggle--141, #0060df);
--csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) #37b847;
--new-badge-bg: var(--csstools-light-dark-toggle--142, #070);
--csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) #15141a;
--new-badge-color: var(--csstools-light-dark-toggle--143, #fff);
}
}
@media (prefers-color-scheme: dark) {
:root {
--csstools-color-scheme--light: ;
}
}
@media screen and (forced-colors: active) {
:root {
--pdfViewer-padding-bottom: 9px;
--page-margin: 8px auto -1px;
--page-border: 1px solid CanvasText;
--spreadHorizontalWrapped-margin-LR: 3.5px;
--focus-ring-color: CanvasText;
--new-badge-bg: AccentColor;
--new-badge-color: ButtonFace;
--new-badge-border-color: CanvasText;
}
}
.newBadge {
background-color: var(--new-badge-bg);
color: var(--new-badge-color);
border: 1px solid var(--new-badge-border-color);
font: menu;
flex: 0 0 fit-content;
-webkit-user-select: none;
user-select: none;
border-radius: 4px;
margin-inline: 4px;
padding-inline: 4px;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
[data-main-rotation="90"] {
transform: rotate(90deg)translateY(-100%);
}
[data-main-rotation="180"] {
transform: rotate(180deg)translate(-100%, -100%);
}
[data-main-rotation="270"] {
transform: rotate(270deg)translateX(-100%);
}
#hiddenCopyElement, .hiddenCanvasElement {
width: 0;
height: 0;
display: none;
position: absolute;
top: 0;
left: 0;
}
.pdfViewer {
--scale-factor: 1;
--page-bg-color: unset;
padding-bottom: var(--pdfViewer-padding-bottom);
--hcm-highlight-filter: none;
--hcm-highlight-selected-filter: none;
}
@media screen and (forced-colors: active) {
.pdfViewer {
--hcm-highlight-filter: invert(100%);
}
}
.pdfViewer.copyAll {
cursor: wait;
}
.pdfViewer .canvasWrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
:is(.pdfViewer .canvasWrapper) canvas {
contain: content;
width: 100%;
height: 100%;
margin: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
:is(:is(.pdfViewer .canvasWrapper) canvas) .structTree {
contain: strict;
}
.detailView:is(:is(.pdfViewer .canvasWrapper) canvas) {
image-rendering: pixelated;
}
.pdfViewer .page {
--user-unit: 1;
--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
--scale-round-x: 1px;
--scale-round-y: 1px;
width: 816px;
height: 1056px;
margin: var(--page-margin);
border: var(--page-border);
background-clip: content-box;
background-color: var(--page-bg-color, #fff);
direction: ltr;
position: relative;
overflow: visible;
}
.pdfViewer .dummyPage {
width: 0;
height: var(--viewer-container-height);
position: relative;
}
.pdfViewer.noUserSelect {
-webkit-user-select: none;
user-select: none;
}
.pdfViewer.removePageBorders .page {
border: none;
margin: 0 auto 10px;
}
.pdfViewer.singlePageView {
display: inline-block;
}
.pdfViewer.singlePageView .page {
border: none;
margin: 0;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped), .spread {
text-align: center;
margin-inline: 3.5px;
}
.pdfViewer.scrollHorizontal, .spread {
white-space: nowrap;
}
.pdfViewer.removePageBorders, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
margin-inline: 0;
}
.spread :is(.page, .dummyPage), .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) {
vertical-align: middle;
display: inline-block;
}
.spread .page, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page {
margin-inline: var(--spreadHorizontalWrapped-margin-LR);
}
.pdfViewer.removePageBorders .spread .page, .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
margin-inline: 5px;
}
.pdfViewer .page.loadingIcon:after {
content: "";
width: 100%;
height: 100%;
transition-property: display;
transition-delay: var(--loading-icon-delay);
z-index: 5;
contain: strict;
background: url("../media/loading-icon.0gtb0.n871aax.gif") center no-repeat;
display: none;
position: absolute;
top: 0;
left: 0;
}
.pdfViewer .page.loading:after {
display: block;
}
.pdfViewer .page:not(.loading):after {
transition-property: none;
display: none;
}
.pdfPresentationMode .pdfViewer {
padding-bottom: 0;
}
.pdfPresentationMode .spread {
margin: 0;
}
.pdfPresentationMode .pdfViewer .page {
border: 2px solid #0000;
margin: 0 auto;
}
/* [project]/packages/ui/src/document-viewer.css [app-client] (css) */
.documentViewerReviewTitle {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-size: 14px;
line-height: 1.2;
overflow: hidden;
}
.documentViewerReviewMeta {
min-width: 0;
color: var(--muted);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
overflow: hidden;
}
.documentViewerReviewIconButton {
width: 44px;
height: 44px;
color: color-mix(in srgb, var(--fg), var(--muted) 16%);
cursor: pointer;
background: none;
border: 0;
border-radius: 0;
flex: none;
place-items: center;
display: inline-grid;
}
.documentViewerReviewGlyph {
border-radius: 9px;
place-items: center;
width: 32px;
height: 32px;
transition: background-color .12s, color .12s;
display: inline-grid;
}
.documentViewerReviewIconButton:hover:not(:disabled) {
color: color-mix(in srgb, var(--fg), var(--focus) 18%);
background: none;
}
.documentViewerReviewIconButton:hover:not(:disabled) .documentViewerReviewGlyph {
background: color-mix(in srgb, var(--focus), white 95%);
}
.documentViewerReviewIconButton:focus-visible {
outline: 0;
}
.documentViewerReviewIconButton:focus-visible .documentViewerReviewGlyph {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 64%);
}
.documentViewerCanvasStage:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 12%);
outline-offset: -2px;
}
.documentViewerReviewIconButton:disabled {
cursor: default;
color: color-mix(in srgb, var(--muted), white 28%);
background: none;
}
.documentViewerReviewIconButton.isDownload .documentViewerReviewGlyph {
background: var(--focus);
color: #fff;
}
.documentViewerReviewIconButton.isDownload:hover .documentViewerReviewGlyph {
background: color-mix(in srgb, var(--focus), var(--fg) 12%);
color: #fff;
}
.documentViewer.sharedDocumentViewer {
min-width: 0;
min-height: 0;
color: var(--fg);
flex-direction: column;
gap: 0;
display: flex;
container-type: inline-size;
}
.documentViewerReviewToolbar.sharedViewerToolbar {
background: var(--surface, var(--bg));
flex-wrap: wrap;
flex: 0 auto;
gap: 4px;
min-width: 0;
max-width: 100%;
padding: 4px;
display: flex;
overflow: visible;
}
.sharedViewerToolbar .documentViewerReviewIdentity {
flex: 140px;
gap: 2px;
min-width: 0;
padding: 4px 8px;
display: grid;
}
.sharedViewerToolbar .documentViewerReviewActions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 0;
min-width: 0;
max-width: 100%;
display: flex;
}
.sharedViewerToolbar .documentViewerReviewTrailingAction {
align-self: flex-start;
margin-left: auto;
}
.sharedViewerToolbar .documentViewerReviewIconButton[aria-pressed="true"] .documentViewerReviewGlyph {
background: color-mix(in srgb, var(--focus), transparent 88%);
color: var(--focus);
}
.sharedDocumentViewer .documentViewerViewport {
background: color-mix(in srgb, var(--fg), var(--bg) 96%);
border: 0;
border-radius: 0;
flex: auto;
width: 100%;
height: min(75svh, 900px);
min-height: 320px;
max-height: none;
position: relative;
overflow: hidden;
}
.sharedDocumentViewer[data-viewer-preset="preview"] .documentViewerViewport {
height: min(65svh, 760px);
}
.sharedDocumentViewer[data-viewer-preset="review"] {
height: 100%;
}
.sharedDocumentViewer[data-viewer-preset="review"] .documentViewerViewport {
height: 100%;
min-height: 320px;
}
.sharedDocumentViewer .documentViewerCanvasStage {
touch-action: pan-x pan-y;
overscroll-behavior: auto;
background: none;
width: auto;
height: auto;
min-height: 0;
padding: 0;
display: block;
position: absolute;
inset: 0;
overflow: auto;
}
.sharedDocumentViewer .pdfViewer {
--page-margin: 0 auto 0;
--page-border: none;
padding: 0;
}
.sharedDocumentViewer .pdfViewer .page {
background: #fff;
border: 0;
flex: none;
margin: 0 auto;
box-shadow: 0 0 0 1px #00000016;
}
.sharedDocumentViewer .pdfViewer .canvasWrapper {
border-radius: 0;
}
.sharedDocumentViewer .pdfViewer canvas {
max-width: none;
max-height: none;
}
.sharedDocumentViewer .isPanning {
cursor: grab;
}
.sharedDocumentViewer .isPanning .textLayer {
pointer-events: none;
}
.sharedDocumentViewer .documentViewerImagePage {
max-width: none;
margin: 12px auto;
position: relative;
}
.sharedDocumentViewer .documentViewerImagePage img {
object-fit: contain;
width: 100%;
max-width: none;
height: 100%;
display: block;
}
.sharedDocumentViewer .documentViewerState {
z-index: 6;
background: var(--bg);
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
padding: 24px;
display: flex;
position: absolute;
inset: 0;
}
.sharedDocumentViewer .documentViewerState p {
color: var(--muted);
margin: 0;
}
.sharedDocumentViewer .documentViewerFind {
background: var(--bg);
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 4px 8px;
display: flex;
}
.sharedDocumentViewer .documentViewerFind input {
flex: 130px;
width: 0;
min-width: 100px;
min-height: 44px;
font-size: 16px;
}
.sharedDocumentViewer .documentViewerFind [role="status"] {
color: var(--muted);
font-size: 12px;
}
.sharedDocumentViewer [data-viewer-overlay] {
z-index: 5;
position: absolute;
}
@container (max-width: 600px) {
.sharedViewerToolbar .documentViewerReviewIdentity {
flex-basis: calc(100% - 60px);
order: 0;
}
.sharedViewerToolbar .documentViewerReviewTrailingAction {
order: 1;
}
.sharedViewerToolbar .documentViewerReviewActions {
flex-basis: 100%;
order: 2;
}
.sharedDocumentViewer .documentViewerViewport {
height: 62svh;
min-height: 300px;
}
}
.sharedAttachmentDialog {
border: 1px solid var(--stroke);
border-radius: var(--radius, 10px);
width: min(1100px, 100vw - 32px);
max-width: none;
max-height: calc(100dvh - 32px);
color: var(--fg);
background: var(--bg);
margin: auto;
padding: 8px;
overflow: hidden;
}
.sharedAttachmentDialog::backdrop {
background: #0f172ab3;
}
.sharedAttachmentDialog .documentViewer {
max-height: calc(100dvh - 100px);
}
.sharedAttachmentNavigation, .sharedAttachmentHeader {
justify-content: center;
align-items: center;
gap: 8px;
display: flex;
}
.sharedAttachmentHeader strong {
text-overflow: ellipsis;
flex: 1;
min-width: 0;
overflow: hidden;
}
.sharedAttachmentNavigation span {
color: var(--muted);
font-size: 13px;
}
.sharedAttachmentVideo {
width: 100%;
height: min(70svh, 800px);
display: block;
}
body:has(.sharedAttachmentDialog[open]) {
overflow: hidden;
}
@media (max-width: 600px) {
.sharedAttachmentDialog {
border: 0;
border-radius: 0;
width: 100vw;
max-height: 100dvh;
padding: 4px;
}
}
.documentViewerOverlayLayer {
pointer-events: none;
position: absolute;
inset: 0;
}
.documentViewerOverlayLayer > [data-viewer-overlay] {
pointer-events: auto;
}
.sharedSignaturePlacement .documentViewerViewport {
height: min(70svh, 900px);
min-height: 320px;
}
.sharedSignaturePlacement .signaturePlacementResizeHandle {
width: 44px;
height: 44px;
bottom: -18px;
right: -18px;
}
.sharedFinancePreview {
flex-direction: column;
width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
display: flex;
}
.sharedFinancePreview > .sharedDocumentViewer {
flex: 1;
}
.documentReaderPage {
height: 100dvh;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background: var(--bg);
overflow: hidden;
}
.documentReaderPage > .sharedDocumentViewer {
height: 100%;
}
.documentReaderPage .documentViewerViewport {
height: 0;
min-height: 0;
}
.documentReaderState {
text-align: center;
place-content: center;
min-height: 100%;
display: grid;
}
.documentReaderMedia {
flex-direction: column;
height: 100%;
display: flex;
}
.documentReaderMedia > video {
background: #000;
flex: 1;
width: 100%;
min-height: 0;
}
.documentReaderMedia > audio {
width: min(100%, 600px);
margin: auto;
}
@media (display-mode: window-controls-overlay) {
.documentReaderPage {
padding-top: max(env(safe-area-inset-top), env(titlebar-area-height, 0px));
}
.documentReaderPage:before {
content: "";
height: env(titlebar-area-height, 0px);
background: var(--sidebar-bg, #24384f);
-webkit-app-region: drag;
app-region: drag;
position: fixed;
inset: 0 0 auto;
}
}
/* [project]/packages/ui/src/calendar-month.css [app-client] (css) */
.calendarMonth {
width: 100%;
min-width: 308px;
margin-inline: min(0px, 50% - 154px);
container: calendar-month / inline-size;
}
.calendarMonthGrid {
grid-template-columns: repeat(7, minmax(44px, 1fr));
gap: 8px;
display: grid;
}
.calendarWeekday {
min-width: 0;
color: var(--muted);
text-align: center;
overflow-wrap: anywhere;
padding: 0 0 4px;
font-size: 12px;
font-weight: 500;
line-height: max(20px, 1.4em);
}
.calendarCell {
--calendar-cell-fill: var(--calendar-blank-fill);
--calendar-cell-text: var(--calendar-neutral-text);
border: 1px solid color-mix(in srgb, var(--stroke) 48%, var(--bg));
width: 100%;
min-width: 44px;
min-height: 44px;
box-shadow: none;
background: var(--calendar-cell-fill);
color: var(--calendar-cell-text);
font: inherit;
text-align: left;
appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
cursor: pointer;
border-radius: 8px;
padding: 0;
transition: border-color .14s;
display: flex;
container: calendar-day / inline-size;
}
.calendarCell[data-tone="worked"] {
--calendar-cell-fill: var(--calendar-worked-fill);
--calendar-cell-text: var(--calendar-worked-text);
}
.calendarCell[data-tone="attention"] {
--calendar-cell-fill: var(--calendar-attention-fill);
--calendar-cell-text: var(--calendar-attention-text);
}
.calendarCell[data-tone="missing"] {
--calendar-cell-fill: var(--calendar-missing-fill);
--calendar-cell-text: var(--calendar-missing-text);
}
.calendarCell[data-tone="absence"] {
--calendar-cell-fill: var(--calendar-absence-fill);
--calendar-cell-text: var(--calendar-absence-text);
}
.calendarCell[data-tone="dayOff"] {
--calendar-cell-fill: var(--calendar-day-off-fill);
--calendar-cell-text: var(--calendar-day-off-text);
}
.calendarCell[data-tone="holiday"] {
--calendar-cell-fill: var(--calendar-holiday-fill);
--calendar-cell-text: var(--calendar-holiday-text);
}
.calendarCell[data-tone="weekend"] {
--calendar-cell-fill: var(--calendar-weekend-fill);
--calendar-cell-text: var(--calendar-weekend-text);
}
.calendarCell[data-tone="neutral"] {
--calendar-cell-fill: var(--calendar-neutral-fill);
}
.calendarCell[data-striped] {
background-image: repeating-linear-gradient(135deg, transparent 0, transparent 9px, var(--calendar-readonly-stripe) 9px, var(--calendar-readonly-stripe) 10px);
}
.calendarCell:disabled {
cursor: default;
}
.calendarMonth[aria-busy="true"] .calendarCell {
cursor: progress;
}
.calendarCell:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus) 55%, var(--bg));
}
.calendarCell[data-selected] {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
.calendarCell:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.timesheetCellContent {
flex-direction: column;
gap: 4px;
width: 100%;
min-width: 0;
min-height: 88px;
padding: 8px;
display: flex;
}
.timesheetCellHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 3px;
min-width: 0;
display: flex;
}
.timesheetCellDayNum {
aspect-ratio: 1;
font-variant-numeric: tabular-nums;
width: 1.85em;
min-width: 20px;
max-width: 100%;
min-height: 20px;
color: var(--calendar-neutral-text);
border-radius: 50%;
flex: none;
place-items: center;
margin-left: -3px;
font-size: 12px;
font-weight: 500;
line-height: 1;
display: inline-grid;
}
.timesheetCellDayNumToday {
color: #fff;
background: var(--focus);
font-weight: 600;
}
.timesheetCellHours {
color: inherit;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
font-size: 18px;
font-weight: 600;
line-height: 1.15;
}
.timesheetCellHint {
align-items: center;
gap: 4px;
min-width: 0;
margin-top: auto;
font-size: 12px;
font-weight: 500;
line-height: 1.25;
display: flex;
}
.timesheetCellHint > span {
overflow-wrap: anywhere;
min-width: 0;
}
:is(.timesheetCellHint, .timesheetCellStatusMark)[data-tone="attention"] {
color: var(--calendar-attention-text);
}
:is(.timesheetCellHint, .timesheetCellStatusMark)[data-tone="missing"] {
color: var(--calendar-missing-text);
}
:is(.timesheetCellHint, .timesheetCellStatusMark)[data-tone="neutral"] {
color: var(--calendar-neutral-text);
}
:is(.timesheetCellHint, .timesheetCellStatusMark)[data-tone="dayOff"] {
color: var(--calendar-day-off-text);
}
.timesheetCellChevron {
flex: none;
margin-left: auto;
display: none;
}
.timesheetCellHoursCompact, .timesheetCellHintShort, .timesheetCellStatusMark {
display: none;
}
.timesheetCellMarkers {
align-items: center;
gap: 3px;
display: flex;
}
.timesheetCellLock, .timesheetCellSelectMark {
color: var(--muted);
flex: none;
}
.timesheetCellSelectMark {
border: 1px solid var(--stroke);
border-radius: 3px;
place-items: center;
width: 14px;
height: 14px;
display: grid;
}
.timesheetCellSelectMark[data-checked="true"] {
background: var(--focus);
color: #fff;
border-color: var(--focus);
}
.timesheetDayPlaceholder {
min-width: 0;
}
@container calendar-day (min-width: 110px) {
.timesheetCellChevron {
display: block;
}
}
@container calendar-day (max-width: 109px) {
.timesheetCellContent {
min-height: 76px;
padding: 6px;
}
.timesheetCellHours {
font-size: 16px;
}
.timesheetCellHoursFull {
display: none;
}
.timesheetCellHoursCompact {
display: inline;
}
.timesheetCellHint {
font-size: 11px;
}
}
@container calendar-day (max-width: 70px) {
.timesheetCellContent {
gap: 1px;
min-height: 100cqi;
padding: 3px;
}
.timesheetCellDayNum {
margin-left: -2px;
font-size: 11px;
}
.timesheetCellHours {
margin-top: auto;
font-size: clamp(11px, 28cqi, 13px);
}
.timesheetCellHint {
font-size: 10px;
line-height: 1.2;
}
.timesheetCellHintShort {
display: inline;
}
.timesheetCellHintFull, .timesheetCellContent[data-has-hours] .timesheetCellHint {
display: none;
}
.timesheetCellStatusMark {
width: 10px;
height: 10px;
display: block;
}
.timesheetCellMarkers {
flex-direction: column;
gap: 0;
}
.timesheetCellLock {
width: 10px;
height: 10px;
}
.timesheetCellSelectMark {
width: 12px;
height: 12px;
}
}
@container calendar-month (max-width: 520px) {
.calendarMonthGrid {
gap: 4px;
}
.calendarWeekday {
padding-bottom: 2px;
font-size: 11px;
}
}
@container calendar-month (max-width: 331px) {
.calendarMonthGrid {
column-gap: 2px;
}
}
@container calendar-month (max-width: 319px) {
.calendarMonthGrid {
column-gap: 0;
}
.calendarCell:focus-visible {
outline-offset: -2px;
}
}
@media (max-width: 360px) {
:is(html:has(.calendarMonth), body:has(.calendarMonth)) {
scrollbar-gutter: auto;
scrollbar-width: thin;
}
}
@media (prefers-reduced-motion: reduce) {
.calendarCell {
transition: none;
}
}
/* [project]/packages/ui/src/base.css [app-client] (css) */
:root {
--container: 1120px;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
html {
--lightningcss-light: initial;
--lightningcss-dark: ;
color-scheme: light;
-webkit-tap-highlight-color: transparent;
}
body {
--font-condensed: var(--font-sans);
--cm-bg-base: var(--bg);
--cm-grid-color: var(--cm-grid);
--cm-blob-warm-active: var(--cm-blob-warm);
--cm-blob-cool-active: var(--cm-blob-cool);
background: radial-gradient(1100px 520px at 20% -20%, var(--cm-blob-warm-active), transparent 60%),
radial-gradient(900px 520px at 100% 0%, var(--cm-blob-cool-active), transparent 58%),
repeating-linear-gradient(0deg, var(--cm-grid-color), var(--cm-grid-color) 1px, transparent 1px, transparent 32px),
repeating-linear-gradient(90deg, var(--cm-grid-color), var(--cm-grid-color) 1px, transparent 1px, transparent 32px),
var(--cm-bg-base);
color: var(--fg);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
margin: 0;
font-size: 16px;
line-height: 1.45;
}
body[data-cm-tex="white-grid"] {
--cm-bg-base: var(--bg-2);
--cm-grid-color: color-mix(in srgb, var(--fg), transparent 92%);
--cm-blob-warm-active: #0000;
--cm-blob-cool-active: #0000;
}
body[data-cm-tex="paper-grid"] {
--cm-bg-base: var(--bg);
--cm-grid-color: color-mix(in srgb, var(--fg), transparent 92%);
--cm-blob-warm-active: var(--cm-blob-warm);
--cm-blob-cool-active: var(--cm-blob-cool);
}
body[data-cm-tex="paper"], body[data-cm-tex="white"] {
--cm-bg-base: var(--bg-2);
--cm-grid-color: transparent;
--cm-blob-warm-active: #0000;
--cm-blob-cool-active: #0000;
}
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3 {
font-family: var(--font-sans);
letter-spacing: -.015em;
text-wrap: balance;
}
main {
min-height: 100%;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 20px;
}
.content {
max-width: var(--container);
margin: 0 auto;
padding: 18px 20px 40px;
}
.cmUserAvatar {
--cm-user-avatar-size: 40px;
--cm-user-avatar-bg: #e8eff8;
--cm-user-avatar-fg: #42688f;
--cm-user-avatar-stroke: #ccd9e9;
width: var(--cm-user-avatar-size);
height: var(--cm-user-avatar-size);
flex: 0 0 var(--cm-user-avatar-size);
border: 1px solid var(--cm-user-avatar-stroke);
background: var(--cm-user-avatar-bg);
color: var(--cm-user-avatar-fg);
box-shadow: 0 0 0 var(--cm-user-avatar-ring-width, 0) var(--cm-user-avatar-ring-color, transparent);
font-family: var(--font-sans);
font-size: calc(var(--cm-user-avatar-size) * .3);
letter-spacing: -.02em;
-webkit-user-select: none;
user-select: none;
border-radius: 50%;
justify-content: center;
align-items: center;
font-weight: 850;
line-height: 1;
display: inline-flex;
position: relative;
overflow: hidden;
}
.cmUserAvatar--compact {
--cm-user-avatar-size: 28px;
}
.cmUserAvatar--table {
--cm-user-avatar-size: 36px;
}
.cmUserAvatar--navigation {
--cm-user-avatar-size: 40px;
}
.cmUserAvatar--profile {
--cm-user-avatar-size: 72px;
}
.cmUserAvatar--palette-0 {
--cm-user-avatar-bg: #e8eff8;
--cm-user-avatar-fg: #42688f;
--cm-user-avatar-stroke: #ccd9e9;
}
.cmUserAvatar--palette-1 {
--cm-user-avatar-bg: #e8f3ea;
--cm-user-avatar-fg: #3f7047;
--cm-user-avatar-stroke: #cde0cf;
}
.cmUserAvatar--palette-2 {
--cm-user-avatar-bg: #f7ece6;
--cm-user-avatar-fg: #9c542b;
--cm-user-avatar-stroke: #ead4c7;
}
.cmUserAvatar--palette-3 {
--cm-user-avatar-bg: #ece8f8;
--cm-user-avatar-fg: #675295;
--cm-user-avatar-stroke: #d8d0ec;
}
.cmUserAvatar--palette-4 {
--cm-user-avatar-bg: #e6f2f2;
--cm-user-avatar-fg: #316f70;
--cm-user-avatar-stroke: #c9dfdf;
}
.cmUserAvatar--palette-5 {
--cm-user-avatar-bg: #f5ece8;
--cm-user-avatar-fg: #8e4d3e;
--cm-user-avatar-stroke: #e5d2ca;
}
.cmUserAvatarFallback {
justify-content: center;
align-items: center;
display: inline-flex;
}
.cmUserAvatarImage {
object-fit: cover;
background: var(--cm-user-avatar-bg);
width: 100%;
height: 100%;
display: block;
position: absolute;
inset: 0;
}
.card {
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.cardHeader {
padding: 18px 18px 0;
}
.cardBody {
padding: 18px;
}
.cmRejectionExplanation {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg-2);
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
gap: 12px;
min-width: 0;
padding: 16px;
display: grid;
}
.cmRejectionExplanationIcon {
background: color-mix(in srgb, var(--danger), white 92%);
width: 40px;
height: 40px;
color: color-mix(in srgb, var(--danger), black 8%);
border-radius: 10px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.cmRejectionExplanationCopy {
gap: 4px;
min-width: 0;
display: grid;
}
.cmRejectionExplanationHeading, .cmRejectionExplanationBody {
min-width: 0;
margin: 0;
}
.cmRejectionExplanationHeading {
color: color-mix(in srgb, var(--danger), black 12%);
font-size: .75rem;
font-weight: 750;
line-height: 1.3;
}
.cmRejectionExplanationBody {
color: var(--fg);
overflow-wrap: anywhere;
white-space: pre-wrap;
font-size: .9375rem;
line-height: 1.5;
}
.notificationPreferences, .notificationDeliverySettings {
gap: 14px;
display: grid;
}
.notificationDeliverySettingsHeader {
justify-content: space-between;
align-items: flex-start;
gap: 16px;
display: flex;
}
.notificationDeliverySettingsHeader h2 {
color: var(--fg);
margin: 0;
font-size: 24px;
line-height: 1.05;
}
.notificationDeliverySettingsHeader p {
color: var(--muted);
margin: 4px 0 0;
font-size: 14px;
line-height: 1.35;
}
.notificationDeliverySummary {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg-2);
grid-template-columns: repeat(3, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.notificationDeliverySummaryItem {
border-right: 1px solid var(--stroke);
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-width: 0;
min-height: 86px;
padding: 14px;
display: grid;
}
.notificationDeliverySummaryItem:last-child {
border-right: 0;
}
.notificationDeliverySummaryIcon {
background: color-mix(in srgb, var(--focus), white 91%);
width: 40px;
height: 40px;
color: var(--focus);
border-radius: 12px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationDeliverySummaryIcon:before {
content: "";
border: 2px solid;
border-radius: 999px;
width: 16px;
height: 16px;
display: block;
}
.notificationDeliverySummaryIcon-device:before {
border-radius: 4px;
width: 12px;
height: 18px;
}
.notificationDeliverySummaryIcon-hours:before {
box-shadow: inset 5px 0 #0000;
}
.notificationDeliverySummaryText {
gap: 3px;
min-width: 0;
display: grid;
}
.notificationDeliverySummaryText strong {
color: var(--fg);
font-size: 14px;
font-weight: 900;
line-height: 1.2;
}
.notificationDeliverySummaryText span, .notificationDeliverySummaryText small {
overflow-wrap: anywhere;
min-width: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.3;
}
.notificationDeliverySummaryText span {
color: var(--fg);
font-weight: 800;
}
.notificationPreferencesHeader {
justify-content: space-between;
align-items: flex-start;
gap: 16px;
display: flex;
}
.notificationPreferencesHeader h2 {
margin: 0;
font-size: 24px;
line-height: 1.05;
}
.notificationPreferencesHeader p {
color: var(--muted);
margin: 4px 0 0;
font-size: 14px;
}
.notificationPreferencesEmail {
border: 1px solid var(--stroke);
background: var(--bg);
min-height: 32px;
color: var(--muted);
text-transform: uppercase;
border-radius: 999px;
align-items: center;
padding: 6px 10px;
font-size: 12px;
font-weight: 800;
display: inline-flex;
}
.notificationPushSetup {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg);
gap: 0;
min-height: 64px;
padding: 0;
display: grid;
overflow: hidden;
}
.notificationPushSetup.isReady, .notificationPushSetup.isBlocked {
border-color: var(--stroke);
}
.notificationPushCurrentDevice {
grid-template-columns: 52px minmax(0, 1fr) auto auto;
align-items: center;
gap: 16px;
padding: 22px 20px;
display: grid;
}
.notificationPushSetupIcon {
background: color-mix(in srgb, var(--focus), white 91%);
width: 48px;
height: 48px;
color: color-mix(in srgb, var(--focus), black 12%);
border-radius: 999px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationPushSetupIcon svg, .notificationPushDeviceIcon svg, .notificationPushSetupStatus svg, .notificationPushDeviceLastSeenValue svg, .notificationPushDisableAction svg {
fill: none;
stroke: currentColor;
stroke-width: 1.9px;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
width: 22px;
height: 22px;
}
.notificationPushSetupIcon-isBlocked {
background: color-mix(in srgb, var(--danger), white 90%);
color: color-mix(in srgb, var(--danger), black 8%);
}
.notificationPushSetupIcon-isReady {
background: color-mix(in srgb, var(--ok), white 90%);
color: color-mix(in srgb, var(--ok), black 18%);
}
.notificationPushSetupIcon-devices {
background: color-mix(in srgb, var(--muted), white 91%);
color: var(--muted);
}
.notificationPushCurrentDeviceText {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPushCurrentDeviceText strong {
color: var(--fg);
font-weight: 900;
}
.notificationPushCurrentDeviceText span {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}
.notificationPushSetupStatus {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
color: var(--muted);
}
.notificationPushSetupStatus svg {
stroke-width: 2.2px;
width: 17px;
height: 17px;
}
.notificationPushSetupStatus-enabled {
background: color-mix(in srgb, var(--ok), white 91%);
color: color-mix(in srgb, var(--ok), black 26%);
}
.notificationPushSetupStatus-checking, .notificationPushSetupStatus-ready, .notificationPushSetupStatus-registering {
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 18%);
}
.notificationPushSetupStatus-denied, .notificationPushSetupStatus-error, .notificationPushSetupStatus-unsupported, .notificationPushSetupStatus-install-required, .notificationPushSetupStatus-server-disabled {
background: color-mix(in srgb, var(--danger), white 95%);
color: color-mix(in srgb, var(--danger), black 14%);
}
.notificationPushSetupAction {
white-space: nowrap;
min-height: 44px;
}
.btn.notificationPushDisableAction {
background: color-mix(in srgb, var(--danger), white 95%);
min-height: 44px;
color: color-mix(in srgb, var(--danger), black 10%);
border-color: #0000;
border-radius: 8px;
gap: 7px;
padding: 9px 13px;
font-weight: 800;
}
.btn.notificationPushDisableAction:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--danger), white 70%);
background: color-mix(in srgb, var(--danger), white 90%);
color: color-mix(in srgb, var(--danger), black 18%);
}
.btn.notificationPushDisableAction:disabled {
background: color-mix(in srgb, var(--danger), white 97%);
color: color-mix(in srgb, var(--danger), var(--muted) 58%);
border-color: #0000;
}
.btn.notificationPushDisableAction svg {
stroke-width: 2px;
width: 17px;
height: 17px;
}
.notificationPushSetupDiagnostic {
border: 1px solid color-mix(in srgb, var(--danger), white 58%);
background: color-mix(in srgb, var(--danger), white 95%);
color: color-mix(in srgb, var(--danger), black 20%);
border-radius: 10px;
margin: 0;
padding: 8px 10px;
font-size: 12px;
line-height: 1.35;
}
.notificationPushCurrentDevice + .notificationPushSetupDiagnostic {
margin: -4px 16px 14px;
}
.notificationPushSetupDiagnostic strong {
color: color-mix(in srgb, var(--danger), black 28%);
font-weight: 900;
}
.notificationPushDeviceList {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 16%);
display: block;
}
.notificationPushDeviceListSummary {
cursor: pointer;
min-height: 98px;
color: var(--fg);
grid-template-columns: 52px minmax(0, 1fr) auto 14px;
align-items: center;
gap: 16px;
padding: 20px;
font-size: 13px;
list-style: none;
display: grid;
}
.notificationPushDeviceListSummaryText {
gap: 3px;
min-width: 0;
display: grid;
}
.notificationPushDeviceListSummaryText strong {
font-size: 18px;
line-height: 1.2;
}
.notificationPushDeviceListSummaryText small {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}
.notificationPushDeviceListSummary:focus-visible {
box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--focus), transparent 76%);
outline: none;
}
.notificationPushDeviceListSummary::-webkit-details-marker {
display: none;
}
.notificationPushDeviceListSummary::marker {
content: "";
}
.notificationPushDeviceListSummary:after {
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
content: "";
width: 8px;
height: 8px;
margin-left: 2px;
transition: transform .14s;
transform: rotate(45deg);
}
.notificationPushDeviceList[open] .notificationPushDeviceListSummary:after {
transform: rotate(225deg);
}
.notificationPushDeviceCount {
background: color-mix(in srgb, var(--focus), white 90%);
min-width: 34px;
height: 34px;
color: var(--focus);
border-radius: 9px;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 900;
display: inline-flex;
}
.notificationPushDeviceListBody {
gap: 8px;
padding: 0 20px 22px;
display: grid;
}
.notificationPushDeviceList:not([open]) .notificationPushDeviceListBody {
display: none;
}
.notificationPushDeviceEmpty {
color: var(--muted);
margin: 0;
font-size: 13px;
}
.notificationPushDeviceRows {
border: 1px solid color-mix(in srgb, var(--stroke), white 12%);
background: var(--bg);
border-radius: 9px;
gap: 0;
display: grid;
overflow: hidden;
}
.notificationPushDeviceHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), white 12%);
background: color-mix(in srgb, var(--bg-2), var(--stroke) 4%);
min-height: 54px;
color: var(--muted);
letter-spacing: 0;
text-transform: uppercase;
grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) minmax(112px, .42fr) minmax(138px, .5fr);
align-items: center;
gap: 18px;
padding: 0 22px;
font-size: 12px;
font-weight: 800;
display: grid;
}
.notificationPushDeviceRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 12%);
background: var(--bg);
grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) minmax(112px, .42fr) minmax(138px, .5fr);
align-items: center;
gap: 18px;
min-height: 92px;
padding: 18px 22px;
display: grid;
}
.notificationPushDeviceHeader + .notificationPushDeviceRow {
border-top: 0;
}
.notificationPushDeviceText {
grid-template-columns: 50px minmax(0, 1fr);
align-items: center;
gap: 16px;
min-width: 0;
display: grid;
}
.notificationPushDeviceIcon {
background: color-mix(in srgb, var(--focus), white 91%);
width: 44px;
height: 44px;
color: color-mix(in srgb, var(--focus), black 12%);
border-radius: 999px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationPushDeviceIcon svg {
width: 24px;
height: 24px;
}
.notificationPushDeviceName {
min-width: 0;
display: grid;
}
.notificationPushDeviceText strong {
min-width: 0;
color: var(--fg);
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 15px;
line-height: 1.2;
display: flex;
}
.notificationPushDeviceText strong span {
background: color-mix(in srgb, var(--focus), white 90%);
color: var(--focus);
border-radius: 999px;
padding: 2px 6px;
font-size: 11px;
font-weight: 900;
}
.notificationPushDeviceLastSeen {
min-width: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}
.notificationPushDeviceLastSeenValue {
align-items: center;
gap: 9px;
min-width: 0;
display: inline-flex;
}
.notificationPushDeviceLastSeenValue svg {
width: 20px;
height: 20px;
color: var(--muted);
}
.notificationPushDeviceMobileLabel {
display: none;
}
.notificationPushDeviceStatus {
justify-content: flex-start;
min-width: 0;
display: flex;
}
.notificationPushDeviceState {
background: color-mix(in srgb, var(--ok), white 91%);
color: color-mix(in srgb, var(--ok), black 26%);
}
.notificationPushDeviceState.isDisabled {
background: color-mix(in srgb, var(--danger), white 95%);
color: color-mix(in srgb, var(--danger), black 14%);
}
.notificationPushDeviceStateDot {
background: currentColor;
border-radius: 999px;
width: 7px;
height: 7px;
}
.notificationPushDeviceActions {
justify-content: flex-start;
min-width: 0;
display: flex;
}
.notificationPushDeviceNoAction {
min-height: 1px;
}
.notificationPushDeviceText > span {
color: var(--muted);
font-size: 12px;
}
.btn.notificationPushDisableActionCompact {
min-width: 96px;
padding: 8px 11px;
font-size: 13px;
line-height: 1.1;
}
.notificationPreferencesList {
border: 1px solid var(--stroke);
border-radius: var(--radius);
display: grid;
overflow: hidden;
}
.notificationPreferencesWindow {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg-2);
gap: 14px;
padding: 14px;
display: grid;
}
.notificationPreferences_embedded .notificationPreferencesWindow {
order: 2;
}
.notificationPreferences_embedded .notificationPreferencesList {
order: 1;
}
.notificationPreferences_embedded .notificationPreferencesActions {
order: 3;
}
.notificationPreferencesWindowHeader {
cursor: pointer;
grid-template-columns: minmax(0, 1fr) auto 14px;
align-items: start;
gap: 12px;
min-height: 54px;
list-style: none;
display: grid;
}
.notificationPreferencesWindowHeader::-webkit-details-marker {
display: none;
}
.notificationPreferencesWindowHeader::marker {
content: "";
}
.notificationPreferencesWindowHeader:after {
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
content: "";
width: 8px;
height: 8px;
margin-top: 9px;
transition: transform .14s;
transform: rotate(45deg);
}
.notificationPreferencesWindow[open] .notificationPreferencesWindowHeader:after {
transform: rotate(225deg);
}
.notificationPreferencesWindowHeader h3 {
color: var(--fg);
margin: 0;
font-size: 15px;
line-height: 1.2;
}
.notificationPreferencesWindowHeader p {
color: var(--muted);
margin: 4px 0 0;
font-size: 13px;
line-height: 1.35;
}
.notificationPreferencesWindowBadge {
background: color-mix(in srgb, var(--focus), white 92%);
color: var(--focus);
}
.notificationPreferencesWindowBody {
gap: 12px;
display: grid;
}
.notificationPreferencesWindowMode {
border: 1px solid var(--stroke);
background: var(--bg);
border-radius: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
padding: 4px;
display: grid;
}
.notificationPreferencesWindowModeButton {
min-width: 0;
min-height: 44px;
color: var(--muted);
font: inherit;
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 9px;
padding: 8px 12px;
font-size: 13px;
font-weight: 900;
}
.notificationPreferencesWindowModeButton.isSelected {
border-color: color-mix(in srgb, var(--focus), white 58%);
background: color-mix(in srgb, var(--focus), white 91%);
color: var(--focus);
}
.notificationPreferencesWindowSummary {
border: 1px solid color-mix(in srgb, var(--stroke), white 12%);
background: var(--bg);
border-radius: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.notificationPreferencesWindowSummaryItem {
border-right: 1px solid var(--stroke);
min-width: 0;
color: var(--fg);
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 12px 14px;
font-size: 13px;
font-weight: 850;
line-height: 1.25;
display: grid;
}
.notificationPreferencesWindowSummaryItem:last-child {
border-right: 0;
}
.notificationPreferencesWindowSummaryIcon {
background: color-mix(in srgb, var(--focus), white 93%);
width: 28px;
height: 28px;
color: var(--muted);
border-radius: 9px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationPreferencesWindowSummaryIcon svg {
stroke-width: 2px;
width: 15px;
height: 15px;
}
.notificationPreferencesWindowSummaryText {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPreferencesWindowSummaryText strong {
overflow-wrap: anywhere;
color: var(--muted);
text-transform: uppercase;
font-size: 11px;
font-weight: 900;
line-height: 1.2;
}
.notificationPreferencesWindowSummaryText b {
overflow-wrap: anywhere;
min-width: 0;
color: var(--fg);
font-size: 13px;
font-weight: 900;
line-height: 1.2;
}
.notificationPreferencesWindowInheritedNote {
border: 1px solid color-mix(in srgb, var(--focus), white 78%);
background: color-mix(in srgb, var(--focus), white 96%);
min-height: 44px;
color: color-mix(in srgb, var(--focus), var(--fg) 28%);
border-radius: 10px;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 10px 12px;
font-size: 13px;
font-weight: 800;
line-height: 1.3;
display: grid;
}
.notificationPreferencesWindowInheritedNote svg {
stroke-width: 2.2px;
width: 16px;
height: 16px;
}
.notificationPreferencesWindowPreview {
border: 1px solid color-mix(in srgb, var(--stroke), white 10%);
background: var(--bg);
border-radius: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.notificationPreferencesWindowPreviewItem {
border-right: 1px solid var(--stroke);
gap: 3px;
min-width: 0;
padding: 11px 12px;
display: grid;
}
.notificationPreferencesWindowPreviewItem:nth-child(3) {
border-right: 0;
}
.notificationPreferencesWindowPreviewItem strong {
overflow-wrap: anywhere;
color: var(--muted);
text-transform: uppercase;
font-size: 11px;
font-weight: 900;
line-height: 1.2;
}
.notificationPreferencesWindowPreviewItem b {
overflow-wrap: anywhere;
min-width: 0;
color: var(--fg);
font-size: 13px;
font-weight: 900;
line-height: 1.2;
}
.notificationPreferencesWindowPreviewWeekend {
border-top: 1px solid var(--stroke);
background: color-mix(in srgb, var(--bg), var(--focus) 3%);
border-right: 0;
grid-column: 1 / -1;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 44px;
}
.notificationPreferencesWindowPreviewWeekend svg {
width: 16px;
height: 16px;
color: var(--muted);
stroke-width: 2px;
}
.notificationPreferencesWindowPreviewWeekend span {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPreferencesWindowControls {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.notificationPreferencesWindowField {
color: var(--muted);
text-transform: uppercase;
gap: 6px;
font-size: 12px;
font-weight: 900;
display: grid;
}
.notificationPreferencesWindowField input, .notificationPreferencesWindowField select {
border: 1px solid var(--stroke);
background: var(--bg);
width: 100%;
min-height: 44px;
color: var(--fg);
font: inherit;
text-transform: none;
border-radius: 10px;
font-size: 14px;
}
.notificationPreferencesWindowField_customTimezone {
grid-column: span 2;
}
.notificationPreferencesPolicyToggles {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.notificationPreferencesPolicyToggle {
border: 1px solid color-mix(in srgb, var(--stroke), white 12%);
background: var(--bg);
min-height: 48px;
color: var(--fg);
border-radius: 10px;
grid-column: 1 / -1;
grid-template-columns: 50px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 10px;
font-size: 13px;
font-weight: 800;
display: grid;
position: relative;
}
.notificationPreferencesPolicyToggles .notificationPreferencesPolicyToggle {
grid-column: auto;
}
.notificationPreferencesPolicyToggleText {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPreferencesPolicyToggleText span {
color: var(--fg);
font-weight: 900;
}
.notificationPreferencesPolicyToggleText small {
overflow-wrap: anywhere;
color: var(--muted);
font-size: 12px;
font-weight: 750;
line-height: 1.3;
}
.notificationPreferenceRow {
background: var(--bg-2);
border-bottom: 1px solid var(--stroke);
grid-template-columns: 46px minmax(194px, 1fr) minmax(300px, 360px);
align-items: center;
gap: 16px;
min-height: 72px;
padding: 12px 14px;
display: grid;
}
.notificationPreferenceRow:last-child {
border-bottom: 0;
}
.notificationPreferenceIcon {
background: color-mix(in srgb, var(--focus), white 93%);
width: 36px;
height: 36px;
color: color-mix(in srgb, var(--muted), var(--focus) 28%);
border-radius: 999px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationPreferenceIcon svg {
stroke-width: 1.9px;
width: 18px;
height: 18px;
}
.notificationPreferences[data-surface="admin"] .notificationPreferenceIcon {
background: color-mix(in srgb, var(--focus), white 92%);
width: 40px;
height: 40px;
color: color-mix(in srgb, var(--muted), var(--focus) 34%);
}
.notificationPreferences[data-surface="admin"] .notificationPreferenceIcon svg {
width: 20px;
height: 20px;
}
.notificationPreferenceText {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPreferenceTitle {
color: var(--fg);
font-weight: 900;
}
.notificationPreferenceDescription {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.notificationPreferenceChannelHeader {
border-bottom: 1px solid var(--stroke);
background: var(--bg);
grid-template-columns: 46px minmax(194px, 1fr) minmax(300px, 360px);
align-items: end;
gap: 16px;
min-height: 44px;
padding: 8px 14px;
display: grid;
}
.notificationPreferenceChannelHeaderSpacer {
grid-column: 1 / 3;
}
.notificationPreferenceChannelLabels {
grid-column: 3;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.notificationPreferenceChannelLabel {
min-width: 0;
color: var(--muted);
gap: 2px;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
display: grid;
}
.notificationPreferenceChannelNote {
overflow-wrap: anywhere;
color: var(--danger);
font-size: 11px;
font-weight: 800;
line-height: 1.2;
}
.notificationPreferenceControls {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: flex-end;
align-items: center;
gap: 10px;
min-width: 0;
display: grid;
}
.notificationPreferenceControl {
min-width: 0;
min-height: 48px;
color: var(--muted);
cursor: pointer;
text-transform: none;
grid-template-columns: 50px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 13px;
font-weight: 800;
line-height: 1.2;
display: inline-grid;
position: relative;
}
.notificationPreferenceSwitch {
clip: rect(0 0 0 0);
white-space: nowrap;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
position: absolute;
overflow: hidden;
}
.notificationPreferenceSwitchTrack {
border: 1px solid color-mix(in srgb, var(--stroke), var(--muted) 18%);
background: color-mix(in srgb, var(--bg), var(--stroke) 28%);
border-radius: 999px;
width: 48px;
height: 30px;
transition: background-color .14s, border-color .14s;
position: relative;
}
.notificationPreferenceSwitchTrack:after {
background: var(--bg);
content: "";
border-radius: 999px;
width: 22px;
height: 22px;
transition: transform .14s;
position: absolute;
top: 3px;
left: 3px;
box-shadow: 0 1px 3px #00000038;
}
.notificationPreferenceSwitch:checked + .notificationPreferenceSwitchTrack {
border-color: color-mix(in srgb, var(--focus), black 8%);
background: var(--focus);
}
.notificationPreferenceSwitch:checked + .notificationPreferenceSwitchTrack:after {
transform: translateX(18px);
}
.notificationPreferenceSwitch:focus-visible + .notificationPreferenceSwitchTrack {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 15%);
outline-offset: 3px;
}
.notificationPreferenceControlText {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPreferenceControlLabel {
overflow-wrap: anywhere;
color: var(--muted);
display: none;
}
.notificationPreferenceState {
overflow-wrap: anywhere;
color: var(--fg);
font-weight: 900;
}
.notificationPreferencesActions {
justify-content: flex-end;
align-items: center;
gap: 10px;
display: flex;
}
.notificationPreferencesSaveState {
min-height: 24px;
color: var(--ok);
margin-right: auto;
font-size: 13px;
font-weight: 800;
}
.notificationPreferencesSaveState.isError {
color: var(--danger);
}
.btn.notificationPreferencesReset, .btn.notificationPreferencesSave {
border-radius: 8px;
min-height: 44px;
padding: 9px 16px;
font-weight: 800;
}
.btn.notificationPreferencesReset {
background: var(--bg);
color: var(--fg);
border-color: color-mix(in srgb, var(--stroke), var(--fg) 10%);
}
.btn.notificationPreferencesReset:hover:not(:disabled) {
background: color-mix(in srgb, var(--bg), var(--focus) 4%);
border-color: color-mix(in srgb, var(--focus), var(--stroke) 38%);
color: var(--fg);
}
.btn.notificationPreferencesReset:disabled {
background: var(--bg);
border-color: color-mix(in srgb, var(--stroke), white 18%);
color: var(--muted);
}
.btn.notificationPreferencesSave {
min-width: 92px;
}
.notificationRow {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), white 12%);
width: 100%;
min-width: 0;
color: var(--fg);
text-align: left;
cursor: pointer;
background: #fff;
border-radius: 0;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 14px;
display: grid;
}
.notificationRow:first-child {
border-top: 0;
}
.notificationRow_popup {
min-height: 86px;
padding: 12px 16px;
}
.notificationRow_center {
min-height: 104px;
padding: 16px 18px;
}
.notificationRow:disabled {
cursor: default;
opacity: .78;
}
.notificationRow:not(:disabled):hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.notificationRow:focus-visible, .notificationCenterScopeTab:focus-visible, .notificationCenterFilterPanel summary:focus-visible, .notificationCenterFilterField select:focus-visible, .notificationCenterLoadMore:focus-visible, .notificationPreferencesWindowHeader:focus-visible, .notificationPreferencesWindowModeButton:focus-visible, .notificationPreferencesWindowField input:focus-visible, .notificationPreferencesWindowField select:focus-visible, .notificationPreferencesDisclosure > summary:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 76%);
outline: none;
}
.notificationRow_unread .notificationRowTitle {
font-weight: 850;
}
.notificationRow_read .notificationRowTitle, .notificationRow_read .notificationRowBody, .notificationRow_read .notificationRowKicker, .notificationRow_read .notificationRowTime {
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
}
.notificationRow_unread.notificationRow_tone_red {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger), white 10%);
}
.notificationRow_unread.notificationRow_tone_amber {
box-shadow: inset 3px 0 #f59e0b;
}
.notificationRowIcon {
background: color-mix(in srgb, var(--focus), white 93%);
width: 42px;
height: 42px;
color: var(--focus);
border-radius: 12px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationRowIcon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.85px;
stroke-linecap: round;
stroke-linejoin: round;
width: 23px;
height: 23px;
}
.notificationRow_tone_red .notificationRowIcon {
background: color-mix(in srgb, var(--danger), white 92%);
color: var(--danger);
}
.notificationRow_tone_amber .notificationRowIcon {
color: #d97706;
background: #fef6e9;
}
.notificationRow_tone_green .notificationRowIcon {
background: color-mix(in srgb, var(--ok), white 91%);
color: var(--ok);
}
.notificationRow_tone_gray .notificationRowIcon {
background: color-mix(in srgb, var(--muted), white 91%);
color: var(--muted);
}
.notificationRowText {
gap: 4px;
min-width: 0;
display: grid;
overflow: hidden;
}
.notificationRowMeta {
min-width: 0;
color: var(--muted);
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
font-size: 13px;
line-height: 1.2;
display: grid;
}
.notificationRowKicker {
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
color: inherit;
flex-wrap: nowrap;
gap: 0 6px;
font-weight: 700;
display: inline-flex;
overflow: hidden;
}
.notificationRow_intent_critical .notificationRowKicker {
color: var(--danger);
}
.notificationRow_intent_alert .notificationRowKicker {
color: #d97706;
}
.notificationRowTime {
color: var(--muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.notificationRowUnreadDot {
background: var(--focus);
border-radius: 999px;
width: 8px;
height: 8px;
}
.notificationRow_intent_critical .notificationRowUnreadDot {
background: var(--danger);
}
.notificationRowTitle, .notificationRowBody {
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
overflow: hidden;
}
.notificationRowTitle {
font-size: 15px;
font-weight: 750;
line-height: 1.25;
}
.notificationRowBody {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.notificationCenterScopeTabs {
border: 1px solid var(--stroke);
background: #fff;
border-radius: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.notificationCenterScopeTab {
border: 0;
border-right: 1px solid var(--stroke);
min-width: 0;
min-height: 52px;
color: var(--muted);
font: inherit;
cursor: pointer;
background: none;
justify-content: center;
align-items: center;
gap: 7px;
padding: 0 10px;
font-weight: 750;
display: inline-flex;
}
.notificationCenterScopeTab:last-child {
border-right: 0;
}
.notificationCenterScopeTab.isActive {
color: var(--focus);
box-shadow: inset 0 -2px 0 var(--focus);
}
.notificationCenterScopeTabLabel, .notificationCenterScopeTabCount {
min-width: 0;
}
.notificationCenterScopeTabLabel {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.notificationCenterScopeTabCount {
background: color-mix(in srgb, currentColor, transparent 90%);
font-variant-numeric: tabular-nums;
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 22px;
min-height: 22px;
padding: 0 7px;
font-size: 12px;
font-weight: 900;
line-height: 1;
display: inline-flex;
}
.notificationCenterToolbar {
flex-wrap: wrap;
align-items: start;
gap: 10px;
display: flex;
}
.notificationCenterFilterPanel {
min-width: 0;
}
.notificationCenterFilterPanel summary {
border: 1px solid color-mix(in srgb, var(--focus), white 64%);
width: fit-content;
min-height: 44px;
color: var(--focus);
cursor: pointer;
background: #fff;
border-radius: 10px;
align-items: center;
gap: 8px;
padding: 9px 13px;
font-weight: 800;
list-style: none;
display: inline-flex;
}
.notificationCenterFilterPanel summary::-webkit-details-marker {
display: none;
}
.notificationCenterFilterControls {
grid-template-columns: minmax(150px, 220px) minmax(140px, 200px);
gap: 10px;
margin-top: 10px;
display: grid;
}
.notificationCenterFilterField {
min-width: 0;
color: var(--muted);
text-transform: uppercase;
gap: 5px;
font-size: 11px;
font-weight: 850;
display: grid;
}
.notificationCenterFilterField select {
border: 1px solid var(--stroke);
min-width: 0;
min-height: 44px;
color: var(--fg);
font-family: var(--font-sans);
text-transform: none;
background: #fff;
border-radius: 10px;
padding: 8px 10px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.notificationCenterList {
border: 1px solid var(--stroke);
background: #fff;
border-radius: 10px;
display: grid;
overflow: hidden;
}
.notificationCenterError, .notificationCenterEmpty {
border: 1px solid var(--stroke);
color: var(--muted);
border-radius: 10px;
padding: 16px;
}
.notificationCenterError {
border-color: color-mix(in srgb, var(--danger), white 62%);
color: var(--danger);
}
.notificationCenterLoadMoreRow {
justify-content: center;
display: flex;
}
.notificationCenterLoadMore {
min-width: min(100%, 360px);
min-height: 44px;
}
.notificationCenterMarkAll {
min-height: 44px;
}
.notificationPreferencesDisclosure {
border: 1px solid var(--stroke);
box-shadow: var(--shadow);
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.notificationPreferencesDisclosure > summary {
cursor: pointer;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 12px 16px;
list-style: none;
display: grid;
}
.notificationPreferencesDisclosure > summary::-webkit-details-marker {
display: none;
}
.notificationPreferencesDisclosure > summary:after {
content: "⌄";
color: var(--fg);
font-size: 24px;
line-height: 1;
}
.notificationPreferencesDisclosure[open] > summary:after {
transform: rotate(180deg);
}
.notificationPreferencesDisclosureIcon {
background: color-mix(in srgb, var(--focus), white 92%);
width: 42px;
height: 42px;
color: var(--focus);
border-radius: 10px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.notificationPreferencesDisclosureIcon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8px;
stroke-linecap: round;
stroke-linejoin: round;
width: 22px;
height: 22px;
}
.notificationPreferencesDisclosure > summary > span:nth-child(2) {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationPreferencesDisclosure > summary strong {
color: var(--fg);
font-size: 15px;
}
.notificationPreferencesDisclosure > summary span span {
color: var(--muted);
}
.notificationPreferencesDisclosureBody {
gap: 16px;
padding: 0 16px 16px;
display: grid;
}
@media (max-width: 720px) {
.notificationCenterFilterField select, .notificationPreferencesWindowField input, .notificationPreferencesWindowField select {
font-size: 16px;
}
.notificationCenterScopeTabs {
border-radius: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.notificationDeliverySettingsHeader, .notificationPreferencesHeader, .notificationPreferencesActions {
grid-template-columns: minmax(0, 1fr);
}
.notificationPreferencesHeader, .notificationPreferencesWindowHeader, .notificationPreferencesActions {
display: grid;
}
.notificationPreferencesWindowHeader, .notificationPreferencesWindowSummary, .notificationPreferencesWindowControls, .notificationPreferencesWindowPreview {
grid-template-columns: minmax(0, 1fr);
}
.notificationPreferencesWindowHeader {
grid-template-columns: minmax(0, 1fr) auto;
}
.notificationPreferencesWindowBadge {
width: fit-content;
}
.notificationPreferencesWindowSummaryItem {
border-right: 0;
border-bottom: 1px solid var(--stroke);
}
.notificationPreferencesWindowSummaryItem:last-child {
border-bottom: 0;
}
.notificationPreferencesWindowPreviewItem, .notificationPreferencesWindowPreviewItem:nth-child(3) {
border-right: 0;
border-bottom: 1px solid var(--stroke);
}
.notificationPreferencesWindowPreviewWeekend {
border-top: 0;
border-bottom: 0;
grid-column: auto;
}
.notificationPreferencesWindowField_customTimezone, .notificationPreferencesPolicyToggle, .notificationPreferencesPolicyToggles {
grid-column: auto;
}
.notificationPreferencesPolicyToggles, .notificationDeliverySummary {
grid-template-columns: minmax(0, 1fr);
}
.notificationDeliverySummaryItem {
border-right: 0;
border-bottom: 1px solid var(--stroke);
min-height: 72px;
}
.notificationDeliverySummaryItem:last-child {
border-bottom: 0;
}
.notificationPreferencesEmail, .notificationPushSetupAction, .notificationPushDisableAction, .notificationPreferencesReset, .notificationPreferencesSave {
justify-content: center;
width: 100%;
}
.btn.notificationPushDisableActionCompact {
padding: 8px 10px;
}
.notificationPushDeviceHeader {
display: none;
}
.notificationPushCurrentDevice {
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 10px 12px;
padding: 16px 12px;
}
.notificationPushSetupIcon {
width: 42px;
height: 42px;
}
.notificationPushSetupIcon svg {
width: 21px;
height: 21px;
}
.notificationPushSetupStatus, .notificationPushSetupAction {
grid-column: 1 / -1;
justify-self: stretch;
}
.notificationPushDeviceListSummary {
grid-template-columns: 44px minmax(0, 1fr) auto 12px;
gap: 10px;
min-height: 88px;
padding: 16px 12px;
}
.notificationPushDeviceListSummaryText strong {
font-size: 16px;
}
.notificationPushDeviceListSummaryText small {
font-size: 13px;
}
.notificationPushDeviceCount {
min-width: 32px;
height: 32px;
}
.notificationPushDeviceListBody {
padding: 0 12px 12px;
}
.notificationPushDeviceRows {
background: none;
border: 0;
border-radius: 0;
gap: 8px;
overflow: visible;
}
.notificationPushDeviceRow {
border: 1px solid color-mix(in srgb, var(--stroke), white 12%);
border-radius: 10px;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 12px;
}
.notificationPushDeviceHeader + .notificationPushDeviceRow, .notificationPushDeviceRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 12%);
}
.notificationPushDeviceLastSeen {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.notificationPushDeviceLastSeenValue {
text-align: right;
justify-content: flex-end;
min-width: 0;
}
.notificationPushDeviceMobileLabel {
color: var(--muted);
text-transform: uppercase;
font-size: 11px;
font-weight: 900;
display: inline;
}
.notificationPushDeviceActions {
width: 100%;
}
.notificationPushDeviceStatus {
justify-content: flex-start;
}
.notificationPushDeviceNoAction {
display: none;
}
.notificationPreferenceControls {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
display: grid;
}
.notificationPreferenceChannelHeader, .notificationPreferenceRow {
grid-template-columns: 40px minmax(0, 1fr);
gap: 10px;
}
.notificationPreferenceChannelHeaderSpacer {
display: none;
}
.notificationPreferenceChannelLabels, .notificationPreferenceControls {
grid-column: 1 / -1;
}
.notificationPreferenceIcon, .notificationPreferences[data-surface="admin"] .notificationPreferenceIcon {
width: 36px;
height: 36px;
}
.notificationPreferenceIcon svg, .notificationPreferences[data-surface="admin"] .notificationPreferenceIcon svg {
width: 18px;
height: 18px;
}
.notificationPreferenceControl {
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
width: 100%;
}
.notificationPreferenceControlLabel {
display: none;
}
.notificationRow {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
}
.notificationRow_popup {
min-height: 82px;
padding: 12px 14px;
}
.notificationRow_center {
min-height: 96px;
padding: 14px;
}
.notificationRowIcon {
width: 40px;
height: 40px;
}
.notificationRowMeta {
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
font-size: 12px;
}
.notificationRowTitle {
font-size: 14px;
}
.notificationCenterToolbar, .notificationCenterFilterControls {
grid-template-columns: minmax(0, 1fr);
display: grid;
}
.notificationCenterMarkAll, .notificationCenterFilterPanel summary, .notificationCenterLoadMore {
justify-content: center;
width: 100%;
}
.notificationCenterScopeTab {
border-right: 1px solid var(--stroke);
border-bottom: 1px solid var(--stroke);
min-height: 50px;
padding: 8px 10px;
font-size: 14px;
line-height: 1.15;
}
.notificationCenterScopeTab:nth-child(2n) {
border-right: 0;
}
.notificationCenterScopeTab:nth-last-child(-n+2) {
border-bottom: 0;
}
.notificationCenterScopeTabLabel {
white-space: normal;
}
.notificationCenterScopeTabCount {
min-width: 20px;
min-height: 20px;
padding: 0 6px;
font-size: 11px;
}
.notificationPreferencesDisclosure > summary {
grid-template-columns: 44px minmax(0, 1fr) auto;
padding: 12px;
}
}
.muted {
color: var(--muted);
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.timesheetCalendarTopBar {
justify-content: stretch;
align-items: center;
width: 100%;
min-height: 44px;
display: flex;
}
.timesheetMonthNav {
grid-template-columns: 56px minmax(0, 1fr) 56px;
align-items: stretch;
gap: 8px;
width: 100%;
display: grid;
}
.timesheetMonthNav.hasCalendarIcon {
grid-template-columns: 48px 44px minmax(0, 1fr) 44px;
width: min(100%, 400px);
}
.monthNavigationIcon {
background: color-mix(in srgb, var(--focus) 9%, var(--bg));
width: 48px;
height: 48px;
color: color-mix(in srgb, var(--focus) 75%, var(--fg));
border-radius: 12px;
align-self: center;
place-items: center;
display: inline-grid;
}
.timesheetMonthNavCenter {
justify-content: center;
min-width: 0;
display: flex;
position: relative;
}
.timesheetMonthNavBtn {
color: var(--muted);
justify-content: center;
place-self: center;
align-items: center;
transition: background-color .15s, color .15s, opacity .15s;
background: none !important;
border: 0 !important;
border-radius: 8px !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
display: inline-flex !important;
}
.timesheetMonthNavChevron {
border-bottom: 2px solid;
border-right: 2px solid;
width: 10px;
height: 10px;
display: block;
}
.timesheetMonthNavChevron.isPrev {
transform: rotate(135deg);
}
.timesheetMonthNavChevron.isNext {
transform: rotate(-45deg);
}
.timesheetMonthNavDoubleChevron {
justify-content: center;
align-items: center;
width: 18px;
height: 14px;
display: inline-flex;
}
.timesheetMonthNavDoubleChevron .timesheetMonthNavChevron {
width: 8px;
height: 8px;
}
.timesheetMonthNavDoubleChevron .timesheetMonthNavChevron + .timesheetMonthNavChevron {
margin-left: -2px;
}
.timesheetMonthNavBtn:hover:not(:disabled) {
color: var(--focus);
background: color-mix(in srgb, var(--focus) 9%, var(--bg)) !important;
}
.timesheetMonthNavBtn:focus-visible, .timesheetMonthNavTrigger:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.timesheetMonthNavBtn:disabled {
opacity: .45;
}
.timesheetMonthNavTrigger {
width: fit-content;
min-width: 0;
max-width: 100%;
min-height: 44px;
color: var(--fg);
font: inherit;
letter-spacing: -.025em;
cursor: pointer;
background: none;
border: 0;
border-radius: 6px;
justify-content: center;
align-items: center;
gap: 8px;
margin: 0 auto;
padding: 0 10px;
font-size: 24px;
font-weight: 650;
line-height: 1.2;
transition: color .15s, background-color .15s;
display: inline-flex;
}
.timesheetMonthNavTrigger:hover {
background: color-mix(in srgb, var(--fg), transparent 96%);
}
.timesheetMonthNavLabel {
white-space: normal;
min-width: 0;
}
.timesheetMonthNavLabelChevron {
border-bottom: 2px solid;
border-right: 2px solid;
flex: 0 0 9px;
width: 9px;
height: 9px;
display: block;
transform: rotate(45deg)translateY(-1px);
}
@media (max-width: 360px) {
.timesheetMonthNav.hasCalendarIcon .timesheetMonthNavTrigger {
gap: 4px;
padding-inline: 0;
font-size: 16px;
}
}
.timesheetMonthPickerPopover {
z-index: 1200;
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 3%);
background: var(--bg);
width: min(316px, 100vw - 32px);
box-shadow: 0 20px 42px color-mix(in srgb, var(--fg), transparent 88%);
border-radius: 12px;
gap: 10px;
padding: 12px 12px 10px;
display: grid;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
.timesheetMonthPickerSheetBackdrop {
z-index: 2400;
background: color-mix(in srgb, var(--fg), transparent 58%);
align-items: end;
padding: 0;
display: grid;
position: fixed;
inset: 0;
}
.timesheetMonthPickerSheetCard {
width: min(520px, 100%);
max-height: min(560px, 100dvh - 18px);
box-shadow: 0 -12px 34px color-mix(in srgb, var(--fg), transparent 86%);
border-radius: 16px 16px 0 0;
margin: 0 auto;
overflow: hidden;
}
.timesheetMonthPickerSheetBody {
padding: 10px 16px max(18px, env(safe-area-inset-bottom));
gap: 10px;
display: grid;
overflow: hidden auto;
}
.timesheetMonthPickerSheetHandle {
background: color-mix(in srgb, var(--muted), white 15%);
border-radius: 999px;
width: 44px;
height: 4px;
margin: 0 auto;
}
.timesheetMonthPickerYearBtn:focus-visible, .timesheetMonthPickerMonthBtn:focus-visible, .timesheetMonthPickerFooterLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 55%);
outline: none;
}
.timesheetMonthPickerYearRow {
grid-template-columns: 40px minmax(0, 1fr) 40px;
align-items: center;
gap: 6px;
display: grid;
}
.timesheetMonthPickerYearBtn {
justify-content: center;
align-items: center;
transition: background-color .15s, color .15s, box-shadow .15s;
background: none !important;
border: 0 !important;
border-radius: 999px !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 !important;
display: inline-flex !important;
}
.timesheetMonthPickerYearBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--fg), transparent 95%) !important;
}
.timesheetMonthPickerYearLabel {
font-family: var(--font-mono);
text-align: center;
font-size: .98rem;
font-weight: 700;
}
.timesheetMonthPickerGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
display: grid;
}
.timesheetMonthPickerMonthBtn {
min-height: 42px;
color: var(--fg);
font: inherit;
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 999px;
justify-content: center;
align-items: center;
gap: 6px;
padding: 0 10px;
font-size: .92rem;
font-weight: 600;
line-height: 1.1;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
display: inline-flex;
position: relative;
}
.timesheetMonthPickerMonthBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--fg), transparent 95%);
}
.timesheetMonthPickerMonthBtn.isSelected {
background: color-mix(in srgb, var(--focus), white 90%);
border-color: color-mix(in srgb, var(--focus), transparent 70%);
color: color-mix(in srgb, var(--focus), black 18%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 76%);
border-radius: 8px;
font-weight: 700;
}
.timesheetMonthPickerMonthBtn.isCurrent:not(.isSelected) {
color: color-mix(in srgb, var(--focus), black 10%);
}
.timesheetMonthPickerMonthBtn:disabled {
opacity: .42;
cursor: not-allowed;
}
.timesheetMonthPickerMonthLabel {
white-space: nowrap;
min-width: 0;
}
.timesheetMonthPickerCurrentMarker {
background: color-mix(in srgb, var(--focus), transparent 38%);
border-radius: 999px;
width: 12px;
height: 2px;
position: absolute;
bottom: 7px;
left: 50%;
transform: translateX(-50%);
}
.timesheetMonthPickerFooterLink {
color: color-mix(in srgb, var(--focus), black 10%);
font: inherit;
cursor: pointer;
background: none;
border: 0;
justify-self: center;
padding: 2px 0 0;
font-size: .92rem;
font-weight: 600;
line-height: 1.2;
transition: color .15s, opacity .15s;
}
.timesheetMonthPickerFooterLink:hover {
color: var(--focus);
}
.localizedMonthInput {
width: 100%;
min-width: 0;
position: relative;
}
.localizedMonthInputTrigger {
text-align: left;
font: inherit;
cursor: pointer;
justify-content: space-between;
align-items: center;
gap: 10px;
line-height: 1.2;
display: inline-flex;
}
.localizedMonthInputTrigger:disabled {
cursor: not-allowed;
opacity: .68;
}
.localizedMonthInputValue {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.localizedMonthInputValue.isPlaceholder {
color: color-mix(in srgb, var(--muted), white 28%);
}
.localizedMonthInputIcon {
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
flex: none;
}
.localizedMonthInputPopover {
left: 0;
transform: none;
}
.localizedMonthInputFooter {
justify-content: space-between;
align-items: center;
gap: 12px;
min-height: 32px;
display: flex;
}
.localizedMonthInputFooter .timesheetMonthPickerFooterLink {
min-height: 32px;
}
.localizedDateInput {
width: 100%;
min-width: 0;
position: relative;
}
.localizedDateInputTrigger {
text-align: left;
font: inherit;
cursor: pointer;
justify-content: space-between;
align-items: center;
gap: 10px;
line-height: 1.2;
display: inline-flex;
}
.localizedDateInputTrigger:disabled {
cursor: not-allowed;
opacity: .68;
}
.localizedDateInputPopover {
width: min(332px, 100vw - 32px);
overflow: auto;
transform: none;
}
.localizedDatePickerHeader {
grid-template-columns: 40px 40px minmax(0, 1fr) 40px 40px;
align-items: center;
gap: 6px;
display: grid;
}
.localizedDatePickerMonthLabel {
text-align: center;
text-transform: capitalize;
min-width: 0;
font-size: .98rem;
font-weight: 800;
line-height: 1.15;
}
.localizedDatePickerGrid {
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
display: grid;
}
.localizedDatePickerWeekday {
min-height: 24px;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
text-align: center;
text-transform: uppercase;
place-items: center;
font-size: .72rem;
font-weight: 800;
line-height: 1;
display: grid;
}
.localizedDatePickerBlank {
min-height: 36px;
}
.localizedDatePickerDayBtn {
min-width: 0;
min-height: 36px;
color: var(--fg);
font: inherit;
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 999px;
place-items: center;
padding: 0;
font-size: .92rem;
font-weight: 650;
line-height: 1;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
display: inline-grid;
}
.localizedDatePickerDayBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--fg), transparent 95%);
}
.localizedDatePickerDayBtn:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 55%);
outline: none;
}
.localizedDatePickerDayBtn.isSelected {
border-color: color-mix(in srgb, var(--focus), transparent 70%);
background: color-mix(in srgb, var(--focus), white 90%);
color: color-mix(in srgb, var(--focus), black 18%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 76%);
border-radius: 8px;
font-weight: 800;
}
.localizedDatePickerDayBtn.isToday:not(.isSelected) {
color: color-mix(in srgb, var(--focus), black 10%);
}
.localizedDatePickerDayBtn.isToday:not(.isSelected):after {
content: "";
background: color-mix(in srgb, var(--focus), transparent 38%);
border-radius: 999px;
width: 12px;
height: 2px;
margin-top: -2px;
}
.localizedDatePickerDayBtn:disabled {
opacity: .38;
cursor: not-allowed;
}
.localizedDateTimeInput {
grid-template-columns: minmax(0, 1fr) minmax(112px, .36fr);
align-items: center;
gap: 8px;
min-width: 0;
display: grid;
}
.localizedDateTimeInput .localizedDateInput, .localizedDateTimeInput > .input {
min-width: 0;
}
.timesheetLegendRow {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px 16px;
display: grid;
}
.timesheetLegendItem {
grid-template-columns: 12px minmax(0, 1fr);
align-items: center;
column-gap: 8px;
min-width: 0;
display: grid;
}
.timesheetLegendSwatch {
width: 12px;
height: 12px;
}
.timesheetLegendLabel {
font-size: 13px;
line-height: 1.25;
}
.field {
gap: 8px;
margin-top: 14px;
display: grid;
}
.labelRow {
justify-content: space-between;
align-items: baseline;
gap: 12px;
display: flex;
}
.label {
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
font-size: 12px;
}
.input {
appearance: none;
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: var(--radius);
width: 100%;
min-height: 44px;
color: var(--fg);
outline: none;
padding: 10px 12px;
font-size: 16px;
}
.input::placeholder, .textarea::placeholder {
color: color-mix(in srgb, var(--muted), white 54%);
opacity: 1;
}
.input:focus {
border-color: color-mix(in srgb, var(--focus), black 6%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 72%);
}
.input:focus:not(:focus-visible) {
border-color: var(--stroke);
box-shadow: none;
}
@media (max-width: 720px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select {
font-size: 16px;
}
}
.appBackLink {
appearance: none;
width: fit-content;
min-height: 44px;
color: color-mix(in srgb, var(--focus), black 8%);
font: inherit;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
background: none;
border: 0;
border-radius: 8px;
justify-content: center;
align-items: center;
gap: 6px;
padding: 0 9px;
font-size: 13px;
font-weight: 700;
line-height: 1.1;
text-decoration: none;
transition: background-color .14s, color .14s;
display: inline-flex;
}
.appBackLink:hover {
background: color-mix(in srgb, var(--focus), white 95%);
}
.appBackLink:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 28%);
outline-offset: 1px;
}
.appBackLinkIcon {
stroke-width: 2px;
flex: 0 0 16px;
width: 16px;
height: 16px;
}
.btn {
appearance: none;
border: 1px solid var(--stroke);
background: var(--bg-2);
color: var(--fg);
border-radius: var(--radius);
text-align: center;
cursor: pointer;
touch-action: manipulation;
justify-content: center;
align-items: center;
min-height: 44px;
padding: 10px 14px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
transition: background-color .14s, border-color .14s, color .14s, box-shadow .14s;
display: inline-flex;
}
.btn:hover {
background: color-mix(in srgb, var(--bg-2), var(--fg) 4%);
border-color: color-mix(in srgb, var(--stroke), black 12%);
}
.btn:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 70%);
outline: none;
}
.btn:disabled {
cursor: not-allowed;
opacity: 1;
color: color-mix(in srgb, var(--fg), var(--muted) 48%);
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
border-color: color-mix(in srgb, var(--stroke), var(--fg) 20%);
box-shadow: none;
}
.btn.cmCloseButton {
border-radius: var(--radius);
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
box-shadow: none;
color: var(--muted);
background: none;
border: 0;
flex: none;
place-items: center;
padding: 0;
display: inline-grid;
}
.btn.cmCloseButton:hover:not(:disabled) {
background: var(--bg-2);
color: var(--fg);
}
.btn.cmCloseButton:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
box-shadow: none;
}
.btn.cmCloseButton:disabled {
color: var(--muted);
opacity: .5;
background: none;
}
.btn.cmCloseButton svg {
width: 20px;
height: 20px;
}
.btnPrimary {
border-color: color-mix(in srgb, var(--accent), black 16%);
background: var(--accent);
color: #fff;
}
.btnAction {
border-color: color-mix(in srgb, var(--focus), black 16%);
background: var(--focus);
color: #fff;
}
.btnDanger {
border-color: color-mix(in srgb, var(--danger), black 18%);
background: var(--danger);
color: #fff;
}
.btnSuccess {
border-color: color-mix(in srgb, var(--ok), black 16%);
background: var(--ok);
color: #fff;
}
.btnPrimary:hover:not(:disabled) {
background: color-mix(in srgb, var(--accent), black 10%);
}
.btnAction:hover:not(:disabled) {
background: color-mix(in srgb, var(--focus), black 10%);
}
.btnDanger:hover:not(:disabled) {
background: color-mix(in srgb, var(--danger), black 10%);
}
.btnSuccess:hover:not(:disabled) {
background: color-mix(in srgb, var(--ok), black 10%);
}
.btnPrimary:disabled {
background: color-mix(in srgb, var(--accent), white 34%);
border-color: color-mix(in srgb, var(--accent), black 8%);
color: #fff;
}
.btnAction:disabled {
background: color-mix(in srgb, var(--focus), white 34%);
border-color: color-mix(in srgb, var(--focus), black 8%);
color: #fff;
}
.btnDanger:disabled {
background: color-mix(in srgb, var(--danger), white 34%);
border-color: color-mix(in srgb, var(--danger), black 8%);
color: #fff;
}
.btnSuccess:disabled {
background: color-mix(in srgb, var(--ok), white 34%);
border-color: color-mix(in srgb, var(--ok), black 8%);
color: #fff;
}
input[type="checkbox"], input[type="radio"] {
accent-color: var(--focus);
width: 16px;
height: 16px;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 65%);
outline-offset: 2px;
}
.pill {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
color: var(--muted);
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 13px;
display: inline-flex;
}
.pillStatusDraft {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
color: var(--muted);
}
.pillStatusNew {
background: color-mix(in srgb, var(--focus), white 88%);
color: color-mix(in srgb, var(--focus), black 24%);
}
.pillStatusViewed {
background: color-mix(in srgb, var(--muted), white 88%);
color: color-mix(in srgb, var(--muted), black 28%);
}
.pillStatusSubmitted {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
background: color-mix(in srgb, var(--focus), white 92%);
color: var(--fg);
}
.pillStatusPending {
border-color: color-mix(in srgb, var(--accent), transparent 45%);
background: color-mix(in srgb, var(--accent), white 92%);
color: color-mix(in srgb, var(--fg), black 6%);
}
.pillStatusApproved {
border-color: color-mix(in srgb, var(--ok), transparent 55%);
background: color-mix(in srgb, var(--ok), white 94%);
color: var(--fg);
}
.pillStatusRejected {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 92%);
color: var(--fg);
}
.pillStatusLocked {
border-color: color-mix(in srgb, var(--focus), transparent 55%);
background: color-mix(in srgb, var(--focus), white 94%);
color: var(--fg);
}
.documentSemanticLabel {
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
border: 0;
border-radius: 999px;
justify-content: center;
align-items: center;
width: fit-content;
max-width: 100%;
min-height: 24px;
padding: 0 9px;
font-size: 11px;
font-weight: 650;
line-height: 1.1;
display: inline-flex;
}
:where(.semanticLabel:is(.semanticLabelStatus, .semanticLabelCategory, .semanticLabelAttention, .semanticLabelProvenance)) {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
color: var(--muted);
display: inline-flex;
}
html:root .semanticLabel:is(.semanticLabelStatus, .semanticLabelCategory, .semanticLabelAttention, .semanticLabelProvenance) {
width: fit-content;
max-width: 100%;
box-shadow: none;
white-space: nowrap;
border: 0;
border-radius: 999px;
justify-content: center;
align-items: center;
gap: 5px;
}
html:root .semanticLabel.semanticLabelStatus {
letter-spacing: 0;
text-transform: none;
min-height: 24px;
padding: 0 9px;
font-size: 11px;
font-weight: 650;
line-height: 1.1;
}
html:root .semanticLabel:is(.semanticLabelCategory, .semanticLabelAttention) {
letter-spacing: .035em;
text-transform: uppercase;
min-height: 19px;
padding: 0 7px;
font-size: 10px;
font-weight: 750;
line-height: 1;
}
html:root .semanticLabel.semanticLabelProvenance {
letter-spacing: 0;
text-transform: none;
min-height: 19px;
padding: 0 7px;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
html:root .semanticLabel.appEnvironmentLabel {
background: var(--app-environment-background);
min-height: 20px;
color: var(--app-environment-ink);
letter-spacing: .5px;
border-radius: 4px;
flex: none;
padding: 3px 7px;
font-size: 11px;
font-weight: 700;
line-height: 1.1;
}
.adminLoginBrandLogoFrame, .portalPublicAuthBrandLogoFrame {
position: relative;
}
.adminLoginBrandLogoFrame > .appEnvironmentLabel, .portalPublicAuthBrandLogoFrame > .appEnvironmentLabel {
position: absolute;
top: 50%;
left: calc(100% + 8px);
transform: translateY(-50%);
}
:is(.adminLoginBrandLogoFrame:has(.appEnvironmentLabel), .portalPublicAuthBrandLogoFrame:has(.appEnvironmentLabel)) {
margin-right: 46px;
}
.signaturePlacementViewer {
gap: 10px;
display: grid;
}
.signaturePlacementHeader {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
display: grid;
}
.signaturePlacementHeader h2, .signaturePlacementHeader p {
margin: 0;
}
.signaturePlacementHeader h2 {
font-size: 17px;
line-height: 1.15;
}
.signaturePlacementHeader p {
max-width: 66ch;
color: var(--muted);
font-size: 13px;
line-height: 1.25;
}
.signaturePlacementWorkflowAction {
justify-content: flex-end;
align-items: center;
gap: 2px;
display: flex;
}
.signaturePlacementOverlay {
z-index: 2;
border: 1.5px solid var(--focus);
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
background: none;
border-radius: 7px;
display: block;
position: absolute;
box-shadow: 0 8px 20px #2563eb24;
}
.signaturePlacementReferenceOverlay {
z-index: 1;
border: 1px dashed color-mix(in srgb, var(--focus), transparent 35%);
color: color-mix(in srgb, var(--focus), black 18%);
letter-spacing: .03em;
text-align: center;
text-transform: uppercase;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
background: #ffffff94;
border-radius: 6px;
place-items: center;
padding: 3px;
font-size: 10px;
font-weight: 800;
line-height: 1.1;
display: grid;
position: absolute;
overflow: hidden;
}
.signaturePlacementReferenceOverlay.isReserved {
border-color: color-mix(in srgb, var(--muted), transparent 42%);
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
letter-spacing: .01em;
opacity: .78;
background: #ffffff5c;
font-weight: 700;
}
.signaturePlacementOverlay:before {
content: "";
position: absolute;
inset: -12px;
}
.signaturePlacementOverlay:active {
cursor: grabbing;
}
.signaturePlacementOverlay.isReadOnly {
cursor: default;
touch-action: pan-x pan-y pinch-zoom;
}
.signaturePlacementOverlay.isReadOnly:active {
cursor: default;
}
.signaturePlacementOverlay:focus-visible {
outline: 3px solid color-mix(in srgb, var(--focus), transparent 32%);
outline-offset: 3px;
}
.signaturePlacementOverlay img {
object-fit: contain;
pointer-events: none;
mix-blend-mode: multiply;
width: calc(100% - 4px);
height: calc(100% - 4px);
position: absolute;
inset: 2px;
}
.signaturePlacementOverlayLabel {
width: 100%;
height: 100%;
color: var(--focus);
letter-spacing: .04em;
text-align: center;
text-transform: uppercase;
-webkit-user-select: none;
user-select: none;
place-items: center;
padding: 6px;
font-size: clamp(10px, 1.2vw, 13px);
font-weight: 800;
line-height: 1.15;
display: grid;
}
.signaturePlacementOverlay.hasFooter img {
height: calc(100% - 19px);
bottom: 15px;
}
.signaturePlacementOverlayFooter {
color: color-mix(in srgb, var(--fg), transparent 16%);
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
font-size: clamp(6px, 1.1vw, 9px);
font-weight: 560;
line-height: 1.15;
position: absolute;
bottom: 1px;
left: 2px;
right: 2px;
overflow: hidden;
}
.signaturePlacementResizeHandle {
background: var(--focus);
cursor: nwse-resize;
touch-action: none;
border: 2px solid #fff;
border-radius: 999px;
width: 28px;
height: 28px;
position: absolute;
bottom: -12px;
right: -12px;
box-shadow: 0 5px 16px #2563eb47;
}
.signaturePlacementResizeHandle:before {
content: "";
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
position: absolute;
inset: 8px;
}
@media (max-width: 900px) {
.signaturePlacementHeader {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 720px) {
.signaturePlacementViewer {
gap: 12px;
}
.signaturePlacementHeader.hasWorkflowAction {
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 10px;
}
.signaturePlacementHeader.hasWorkflowAction.hasCompactControls {
align-items: center;
}
.signaturePlacementHeader h2 {
font-size: 22px;
}
.signaturePlacementHeader p {
font-size: 15px;
}
.signaturePlacementResizeHandle {
width: 44px;
height: 44px;
box-shadow: none;
background: none;
border: 0;
bottom: -20px;
right: -20px;
}
.signaturePlacementResizeHandle:after {
content: "";
background: var(--focus);
border: 2px solid #fff;
border-radius: 999px;
position: absolute;
inset: 7px;
box-shadow: 0 5px 16px #2563eb47;
}
.signaturePlacementResizeHandle:before {
z-index: 1;
inset: 15px;
}
}
.topbar {
z-index: 10;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: color-mix(in srgb, var(--bg-2), transparent 10%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
position: sticky;
top: 0;
}
.topbarInner, .appTopbarInner {
max-width: var(--container);
justify-content: space-between;
align-items: center;
gap: 14px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
}
.topbarActions, .appTopbarActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 12px;
display: flex;
}
.topbarRight, .appTopbarRight {
align-items: center;
gap: 10px;
display: inline-flex;
}
.brand, .appBrand {
align-items: center;
gap: 12px;
display: flex;
}
.brandLogo, .appBrandLogo {
flex: none;
width: auto;
height: 24px;
}
.brandBlock, .appBrandBlock {
gap: 2px;
min-width: 0;
display: grid;
}
.brandTitle, .appBrandTitle {
font-family: var(--font-condensed);
letter-spacing: .02em;
font-size: 18px;
line-height: 1.1;
}
.brandWelcome, .appBrandWelcome {
font-size: 12px;
}
.appVersionTag {
color: var(--muted);
opacity: .9;
font-size: 11px;
}
.nav, .appNav {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.navLink, .appNavLink {
border-radius: var(--radius);
color: var(--muted);
border: 1px solid #0000;
padding: 10px 12px;
}
.navLink:hover, .appNavLink:hover {
border-color: color-mix(in srgb, var(--stroke), transparent 0%);
color: var(--fg);
}
.navLink:focus-visible, .appNavLink:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 25%);
outline-offset: 2px;
border-color: color-mix(in srgb, var(--stroke), transparent 0%);
color: var(--fg);
}
.navLinkActive, .appNavLinkActive {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
color: var(--fg);
background: color-mix(in srgb, var(--focus), white 90%);
}
.card:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 25%);
outline-offset: 2px;
}
.localeSwitcher {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg-2);
align-items: center;
display: inline-flex;
overflow: hidden;
}
.localeOption {
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
border-left: 1px solid var(--stroke);
padding: 9px 10px;
font-size: 12px;
}
.localeOption:first-child {
border-left: none;
}
.localeOption:hover {
background: color-mix(in srgb, var(--bg-2), var(--fg) 2%);
color: var(--fg);
}
.localeOption:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 20%);
outline-offset: -2px;
}
.localeOptionActive {
background: color-mix(in srgb, var(--accent), white 92%);
color: var(--fg);
}
.skipLink {
z-index: 100;
background: var(--bg-2);
border: 1px solid var(--stroke);
border-radius: var(--radius);
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
padding: 10px 12px;
transition: opacity .12s, transform .12s;
position: absolute;
top: 10px;
left: 10px;
transform: translateY(calc(-100% - 20px));
}
.skipLink:focus, .skipLink:focus-visible {
opacity: 1;
pointer-events: auto;
outline: 2px solid color-mix(in srgb, var(--focus), transparent 15%);
outline-offset: 2px;
transition: none;
transform: translateY(0);
}
.errorBox {
border: 1px solid color-mix(in srgb, var(--danger), transparent 55%);
background: color-mix(in srgb, var(--danger), white 92%);
border-radius: var(--radius);
color: color-mix(in srgb, var(--danger), black 15%);
margin-top: 12px;
padding: 12px 14px;
font-size: 14px;
}
.loginFormAlert {
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--danger), white 52%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--danger), white 92%);
width: 100%;
min-height: 52px;
color: color-mix(in srgb, var(--danger), black 12%);
align-items: center;
margin-top: 14px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.4;
display: flex;
}
.loginCredentialInput[aria-invalid="true"] {
border-color: color-mix(in srgb, var(--danger), white 28%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 78%);
}
.loginCredentialInput[aria-invalid="true"]:focus {
border-color: var(--danger);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger), transparent 78%);
}
.loginCredentialInput[aria-invalid="true"]:focus:not(:focus-visible) {
border-color: color-mix(in srgb, var(--danger), white 28%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 78%);
}
.loginCredentialError {
color: color-mix(in srgb, var(--danger), black 10%);
align-items: flex-start;
gap: 7px;
margin: 2px 0 0;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
display: flex;
}
.loginCredentialErrorIcon {
background: var(--danger);
color: #fff;
border-radius: 50%;
flex: 0 0 16px;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
margin-top: 1px;
font-size: 11px;
font-weight: 900;
line-height: 1;
display: inline-flex;
}
.loginCredentialField:has(.loginCredentialError) .passwordCapsSlot:empty {
min-height: 0;
}
.cmPopover {
z-index: 20;
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg-2);
box-shadow: var(--shadow);
max-height: 280px;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
overflow: auto;
}
.cmPopoverList {
gap: 2px;
padding: 6px;
display: grid;
}
.cmPopoverOption {
width: 100%;
color: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
border-radius: 2px;
gap: 2px;
padding: 8px 10px;
display: grid;
}
.cmPopoverOption:hover {
background: color-mix(in srgb, var(--bg), var(--fg) 4%);
}
.cmPopoverOption.isActive {
background: color-mix(in srgb, var(--focus), white 88%);
}
.cmPopoverOption:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 20%);
outline-offset: 1px;
}
@media (max-width: 960px) {
.topbarInner, .appTopbarInner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.brand, .appBrand {
width: 100%;
}
.topbarActions, .appTopbarActions {
justify-content: space-between;
width: 100%;
}
}
@media (max-width: 680px) {
.topbarInner, .appTopbarInner {
gap: 8px;
padding: 8px 10px;
}
.content {
padding: 12px 12px 28px;
}
.container {
padding: 12px;
}
.topbarActions, .appTopbarActions {
gap: 6px;
display: grid;
}
.nav, .appNav {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
width: 100%;
display: grid;
}
.navLink, .appNavLink {
text-align: center;
justify-content: center;
align-items: center;
min-height: 44px;
padding: 6px;
font-size: 13px;
line-height: 1.2;
display: inline-flex;
}
.topbarRight, .appTopbarRight {
flex-wrap: nowrap;
justify-content: space-between;
gap: 6px;
width: 100%;
}
.localeSwitcher {
flex: auto;
min-width: 0;
}
.localeOption {
text-align: center;
flex: 1 1 0;
padding: 9px 8px;
}
.topbarRight form, .appTopbarRight form {
flex: none;
}
.topbarRight form .btn, .appTopbarRight form .btn {
min-width: 88px;
min-height: 44px;
padding-left: 8px;
padding-right: 8px;
}
.brandTitle {
font-size: 16px !important;
}
.brandWelcome {
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1.2;
overflow: hidden;
font-size: 11px !important;
}
}
@media (max-width: 760px) {
.timesheetMonthNav {
grid-template-columns: 44px minmax(0, 1fr) 44px;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.timesheetMonthNav.hasCalendarIcon {
grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
gap: 4px;
}
.monthNavigationIcon {
border-radius: 10px;
width: 44px;
height: 44px;
}
.timesheetMonthNavTrigger {
min-width: 0;
max-width: 100%;
padding-left: 4px;
padding-right: 4px;
font-size: 20px;
}
.timesheetMonthPickerPopover {
width: min(312px, 100vw - 24px);
}
.timesheetMonthPickerGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.timesheetMonthPickerSheetCard {
width: 100%;
}
.timesheetMonthPickerYearBtn {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
}
.timesheetMonthPickerYearRow {
grid-template-columns: 44px minmax(0, 1fr) 44px;
}
.timesheetMonthPickerMonthBtn {
min-height: 46px;
}
.localizedDateInputPopover {
width: min(312px, 100vw - 24px);
}
.localizedDatePickerHeader {
grid-template-columns: 40px 40px minmax(0, 1fr) 40px 40px;
}
.localizedDatePickerDayBtn, .localizedDatePickerBlank {
min-height: 44px;
}
.localizedDateTimeInput {
grid-template-columns: 1fr;
}
.timesheetMonthPickerFooterLink {
align-self: start;
min-height: 44px;
}
}
@media (max-width: 420px) {
.navLink, .appNavLink {
font-size: 12px;
}
.brandTitle {
font-size: 15px !important;
}
.brandWelcome {
display: none;
}
}
.timesheetDayEditorShellBody {
gap: 12px;
display: grid;
}
.timesheetDayEditorSection {
gap: 10px;
display: grid;
}
.timesheetDayEditorActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.timesheetDayEditorError {
margin: 0;
}
.signaturePackageIntegrity {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 12px;
min-width: 0;
padding-top: 14px;
display: grid;
container-type: inline-size;
}
.signaturePackageIntegrityResultHead, .signaturePackageIntegrityArtifact {
justify-content: space-between;
align-items: center;
gap: 12px;
min-width: 0;
display: flex;
}
.signaturePackageIntegrityHead {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-width: 0;
display: grid;
}
.signaturePackageIntegrityTitle {
grid-template-columns: 20px minmax(0, 1fr);
align-items: flex-start;
gap: 10px;
min-width: 0;
display: grid;
}
.signaturePackageIntegrityTitle > svg {
width: 20px;
height: 20px;
color: var(--focus);
flex: none;
}
.signaturePackageIntegrityTitle > div, .signaturePackageIntegrityLocal > div {
gap: 2px;
min-width: 0;
display: grid;
}
.signaturePackageIntegrityTitle strong, .signaturePackageIntegrityLocal strong {
overflow-wrap: break-word;
}
.signaturePackageIntegrityDescription {
min-width: 0;
color: var(--muted);
margin: 0;
font-size: .86rem;
line-height: 1.45;
}
.signaturePackageIntegrityTitle small, .signaturePackageIntegrityLocal small, .signaturePackageIntegrityResultHead small, .signaturePackageIntegrityLocalResult small {
color: var(--muted);
line-height: 1.4;
}
.signaturePackageIntegrityVerify, .signaturePackageIntegrityFile {
flex: none;
gap: 7px;
}
.signaturePackageIntegrityVerify {
white-space: nowrap;
}
.signaturePackageIntegrityVerify svg, .signaturePackageIntegrityFile svg {
width: 17px;
height: 17px;
}
.signaturePackageIntegrity .isSpinning {
animation: .8s linear infinite signature-package-integrity-spin;
}
@keyframes signature-package-integrity-spin {
to {
transform: rotate(360deg);
}
}
.signaturePackageIntegrityError {
color: var(--danger);
margin: 0;
font-weight: 600;
}
.signaturePackageIntegrityResult {
gap: 12px;
display: grid;
}
.signaturePackageIntegrity.isStatusFirst {
gap: 0;
}
.signaturePackageIntegritySummary {
grid-template-columns: 22px minmax(0, 1fr);
align-items: start;
gap: 10px;
min-height: 44px;
display: grid;
}
.signaturePackageIntegritySummary > svg {
margin-top: 1px;
}
.signaturePackageIntegritySummary > svg, .signaturePackageIntegrityWarning > svg {
width: 22px;
height: 22px;
}
.signaturePackageIntegritySummary > div, .signaturePackageIntegrityWarning > div {
gap: 2px;
min-width: 0;
display: grid;
}
.signaturePackageIntegritySummary small, .signaturePackageIntegrityWarning small {
color: var(--muted);
line-height: 1.4;
}
.signaturePackageIntegritySummary.isChecking > svg, .signaturePackageIntegritySummary.isNeutral > svg {
color: var(--focus);
}
.signaturePackageIntegrityWarning {
border: 1px solid color-mix(in srgb, var(--danger), transparent 52%);
background: color-mix(in srgb, var(--danger), white 95%);
border-radius: 8px;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 10px 12px;
padding: 12px;
display: grid;
}
.signaturePackageIntegrityWarning > svg, .signaturePackageIntegrityWarning strong {
color: color-mix(in srgb, var(--danger), black 18%);
}
.signaturePackageIntegrityRetry {
white-space: nowrap;
gap: 7px;
min-height: 44px;
}
.signaturePackageIntegrityRetry svg {
width: 17px;
height: 17px;
}
.signaturePackageIntegrityTechnical {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.signaturePackageIntegrity.isStatusFirst .signaturePackageIntegrityTechnical {
border-top: 0;
}
.signaturePackageIntegrityTechnical > summary {
cursor: pointer;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 0;
font-weight: 700;
list-style: none;
display: flex;
}
.signaturePackageIntegrityTechnical > summary::-webkit-details-marker {
display: none;
}
.signaturePackageIntegrity.isStatusFirst .signaturePackageIntegrityArtifacts > summary::-webkit-details-marker {
display: none;
}
.signaturePackageIntegrityLocalDisclosure > summary::-webkit-details-marker {
display: none;
}
.signaturePackageIntegrityTechnical > summary:after, .signaturePackageIntegrity.isStatusFirst .signaturePackageIntegrityArtifacts > summary:after, .signaturePackageIntegrityLocalDisclosure > summary:after {
content: "";
border-right: 2px solid color-mix(in srgb, var(--fg), white 34%);
border-bottom: 2px solid color-mix(in srgb, var(--fg), white 34%);
flex: none;
width: 8px;
height: 8px;
transition: transform .15s;
transform: rotate(-45deg);
}
.signaturePackageIntegrityTechnical[open] > summary:after, .signaturePackageIntegrity.isStatusFirst .signaturePackageIntegrityArtifacts[open] > summary:after, .signaturePackageIntegrityLocalDisclosure[open] > summary:after {
transform: rotate(45deg);
}
.signaturePackageIntegrityTechnical > summary > span:first-child {
min-width: 0;
margin-right: auto;
}
.signaturePackageIntegrityTechnicalBody {
gap: 0;
padding-bottom: 2px;
display: grid;
}
.signaturePackageIntegrityVerifiedAt {
color: var(--muted);
padding: 1px 0 10px;
line-height: 1.4;
}
.signaturePackageIntegrityStatus, .signaturePackageIntegrityArtifactStatus {
text-align: center;
border: 0;
border-radius: 999px;
justify-content: center;
align-items: center;
width: fit-content;
max-width: 100%;
min-height: 24px;
padding: 3px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
display: inline-flex;
}
.signaturePackageIntegrityStatus.isVERIFIED, .signaturePackageIntegrityArtifactStatus.isVERIFIED {
background: color-mix(in srgb, var(--ok), white 89%);
color: color-mix(in srgb, var(--ok), black 25%);
}
.signaturePackageIntegrityStatus.isISSUES_FOUND, .signaturePackageIntegrityArtifactStatus.isMODIFIED, .signaturePackageIntegrityArtifactStatus.isMISSING {
background: color-mix(in srgb, var(--danger), white 89%);
color: color-mix(in srgb, var(--danger), black 25%);
}
.signaturePackageIntegrityStatus.isNOT_SIGNED, .signaturePackageIntegrityArtifactStatus.isNOT_APPLICABLE {
background: color-mix(in srgb, var(--muted), white 88%);
color: color-mix(in srgb, var(--muted), black 28%);
}
.signaturePackageIntegrityArtifacts {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.signaturePackageIntegrityArtifacts > summary {
cursor: pointer;
min-height: 44px;
padding: 11px 0;
font-weight: 700;
}
.signaturePackageIntegrity.isStatusFirst .signaturePackageIntegrityArtifacts > summary, .signaturePackageIntegrityLocalDisclosure > summary {
justify-content: space-between;
align-items: center;
gap: 10px;
list-style: none;
display: flex;
}
.signaturePackageIntegrityArtifactList {
padding: 0 0 10px;
display: grid;
}
.signaturePackageIntegrityArtifact {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 28%);
min-height: 38px;
padding: 7px 0;
}
.signaturePackageIntegrityArtifact > span:first-child {
overflow-wrap: anywhere;
min-width: 0;
}
.signaturePackageIntegrityLocal {
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
gap: 12px;
min-width: 0;
display: grid;
}
.signaturePackageIntegrityLocalDisclosure {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.signaturePackageIntegrityLocalDisclosure > summary {
cursor: pointer;
min-height: 44px;
padding: 11px 0;
font-weight: 700;
}
.signaturePackageIntegrityLocalDisclosureBody {
gap: 10px;
padding: 2px 0 12px;
display: grid;
}
.signaturePackageIntegrityFile {
cursor: pointer;
}
.signaturePackageIntegrityFileInput {
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}
.signaturePackageIntegrityLocalResult {
border-left: 3px solid var(--ok);
background: color-mix(in srgb, var(--ok), white 94%);
gap: 2px;
padding: 10px 12px;
display: grid;
}
.signaturePackageIntegrityLocalResult.isMismatch {
border-left-color: var(--danger);
background: color-mix(in srgb, var(--danger), white 94%);
}
@container (max-width: 520px) {
.signaturePackageIntegrityHead, .signaturePackageIntegrityLocal {
grid-template-columns: minmax(0, 1fr);
}
.signaturePackageIntegrityWarning {
grid-template-columns: 22px minmax(0, 1fr);
}
.signaturePackageIntegrityVerify, .signaturePackageIntegrityFile, .signaturePackageIntegrityRetry {
width: 100%;
}
.signaturePackageIntegrityWarning .signaturePackageIntegrityRetry {
grid-column: 1 / -1;
}
}
.cmListEmptyState {
text-align: center;
background: none;
border: 0;
border-radius: 0;
align-content: center;
justify-items: center;
gap: 10px;
min-width: 0;
padding: 32px 20px;
display: grid;
}
.cmListEmptyStateCompact {
padding-block: 24px;
}
.cmListEmptyStateIcon {
color: var(--muted);
display: inline-flex;
}
.cmListEmptyStateIcon > svg {
width: 24px;
height: 24px;
}
.cmListEmptyState[data-empty-state-kind="filtered"] .cmListEmptyStateIcon {
color: var(--focus);
}
.cmListEmptyState[data-empty-state-kind="error"] .cmListEmptyStateIcon {
color: var(--danger);
}
.cmListEmptyStateCopy {
gap: 6px;
display: grid;
}
.cmListEmptyState :is(h2, h3), .cmListEmptyStateTitle {
color: var(--fg);
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.cmListEmptyStateDescription {
max-width: 52ch;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.cmListEmptyStateDescription p {
margin: 0;
}
.cmListEmptyStateActions {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 100%;
padding-top: 4px;
display: flex;
}
.cmListEmptyStateActions > :is(a, button) {
max-width: 100%;
min-height: 44px;
}
@media (max-width: 640px) {
.cmListEmptyState {
padding: 24px 16px;
}
}
/* [project]/apps/admin/src/app/globals.css [app-client] (css) */
:root {
--admin-shell-max: 1660px;
--admin-shell-gutter: 24px;
--admin-sidebar-w: 300px;
--admin-sidebar-collapsed-w: 84px;
--admin-shell-gap: 18px;
}
html {
scrollbar-gutter: stable;
}
:is(html:has(.adminLoginMain), body:has(.adminLoginMain)) {
scrollbar-gutter: auto;
}
.localeSwitcher {
background: none;
border: 0;
border-radius: 0;
width: fit-content;
min-width: 0;
display: inline-flex;
position: relative;
overflow: visible;
}
.localeTrigger {
box-sizing: border-box;
min-width: 72px;
min-height: 44px;
color: var(--fg);
font: inherit;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
background: none;
border: 0;
border-radius: 10px;
justify-content: center;
align-items: center;
gap: 7px;
padding: 0 10px;
font-size: 13px;
font-weight: 650;
line-height: 1;
display: inline-flex;
}
.localeTrigger:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 76%);
outline: none;
}
.localeTrigger .localeCode, .localeMenuItem .localeCode {
letter-spacing: .01em;
text-align: left;
width: 26px;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.localeFlag {
object-fit: cover;
width: 18px;
height: 12px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 42%);
border-radius: 2px;
flex: none;
display: block;
}
.localeChevron {
width: 14px;
height: 14px;
color: var(--muted);
flex: 0 0 14px;
transition: transform .14s;
}
.localeTrigger:hover {
background: color-mix(in srgb, var(--bg-2), var(--fg) 2%);
}
.localeSwitcherOpen .localeTrigger {
color: var(--focus);
background: color-mix(in srgb, var(--focus), transparent 93%);
}
.localeSwitcherOpen .localeChevron {
transform: rotate(180deg);
}
.localeMenu {
background: var(--bg);
border: 1px solid var(--stroke);
box-sizing: border-box;
z-index: 60;
border-radius: 12px;
gap: 2px;
width: max-content;
min-width: 190px;
max-width: calc(100vw - 24px);
padding: 6px;
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
box-shadow: 0 18px 44px #0f172a26;
}
.localeSwitcherOpen {
z-index: 61;
}
.localeSwitcherOpen .localeMenu {
display: grid;
}
.localeMenuItem {
width: 100%;
min-height: 44px;
color: var(--fg);
font: inherit;
text-align: left;
box-sizing: border-box;
cursor: pointer;
background: none;
border: 0;
border-radius: 8px;
grid-template-columns: 18px 26px minmax(76px, 1fr) 16px;
align-items: center;
column-gap: 9px;
padding: 8px 10px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
display: grid;
}
.localeMenuItem.isCurrent {
background: color-mix(in srgb, var(--focus), transparent 93%);
}
.localeMenuItem:hover, .localeMenuItem:focus-visible {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
}
.localeMenuItem:focus-visible {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--focus), transparent 58%);
outline: none;
}
.localeMenuLanguage {
min-width: 0;
color: var(--muted);
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
overflow: hidden;
}
.localeMenuCheck {
width: 16px;
height: 16px;
color: var(--focus);
justify-self: end;
}
main.content {
max-width: var(--admin-shell-max);
padding-left: var(--admin-shell-gutter);
padding-right: var(--admin-shell-gutter);
margin: 0 auto;
}
.srOnly {
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.skipLink {
z-index: 2000;
border: 1px solid var(--focus);
color: var(--fg);
opacity: 0;
pointer-events: none;
background: #fff;
border-radius: 10px;
padding: 8px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1;
transition: opacity .12s, transform .12s;
position: fixed;
top: 12px;
left: 12px;
transform: translateY(calc(-100% - 20px));
box-shadow: 0 12px 30px #0f172a2e;
}
.skipLink:focus-visible {
opacity: 1;
pointer-events: auto;
outline: 3px solid color-mix(in srgb, var(--focus), transparent 55%);
outline-offset: 2px;
transition: none;
transform: translateY(0);
}
.skipLink:focus:not(:focus-visible) {
opacity: 0;
pointer-events: none;
transform: translateY(calc(-100% - 20px));
}
.adminRedenimShell {
--admin-titlebar-overlay-height: 0px;
--admin-redenim-sidebar-w: 272px;
--admin-redenim-sidebar-collapsed-w: 68px;
--admin-shell-header-height: 64px;
--admin-redenim-current-sidebar-w: var(--admin-redenim-sidebar-w);
--admin-shell-workspace-gutter: 32px;
--admin-shell-content-edge: max(var(--admin-shell-workspace-gutter), calc((100% - var(--admin-shell-max)) / 2));
--sidebar-bg: #24384f;
--sidebar-bg-subtle: #2d4560;
--sidebar-bg-hover: #ffffff12;
--sidebar-bg-active: #3b82f638;
--sidebar-border: #ffffff1a;
--sidebar-text: #f8fafc;
--sidebar-text-muted: #cbd5e1;
--sidebar-section-text: #aab8c7;
--sidebar-active-text: #fff;
--sidebar-active-icon: #93c5fd;
--sidebar-active-border: #60a5fa;
grid-template-columns: var(--admin-redenim-current-sidebar-w) minmax(0, 1fr);
min-height: 100dvh;
color: var(--fg);
background: #fff;
display: grid;
}
html[data-admin-sidebar-style="slate-blue"] .adminRedenimShell {
--sidebar-bg: #30465e;
--sidebar-bg-subtle: #3a5570;
--sidebar-bg-active: #60a5fa33;
--sidebar-active-border: #93c5fd;
}
html[data-admin-sidebar-style="blue-charcoal"] .adminRedenimShell {
--sidebar-bg: #2e3d4a;
--sidebar-bg-subtle: #374957;
--sidebar-bg-active: #3b82f62e;
--sidebar-active-border: #60a5fa;
}
html[data-admin-sidebar-style="petrol-gray"] .adminRedenimShell {
--sidebar-bg: #28494f;
--sidebar-bg-subtle: #315961;
--sidebar-bg-active: #2dd4bf29;
--sidebar-active-border: #5eead4;
--sidebar-active-icon: #99f6e4;
}
html[data-admin-sidebar-style="warm-graphite"] .adminRedenimShell {
--sidebar-bg: #3b4148;
--sidebar-bg-subtle: #474f57;
--sidebar-bg-active: #60a5fa2e;
--sidebar-active-border: #93c5fd;
}
html[data-admin-sidebar-style="moss-graphite"] .adminRedenimShell {
--sidebar-bg: #33453d;
--sidebar-bg-subtle: #3d544a;
--sidebar-bg-active: #22c55e26;
--sidebar-active-border: #86efac;
--sidebar-active-icon: #bbf7d0;
}
html[data-admin-sidebar-collapsed="1"] .adminRedenimShell {
--admin-redenim-current-sidebar-w: var(--admin-redenim-sidebar-collapsed-w);
}
@supports (-webkit-app-region: drag) {
@media (display-mode: window-controls-overlay) {
.adminRedenimShell {
--admin-titlebar-overlay-height: env(titlebar-area-height, 0px);
}
.adminRedenimShell:before {
content: "";
z-index: 80;
height: var(--admin-titlebar-overlay-height);
background: var(--sidebar-bg);
-webkit-app-region: drag;
app-region: drag;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.adminRedenimSidebarSlot, .adminRedenimAppColumn {
box-sizing: border-box;
padding-top: var(--admin-titlebar-overlay-height);
}
.adminRedenimSidebarSlot {
background: var(--sidebar-bg);
}
}
}
.adminRedenimSidebarSlot {
z-index: 60;
min-width: 0;
min-height: 100dvh;
position: relative;
}
.adminRedenimMobileClose {
display: none;
}
.adminRedenimSidebar {
top: var(--admin-titlebar-overlay-height);
height: calc(100dvh - var(--admin-titlebar-overlay-height));
min-height: 0;
color: var(--sidebar-text);
background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg-subtle), white 2%) 0%, var(--sidebar-bg) 42%, color-mix(in srgb, var(--sidebar-bg), black 8%) 100%);
border-right: 1px solid color-mix(in srgb, var(--sidebar-border), black 18%);
grid-template-rows: auto minmax(0, 1fr) auto;
display: grid;
position: sticky;
overflow: hidden;
}
html[data-admin-sidebar-surface="flat"] .adminRedenimSidebar {
background: var(--sidebar-bg);
}
.adminRedenimSidebarTop {
height: var(--admin-shell-header-height);
box-sizing: border-box;
border-bottom: 1px solid var(--sidebar-border);
align-items: center;
min-height: 0;
padding: 0 16px;
display: flex;
}
.adminRedenimBrand {
width: 100%;
min-width: 0;
color: var(--sidebar-text);
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: 11px;
min-height: 44px;
text-decoration: none;
display: grid;
}
.adminRedenimLogoTile {
background: #fff;
border-radius: 10px;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
display: inline-flex;
position: relative;
overflow: hidden;
}
.adminRedenimLogo {
object-fit: contain;
padding: 3.5px;
}
.adminRedenimLogoFallback {
color: var(--sidebar-bg);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
}
.adminRedenimBrandText {
min-width: 0;
}
.adminRedenimBrandTitle {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.1;
overflow: hidden;
}
.adminRedenimNav {
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
display: grid;
}
.adminRedenimPrimaryNav {
border-bottom: 1px solid var(--sidebar-border);
gap: 3px;
padding: 12px 10px 10px;
display: grid;
}
.adminRedenimSidebarPanel {
grid-template-rows: minmax(0, 1fr);
min-height: 0;
display: grid;
}
.adminRedenimSidebarBody {
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--sidebar-border) transparent;
scrollbar-gutter: stable;
min-height: 0;
padding: 10px 10px 14px;
overflow-y: auto;
}
.adminRedenimPanelHeading {
border-bottom: 1px solid var(--sidebar-border);
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 18px;
display: flex;
}
.adminRedenimPanelHeading h2 {
color: var(--sidebar-text);
margin: 0;
font-size: 15px;
font-weight: 650;
}
.adminRedenimPanelClose {
width: 44px;
height: 44px;
color: var(--sidebar-text-muted);
cursor: pointer;
background: none;
border: 0;
border-radius: 8px;
flex: 0 0 44px;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.adminRedenimPanelClose:hover {
background: var(--sidebar-bg-hover);
color: var(--sidebar-text);
}
.adminRedenimPanelClose:focus-visible {
outline: 2px solid var(--sidebar-active-border);
outline-offset: -2px;
}
.adminRedenimGroupButton, .adminRedenimNavLink, .adminRedenimCollapseButton {
width: 100%;
min-width: 0;
min-height: 44px;
color: var(--sidebar-text);
text-align: left;
cursor: pointer;
background: none;
border: 0;
border-radius: 10px;
align-items: center;
gap: 10px;
padding: 9px 10px;
text-decoration: none;
transition: background-color .14s, color .14s, box-shadow .14s;
display: flex;
}
.adminRedenimGroupButton:hover, .adminRedenimNavLink:hover, .adminRedenimCollapseButton:hover {
background: var(--sidebar-bg-hover);
}
.adminRedenimGroupButton:focus-visible, .adminRedenimNavLink:focus-visible, .adminRedenimCollapseButton:focus-visible {
outline: 2px solid var(--sidebar-active-border);
outline-offset: -2px;
}
.adminRedenimGroupButton, .adminRedenimNavLink {
position: relative;
}
.adminRedenimNavLink.isActive {
color: var(--sidebar-active-text);
background: var(--sidebar-bg-active);
}
.adminRedenimNavLink.isActive:before {
content: "";
background: var(--sidebar-active-border);
border-radius: 999px;
width: 2px;
position: absolute;
top: 9px;
bottom: 9px;
left: 3px;
}
.adminRedenimNavLink.isLocked {
color: color-mix(in srgb, var(--sidebar-text-muted), transparent 16%);
}
.adminRedenimModuleButton.isActive, .adminRedenimSettingsSubGroup.isActive > .adminRedenimGroupButton {
color: var(--sidebar-active-text);
}
.adminRedenimNavIcon {
width: 20px;
height: 20px;
color: color-mix(in srgb, var(--sidebar-text-muted), white 6%);
flex: none;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminRedenimNavLink.isActive .adminRedenimNavIcon, .adminRedenimModuleButton.isActive .adminRedenimNavIcon, .adminRedenimSettingsSubGroup.isActive > .adminRedenimGroupButton .adminRedenimNavIcon {
color: var(--sidebar-active-icon);
}
.adminRedenimNavLabel {
overflow-wrap: anywhere;
flex: auto;
min-width: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
}
.adminRedenimModuleButton .adminRedenimNavLabel {
font-size: 14px;
font-weight: 600;
}
.adminRedenimModuleButton.isOpen {
background: var(--sidebar-bg-hover);
}
.adminRedenimSettingsGroupButton .adminRedenimNavLabel, .adminRedenimSubheading {
color: var(--sidebar-section-text);
letter-spacing: .01em;
text-transform: none;
font-size: 12px;
font-weight: 600;
}
.adminRedenimSubheading {
margin: 0;
padding: 9px 10px 7px;
line-height: 1.35;
}
.adminRedenimGroupChevron {
color: var(--sidebar-text-muted);
flex: none;
transition: transform .14s;
transform: rotate(-90deg);
}
.adminRedenimModuleButton.isOpen .adminRedenimGroupChevron {
transform: rotate(0);
}
.adminRedenimSettingsSubGroup {
gap: 4px;
display: grid;
}
.adminRedenimSettingsSubGroup + .adminRedenimSettingsSubGroup {
margin-top: 10px;
}
.adminRedenimSettingsGroupButton {
border-radius: 10px;
min-height: 44px;
}
.adminRedenimSettingsSubGroup.isActive:not(.isOpen) > .adminRedenimSettingsGroupButton {
background: color-mix(in srgb, var(--sidebar-bg-active), transparent 24%);
}
.adminRedenimSettingsSubGroup.isActive:not(.isOpen) > .adminRedenimSettingsGroupButton:before {
content: "";
background: var(--sidebar-active-border);
border-radius: 999px;
width: 3px;
position: absolute;
top: 9px;
bottom: 9px;
left: 4px;
}
.adminRedenimSettingsSubGroup.isOpen > .adminRedenimGroupButton .adminRedenimGroupChevron {
transform: rotate(0);
}
.adminRedenimSettingsSubList {
gap: 2px;
padding-left: 0;
display: grid;
}
.adminRedenimSettingsSubList .adminRedenimNavLink {
min-height: 44px;
}
.adminRedenimBadge {
background: color-mix(in srgb, var(--sidebar-active-icon), transparent 83%);
min-width: 20px;
min-height: 20px;
color: var(--sidebar-text);
font-family: var(--font-mono);
border: 0;
border-radius: 999px;
flex: none;
justify-content: center;
align-items: center;
padding: 0 6px;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
}
.adminRedenimSidebarFooter {
border-top: 1px solid var(--sidebar-border);
gap: 8px;
padding: 10px;
display: grid;
}
.adminRedenimCollapseButton {
min-height: 44px;
color: var(--sidebar-text-muted);
background: none;
border: 0;
border-radius: 10px;
justify-content: flex-start;
}
.adminRedenimCollapseButton:hover {
color: var(--sidebar-text);
background: var(--sidebar-bg-hover);
}
.adminRedenimVersion {
color: color-mix(in srgb, var(--sidebar-text-muted), transparent 15%);
padding: 0 10px 1px;
font-size: 11px;
line-height: 1.2;
}
.adminRedenimAppColumn {
background: #fff;
grid-template-rows: auto minmax(0, 1fr);
min-width: 0;
min-height: 100dvh;
display: grid;
}
.adminRedenimTopbar {
top: var(--admin-titlebar-overlay-height);
z-index: 55;
min-width: 0;
height: var(--admin-shell-header-height);
box-sizing: border-box;
-webkit-backdrop-filter: saturate(140%) blur(10px);
backdrop-filter: saturate(140%) blur(10px);
background: #fffffff5;
border-bottom: 1px solid #e5e7eb;
position: sticky;
}
:is(.adminRedenimTopbar:has(.adminRedenimUserMenu[open]), .adminRedenimTopbar:has(.notificationBellPanel)) {
z-index: 260;
}
.adminRedenimTopbarInner {
box-sizing: border-box;
width: 100%;
height: 100%;
min-height: 0;
padding: 0 var(--admin-shell-workspace-gutter) 0 var(--admin-shell-content-edge);
align-items: center;
gap: 16px;
display: flex;
}
.adminRedenimMobileMenuButton, .adminRedenimIconButton {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
width: 44px;
min-width: 44px;
height: 44px;
color: var(--fg);
box-shadow: none;
cursor: pointer;
background: #fff;
border-radius: 10px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminRedenimMobileMenuButton {
display: none;
}
.adminRedenimIconButton:hover, .adminRedenimMobileMenuButton:hover {
background: color-mix(in srgb, var(--focus), white 95%);
border-color: color-mix(in srgb, var(--focus), var(--stroke) 50%);
}
.adminRedenimSearch {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
width: min(100%, 500px);
min-width: 0;
min-height: 44px;
color: var(--muted);
box-shadow: none;
text-align: left;
background: #fff;
border-radius: 10px;
flex: 0 500px;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 0 8px 0 14px;
display: grid;
}
.adminRedenimSearch span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-size: 14px;
overflow: hidden;
}
.adminRedenimSearch kbd {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 5%);
min-width: 34px;
min-height: 26px;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
background: color-mix(in srgb, var(--bg-2), white 40%);
font-family: var(--font-mono);
border-radius: 8px;
justify-content: center;
align-items: center;
padding: 4px 7px;
font-size: 11px;
display: inline-flex;
}
.adminCommandPaletteOverlay {
z-index: 120;
background: color-mix(in srgb, var(--fg), transparent 72%);
justify-content: center;
align-items: flex-start;
padding: 72px 18px 24px;
display: flex;
position: fixed;
inset: 0;
}
.adminCommandPalette {
width: min(680px, 100%);
max-height: min(720px, 100vh - 96px);
color: var(--fg);
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
box-shadow: 0 20px 60px color-mix(in srgb, var(--fg), transparent 82%),
0 2px 10px color-mix(in srgb, var(--fg), transparent 92%);
background: #fff;
border-radius: 14px;
grid-template-rows: auto minmax(0, 1fr) auto;
display: grid;
overflow: hidden;
}
.adminCommandPaletteSearch {
border: 1px solid color-mix(in srgb, var(--focus), white 10%);
min-height: 58px;
box-shadow: none;
background: #fff;
border-radius: 10px;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
margin: 16px 16px 10px;
padding: 0 10px 0 14px;
display: grid;
}
.adminCommandPaletteSearch svg {
color: color-mix(in srgb, var(--muted), var(--focus) 24%);
}
.adminCommandPaletteSearch input {
width: 100%;
min-width: 0;
color: var(--fg);
font: inherit;
background: none;
border: 0;
outline: 0;
font-size: 15px;
}
.adminCommandPaletteSearch input::placeholder {
color: color-mix(in srgb, var(--muted), var(--fg) 8%);
}
.adminCommandPaletteSearch kbd, .adminCommandPaletteFooter kbd {
min-width: 30px;
min-height: 26px;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
background: color-mix(in srgb, var(--bg-2), white 46%);
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 5%);
font-family: var(--font-mono);
border-radius: 7px;
justify-content: center;
align-items: center;
padding: 3px 7px;
font-size: 11px;
line-height: 1;
display: inline-flex;
}
.adminCommandPaletteClear {
width: 32px;
height: 32px;
color: var(--muted);
cursor: pointer;
background: none;
border: 0;
border-radius: 8px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminCommandPaletteClear:hover, .adminCommandPaletteClear:focus-visible {
color: var(--fg);
background: color-mix(in srgb, var(--focus), white 93%);
outline: 2px solid color-mix(in srgb, var(--focus), transparent 32%);
outline-offset: 1px;
}
.adminCommandPaletteResults {
min-height: 0;
padding: 0 16px 12px;
overflow-y: auto;
}
.adminCommandPaletteGroup {
padding-top: 8px;
}
.adminCommandPaletteGroup + .adminCommandPaletteGroup {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 12%);
margin-top: 8px;
padding-top: 14px;
}
.adminCommandPaletteGroup h2 {
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
}
.adminCommandPaletteGroupList {
gap: 4px;
display: grid;
}
.adminCommandPaletteItem {
width: 100%;
min-height: 52px;
color: var(--fg);
text-align: left;
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 10px;
grid-template-columns: 34px minmax(0, 1fr) minmax(130px, max-content);
align-items: center;
gap: 12px;
padding: 8px 10px;
display: grid;
}
.adminCommandPaletteItem:hover, .adminCommandPaletteItem.isActive {
background: color-mix(in srgb, var(--focus), white 92%);
border-color: color-mix(in srgb, var(--focus), white 20%);
}
.adminCommandPaletteItem:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
}
.adminCommandPaletteIcon {
width: 34px;
height: 34px;
color: var(--focus);
background: color-mix(in srgb, var(--focus), white 92%);
border-radius: 9px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminCommandPaletteItemText {
gap: 3px;
min-width: 0;
display: grid;
}
.adminCommandPaletteItemText span:first-child {
min-width: 0;
color: var(--fg);
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
overflow: hidden;
}
.adminCommandPaletteItemText span:last-child, .adminCommandPaletteSection {
min-width: 0;
color: var(--muted);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
overflow: hidden;
}
.adminCommandPaletteSection {
text-align: right;
justify-self: end;
}
.adminCommandPaletteEmpty {
color: var(--muted);
margin: 16px 0 24px;
font-size: 14px;
}
.adminCommandPaletteFooter {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 12%);
min-height: 46px;
color: var(--muted);
flex-wrap: wrap;
align-items: center;
gap: 7px;
padding: 9px 16px 12px;
font-size: 12px;
display: flex;
}
.adminCommandPaletteFooter kbd svg {
width: 12px;
height: 12px;
}
.adminRedenimTopbarActions {
flex: none;
justify-content: flex-end;
align-items: center;
gap: 4px;
min-width: 0;
margin-left: auto;
display: inline-flex;
}
.adminRedenimTopbarActions .notificationBellButton {
border-radius: 10px;
width: 44px;
min-width: 44px;
min-height: 44px;
}
.adminRedenimUserMenu {
z-index: 64;
margin-left: 2px;
position: relative;
}
.adminRedenimUserMenu[open] {
z-index: 240;
}
.adminRedenimUserMenu summary {
min-height: 44px;
color: var(--fg);
box-shadow: none;
cursor: pointer;
background: none;
border: 0;
border-radius: 10px;
grid-template-columns: 40px minmax(0, auto) 16px;
align-items: center;
gap: 10px;
padding: 2px 8px 2px 2px;
list-style: none;
display: inline-grid;
}
.adminRedenimUserMenu summary:hover {
background: color-mix(in srgb, var(--bg-2), white 52%);
}
.adminRedenimUserMenu summary:focus:not(:focus-visible) {
box-shadow: none;
outline: none;
}
.adminRedenimUserMenu summary:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 76%);
outline: none;
}
.adminRedenimUserMenu summary::-webkit-details-marker {
display: none;
}
.adminRedenimUserAvatar {
flex: none;
}
.adminRedenimUserText {
gap: 1px;
min-width: 0;
display: grid;
}
.adminRedenimUserText span:first-child {
color: var(--fg);
white-space: nowrap;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
.adminRedenimUserText span:last-child {
color: var(--muted);
white-space: nowrap;
font-size: 11px;
line-height: 1.2;
}
.adminRedenimUserMenuPanel {
z-index: 1;
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
width: 260px;
box-shadow: 0 16px 36px color-mix(in srgb, var(--fg), transparent 88%);
background: #fff;
border-radius: 12px;
padding: 6px;
position: absolute;
top: calc(100% + 8px);
right: 0;
}
.adminRedenimUserMenuPanel a, .adminRedenimUserMenuPanel button {
width: 100%;
min-height: 44px;
color: var(--fg);
text-align: left;
cursor: pointer;
background: none;
border: 0;
border-radius: 9px;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-weight: 600;
text-decoration: none;
display: flex;
}
.adminRedenimUserMenuPanel a:hover, .adminRedenimUserMenuPanel button:hover {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
}
.adminRedenimUserMenuPanel form {
margin: 0;
}
.adminRedenimUserMenuSeparator {
background: color-mix(in srgb, var(--stroke), transparent 12%);
height: 1px;
margin: 8px 4px;
}
.adminRedenimUserMenuSectionLabel {
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
padding: 4px 10px 6px;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.adminRedenimUserLanguageList {
gap: 2px;
display: grid;
}
.adminRedenimUserMenuPanel .adminRedenimUserLanguageItem {
grid-template-columns: 18px 34px minmax(0, 1fr) 18px;
column-gap: 10px;
min-height: 44px;
font-size: 13px;
line-height: 1.2;
display: grid;
}
.adminRedenimUserLanguageItem.isCurrent {
background: color-mix(in srgb, var(--focus), transparent 93%);
}
.adminRedenimUserLanguageFlag {
object-fit: cover;
width: 18px;
height: 12px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 40%);
border-radius: 2px;
display: block;
}
.adminRedenimUserLanguageCode {
color: var(--fg);
font-size: inherit;
font-weight: 700;
line-height: inherit;
}
.adminRedenimUserLanguageName {
min-width: 0;
color: var(--muted);
font-size: inherit;
font-weight: 500;
line-height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminRedenimUserLanguageCheck {
color: var(--focus);
justify-self: end;
}
main.content.adminRedenimWorkspace {
width: 100%;
min-width: 0;
max-width: none;
padding: 28px var(--admin-shell-workspace-gutter) 48px;
background: #fff;
margin: 0;
}
.adminRedenimModuleContent, .adminRedenimContentHost, .adminRedenimWorkspace > .adminPage {
width: 100%;
max-width: var(--admin-shell-max);
margin-left: auto;
margin-right: auto;
}
.adminRedenimContentHost {
display: contents;
}
.adminRedenimWorkspace > .adminSettingsContent {
max-width: var(--admin-shell-max);
}
.adminRedenimSidebar.isCompact {
overflow: visible;
}
.adminRedenimSidebar.isCompact .adminRedenimBrand {
grid-template-columns: 36px;
justify-content: center;
}
.adminRedenimSidebar.isCompact .adminRedenimSidebarTop {
padding-left: 16px;
padding-right: 16px;
}
.adminRedenimSidebar.isCompact .adminRedenimSidebarFooter {
justify-items: center;
}
.adminRedenimSidebar.isCompact .adminRedenimBrandText, .adminRedenimSidebar.isCompact .adminRedenimPrimaryNav .adminRedenimNavLabel, .adminRedenimSidebar.isCompact .adminRedenimCollapseButton span, .adminRedenimSidebar.isCompact .adminRedenimVersion, .adminRedenimSidebar.isCompact .adminRedenimPrimaryNav .adminRedenimGroupChevron {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminRedenimSidebar.isCompact .adminRedenimPrimaryNav > *, .adminRedenimSidebar.isCompact .adminRedenimCollapseButton {
justify-content: center;
padding-left: 10px;
padding-right: 10px;
}
.adminRedenimSidebar.isCompact .adminRedenimPrimaryNav .adminRedenimBadge {
background: var(--sidebar-bg-active);
min-width: 16px;
min-height: 16px;
padding: 0 4px;
font-size: 9px;
position: absolute;
top: 2px;
right: 1px;
}
.adminRedenimSidebar.isCompact .adminRedenimCollapseButton {
width: 44px;
}
.adminRedenimSidebar.isCompact .adminRedenimSidebarPanel {
width: 288px;
max-height: calc(100dvh - var(--admin-titlebar-overlay-height) - 88px);
color: var(--sidebar-text);
background: var(--sidebar-bg);
border: 1px solid var(--sidebar-border);
border-radius: 14px;
grid-template-rows: auto minmax(0, 1fr);
position: absolute;
inset: 76px auto auto calc(100% + 8px);
overflow: hidden;
box-shadow: 0 12px 32px #0f172a33;
}
.adminRedenimSidebarDialog {
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
color: var(--fg);
background: none;
border: 0;
margin: 0;
padding: 0;
position: fixed;
inset: 0;
overflow: hidden;
}
.adminRedenimSidebarDialog:not([open]) {
display: none;
}
.adminRedenimSidebarDialog::backdrop {
background: #0f172a6b;
}
@media (min-width: 1041px) {
html[data-admin-sidebar-collapsed="1"] .adminRedenimSidebar:not(.isCompact) .adminRedenimSidebarPanel {
display: none;
}
}
@media (max-width: 1040px) and (max-height: 560px) {
.adminRedenimPrimaryNav {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-block: 6px;
}
.adminRedenimPrimaryNav > * {
justify-content: center;
}
.adminRedenimPrimaryNav .adminRedenimNavLabel, .adminRedenimPrimaryNav .adminRedenimGroupChevron {
clip-path: inset(50%);
white-space: nowrap;
width: 1px;
height: 1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminRedenimPrimaryNav .adminRedenimBadge {
min-height: 16px;
font-size: 9px;
position: absolute;
top: 0;
right: 0;
}
}
@media (max-width: 1280px) {
.adminRedenimShell {
--admin-shell-workspace-gutter: 24px;
}
}
@media (max-width: 980px) {
.adminRedenimShell {
--admin-redenim-sidebar-w: 264px;
}
.adminRedenimTopbarInner {
gap: 10px;
}
.adminRedenimSearch {
flex: 360px;
}
.adminRedenimSearch kbd, .adminRedenimUserText {
display: none;
}
.adminRedenimUserMenu summary {
grid-template-columns: 40px 16px;
}
}
@media (max-width: 1040px) {
.adminRedenimShell, html[data-admin-sidebar-collapsed="1"] .adminRedenimShell {
--admin-shell-workspace-gutter: 16px;
--admin-redenim-current-sidebar-w: 0px;
grid-template-columns: minmax(0, 1fr);
}
.adminRedenimSidebarSlot {
display: none;
}
.adminRedenimSidebarDialog .adminRedenimSidebar {
width: min(304px, 100vw - 56px);
height: 100dvh;
position: static;
}
.adminRedenimMobileClose {
width: 44px;
height: 44px;
color: var(--fg);
cursor: pointer;
background: none;
border: 0;
border-radius: 8px;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
position: absolute;
top: 10px;
right: 8px;
}
.adminRedenimMobileClose:focus-visible {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
.adminRedenimCollapseButton {
display: none;
}
.adminRedenimSidebarFooter {
gap: 0;
}
.adminRedenimMobileMenuButton {
display: inline-flex;
}
.adminRedenimTopbarInner {
padding: 0 var(--admin-shell-workspace-gutter);
}
.adminRedenimTopbarActions {
gap: 6px;
}
.adminRedenimIconButton {
display: none;
}
main.content.adminRedenimWorkspace {
padding: 20px var(--admin-shell-workspace-gutter) 36px;
}
}
@media (max-width: 520px) {
.adminRedenimSearch {
display: none;
}
.adminCommandPaletteOverlay {
padding: 86px 10px 14px;
}
.adminCommandPalette {
border-radius: 12px;
max-height: calc(100vh - 100px);
}
.adminCommandPaletteSearch {
min-height: 54px;
margin: 12px 12px 8px;
}
.adminCommandPaletteResults {
padding: 0 12px 10px;
}
.adminCommandPaletteItem {
grid-template-columns: 38px minmax(0, 1fr) 18px;
gap: 10px;
min-height: 64px;
}
.adminCommandPaletteSection {
color: #0000;
width: 18px;
height: 18px;
position: relative;
overflow: hidden;
}
.adminCommandPaletteSection:after {
content: ">";
color: var(--fg);
justify-content: center;
align-items: center;
font-size: 24px;
line-height: 1;
display: inline-flex;
position: absolute;
inset: 0;
}
.adminCommandPaletteFooter {
justify-content: center;
}
}
.notificationBell {
z-index: 62;
justify-content: center;
align-items: center;
display: inline-flex;
position: relative;
}
.notificationBellButton {
width: 44px;
min-width: 44px;
min-height: 44px;
color: var(--fg);
box-shadow: none;
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 10px;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
position: relative;
}
.notificationBellButton:hover {
background: color-mix(in srgb, var(--bg-2), white 34%);
border-color: #0000;
}
.notificationBellButton:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 74%);
outline: none;
}
.notificationBellButton svg {
width: 20px;
height: 20px;
}
.notificationBellBadge {
background: var(--danger);
color: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 800;
line-height: 1;
display: inline-flex;
position: absolute;
top: -4px;
right: -4px;
box-shadow: 0 0 0 2px #fff;
}
.notificationBellPanel {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
width: min(520px, 100vw - 24px);
max-height: min(640px, 100dvh - 110px);
color: var(--fg);
box-shadow: 0 18px 34px color-mix(in srgb, var(--fg), transparent 88%);
background: #fff;
border-radius: 10px;
grid-template-rows: auto minmax(0, 1fr) auto;
display: grid;
position: absolute;
top: calc(100% + 8px);
right: 0;
overflow: hidden;
}
.notificationBellPanel.notificationBellPanel_empty {
grid-template-rows: auto auto auto;
width: min(360px, 100vw - 24px);
}
.notificationBellHeader {
border-bottom: 1px solid var(--stroke);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 14px 18px;
display: grid;
}
.notificationBellHeading {
min-width: 0;
font-weight: 800;
}
.notificationBellHeadingBlock {
gap: 2px;
min-width: 0;
display: grid;
}
.notificationBellTitleRow {
align-items: center;
gap: 0;
min-width: 0;
display: inline-flex;
}
.notificationBellSubheading {
min-width: 0;
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.notificationBellHeaderActions {
justify-content: flex-end;
align-items: center;
gap: 4px;
display: inline-flex;
}
.notificationBellSettings {
width: 44px;
min-height: 44px;
color: var(--focus);
background: none;
border: 0;
border-radius: 8px;
flex: none;
justify-content: center;
align-items: center;
text-decoration: none;
display: inline-flex;
}
.notificationBellSettings:hover {
color: color-mix(in srgb, var(--focus), var(--fg) 20%);
background: none;
}
.notificationBellSettings:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
outline: none;
}
.notificationBellSettings svg {
width: 22px;
height: 22px;
}
.notificationBellMarkAll {
border: 1px solid color-mix(in srgb, var(--focus), white 62%);
min-height: 44px;
color: var(--focus);
cursor: pointer;
background: #fff;
border-radius: 8px;
padding: 8px 12px;
font-weight: 700;
}
.notificationBellMarkAll:disabled {
cursor: default;
color: var(--muted);
background: color-mix(in srgb, var(--bg-2), white 20%);
}
.notificationBellError, .notificationBellEmpty {
color: var(--muted);
padding: 16px;
font-size: 13px;
}
.notificationBellEmpty {
align-items: center;
min-height: 56px;
display: flex;
}
.notificationBellError {
color: var(--danger);
border-bottom: 1px solid color-mix(in srgb, var(--danger), white 82%);
}
.notificationBellList {
align-content: start;
min-height: 0;
max-height: none;
display: grid;
overflow-y: auto;
}
.notificationBellPanel.notificationBellPanel_empty .notificationBellList {
overflow-y: visible;
}
.notificationBellItem {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), white 20%);
width: 100%;
min-height: 120px;
color: var(--fg);
text-align: left;
cursor: pointer;
background: #fff;
border-radius: 0;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 0;
padding: 14px;
display: grid;
}
.notificationBellItem:first-child {
border-top: 0;
}
.notificationBellItem:not(:disabled):hover {
background: color-mix(in srgb, var(--accent), white 94%);
}
.notificationBellItem:disabled {
cursor: default;
opacity: 1;
}
.notificationBellItem_action {
border-left: 3px solid color-mix(in srgb, var(--focus), white 18%);
}
.notificationBellItem_warning {
border-left: 3px solid #d97706;
}
.notificationBellItem_critical {
border-left: 3px solid var(--danger);
}
.notificationBellItemLinked:not(:disabled):hover .notificationBellItemTitle {
color: var(--focus);
text-underline-offset: 2px;
text-decoration: underline;
}
.notificationBellItemContent {
align-content: start;
gap: 7px;
min-width: 0;
display: grid;
}
.notificationBellItemMeta {
color: var(--muted);
letter-spacing: 0;
text-transform: uppercase;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
display: grid;
}
.notificationBellItemSeverity, .notificationBellItemFlag, .notificationBellItemAction {
border-radius: 999px;
justify-content: center;
align-items: center;
width: fit-content;
max-width: 100%;
min-height: 24px;
padding: 4px 7px;
font-size: 11px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.notificationBellItemSeverity {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
background: color-mix(in srgb, var(--bg-2), white 35%);
color: var(--muted);
}
.notificationBellItemSeverity[data-severity="ACTION"] {
border-color: color-mix(in srgb, var(--focus), white 58%);
background: color-mix(in srgb, var(--focus), white 92%);
color: var(--focus);
}
.notificationBellItemSeverity[data-severity="WARNING"] {
color: #92400e;
background: #fbf1e6;
border-color: #efc696;
}
.notificationBellItemSeverity[data-severity="CRITICAL"] {
border-color: color-mix(in srgb, var(--danger), white 58%);
background: color-mix(in srgb, var(--danger), white 90%);
color: var(--danger);
}
.notificationBellItemCategory {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.notificationBellItemTime {
white-space: nowrap;
}
.notificationBellItemTitle, .notificationBellItemBody, .notificationBellItemAction, .notificationBellItemFooter, .notificationBellItemFlag {
overflow-wrap: anywhere;
min-width: 0;
}
.notificationBellItemTitle {
font-weight: 800;
}
.notificationBellItemBody {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.notificationBellItemAction {
border: 1px solid color-mix(in srgb, var(--focus), white 62%);
color: var(--focus);
background: #fff;
margin-left: auto;
}
.notificationBellItemFooter {
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 6px 8px;
padding-top: 2px;
display: flex;
}
.notificationBellItemFlag {
border: 1px solid color-mix(in srgb, var(--accent), white 58%);
background: color-mix(in srgb, var(--accent), white 90%);
color: color-mix(in srgb, var(--accent), #111 28%);
}
.notificationBellItemFlag, .notificationBellItemAction {
white-space: nowrap;
}
.notificationBellViewAll {
border-top: 1px solid var(--stroke);
min-height: 52px;
color: var(--focus);
justify-content: center;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
display: flex;
}
.notificationBellViewAll:hover {
background: color-mix(in srgb, var(--focus), white 94%);
text-underline-offset: 2px;
text-decoration: underline;
}
.notificationBellViewAll:focus-visible {
box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--focus), transparent 76%);
outline: none;
}
.notificationCenterPage, .notificationSettingsPage {
gap: 16px;
display: grid;
}
.adminNotificationCenterCard {
overflow: hidden;
}
.notificationPageTitleRow {
align-items: center;
gap: 0;
min-width: 0;
display: inline-flex;
}
.notificationPageTitleRow h1 {
min-width: 0;
}
.notificationPageSettingsLink {
width: 44px;
min-height: 44px;
color: var(--focus);
background: none;
border: 0;
border-radius: 8px;
flex: none;
justify-content: center;
align-items: center;
padding: 0;
text-decoration: none;
display: inline-flex;
}
.notificationPageSettingsLink:hover {
color: color-mix(in srgb, var(--focus), var(--fg) 20%);
background: none;
}
.notificationPageSettingsLink:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
outline: none;
}
.notificationPageSettingsLink svg {
width: 22px;
height: 22px;
}
.notificationCenterCardBody, .notificationCenter {
gap: 14px;
display: grid;
}
.notificationCenterStatusText {
min-width: 0;
color: var(--muted);
font-size: 13px;
font-weight: 750;
}
.notificationCenterMarkAll {
min-height: 44px;
}
.notificationCenterFilters {
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--bg-2), white 28%);
border-radius: 10px;
grid-template-columns: auto minmax(150px, 1fr) minmax(140px, .85fr) auto;
align-items: end;
gap: 10px;
padding: 12px;
display: grid;
}
.notificationCenterReadTabs {
border: 1px solid var(--stroke);
background: #fff;
border-radius: 10px;
grid-template-columns: repeat(3, minmax(0, auto));
gap: 4px;
padding: 3px;
display: inline-grid;
}
.notificationCenterReadTab {
min-height: 38px;
color: var(--muted);
cursor: pointer;
background: none;
border: 0;
border-radius: 8px;
padding: 7px 10px;
font-weight: 800;
}
.notificationCenterReadTab.isActive {
background: color-mix(in srgb, var(--focus), white 90%);
color: var(--focus);
}
.notificationCenterReadTab:focus-visible, .notificationCenterFilterField select:focus-visible, .notificationCenterActionToggle:focus-within, .notificationCenterItem:focus-visible, .notificationCenterLoadMore:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 76%);
outline: none;
}
.notificationCenterFilterField {
min-width: 0;
color: var(--muted);
text-transform: uppercase;
gap: 5px;
font-size: 11px;
font-weight: 850;
display: grid;
}
.notificationCenterFilterField select {
border: 1px solid var(--stroke);
min-width: 0;
min-height: 44px;
color: var(--fg);
font-family: var(--font-sans);
text-transform: none;
background: #fff;
border-radius: 10px;
padding: 8px 10px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.notificationCenterActionToggle {
border: 1px solid var(--stroke);
min-height: 44px;
color: var(--fg);
background: #fff;
border-radius: 10px;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-size: 13px;
font-weight: 800;
display: inline-flex;
}
.notificationCenterActionToggle input {
width: 18px;
height: 18px;
accent-color: var(--focus);
}
.notificationCenterError, .notificationCenterEmpty {
border: 1px solid var(--stroke);
color: var(--muted);
border-radius: 10px;
padding: 14px;
}
.notificationCenterError {
border-color: color-mix(in srgb, var(--danger), white 62%);
color: var(--danger);
}
.notificationCenterList {
border: 1px solid var(--stroke);
background: #fff;
border-radius: 10px;
display: grid;
overflow: hidden;
}
.notificationCenterItem {
border: 0;
border-top: 1px solid var(--stroke);
width: 100%;
min-height: 112px;
color: var(--fg);
text-align: left;
cursor: pointer;
background: #fff;
grid-template-columns: minmax(0, 1fr);
padding: 14px;
display: grid;
}
.notificationCenterItem:first-child {
border-top: 0;
}
.notificationCenterItem:not(:disabled):hover {
background: color-mix(in srgb, var(--accent), white 95%);
}
.notificationCenterItem_action {
border-left: 4px solid color-mix(in srgb, var(--focus), white 18%);
}
.notificationCenterItem_warning {
border-left: 4px solid #d97706;
}
.notificationCenterItem_critical {
border-left: 4px solid var(--danger);
}
.notificationCenterItemLinked:not(:disabled):hover .notificationCenterItemTitle {
color: var(--focus);
text-underline-offset: 2px;
text-decoration: underline;
}
.notificationCenterItemContent {
gap: 7px;
min-width: 0;
display: grid;
}
.notificationCenterItemMeta {
min-width: 0;
color: var(--muted);
letter-spacing: 0;
text-transform: uppercase;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 850;
display: grid;
}
.notificationCenterItemSeverity, .notificationCenterItemFlag, .notificationCenterItemAction {
border-radius: 999px;
justify-content: center;
align-items: center;
width: fit-content;
max-width: 100%;
min-height: 26px;
padding: 5px 8px;
font-size: 11px;
font-weight: 850;
line-height: 1;
display: inline-flex;
}
.notificationCenterItemSeverity {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
background: color-mix(in srgb, var(--bg-2), white 35%);
color: var(--muted);
}
.notificationCenterItemSeverity[data-severity="ACTION"] {
border-color: color-mix(in srgb, var(--focus), white 58%);
background: color-mix(in srgb, var(--focus), white 92%);
color: var(--focus);
}
.notificationCenterItemSeverity[data-severity="WARNING"] {
color: #92400e;
background: #fbf1e6;
border-color: #efc696;
}
.notificationCenterItemSeverity[data-severity="CRITICAL"] {
border-color: color-mix(in srgb, var(--danger), white 58%);
background: color-mix(in srgb, var(--danger), white 90%);
color: var(--danger);
}
.notificationCenterItemCategory, .notificationCenterItemTitle, .notificationCenterItemBody, .notificationCenterItemFooter, .notificationCenterItemFlag, .notificationCenterItemAction {
overflow-wrap: anywhere;
min-width: 0;
}
.notificationCenterItemCategory {
color: var(--muted);
}
.notificationCenterItemTime {
white-space: nowrap;
justify-self: end;
}
.notificationCenterItemTitle {
font-weight: 850;
}
.notificationCenterItemBody {
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
.notificationCenterItemFooter {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.notificationCenterItemFlag {
border: 1px solid color-mix(in srgb, var(--accent), white 58%);
background: color-mix(in srgb, var(--accent), white 90%);
color: color-mix(in srgb, var(--accent), #111 28%);
}
.notificationCenterItemAction {
border: 1px solid color-mix(in srgb, var(--focus), white 62%);
color: var(--focus);
background: #fff;
margin-left: auto;
}
.notificationCenterLoadMoreRow {
justify-content: center;
display: flex;
}
.notificationCenterLoadMore {
min-width: 160px;
min-height: 44px;
}
@media (max-width: 720px) {
.notificationCenterFilterField select {
font-size: 16px;
}
.notificationCenterFilters {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.notificationCenterMarkAll, .notificationCenterLoadMore {
width: 100%;
}
.notificationCenterReadTabs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.notificationCenterReadTab {
padding: 7px 6px;
}
.notificationCenterItem {
min-height: 104px;
padding: 12px;
}
.notificationCenterItemMeta {
grid-template-columns: auto minmax(0, 1fr);
}
.notificationCenterItemTime {
grid-column: 1 / -1;
justify-self: start;
}
}
.adminLoginMain {
background: radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--focus), transparent 93%), transparent 32%),
linear-gradient(145deg, color-mix(in srgb, var(--bg-2), white 55%), var(--bg) 62%);
place-items: center;
max-width: none;
min-height: 100dvh;
padding: clamp(24px, 5vw, 64px);
display: grid;
}
.adminLoginShell {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 7%);
background: var(--bg);
width: min(960px, 100%);
min-height: 560px;
box-shadow: 0 24px 70px color-mix(in srgb, var(--fg), transparent 88%);
border-radius: 16px;
grid-template-columns: minmax(300px, .82fr) minmax(440px, 1.18fr);
display: grid;
overflow: hidden;
}
.adminLoginBrandPanel {
color: #f8fafc;
background: linear-gradient(#ffffff0a 1px, transparent 1px),
linear-gradient(90deg, #ffffff0a 1px, transparent 1px),
linear-gradient(160deg, color-mix(in srgb, #30465e, var(--focus) 8%), #24384f 64%, #1f3044);
background-size: 32px 32px, 32px 32px, auto;
align-content: space-between;
gap: 40px;
min-width: 0;
padding: 46px 40px 34px;
display: grid;
}
.adminLoginBrandContent {
align-content: start;
justify-items: start;
gap: 0;
display: grid;
}
.adminLoginBrandLogoFrame {
background: #fff;
border-radius: 12px;
justify-content: center;
align-items: center;
min-height: 50px;
margin-bottom: 34px;
padding: 9px 12px;
display: inline-flex;
box-shadow: 0 8px 24px #0f172a29;
}
.adminLoginBrandLogo {
object-fit: contain;
}
.adminLoginBrandLogoCanvas {
aspect-ratio: 171.195 / 128.826;
width: auto;
height: 28px;
display: block;
position: relative;
}
.adminLoginBrandName {
color: #cbd5e1;
letter-spacing: .1em;
text-transform: uppercase;
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.adminLoginTitle {
color: #fff;
letter-spacing: -.035em;
max-width: 9ch;
margin: 0;
font-size: clamp(32px, 3.1vw, 42px);
line-height: 1.03;
}
.adminLoginSubtitle {
color: #cbd5e1;
max-width: 31ch;
margin: 18px 0 0;
font-size: 15px;
line-height: 1.55;
}
.adminLoginAccessPanel {
background: var(--bg);
align-content: start;
min-width: 0;
padding: 48px 52px 40px;
display: grid;
}
.adminLoginAccessHeader {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 24px;
display: grid;
}
.adminLoginAccessHeader .localeSwitcher {
justify-self: end;
}
.adminLoginAccessTitle {
letter-spacing: -.025em;
margin: 0;
font-size: 30px;
line-height: 1.08;
}
.adminLoginAccessHint {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.45;
}
.adminLoginForm {
margin-top: 26px;
}
.adminLoginQuietLink {
color: var(--focus);
text-decoration: none;
}
.adminLoginQuietLink:hover, .adminLoginQuietLink:focus-visible {
text-decoration: underline;
}
.adminLoginSubmitRow {
margin-top: 14px;
}
.adminLoginSubmitRow .btn {
width: 100%;
}
.adminLoginHelpRow {
margin-top: 10px;
font-size: 14px;
}
.adminLoginUtilityGroup {
gap: 2px;
margin-top: 10px;
font-size: 14px;
display: grid;
}
.adminLoginUtilityLink, .adminLoginUtilityRoute {
min-height: 32px;
}
.adminLoginUtilityLink {
align-items: center;
width: fit-content;
padding: 4px 0;
display: inline-flex;
}
.adminLoginUtilityRoute {
flex-wrap: wrap;
align-items: center;
column-gap: .35ch;
margin: 0;
padding: 4px 0;
line-height: 1.45;
display: flex;
}
.adminLoginBuildVersion {
color: #aab8c7;
align-self: end;
font-size: 11px;
line-height: 1.2;
}
.adminLoginMfaPanel {
gap: 18px;
margin-top: 30px;
display: grid;
}
.adminLoginMfaTitle {
margin: 0 0 6px;
font-size: 28px;
line-height: 1.1;
}
.adminLoginMfaHint {
margin: 0;
}
.adminLoginRecoveryButton {
width: 100%;
margin-top: 10px;
}
.adminLoginMfaPanel > .btnSuccess {
width: 100%;
}
@media (max-width: 900px) {
.adminLoginMain {
padding: 24px;
}
.adminLoginShell {
grid-template-columns: minmax(0, 1fr);
width: min(640px, 100%);
min-height: 0;
}
.adminLoginBrandPanel {
gap: 26px;
padding: 30px 34px 26px;
}
.adminLoginBrandLogoFrame {
min-height: 46px;
margin-bottom: 24px;
}
.adminLoginTitle {
max-width: none;
font-size: 34px;
}
.adminLoginSubtitle {
max-width: 42ch;
margin-top: 12px;
}
.adminLoginAccessPanel {
padding: 34px;
}
}
.passwordInputControl {
gap: 4px;
display: grid;
}
.passwordInputWrap {
position: relative;
}
.passwordInputField {
padding-right: 52px !important;
}
.passwordInputField::-ms-reveal {
display: none;
}
.passwordInputField::-ms-clear {
display: none;
}
.passwordToggleBtn {
border-radius: var(--radius);
width: 44px;
height: 44px;
color: color-mix(in srgb, var(--fg), black 8%);
cursor: pointer;
background: none;
border: 0;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.passwordToggleBtn:hover {
background: color-mix(in srgb, var(--fg), transparent 92%);
}
.passwordToggleBtn:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 65%);
outline: none;
}
.passwordToggleIcon {
width: 20px;
height: 20px;
display: block;
}
.passwordCapsSlot {
align-items: center;
min-height: 18px;
display: flex;
}
.passwordCapsMessage {
color: var(--muted);
align-items: center;
gap: 6px;
margin: 0;
font-size: 13px;
line-height: 1.25;
display: inline-flex;
}
.passwordCapsInfoIcon {
width: 18px;
height: 18px;
display: block;
}
.adminPage, .adminModuleBody {
gap: 12px;
display: grid;
}
.adminPage > *, .adminModuleBody > * {
min-width: 0;
}
.adminSettingsContent {
min-width: 0;
padding-left: 0;
}
@media (max-width: 1600px) {
:root {
--admin-shell-gutter: 20px;
--admin-sidebar-w: 292px;
--admin-shell-gap: 14px;
}
}
@media (max-width: 1280px) {
:root {
--admin-shell-gutter: 16px;
--admin-sidebar-w: 272px;
--admin-shell-gap: 12px;
}
}
.adminSettingsPage {
min-width: 0;
}
.adminPageHeaderPlain {
padding: 4px 0 2px;
}
.adminSettingsPage > .card:first-child:has( > .adminHeaderBody) {
box-shadow: none;
background: none;
border: 0;
}
.adminSettingsPage > .card:first-child:has( > .adminHeaderBody) > .adminHeaderBody {
padding: 4px 0 2px;
}
.adminSettingsPageContentSplit {
width: 100%;
min-width: 0;
margin-right: auto;
}
.adminSettingsBody {
gap: 12px;
display: grid;
}
.adminSettingsEditorCard {
box-shadow: none;
}
.adminSettingsPage > .card.adminSettingsEditorCard, .adminSettingsEditorCardFlat {
box-shadow: none;
background: none;
border: 0;
}
.adminSettingsEditorBody {
gap: 12px;
display: grid;
}
.adminSettingsPage > .card.adminSettingsEditorCard > .adminSettingsEditorBody, .adminSettingsEditorBodyFlat {
padding: 0;
}
:is(.adminSettingsBrowsePage > .card:has( > .adminListCardBody), .adminSettingsBrowsePage > .card:has( > .adminSettingsHistoryBody), .adminSettingsBrowsePage > .card:has( > .adminSettingsSnapshotBody), .adminOperationsBrowsePage > .card:has( > .adminListCardBody)) {
box-shadow: none;
background: none;
border: 0;
}
:is(.adminSettingsBrowsePage > .card:has( > .adminListCardBody) > .adminListCardBody, .adminOperationsBrowsePage > .card:has( > .adminListCardBody) > .adminListCardBody) {
padding: 0;
}
.adminSettingsCategory {
gap: 14px;
display: grid;
}
.adminSettingsCategory + .adminSettingsCategory {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
padding-top: 18px;
}
.adminAuthSecurityPage .adminSettingsEditorCard, .adminAuthSecurityPage .adminPasskeyCard {
max-width: none;
}
.adminAuthSecurityPage .adminSettingsEditorBody, .adminAuthSecurityPage .adminPasskeyBody {
gap: 14px;
}
.adminAuthSecurityPage .adminTemplateForm {
gap: 0;
}
.adminAuthSecurityPage .adminTemplateForm .adminSettingsCategory {
gap: 12px;
padding-bottom: 16px;
}
.adminAuthSecurityPage .adminTemplateForm .adminSettingsCategory + .adminSettingsCategory {
padding-top: 16px;
}
.adminAuthSecurityPage .adminTemplateForm .adminSettingsCategory:last-child {
padding-bottom: 0;
}
.adminAuthSecurityPage .adminTemplateForm .adminSettingsChecklistTitle {
font-size: 15px;
line-height: 1.25;
}
.adminAuthSecurityPage .adminTemplateFieldsGrid {
gap: 12px;
}
.adminAuthSecurityPage .adminTemplateField:not(.adminTemplateFieldFull) {
max-width: 560px;
}
.adminAuthSecurityPage .adminTemplateField:not(.adminTemplateFieldFull) > .input {
max-width: 420px;
}
.adminAuthSecurityPage .adminBooleanFieldLabel, .adminAuthSecurityPage .adminChoiceFieldLabel {
font-size: 14px;
font-weight: 600;
}
.adminAuthSecurityPage .adminChoiceFieldOption.isChecked .adminChoiceFieldLabel {
font-weight: 700;
}
.adminAuthSecurityPage .adminChoiceFieldOption.isDisabled {
color: color-mix(in srgb, var(--muted), var(--fg) 10%);
}
.adminAuthSecurityPage .adminChoiceFieldGroup {
flex-wrap: wrap;
align-items: center;
gap: 12px 22px;
display: flex;
}
.adminAuthSecurityPage .adminChoiceFieldOption {
min-height: 30px;
}
.adminAuthSecurityPage .adminSettingsFormFooter {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 4px;
padding-top: 14px;
display: flex;
}
.adminAuthSecurityPage .adminSettingsFormActions {
margin-left: auto;
}
.adminAuthSecurityPage .adminSettingsFormMeta {
text-align: left;
order: -1;
}
.adminPiiVisibilityPage .adminSettingsEditorCard {
max-width: none;
}
.adminPiiVisibilityPage .adminTemplateForm .adminSettingsCategory {
gap: 10px;
}
.adminPiiVisibilityPage .adminTemplateFieldsGrid {
gap: 16px 28px;
}
.adminPiiVisibilityPage .adminTemplateBooleanField {
padding-bottom: 4px;
}
.adminPiiVisibilityPage .adminBooleanFieldHint {
max-width: 420px;
}
.adminNotificationPolicyPage {
width: 100%;
margin-right: auto;
}
.adminNotificationPolicyShell {
gap: 16px;
display: grid;
}
.adminNotificationPolicySummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: var(--surface);
grid-template-columns: repeat(4, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.adminNotificationPolicySummaryItem {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
align-content: center;
gap: 3px;
min-width: 0;
min-height: 76px;
padding: 12px 14px;
display: grid;
}
.adminNotificationPolicySummaryItem:last-child {
border-right: 0;
}
.adminNotificationPolicySummaryItem span {
color: var(--muted);
letter-spacing: .02em;
text-transform: uppercase;
font-size: 11px;
font-weight: 850;
line-height: 1.2;
}
.adminNotificationPolicySummaryItem strong {
overflow-wrap: anywhere;
min-width: 0;
color: var(--fg);
font-size: 15px;
line-height: 1.25;
}
.adminNotificationPolicySummaryItem small {
overflow-wrap: anywhere;
min-width: 0;
color: var(--muted);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
.adminNotificationPolicyIntro {
justify-content: space-between;
align-items: start;
gap: 16px;
padding-bottom: 4px;
display: flex;
}
.adminNotificationPolicyIntro .eyebrow {
margin-bottom: 4px;
}
.adminNotificationPolicyStatusPill {
white-space: nowrap;
}
.adminNotificationPolicyForm {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
display: grid;
}
.adminNotificationPolicySection {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: var(--surface);
display: grid;
overflow: hidden;
}
.adminNotificationPolicySection.isEditing {
border-color: color-mix(in srgb, var(--focus), transparent 52%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus), transparent 84%);
}
.adminNotificationPolicySectionHeader {
grid-template-columns: 40px minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
padding: 14px 16px;
display: grid;
}
.adminNotificationPolicySectionIcon {
background: color-mix(in srgb, var(--focus), white 91%);
width: 40px;
height: 40px;
color: color-mix(in srgb, var(--focus), black 4%);
border-radius: 999px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminNotificationPolicySectionTitle {
gap: 4px;
min-width: 0;
display: grid;
}
.adminNotificationPolicySectionTitle .adminSettingsChecklistTitle {
margin: 0;
}
.adminNotificationPolicySectionStatus {
text-overflow: ellipsis;
white-space: nowrap;
justify-content: center;
min-width: 0;
max-width: 220px;
overflow: hidden;
}
.adminNotificationPolicySectionActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminNotificationPolicySectionActions .btn {
min-height: 38px;
padding: 8px 13px;
}
.adminNotificationPolicyEditButton {
color: var(--focus);
}
.adminNotificationPolicySectionBody {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: var(--bg-2);
gap: 14px;
padding: 16px;
display: grid;
}
.adminNotificationPolicySection.isEditing .adminNotificationPolicySectionBody {
background: var(--surface);
}
.adminNotificationPolicyPreview {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px 16px;
display: grid;
}
.adminNotificationPolicyPreviewItem {
gap: 3px;
min-width: 0;
display: grid;
}
.adminNotificationPolicyPreviewItem span {
color: var(--muted);
letter-spacing: .02em;
text-transform: uppercase;
font-size: 11px;
font-weight: 850;
line-height: 1.2;
}
.adminNotificationPolicyPreviewItem strong {
overflow-wrap: anywhere;
min-width: 0;
color: var(--fg);
font-size: 14px;
line-height: 1.25;
}
.adminNotificationPolicyPreviewItem small {
overflow-wrap: anywhere;
min-width: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminNotificationPolicyFieldGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
display: grid;
}
.adminNotificationPolicyField {
min-width: 0;
}
.adminNotificationPolicyField .input, .adminNotificationTimeGrid .input {
min-height: 44px;
}
.adminNotificationPolicyToggleGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminNotificationPolicySwitch, .adminNotificationCriticalOption {
cursor: pointer;
min-width: 0;
min-height: 48px;
}
.adminNotificationPolicySwitch {
grid-template-columns: 22px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 10px 0;
display: grid;
}
.adminNotificationPolicySwitch input, .adminNotificationCriticalOption input {
width: 20px;
height: 20px;
margin: 2px 0 0;
}
.adminNotificationPolicySwitchText, .adminNotificationCriticalOption span {
gap: 3px;
min-width: 0;
display: grid;
}
.adminNotificationPolicySwitchText strong, .adminNotificationCriticalOption strong {
font-size: 15px;
line-height: 1.25;
}
.adminNotificationPolicySwitchText small, .adminNotificationCriticalOption small {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.adminNotificationPolicySwitch:focus-within, .adminNotificationCriticalOption:focus-within {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 28%);
border-radius: var(--radius);
outline: none;
}
.adminNotificationRuntimeGrid {
grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
align-items: center;
gap: 16px;
display: grid;
}
.adminNotificationRuntimeStatus {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: var(--surface);
justify-content: space-between;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 9px 11px;
display: flex;
}
.adminNotificationRuntimeStatus span {
min-width: 0;
font-weight: 800;
line-height: 1.25;
}
.adminNotificationRuntimeStatus a {
min-height: 44px;
color: var(--focus);
flex: none;
align-items: center;
font-size: 13px;
font-weight: 800;
text-decoration: none;
display: inline-flex;
}
.adminNotificationRuntimeStatus a:hover {
text-decoration: underline;
}
.adminNotificationRuntimeStatus_ready {
border-color: color-mix(in srgb, var(--success), transparent 48%);
background: color-mix(in srgb, var(--success), white 93%);
}
.adminNotificationRuntimeStatus_not-ready, .adminNotificationRuntimeStatus_error {
border-color: color-mix(in srgb, var(--warning), transparent 42%);
background: color-mix(in srgb, var(--warning), white 90%);
}
.adminNotificationWindowGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
display: grid;
}
.adminNotificationWindowPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: var(--surface);
gap: 12px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminNotificationWindowPanel legend {
padding: 0 5px;
font-size: 15px;
font-weight: 800;
}
.adminNotificationTimeGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminNotificationTimeGrid label {
gap: 6px;
min-width: 0;
display: grid;
}
.adminNotificationScheduleSwitches {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminNotificationTimezoneControl {
grid-column: 1 / -1;
}
.adminNotificationCriticalToolbar {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminNotificationCriticalGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminNotificationCriticalOption {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: var(--surface);
grid-template-columns: 22px minmax(0, 1fr);
align-items: start;
gap: 11px;
padding: 10px;
display: grid;
}
.adminNotificationCriticalOption.isChecked {
border-color: color-mix(in srgb, var(--focus), transparent 38%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminNotificationPolicyFooter {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
justify-content: flex-end;
padding-top: 12px;
display: flex;
}
@media (max-width: 920px) {
.adminNotificationPolicySummary, .adminNotificationPolicyFieldGrid, .adminNotificationPolicyToggleGrid, .adminNotificationRuntimeGrid, .adminNotificationWindowGrid, .adminNotificationScheduleSwitches, .adminNotificationCriticalGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminNotificationPolicySummaryItem {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.adminNotificationPolicySummaryItem:last-child {
border-bottom: 0;
}
.adminNotificationRuntimeStatus {
flex-wrap: wrap;
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.adminNotificationPolicyIntro {
align-items: stretch;
display: grid;
}
.adminNotificationPolicySectionHeader {
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
padding: 14px;
}
.adminNotificationPolicySectionStatus {
grid-column: 2;
justify-self: start;
max-width: 100%;
}
.adminNotificationPolicySectionActions {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
display: grid;
}
.adminNotificationPolicySection.isEditing .adminNotificationPolicySectionActions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminNotificationPolicySectionActions .btn {
justify-content: center;
width: 100%;
min-height: 44px;
}
.adminNotificationPolicySectionBody {
padding: 14px;
}
.adminNotificationTimeGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminNotificationCriticalToolbar .btn, .adminNotificationCriticalToolbar .pill {
justify-content: center;
width: 100%;
}
.adminNotificationPolicyFooter {
justify-content: flex-start;
}
}
.adminPasskeyCard {
margin-top: 8px;
}
.adminPasskeyBody {
gap: 16px;
}
.adminPasskeyHeader, .adminPasskeyEnrollRow, .adminPasskeyItem, .adminPasskeyRecoveryActions {
align-items: center;
gap: 12px;
min-width: 0;
display: flex;
}
.adminPasskeyHeader, .adminPasskeyItem {
justify-content: space-between;
}
.adminPasskeyHeader > div, .adminPasskeyItemMain, .adminPasskeyLabelField {
min-width: 0;
}
.adminPasskeyEnrollRow {
flex-wrap: wrap;
align-items: end;
}
.adminPasskeyLabelField {
flex: 280px;
}
.adminPasskeyList {
gap: 8px;
display: grid;
}
.adminPasskeyItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
min-height: 58px;
padding: 7px 0;
}
.adminPasskeyItemMain {
gap: 4px;
display: grid;
}
.adminPasskeyItemMain strong {
overflow-wrap: anywhere;
}
.adminPasskeyRecovery {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 12px;
padding-top: 14px;
display: grid;
}
.adminPasskeySectionHeading h3, .adminPasskeyRecovery h3 {
margin: 0;
font-size: 16px;
}
.adminPasskeyRecoveryActions {
flex-wrap: wrap;
}
.adminPasskeyRecoveryCodes {
border: 1px solid color-mix(in srgb, var(--focus), transparent 52%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--focus), white 94%);
gap: 8px;
padding: 12px;
display: grid;
}
.adminPasskeyRecoveryCodes p {
margin: 0;
font-weight: 700;
}
.adminPasskeyRecoveryCodes pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: var(--font-mono);
margin: 0;
line-height: 1.55;
}
.adminAuthSecurityPage .adminPasskeyRecovery {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.adminAuthSecurityPage .adminPasskeyRecoveryCodes {
grid-column: 1 / -1;
}
@media (max-width: 720px) {
.adminAuthSecurityPage .adminChoiceFieldGroup {
display: grid;
}
.adminAuthSecurityPage .adminSettingsFormFooter {
align-items: stretch;
}
.adminAuthSecurityPage .adminSettingsFormActions {
justify-content: flex-start;
width: 100%;
margin-left: 0;
}
.adminAuthSecurityPage .adminPasskeyRecovery {
grid-template-columns: minmax(0, 1fr);
}
}
.adminValidationSummary {
gap: 6px;
display: grid;
}
.adminFeedbackToastHost {
z-index: 3000;
pointer-events: none;
position: fixed;
top: 16px;
right: 16px;
}
.adminFeedbackToast {
pointer-events: auto;
border-radius: var(--radius);
width: min(440px, 100vw - 24px);
min-height: 54px;
box-shadow: var(--shadow-2);
border: 1px solid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
display: grid;
}
.adminFeedbackToastSuccess {
border-color: color-mix(in srgb, var(--focus), transparent 40%);
background: color-mix(in srgb, var(--focus), white 90%);
color: color-mix(in srgb, var(--fg), black 6%);
}
.adminFeedbackToastError {
border-color: color-mix(in srgb, var(--danger), transparent 40%);
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 12%);
}
.adminFeedbackToastIcon {
border: 1px solid;
border-radius: 999px;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 13px;
font-weight: 700;
display: inline-flex;
}
.adminFeedbackToastMessage {
min-width: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
@media (max-width: 640px) {
.adminFeedbackToastHost {
top: 10px;
left: 12px;
right: 12px;
}
.adminFeedbackToast {
width: 100%;
}
}
.adminValidationTitle {
font-weight: 700;
}
.adminValidationList {
gap: 4px;
margin: 0;
padding-left: 18px;
display: grid;
}
.adminSettingsForm {
gap: 10px;
display: grid;
}
.adminTemplateForm {
gap: 12px;
}
.adminTemplateFormLoading {
cursor: progress;
}
.adminTemplateFieldsGrid {
gap: 10px;
display: grid;
}
.adminTemplateField {
min-width: 0;
}
.adminTemplateBooleanField {
gap: 4px;
}
.adminBooleanFieldRow {
cursor: pointer;
width: fit-content;
max-width: 100%;
min-height: 30px;
color: inherit;
background: none;
border: 0;
align-items: center;
gap: 9px;
padding: 0;
display: inline-flex;
}
.adminBooleanFieldRow:focus-within {
outline: none;
}
.adminBooleanFieldRow input[type="checkbox"] {
flex: none;
width: 20px;
height: 20px;
margin: 0;
}
.adminBooleanFieldLabel {
color: color-mix(in srgb, var(--fg), black 4%);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
font-family: var(--font-sans);
letter-spacing: 0;
}
.adminBooleanFieldHint {
margin-left: 29px;
}
.adminChoiceFieldGroup {
gap: 10px;
display: grid;
}
.adminChoiceFieldOption {
cursor: pointer;
background: none;
border: 0;
border-radius: 0;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 12px;
width: fit-content;
max-width: 100%;
min-height: 32px;
padding: 0;
display: inline-grid;
}
.adminChoiceFieldOption:focus-within {
outline: none;
}
.adminChoiceFieldOption input[type="radio"] {
flex: none;
align-self: start;
width: 20px;
height: 20px;
margin: 1px 0 0;
}
.adminChoiceFieldMain {
gap: 4px;
min-width: 0;
display: grid;
}
.adminChoiceFieldLabel {
color: color-mix(in srgb, var(--fg), black 4%);
font-size: 15px;
font-weight: 600;
line-height: 1.25;
}
.adminChoiceFieldHint {
font-size: 12px;
line-height: 1.4;
}
.adminChoiceFieldOption.isChecked .adminChoiceFieldLabel {
font-weight: 700;
}
.adminSettingsLoadingRow, .adminSettingsLoadingChoice {
cursor: progress;
}
.adminSettingsSkeletonBox, .adminSettingsSkeletonInput, .adminSettingsSkeletonText {
background: linear-gradient(90deg,
color-mix(in srgb, var(--stroke), white 46%) 0%,
color-mix(in srgb, var(--bg-2), white 28%) 45%,
color-mix(in srgb, var(--stroke), white 46%) 100%);
background-size: 220% 100%;
border-radius: 999px;
animation: 1.2s ease-in-out infinite adminSettingsSkeletonPulse;
display: block;
}
.adminSettingsSkeletonInput {
border-radius: var(--radius);
width: 100%;
min-height: 44px;
}
.adminSettingsSkeletonTextarea {
border-radius: var(--radius);
min-height: 112px;
}
.adminSettingsSkeletonDurationInput {
flex: auto;
min-width: 0;
}
.adminSettingsSkeletonCheck, .adminSettingsSkeletonRadio {
flex: none;
width: 20px;
height: 20px;
}
.adminSettingsSkeletonRadio {
border-radius: 50%;
}
.adminSettingsSkeletonStepButton {
border-radius: var(--radius);
flex: none;
width: 42px;
min-height: 42px;
}
.adminSettingsSkeletonLabel {
width: min(210px, 62vw);
height: 17px;
}
.adminSettingsSkeletonHint {
width: min(420px, 76vw);
height: 12px;
}
@keyframes adminSettingsSkeletonPulse {
from {
background-position: 140% 0;
}
to {
background-position: -80% 0;
}
}
.adminSettingsFields {
gap: 10px;
display: grid;
}
.adminSettingsField {
margin-top: 0;
}
.adminRequiredMarker {
color: var(--danger);
font-weight: 700;
}
.adminSettingsFieldHint {
margin: 0;
font-size: 12px;
}
.adminSettingsDurationField {
width: min(100%, 230px);
}
.adminSettingsFieldError {
color: color-mix(in srgb, var(--danger), black 10%);
margin: 6px 0 0;
font-size: 12px;
line-height: 1.45;
}
.inputInvalid {
border-color: color-mix(in srgb, var(--danger), black 10%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger), transparent 35%);
}
.inputInvalid:focus-visible {
outline-color: color-mix(in srgb, var(--danger), white 20%);
}
.adminSettingsReadonlyCard {
border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
background: color-mix(in srgb, var(--card), white 45%);
border-radius: 12px;
gap: 6px;
padding: 12px 14px;
display: grid;
}
.adminSettingsReadonlyCard strong {
font-size: 14px;
line-height: 1.3;
}
.adminSettingsReadonlyCard p {
margin: 0;
}
.adminSettingsAccessDenied {
max-width: 760px;
}
.adminSettingsAccessDeniedBody {
grid-template-columns: 44px minmax(0, 1fr);
align-items: start;
gap: 14px;
display: grid;
}
.adminSettingsAccessDeniedIcon {
width: 44px;
height: 44px;
color: color-mix(in srgb, var(--danger), black 6%);
background: color-mix(in srgb, var(--danger), white 91%);
border: 1px solid color-mix(in srgb, var(--danger), white 58%);
border-radius: 12px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminSettingsAccessDenied h2 {
margin: 0 0 6px;
font-size: 20px;
line-height: 1.2;
}
.adminSettingsAccessDenied p, .adminSettingsAccessDeniedRequirement {
color: var(--muted);
margin: 0;
}
.adminSettingsAccessDeniedRequirement {
margin-top: 10px;
}
.adminSettingsAccessDeniedRequirement code {
border: 1px solid color-mix(in srgb, var(--line), transparent 12%);
background: color-mix(in srgb, var(--card), white 40%);
border-radius: 999px;
padding: 2px 6px;
}
.adminSettingsReadOnlyNotice {
border: 1px solid color-mix(in srgb, var(--focus), white 60%);
background: color-mix(in srgb, var(--focus), white 94%);
width: fit-content;
max-width: 100%;
color: color-mix(in srgb, var(--fg), var(--focus) 22%);
border-radius: 10px;
align-items: center;
gap: 8px;
padding: 8px 10px;
font-size: 13px;
line-height: 1.35;
display: inline-flex;
}
.adminSettingsReadOnlyNotice svg {
flex: none;
}
.adminObraMapBlock {
gap: 8px;
display: grid;
}
.adminObraMapLocationLabel {
margin: 0;
}
.adminObraMapActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminAddressAssistBlock {
gap: 8px;
display: grid;
}
.adminAddressAssistRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
display: grid;
}
@media (max-width: 760px) {
.adminAddressAssistRow {
grid-template-columns: minmax(0, 1fr);
}
}
.adminObraMapSuggestions {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
border-radius: var(--radius);
background: var(--bg);
max-height: 220px;
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
}
.adminObraMapSuggestionItem {
text-align: left;
width: 100%;
color: var(--fg);
cursor: pointer;
background: none;
border: 0;
min-height: 40px;
padding: 9px 11px;
}
.adminObraMapSuggestionItem:hover, .adminObraMapSuggestionItem:focus-visible {
background: color-mix(in srgb, var(--bg-2), var(--fg) 4%);
outline: none;
}
.adminObraMapCanvas {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
border-radius: var(--radius);
width: 100%;
height: min(56vh, 520px);
min-height: 420px;
overflow: hidden;
}
.adminObraMapShell {
z-index: 0;
isolation: isolate;
position: relative;
}
.adminObraMapFullscreenBtn {
z-index: 540;
place-items: center;
width: 38px;
height: 38px;
min-height: 38px;
padding: 0;
display: grid;
position: absolute;
top: 10px;
right: 10px;
}
.adminObraMapFullscreenIcon {
width: 18px;
height: 18px;
}
.adminObraMapWheelHint {
z-index: 530;
color: #fff;
text-align: center;
text-shadow: 0 2px 12px #00000073;
pointer-events: none;
background: #00000094;
justify-content: center;
align-items: center;
padding: 16px;
font-size: clamp(22px, 2.3vw, 34px);
font-weight: 900;
line-height: 1.2;
display: flex;
position: absolute;
inset: 0;
}
.adminObraMapShell:fullscreen {
background: color-mix(in srgb, var(--fg), black 22%);
width: 100%;
height: 100%;
}
.adminObraMapShell:fullscreen .adminObraMapCanvas {
border: 0;
border-radius: 0;
width: 100%;
height: 100%;
min-height: 100%;
}
.adminObraMapShell:fullscreen .adminObraMapFullscreenBtn {
top: 12px;
right: 12px;
}
.adminObraMapCanvas .leaflet-attribution-flag {
display: none !important;
}
.adminObraMapError {
color: var(--danger);
margin: 0;
font-size: 12px;
}
.adminObraOverviewBody {
gap: 10px;
display: grid;
}
.adminObraOverviewHeaderRow {
justify-content: space-between;
align-items: start;
gap: 12px;
display: flex;
}
.adminObraOverviewHeadingWrap {
gap: 2px;
min-width: 0;
display: grid;
}
.adminObraOverviewTitle {
margin: 0;
}
.adminObraOverviewToggle {
white-space: nowrap;
flex: none;
}
.adminObraOverviewVisibleCount {
margin: 0;
font-size: 13px;
line-height: 1.25;
}
.adminObraOverviewStatValue {
font-size: 13px;
}
.adminObraOverviewMapShell {
min-width: 0;
position: relative;
}
.adminObraOverviewMapCanvas {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 10%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 26%);
width: 100%;
height: min(54vh, 500px);
min-height: 340px;
overflow: hidden;
}
.adminObraOverviewMapCanvas .leaflet-attribution-flag {
display: none !important;
}
.adminObraOverviewEmpty {
margin: 0;
padding: 10px 0 2px;
}
.adminObraOverviewPopup {
gap: 5px;
min-width: min(320px, 66vw);
display: grid;
}
.adminObraOverviewPopupTitle, .adminObraOverviewPopupAddress {
margin: 0;
font-size: 13px;
line-height: 1.35;
}
.adminObraOverviewPopupAddress {
color: var(--muted);
}
.adminObraOverviewPopupLink {
color: var(--focus);
text-underline-offset: 2px;
font-size: 13px;
font-weight: 700;
text-decoration: underline;
}
.adminObraOverviewPopupLink:hover {
color: color-mix(in srgb, var(--focus), black 16%);
}
@media (max-width: 760px) {
.adminObraOverviewHeaderRow {
flex-direction: column;
align-items: stretch;
}
.adminObraOverviewToggle {
width: 100%;
}
.adminObraOverviewMapCanvas {
height: min(52vh, 420px);
min-height: 300px;
}
}
.adminSettingsInputWithSuffix {
position: relative;
}
.adminSettingsInputWithSuffixControl {
padding-right: 56px;
}
.adminSettingsInputSuffix {
letter-spacing: .03em;
color: var(--muted);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
font-size: 12px;
font-weight: 700;
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
}
.adminSettingsInlineLink {
color: var(--focus);
text-underline-offset: 2px;
text-decoration: underline;
}
.adminSettingsInlineLink:hover {
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminSettingsInlineLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 68%);
border-radius: 2px;
outline: none;
}
@media (min-width: 1080px) {
.adminTemplateFieldsGrid {
grid-template-columns: minmax(0, 1fr);
}
}
.adminSettingsTimezoneField {
position: relative;
}
.adminRegionalSettingsForm {
gap: 14px;
}
.adminRegionalCategory {
gap: 10px;
}
.adminRegionalCategoryHead {
gap: 4px;
display: grid;
}
.adminRegionalCategoryHead .adminSettingsChecklistTitle {
font-size: 18px;
line-height: 1.2;
}
.adminRegionalTopGrid, .adminRegionalSingleGrid, .adminRegionalFormatsGrid {
gap: 10px;
display: grid;
}
.adminTimezonePickerWrap {
position: relative;
}
.adminTimezoneTrigger {
text-align: left;
cursor: pointer;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-right: 10px;
display: flex;
}
.adminTimezoneTriggerChevron {
font-size: 12px;
}
.adminTimezoneDropdown {
z-index: 30;
background: var(--bg);
border: 1px solid var(--stroke);
box-shadow: var(--shadow-2);
border-radius: var(--radius);
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
overflow: hidden;
}
.adminTimezoneSearchWrap {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
background: var(--bg);
padding: 8px;
}
.adminTimezoneSearchInput {
min-height: 40px;
}
.adminTimezoneSuggestList {
max-height: 260px;
overflow: auto;
}
.adminTimezoneSuggestItem {
border: 0 solid #0000;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
width: 100%;
color: var(--fg);
text-align: left;
cursor: pointer;
font-family: var(--font-mono);
background: none;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 9px 10px;
font-size: 14px;
display: flex;
}
.adminTimezoneSuggestItem:first-child {
border-top: 0;
}
.adminTimezoneSuggestItem:hover, .adminTimezoneSuggestItem:focus-visible, .adminTimezoneSuggestItem.isSelected, .adminTimezoneSuggestItem.isActive {
background: color-mix(in srgb, var(--focus), white 92%);
}
.adminTimezoneSuggestItem:focus-visible {
outline: none;
}
.adminCountrySuggestItem {
font-family: inherit;
}
.adminTimezoneSelectedMark {
color: color-mix(in srgb, var(--accent), black 20%);
font-weight: 900;
}
.adminTimezoneSuggestEmpty {
color: var(--muted);
padding: 10px;
font-size: 13px;
}
.listboxRoot {
width: 100%;
min-width: 0;
position: relative;
}
.listboxTrigger {
text-align: left;
cursor: pointer;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
padding-right: 10px;
display: flex;
}
.listboxTriggerDisabled {
cursor: not-allowed;
}
.listboxChevron {
font-size: 12px;
}
.listboxMenu {
z-index: 30;
background: var(--bg);
border: 1px solid var(--stroke);
box-shadow: var(--shadow-2);
border-radius: var(--radius);
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
overflow: auto;
}
.listboxSearch {
z-index: 1;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg), white 75%);
padding: 10px;
position: sticky;
top: 0;
}
.listboxSearchInput {
min-height: 44px;
padding: 10px 12px;
}
.listboxEmpty {
color: var(--muted);
padding: 12px 14px 14px;
font-size: 14px;
}
.listboxGroupLabel {
color: var(--muted);
letter-spacing: .045em;
text-transform: uppercase;
padding: 10px 14px 6px;
font-size: 10px;
font-weight: 780;
line-height: 1.2;
}
.listboxOption + .listboxGroupLabel {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
margin-top: 4px;
padding-top: 12px;
}
.listboxOption {
text-align: left;
width: 100%;
min-height: 44px;
color: inherit;
cursor: pointer;
background: none;
border: 0;
align-items: center;
padding: 11px 14px;
font-size: 14px;
line-height: 1.35;
display: flex;
}
.listboxOptionActive {
background: color-mix(in srgb, var(--focus), white 92%);
}
.listboxOptionMono {
font-family: var(--font-mono);
}
.listboxOptionSans {
font-family: var(--font-sans);
}
.listboxOptionRow {
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
display: flex;
}
.listboxOptionCheck {
color: color-mix(in srgb, var(--accent), black 20%);
font-weight: 900;
}
.listboxOptionLabelWrap {
align-items: center;
gap: 8px;
min-width: 0;
display: inline-flex;
}
.listboxOption .listboxOptionLabelWrap > span {
overflow-wrap: anywhere;
}
.listboxOptionIcon {
width: 16px;
height: 11px;
}
.adminCompanyIdentityTopGrid {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 12px;
display: grid;
}
.adminCompanyDocumentIdentity {
gap: 8px;
display: grid;
}
.adminCompanyDocumentIdentityTitle {
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
font-size: 13px;
line-height: 1.3;
}
.adminCompanyDocumentIdentityRows {
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
display: grid;
}
.adminCompanyInvoiceDocumentFields {
margin-top: 6px;
}
.adminCompanyInvoiceDocumentFields .adminSettingsTextarea {
min-height: 88px;
}
.adminCompanyDocumentRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
grid-template-columns: 176px minmax(0, 1fr);
align-items: center;
gap: 16px;
padding: 14px 0;
display: grid;
}
.adminCompanyDocumentRow:first-child {
border-top: 0;
}
.adminCompanyDocumentThumb {
width: 176px;
min-height: 96px;
}
.adminCompanyDocumentLogoCanvas, .adminCompanySignatureReveal {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 20%);
border-radius: var(--radius);
background: #fff;
place-items: center;
width: 100%;
height: 96px;
padding: 0;
display: grid;
overflow: hidden;
}
.adminCompanySignatureReveal {
min-height: 96px;
color: var(--fg);
cursor: pointer;
transition: border-color .14s, background-color .14s, box-shadow .14s;
position: relative;
}
.adminCompanyDocumentLogoCanvas img {
object-fit: contain;
object-position: center center;
width: calc(100% - 16px);
height: calc(100% - 16px);
display: block;
}
.adminCompanySignatureReveal img {
box-sizing: border-box;
object-fit: contain;
object-position: center center;
width: calc(100% - 16px);
height: calc(100% - 16px);
display: block;
position: absolute;
inset: 8px;
}
.adminCompanySignatureReveal:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), white 30%);
background: color-mix(in srgb, var(--focus), white 96%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 86%);
}
.adminCompanySignatureReveal:disabled {
cursor: not-allowed;
opacity: .72;
}
.adminCompanySignatureReveal.isEmpty {
cursor: default;
}
.adminCompanySignatureRevealContent {
color: var(--muted);
text-align: center;
justify-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
display: grid;
}
.adminCompanySignatureEye {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
background: color-mix(in srgb, var(--bg-2), white 42%);
width: 36px;
height: 36px;
color: color-mix(in srgb, var(--fg), var(--focus) 22%);
border-radius: 999px;
place-items: center;
display: grid;
}
.adminCompanyDocumentPlaceholder {
color: var(--muted);
text-align: center;
font-size: 12px;
}
.adminCompanyDocumentInfo {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-width: 0;
display: grid;
}
.adminCompanySignatureInfo {
gap: 5px;
min-width: 0;
display: grid;
}
.adminCompanySignatureDocumentRow {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 8px;
}
.adminCompanySignatureWorkbench {
grid-template-columns: minmax(184px, 210px) minmax(0, 1fr);
align-items: start;
gap: 16px;
min-width: 0;
display: grid;
}
.adminCompanySignatureWorkbench.isUpload {
align-items: start;
}
.adminCompanySignatureCurrent {
background: none;
border: 0;
border-radius: 0;
align-content: start;
gap: 4px;
min-width: 0;
padding: 0;
display: grid;
}
.adminCompanySignatureCurrent .adminCompanySignatureReveal {
width: 100%;
height: 104px;
min-height: 104px;
}
.adminCompanySignatureEditor {
background: none;
border: 0;
border-radius: 0;
align-content: start;
gap: 12px;
width: 100%;
min-width: 0;
min-height: 0;
padding: 0;
display: grid;
}
.adminCompanySignatureEditor.isUpload {
grid-template-columns: max-content minmax(0, 1fr);
align-content: center;
align-items: center;
column-gap: 24px;
}
.adminCompanySignatureEditor.isUpload .adminCompanySignatureWorkspace {
width: 100%;
}
.adminCompanySignatureEditor.isDraw .adminCompanySignatureWorkspace {
width: min(100%, 860px);
}
.adminCompanySignatureWorkspace {
width: min(100%, 760px);
min-width: 0;
}
.adminCompanySignatureMode {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 12%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 28%);
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-self: start;
gap: 2px;
width: max-content;
max-width: 100%;
padding: 3px;
display: inline-grid;
}
.adminCompanySignatureModeButton {
border-radius: calc(var(--radius) - 3px);
min-width: 132px;
min-height: 44px;
color: var(--muted);
font: inherit;
cursor: pointer;
background: none;
border: 0;
padding: 8px 16px;
font-weight: 700;
}
.adminCompanySignatureModeButton.isActive {
color: color-mix(in srgb, var(--focus), black 18%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), white 44%),
0 1px 2px color-mix(in srgb, var(--fg), transparent 92%);
background: #fff;
}
.adminCompanySignatureModeButton:disabled {
cursor: not-allowed;
opacity: .65;
}
.adminCompanySignatureModeButton:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 70%);
outline: none;
}
.adminCompanySignatureRemoveAction {
width: 100%;
min-height: 44px;
color: color-mix(in srgb, var(--danger), black 10%);
background: none;
border-color: #0000;
justify-content: flex-start;
gap: 8px;
padding: 8px;
}
.adminCompanySignatureRemoveAction:hover:not(:disabled) {
background: color-mix(in srgb, var(--danger), white 94%);
color: color-mix(in srgb, var(--danger), black 16%);
border-color: #0000;
}
.adminCompanySignatureUploadPanel {
background: none;
border: 0;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 0;
display: grid;
}
.adminCompanySignatureUploadIcon {
background: color-mix(in srgb, var(--focus), white 88%);
width: 38px;
height: 38px;
color: color-mix(in srgb, var(--focus), black 12%);
border-radius: 999px;
place-items: center;
display: grid;
}
.adminCompanySignatureUploadCopy {
gap: 2px;
min-width: 0;
display: grid;
}
.adminCompanySignatureUploadCopy strong {
color: var(--fg);
font-size: 14px;
line-height: 1.3;
}
.adminCompanySignatureUploadCopy span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminCompanySignatureChooseFileAction {
min-width: 132px;
}
.adminCompanyDocumentActions {
grid-template-columns: repeat(2, minmax(112px, 1fr));
gap: 10px;
min-width: 250px;
display: grid;
}
.adminCompanyDocumentActions .btn {
justify-content: center;
min-width: 0;
min-height: 42px;
padding-left: 14px;
padding-right: 14px;
}
.adminCompanyLogoInput {
display: none;
}
.adminCompanySignaturePadRoot {
gap: 10px;
display: grid;
}
.adminCompanySignaturePadCanvas {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 20%);
border-radius: var(--radius);
touch-action: none;
background: #fff;
width: 100%;
min-height: 180px;
}
.adminCompanySignaturePadFooter {
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
display: flex;
}
.adminCompanySignaturePadFooter .btn {
justify-content: center;
min-width: 132px;
}
.adminCompanySignatureMeta {
margin: -2px 0 0;
font-size: 12px;
}
.adminCompanyLogoError {
color: color-mix(in srgb, var(--danger), black 8%);
margin: 0;
font-size: 12px;
}
.adminCompanyTopFields, .adminCompanyContactFields, .adminCompanyAddressFields {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
display: grid;
}
.adminCompanyContactFields > .adminSettingsFields {
grid-template-columns: minmax(0, 1fr);
}
.adminCompanyPhoneInputs {
grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
align-items: start;
gap: 10px;
display: grid;
}
.adminCompanyPhoneSubfield {
gap: 6px;
min-width: 0;
display: grid;
}
.adminCompanyPhoneSubfield > span {
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
font-size: 11px;
line-height: 1.2;
}
.adminCompanyPhonePrefixField {
position: relative;
}
.adminCompanyPhonePrefixTrigger {
text-align: left;
cursor: pointer;
justify-content: space-between;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 8px 11px;
transition: border-color .14s, box-shadow .14s, background-color .14s;
display: flex;
}
.adminCompanyPhonePrefixTrigger.isOpen {
border-color: color-mix(in srgb, var(--focus), white 12%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
}
.adminCompanyPhonePrefixTrigger:disabled {
cursor: not-allowed;
}
.adminCompanyPhonePrefixValue, .adminCompanyPhonePrefixOptionLabel {
align-items: center;
gap: 8px;
min-width: 0;
display: inline-flex;
}
.adminCompanyPhoneFlag {
flex: none;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 20px;
line-height: 1;
display: inline-flex;
}
.adminCompanyPhonePrefixCode {
color: var(--fg);
letter-spacing: 0;
flex: none;
font-weight: 800;
}
.adminCompanyPhonePrefixSeparator {
color: var(--muted);
flex: none;
}
.adminCompanyPhonePrefixCountry {
min-width: 0;
color: var(--fg);
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 650;
overflow: hidden;
}
.adminCompanyPhonePrefixChevron {
color: var(--muted);
flex: none;
font-size: 13px;
transition: transform .14s;
}
.adminCompanyPhonePrefixTrigger.isOpen .adminCompanyPhonePrefixChevron {
transform: rotate(180deg);
}
.adminCompanyPhonePrefixMenu {
z-index: 30;
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 12%);
border-radius: calc(var(--radius) + 2px);
width: max(100%, 292px);
max-height: 276px;
box-shadow: 0 16px 34px color-mix(in srgb, var(--shadow), transparent 72%);
background: #fff;
padding: 6px;
position: absolute;
top: calc(100% + 6px);
left: 0;
overflow: auto;
}
.adminCompanyPhonePrefixOption {
border-radius: calc(var(--radius) - 2px);
width: 100%;
min-height: 44px;
color: var(--fg);
cursor: pointer;
font: inherit;
text-align: left;
background: none;
border: 0;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 9px;
display: flex;
}
.adminCompanyPhonePrefixOption:hover, .adminCompanyPhonePrefixOption.isActive {
background: color-mix(in srgb, var(--focus), white 92%);
}
.adminCompanyPhonePrefixOption.isSelected {
background: color-mix(in srgb, var(--focus), white 88%);
}
.adminCompanyPhonePrefixOption.isSelected .adminCompanyPhonePrefixCountry, .adminCompanyPhonePrefixOption.isSelected .adminCompanyPhonePrefixCode {
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminCompanyPhonePrefixCheck {
color: color-mix(in srgb, var(--focus), black 12%);
flex: none;
font-weight: 900;
}
.adminCompanyAddressFields .adminSettingsField:first-child {
grid-column: auto;
}
.adminVehiclePhotoField {
gap: 8px;
}
.adminVehicleProfileSection {
gap: 14px;
margin-bottom: 16px;
display: grid;
}
.adminVehicleProfileTop {
align-items: start;
gap: 14px;
display: grid;
}
.adminVehicleProfilePreviewFrame {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: calc(var(--radius) + 2px);
background: linear-gradient(135deg, color-mix(in srgb, var(--bg-2), white 55%), color-mix(in srgb, var(--bg), var(--focus) 3%));
place-items: center;
min-height: 220px;
display: grid;
overflow: hidden;
}
.adminVehicleProfilePreviewImage {
object-fit: contain;
background: #fff;
width: 100%;
height: 100%;
max-height: 280px;
display: block;
}
.adminVehicleProfilePreviewPlaceholder {
color: var(--muted);
font-size: 14px;
}
.adminVehicleProfileSummary {
gap: 8px;
min-width: 0;
display: grid;
}
.adminVehicleProfileEyebrow {
letter-spacing: .12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted), var(--fg) 8%);
margin: 0;
font-size: 12px;
}
.adminVehicleProfileTitle {
font-family: var(--font-condensed);
letter-spacing: .01em;
margin: 0;
font-size: clamp(28px, 4vw, 40px);
line-height: .98;
}
.adminVehicleProfilePlate {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.adminVehicleProfilePills {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminVehiclePhotoUploadSurface {
border: 1px dashed color-mix(in srgb, var(--focus), white 34%);
border-radius: calc(var(--radius) + 6px);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg), white 12%), color-mix(in srgb, var(--bg-2), white 22%));
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 18px 20px;
display: grid;
}
.adminVehiclePhotoUploadIcon {
background: color-mix(in srgb, var(--focus), white 86%);
width: 66px;
height: 66px;
color: color-mix(in srgb, var(--focus), black 6%);
border-radius: 999px;
place-items: center;
font-size: 42px;
font-weight: 400;
line-height: 1;
display: grid;
}
.adminVehiclePhotoUploadCopy {
gap: 4px;
min-width: 0;
display: grid;
}
.adminVehiclePhotoUploadCopy strong {
font-size: 18px;
line-height: 1.2;
}
.adminVehiclePhotoUploadFormats {
letter-spacing: .06em;
text-transform: uppercase;
font-size: 12px;
}
.adminVehiclePhotoUploadActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: flex;
}
.adminVehiclePhotoPanel {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
place-items: center;
width: min(100%, 420px);
min-height: 108px;
display: grid;
overflow: hidden;
}
.adminVehiclePhotoPreview {
object-fit: contain;
background: #fff;
width: 100%;
max-height: 220px;
display: block;
}
.adminVehiclePhotoPlaceholder {
color: var(--muted);
font-size: 12px;
}
.adminVehiclePhotoActions {
width: fit-content;
}
.adminVehicleItvDropzone {
min-height: 136px;
}
.adminVehicleItvDropzone.hasReport {
border-style: solid;
border-color: color-mix(in srgb, var(--focus), transparent 18%);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 92%), color-mix(in srgb, #fff, var(--focus) 5%));
}
.adminVehicleItvDropzone.isUploading {
cursor: wait;
opacity: .82;
}
.adminVehicleItvDropzone[aria-disabled="true"] {
cursor: default;
}
.adminVehicleItvDropzoneIcon {
flex-shrink: 0;
}
.adminVehicleItvDropzone.hasReport .adminVehicleItvDropzoneIcon {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
background: #fff;
border-radius: 12px;
}
.adminVehicleItvDropzoneFileIcon {
width: 36px;
height: 36px;
}
.adminVehicleItvDropzoneText strong {
color: color-mix(in srgb, var(--fg), black 8%);
}
.adminVehicleItvDropzoneActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: inline-flex;
}
.adminVehicleItvReportList {
grid-column: 1 / -1;
gap: 8px;
width: 100%;
display: grid;
}
.adminVehicleItvReportMeta {
border: 1px solid color-mix(in srgb, var(--focus), transparent 48%);
background: #fff;
border-radius: 10px;
grid-column: 1 / -1;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
margin-top: 2px;
padding: 10px 12px;
display: grid;
box-shadow: 0 1px #0f172a08;
}
.adminVehicleItvReportMetaBadge {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
background: #fff;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
padding: 2px;
display: inline-flex;
}
.adminVehicleItvReportMetaIcon {
width: 34px;
height: 34px;
}
.adminVehicleItvReportMetaText {
gap: 2px;
min-width: 0;
display: grid;
}
.adminVehicleItvReportMetaText strong {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminVehicleItvReportMetaActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminVehicleItvDropzoneClearBtn {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 10%);
width: 40px;
height: 40px;
color: var(--fg);
font-family: var(--font-mono);
cursor: pointer;
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
font-size: 18px;
line-height: 1;
transition: border-color .14s, background-color .14s, color .14s;
display: inline-flex;
}
.adminVehicleItvDropzoneClearBtn:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--danger), transparent 32%);
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 10%);
}
.adminVehicleItvDropzoneClearBtn:disabled {
cursor: not-allowed;
opacity: .6;
}
.adminVehicleHistoryReportLinks {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: inline-flex;
}
@media (min-width: 1080px) {
.adminVehicleProfileTop {
grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}
}
@media (max-width: 1199px) {
.adminCompanySignatureWorkbench {
grid-template-columns: minmax(176px, 200px) minmax(0, 1fr);
}
}
@media (max-width: 1280px) {
.adminCompanySignatureEditor.isUpload {
grid-template-columns: minmax(0, 1fr);
align-content: center;
row-gap: 12px;
}
.adminCompanySignatureEditor.isUpload .adminCompanySignatureWorkspace {
width: min(100%, 760px);
}
}
@media (max-width: 640px) {
.adminCompanyDocumentActions {
grid-template-columns: minmax(0, 1fr);
}
.adminCompanySignatureWorkbench .adminCompanySignatureCurrent {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.adminCompanySignatureWorkbench .adminCompanySignatureRemoveAction {
justify-self: start;
width: 100%;
}
.adminCompanySignatureUploadPanel {
grid-template-columns: 40px minmax(0, 1fr);
}
.adminCompanySignatureChooseFileAction {
grid-column: 1 / -1;
width: 100%;
}
.adminCompanySignaturePadFooter .btn {
flex: 132px;
}
.adminCompanyPhoneInputs {
grid-template-columns: minmax(0, 1fr);
}
.adminCompanyPhonePrefixMenu {
width: 100%;
}
}
@media (max-width: 900px) {
.adminCompanyDocumentRow, .adminCompanyDocumentInfo {
grid-template-columns: minmax(0, 1fr);
}
.adminCompanyDocumentThumb, .adminCompanyDocumentLogoCanvas, .adminCompanySignatureReveal {
width: 100%;
}
.adminCompanySignatureWorkbench {
grid-template-columns: minmax(0, 1fr);
}
.adminCompanySignatureCurrent {
grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
align-items: center;
}
.adminCompanySignatureRemoveAction {
justify-self: start;
width: auto;
}
.adminCompanyDocumentActions {
min-width: 0;
}
.adminVehiclePhotoUploadSurface {
grid-template-columns: 1fr;
justify-items: start;
}
.adminVehiclePhotoUploadActions, .adminVehicleItvDropzoneActions {
justify-content: flex-start;
}
.adminVehicleItvReportMeta {
grid-template-columns: auto minmax(0, 1fr);
}
.adminVehicleItvReportMetaActions {
grid-column: 1 / -1;
justify-content: flex-start;
}
}
.adminSettingsTextarea {
resize: vertical;
min-height: 120px;
}
.adminSettingsTextareaCompact {
min-height: 96px;
}
.adminSettingsTextarea.adminCompanyLegalTextarea {
font-family: var(--font-sans);
field-sizing: content;
min-height: 44px;
font-size: 14px;
line-height: 1.5;
}
.adminSettingsField:has( > .adminCompanyLegalTextarea[name="legalFooterText"]) {
contain: inline-size;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
.adminCompanyLegalTextarea[name="legalFooterText"] {
resize: both;
width: 900px;
min-width: min(240px, 100%);
max-width: 100%;
}
.adminSettingsIntro {
margin: 0;
}
.adminSettingsFormFooter {
gap: 10px;
margin-top: 6px;
display: grid;
}
.adminSettingsFormActions {
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
display: flex;
}
.adminSettingsPendingPill {
min-height: 36px;
margin-right: auto;
}
.adminSettingsFormMeta {
text-align: right;
margin: 0;
font-size: 12px;
}
.adminSettingsChecklistTitle {
margin: 0;
font-size: 20px;
}
.adminSettingsChecklist {
gap: 6px;
margin: 0;
padding-left: 18px;
display: grid;
}
.adminSettingsOrdinaryPage .adminSettingsChecklistTitle {
font-size: 18px;
line-height: 1.25;
}
.adminSettingsOrdinaryPage .adminSettingsFormFooter {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px 16px;
margin-top: 4px;
padding-top: 14px;
display: flex;
}
.adminSettingsOrdinaryPage .adminSettingsFormActions {
margin-left: auto;
}
.adminSettingsOrdinaryPage .adminSettingsFormMeta {
text-align: left;
order: -1;
}
.adminSettingsPolicyPage .adminTemplateForm {
gap: 0;
}
.adminSettingsPolicyPage .adminSettingsCategory {
gap: 12px;
padding-bottom: 18px;
}
.adminSettingsPolicyPage .adminSettingsCategory + .adminSettingsCategory {
padding-top: 18px;
}
.adminSettingsPolicyPage .adminSettingsCategory:last-child {
padding-bottom: 0;
}
.adminSettingsPolicyPage .adminTemplateFieldsGrid {
gap: 14px 22px;
}
.adminSettingsPolicyPage .adminSettingsFieldHint {
max-width: 72ch;
}
.adminSettingsSecurityPage .adminTemplateField:not(.adminTemplateFieldFull), .adminSettingsSecurityPage .adminTemplateField:not(.adminTemplateFieldFull) > .input {
max-width: none;
}
@media (min-width: 900px) {
.adminSettingsPolicyPage .adminTemplateFieldsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminSettingsPolicyPage .adminTemplateFieldFull:not(.adminTemplateBooleanField) {
grid-column: 1 / -1;
}
.adminAppearanceSettingsPage .adminAppearanceColorGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 28px;
}
}
@media (max-width: 640px) {
.adminSettingsOrdinaryPage .adminSettingsFormFooter {
align-items: stretch;
display: grid;
}
.adminSettingsOrdinaryPage .adminSettingsFormActions {
width: 100%;
margin-left: 0;
}
.adminSettingsOrdinaryPage .adminSettingsFormMeta {
text-align: right;
order: 2;
}
.adminAppearanceSettingsPage .adminSidebarStyleCard {
grid-template-columns: 78px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 0;
padding: 10px 40px 10px 10px;
}
.adminAppearanceSettingsPage .adminSidebarStylePreview {
border-radius: 8px;
max-width: 78px;
padding: 10px 9px;
}
.adminAppearanceSettingsPage .adminSidebarStyleCard input[type="radio"] {
top: 12px;
right: 12px;
}
}
.adminCompanyCalendarGridWrap {
gap: 12px;
min-width: 0;
display: grid;
}
.adminCompanyCalendarWeekendSwatch {
background: color-mix(in srgb, var(--bg), var(--fg) 2%);
border: 1px solid var(--stroke);
}
.adminCompanyCalendarPanelBody {
gap: 12px;
display: grid;
}
.adminCompanyCalendarPanel {
box-shadow: none;
background: var(--bg-2);
}
.adminCompanyCalendarPanelTopRow {
gap: 10px;
display: grid;
}
.adminCompanyCalendarPanelTopRowOpen {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.adminCompanyCalendarPanelHeader {
gap: 2px;
display: grid;
}
.adminCompanyCalendarPanelDate {
font-size: 18px;
}
.adminCompanyCalendarHint {
font-size: 13px;
}
.adminCompanyCalendarPanelTopActions {
width: 100%;
}
.adminCompanyCalendarActionLane {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 10px;
width: 100%;
display: flex;
}
.adminCompanyCalendarSelectedInput {
border: 1px solid var(--stroke);
border-radius: var(--radius);
width: 176px;
min-height: 36px;
color: var(--fg);
background: #fff;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 0 11px;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: inline-flex;
}
.adminCompanyCalendarSelectedInput .mono {
margin-left: auto;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.adminCompanyCalendarSelectedLabel {
white-space: nowrap;
}
.adminCompanyCalendarCloseBtn {
white-space: nowrap;
width: 176px !important;
min-width: 176px !important;
min-height: 36px !important;
padding: 0 11px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.adminCompanyCalendarEditorGrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 10px;
display: grid;
}
.adminCompanyCalendarToggleField {
gap: 2px;
margin: 0;
display: grid;
}
.adminCompanyCalendarToggleField .adminBooleanFieldRow {
align-items: center;
min-height: 44px;
}
.adminCompanyCalendarToggleField .adminBooleanFieldHint {
margin-left: 0;
}
.adminCompanyCalendarFieldHint {
margin: 1px 2px 0;
font-size: 13px;
line-height: 1.35;
}
.adminCompanyCalendarBulkBody {
gap: 12px;
display: grid;
}
.adminCompanyCalendarBulkActions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
display: flex;
}
.adminCompanyCalendarBulkActions .btn, .adminCompanyCalendarPanelTopActions .btn {
width: auto;
min-width: 0;
}
.adminCompanyCalendarCompactBtn {
min-height: 36px !important;
padding: 7px 12px !important;
font-size: 14px !important;
}
.adminCompanyCalendarInfoPill {
background: var(--bg-2);
border: 1px solid var(--stroke);
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 10px;
min-height: 44px;
padding: 10px 12px;
display: grid;
}
.adminCompanyCalendarInfoIcon {
width: 18px;
height: 18px;
color: var(--muted);
place-items: center;
font-size: 14px;
line-height: 1;
display: inline-grid;
}
.adminCompanyCalendarInfoText {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}
.adminCompanyCalendarLegendSwatch--holiday {
background: var(--calendar-holiday-base);
border: 1px solid var(--calendar-holiday-border);
}
.adminCompanyCalendarLegendSwatch--dayOff {
background: var(--calendar-day-off-base);
border: 1px solid var(--calendar-day-off-border);
}
.adminSettingsHistoryBody {
gap: 10px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminSettingsHistoryList {
max-height: min(650px, calc(100vh - var(--admin-shell-header-height) - 210px));
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: #fff;
gap: 0;
min-width: 0;
min-height: 240px;
display: grid;
overflow: auto;
}
.adminSettingsHistoryList .adminSettingsHistoryItem {
background: #fff;
border: 0;
border-radius: 0;
gap: 10px;
min-width: 0;
padding: 12px;
display: grid;
overflow: visible;
}
.adminSettingsHistoryList .adminSettingsHistoryItem + .adminSettingsHistoryItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminSettingsHistoryItemHeader {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
min-width: 0;
display: flex;
}
.adminSettingsHistorySummary {
color: var(--fg);
overflow-wrap: anywhere;
margin: 0;
font-weight: 700;
line-height: 1.35;
}
.adminSettingsHistoryItemMeta {
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminSettingsHistoryItemMeta > span {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.adminSettingsHistoryPage {
gap: 18px;
}
.adminSettingsHistorySurface {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 5%);
border-radius: var(--radius);
width: 100%;
min-width: 0;
box-shadow: none;
background: #fff;
overflow: hidden;
}
.adminSettingsHistoryState {
margin: 0;
padding: 18px 20px;
}
.adminSettingsHistoryResultHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 0 16px;
display: flex;
}
.adminSettingsHistoryResultHead strong {
color: var(--fg);
font-size: 14px;
font-weight: 800;
line-height: 1.2;
}
.adminSettingsHistoryActiveFilter {
min-width: 0;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
justify-content: flex-end;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 760;
line-height: 1.2;
display: inline-flex;
}
.adminSettingsHistoryActiveFilter span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminSettingsHistoryTableHeader, .adminSettingsHistoryRow {
grid-template-columns: minmax(240px, 1.08fr) 58px minmax(146px, .72fr) minmax(120px, .62fr) minmax(0, 1.3fr) minmax(136px, auto);
align-items: center;
gap: 14px;
min-width: 0;
display: grid;
}
.adminSettingsHistoryTableHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
padding: 13px 16px;
font-size: 12px;
font-weight: 780;
line-height: 1.2;
}
.adminSettingsHistoryTableHeader span:last-child {
justify-self: end;
}
@media (max-width: 1180px) and (min-width: 901px) {
.adminSettingsHistoryTableHeader, .adminSettingsHistoryRow {
grid-template-columns: minmax(170px, 1fr) 46px minmax(112px, .68fr) minmax(96px, .58fr) minmax(0, .95fr) minmax(92px, auto);
gap: 10px;
padding-left: 12px;
padding-right: 12px;
}
.adminSettingsHistoryAction {
justify-self: end;
}
}
.adminSettingsHistoryRows {
background: #fff;
min-width: 0;
display: grid;
}
.adminSettingsHistoryItem {
background: #fff;
border: 0;
min-width: 0;
display: grid;
}
.adminSettingsHistoryItem + .adminSettingsHistoryItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
}
.adminSettingsHistoryRow {
width: 100%;
min-height: 58px;
color: var(--fg);
font: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
padding: 10px 16px;
}
.adminSettingsHistoryRow:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminSettingsHistoryRow:focus-visible {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--focus), transparent 54%);
outline: none;
}
.adminSettingsHistoryItem.isExpanded .adminSettingsHistoryRow {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminSettingsHistorySectionChip {
background: color-mix(in srgb, var(--bg-2), white 42%);
min-width: 0;
max-width: 100%;
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
justify-self: start;
}
.adminSettingsHistorySectionChip span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminSettingsHistoryVersion {
color: var(--fg);
text-align: center;
justify-self: start;
font-size: 13px;
line-height: 1.3;
}
.adminSettingsHistoryDate, .adminSettingsHistoryActor, .adminSettingsHistoryReason {
min-width: 0;
color: var(--fg);
font-size: 13px;
line-height: 1.35;
}
.adminSettingsHistoryReason {
color: color-mix(in srgb, var(--muted), var(--fg) 20%);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminSettingsHistoryAction {
min-width: 0;
max-width: 100%;
color: var(--focus);
white-space: nowrap;
justify-content: flex-end;
justify-self: end;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 780;
line-height: 1.25;
display: inline-flex;
}
.adminSettingsHistoryAction span {
text-overflow: ellipsis;
min-width: 0;
overflow: hidden;
}
.adminSettingsHistoryActionIcon {
flex: none;
transition: transform .14s;
}
.adminSettingsHistoryItem.isExpanded .adminSettingsHistoryActionIcon {
transform: rotate(90deg);
}
.adminSettingsHistoryDetailRow {
background: color-mix(in srgb, var(--focus), white 97%);
gap: 8px;
min-width: 0;
padding: 0 16px 16px;
display: grid;
}
.adminSettingsHistoryValueLabel {
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
font-size: 12px;
font-weight: 760;
line-height: 1.2;
}
.adminSettingsHistoryValue {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
width: 100%;
min-width: 0;
max-width: 100%;
max-height: min(360px, 48vh);
color: color-mix(in srgb, var(--fg), black 4%);
white-space: pre;
background: #fff;
border-radius: 8px;
margin: 0;
padding: 12px;
font-size: 12px;
line-height: 1.45;
overflow: auto;
}
@media (max-width: 900px) {
.adminSettingsHistoryPage {
gap: 20px;
}
.adminSettingsHistoryResultHead {
min-height: 80px;
padding: 0 26px;
}
.adminSettingsHistoryResultHead strong, .adminSettingsHistoryActiveFilter {
font-size: 20px;
}
.adminSettingsHistoryTableHeader {
display: none;
}
.adminSettingsHistoryRow {
grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto);
grid-template-areas: "section section action"
"version date action"
"actor actor action"
"reason reason reason";
gap: 9px 12px;
min-height: 146px;
padding: 24px 20px;
}
.adminSettingsHistorySectionChip {
grid-area: section;
gap: 6px;
min-height: 44px;
padding: 8px 10px;
font-size: 14px;
}
.adminSettingsHistorySectionChip span {
text-overflow: clip;
white-space: normal;
overflow: visible;
}
.adminSettingsHistoryVersion {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 38%);
border-radius: 999px;
grid-area: version;
min-width: 54px;
min-height: 40px;
padding: 8px 12px;
font-size: 16px;
}
.adminSettingsHistoryDate {
grid-area: date;
}
.adminSettingsHistoryActor {
grid-area: actor;
}
.adminSettingsHistoryReason {
grid-area: reason;
}
.adminSettingsHistoryDate, .adminSettingsHistoryActor, .adminSettingsHistoryReason {
font-size: 15px;
}
.adminSettingsHistoryAction {
text-align: right;
white-space: normal;
grid-area: action;
place-self: center end;
max-width: 104px;
font-size: 15px;
line-height: 1.25;
}
.adminSettingsHistoryDetailRow {
padding: 0 26px 24px;
}
.adminSettingsHistoryValue {
white-space: pre;
max-height: 300px;
}
}
@media (max-width: 480px) {
.adminSettingsHistoryResultHead {
min-height: 80px;
padding: 0 26px;
}
.adminSettingsHistoryResultHead strong, .adminSettingsHistoryActiveFilter {
font-size: 18px;
}
.adminSettingsHistoryRow {
grid-template-columns: auto minmax(0, 1fr) minmax(92px, auto);
gap: 9px 10px;
padding: 24px 20px;
}
.adminSettingsHistorySectionChip {
font-size: 13px;
}
.adminSettingsHistoryDate, .adminSettingsHistoryActor, .adminSettingsHistoryReason {
font-size: 14px;
}
.adminSettingsHistoryAction {
max-width: 98px;
font-size: 14px;
}
}
.adminDataQualityPage {
--data-quality-border: color-mix(in srgb, var(--stroke), transparent 18%);
--data-quality-soft-border: color-mix(in srgb, var(--stroke), transparent 28%);
--data-quality-row-bg: color-mix(in srgb, #fff, var(--bg) 20%);
gap: 12px;
width: 100%;
max-width: none;
display: grid;
}
.adminDataQualityPage .adminHeaderBody {
width: 100%;
}
.adminDataQualityPage .adminSettingsIntro {
max-width: 74ch;
color: color-mix(in srgb, var(--muted), var(--fg) 8%);
font-size: 16px;
line-height: 1.45;
}
.adminDataQualityRefreshButton {
min-height: 44px;
box-shadow: 0 8px 18px color-mix(in srgb, var(--focus), transparent 84%);
border-radius: 8px;
gap: 8px;
padding-inline: 16px;
}
.adminDataQualityRefreshButton svg {
flex: none;
}
.adminDataQualitySummaryCard, .adminDataQualityGroupCard {
border: 1px solid var(--data-quality-border);
width: 100%;
max-width: none;
box-shadow: none;
background: #fff;
border-radius: 10px;
}
.adminDataQualitySummaryBody {
gap: 14px;
min-width: 0;
padding: 16px;
display: grid;
}
.adminDataQualityMetricGrid {
grid-template-columns: minmax(238px, 1.45fr) repeat(5, minmax(118px, 1fr));
gap: 10px;
min-width: 0;
display: grid;
}
.adminDataQualityMetric {
border: 1px solid var(--data-quality-soft-border);
background: #fff;
border-radius: 8px;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
min-height: 62px;
padding: 11px 12px;
display: grid;
}
.adminDataQualityMetricIcon {
width: 31px;
height: 31px;
color: color-mix(in srgb, var(--focus), black 6%);
background: color-mix(in srgb, var(--focus), white 91%);
border-radius: 8px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminDataQualityMetric.isTotal .adminDataQualityMetricIcon {
color: color-mix(in srgb, var(--ok), black 2%);
background: color-mix(in srgb, var(--ok), white 92%);
}
.adminDataQualityMetric.isCritical .adminDataQualityMetricIcon {
color: color-mix(in srgb, var(--danger), black 4%);
background: color-mix(in srgb, var(--danger), white 91%);
}
.adminDataQualityMetric.isWarning .adminDataQualityMetricIcon {
color: color-mix(in srgb, var(--accent), black 24%);
background: color-mix(in srgb, var(--accent), white 88%);
}
.adminDataQualityMetric.isGroups .adminDataQualityMetricIcon {
color: color-mix(in srgb, var(--focus), black 4%);
background: color-mix(in srgb, var(--focus), white 92%);
}
.adminDataQualityMetric.isChecks .adminDataQualityMetricIcon {
color: color-mix(in srgb, var(--muted), black 10%);
background: color-mix(in srgb, var(--muted), white 90%);
}
.adminDataQualityMetricText {
gap: 3px;
min-width: 0;
display: grid;
}
.adminDataQualityMetricLabel, .adminDataQualityMetaLine {
color: var(--muted);
font-size: 12px;
line-height: 1.25;
}
.adminDataQualityMetric strong {
color: var(--fg);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
line-height: 1.15;
overflow: hidden;
}
.adminDataQualityGroupList {
width: 100%;
max-height: min(700px, calc(100vh - var(--admin-shell-header-height) - 224px));
overscroll-behavior: contain;
background: none;
border: 0;
border-radius: 0;
gap: 10px;
min-width: 0;
padding: 0 4px 2px 0;
scroll-padding: 10px;
display: grid;
overflow: auto;
}
.adminDataQualityGroupCard {
min-width: 0;
overflow: visible;
}
.adminDataQualityGroupCard + .adminDataQualityGroupCard {
border-top: 1px solid var(--data-quality-border);
}
.adminDataQualityGroupBody {
gap: 12px;
padding: 14px;
display: grid;
}
.adminDataQualityGroupHeader {
grid-template-columns: minmax(0, 1fr) auto;
justify-content: space-between;
align-items: start;
gap: 14px;
min-width: 0;
display: grid;
}
.adminDataQualityGroupTitleBlock {
gap: 6px;
min-width: 0;
display: grid;
}
.adminDataQualityGroupActions {
flex-wrap: wrap;
flex-shrink: 0;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: flex;
}
.adminDataQualityGroupActions .btnAction {
border-radius: 8px;
min-height: 38px;
padding: 8px 14px;
}
.adminDataQualityMetaLine {
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
display: flex;
}
.adminDataQualityMetaLine > span:not(.pill) {
overflow-wrap: normal;
word-break: normal;
}
.adminDataQualityIssueList {
border: 1px solid var(--data-quality-soft-border);
background: #fff;
border-radius: 8px;
min-width: 0;
max-height: min(190px, 32vh);
display: grid;
overflow: auto;
}
.adminDataQualityGroupEmptyStrip {
border: 1px solid color-mix(in srgb, var(--ok), transparent 72%);
background: color-mix(in srgb, var(--ok), white 96%);
border-radius: 8px;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
display: flex;
}
.adminDataQualityGroupEmptyStrip.isFiltered {
border-color: color-mix(in srgb, var(--focus), transparent 75%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminDataQualityGroupEmptyStrip svg {
color: var(--ok);
flex: none;
}
.adminDataQualityGroupEmptyStrip.isFiltered svg {
color: var(--focus);
}
.adminDataQualityGroupEmpty {
margin: 0;
}
.adminDataQualityIssueRow {
border: 0;
border-left: 3px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-bottom: 1px solid var(--data-quality-soft-border);
background: var(--data-quality-row-bg);
grid-template-columns: minmax(0, 1fr) minmax(188px, auto);
align-items: center;
gap: 16px;
min-width: 0;
padding: 10px 12px 10px 14px;
display: grid;
}
.adminDataQualityIssueRow:last-child {
border-bottom: 0;
}
.adminDataQualityIssueRow.isCritical {
border-left-color: color-mix(in srgb, var(--danger), transparent 10%);
background: color-mix(in srgb, var(--danger), white 98%);
}
.adminDataQualityIssueRow.isWarning {
border-left-color: color-mix(in srgb, var(--accent), transparent 8%);
background: color-mix(in srgb, var(--accent), white 98%);
}
.adminDataQualityIssueRow.isInfo {
border-left-color: color-mix(in srgb, var(--focus), transparent 18%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminDataQualityIssueMain {
grid-template-columns: minmax(176px, auto) minmax(0, 1fr);
align-items: center;
gap: 16px;
min-width: 0;
display: grid;
}
.adminDataQualityIssueMetaLine {
align-content: center;
gap: 8px 10px;
}
.adminDataQualityIssueText {
gap: 4px;
min-width: 0;
display: grid;
}
.adminDataQualityIssueText strong, .adminDataQualityIssueText p {
margin: 0;
}
.adminDataQualityIssueText strong {
color: var(--fg);
font-size: 14px;
line-height: 1.25;
}
.adminDataQualityIssueText p {
font-size: 14px;
line-height: 1.35;
}
.adminDataQualityIssueAction {
min-width: 0;
color: var(--muted);
white-space: nowrap;
justify-content: flex-end;
align-items: center;
gap: 14px;
font-size: 12px;
line-height: 1.25;
display: flex;
}
.adminDataQualityIssueOpenButton {
border-radius: 8px;
min-height: 36px;
padding: 7px 12px;
}
.adminDataQualityGroupFooter {
justify-content: center;
align-items: center;
gap: 10px;
padding-top: 2px;
display: flex;
}
.adminDataQualityGroupFooter .btn {
min-height: 38px;
color: var(--focus);
background: none;
border-color: #0000;
}
.adminDataQualityGroupFooter .btn:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), transparent 74%);
background: color-mix(in srgb, var(--focus), white 95%);
}
.adminDataQualityGroupError {
justify-self: end;
margin: 0;
}
.adminAccessReviewsPage > .card {
max-width: none;
}
.adminAccessReviewConsole {
border-color: color-mix(in srgb, var(--stroke), var(--focus) 10%);
background: var(--bg-2);
box-shadow: none;
}
.adminAccessReviewCreateBody, .adminAccessReviewDetailBody {
gap: 16px;
display: grid;
}
.adminAccessReviewSectionHeader, .adminAccessReviewDetailHeader, .adminAccessReviewItemToolbar, .adminAccessReviewListItem, .adminAccessReviewIssueItem {
justify-content: space-between;
align-items: flex-start;
gap: 16px;
min-width: 0;
display: flex;
}
.adminAccessReviewCreateRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 12px;
padding-top: 2px;
display: grid;
}
.adminAccessReviewTitleField {
margin-top: 0;
}
.adminAccessReviewGenerateBtn {
min-height: 44px;
}
.adminAccessReviewLedgerBody {
gap: 10px;
display: grid;
}
.adminAccessReviewList {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
display: grid;
}
.adminAccessReviewListItem {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
grid-template-columns: minmax(96px, auto) minmax(220px, 1fr) minmax(152px, auto) minmax(78px, auto) auto;
align-items: center;
gap: 14px;
padding: 12px 0;
display: grid;
}
.adminAccessReviewListItem.isSelected {
background: color-mix(in srgb, var(--focus), white 96%);
box-shadow: inset 3px 0 0 var(--focus);
border-radius: 8px;
margin-left: -12px;
margin-right: -12px;
padding-left: 12px;
padding-right: 12px;
}
.adminAccessReviewListMain, .adminAccessReviewDetailTitle, .adminAccessReviewIssueMain {
gap: 6px;
min-width: 0;
display: grid;
}
.adminAccessReviewListMain h3, .adminAccessReviewDetailTitle h2, .adminAccessReviewIssueMain strong, .adminAccessReviewDeleteConfirm p, .adminAccessReviewListMain .adminSettingsFieldHint {
margin: 0;
}
.adminAccessReviewListActions, .adminAccessReviewDetailActions {
flex-wrap: wrap;
flex-shrink: 0;
justify-content: flex-end;
gap: 8px;
display: flex;
}
.adminAccessReviewLedgerStatus {
align-items: center;
min-width: 0;
display: flex;
}
.adminAccessReviewLedgerMeta {
gap: 3px;
min-width: 0;
display: grid;
}
.adminAccessReviewLedgerMeta span {
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
font-size: 11px;
line-height: 1.2;
}
.adminAccessReviewLedgerMeta strong {
color: var(--fg);
font-size: 12px;
line-height: 1.25;
}
.adminAccessReviewMetaLine {
color: var(--muted);
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.25;
display: flex;
}
.adminAccessReviewDetailHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding-bottom: 14px;
}
.adminAccessReviewDeleteConfirm {
border: 1px solid color-mix(in srgb, var(--danger), transparent 50%);
background: color-mix(in srgb, var(--danger), white 96%);
border-radius: 8px;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px;
display: flex;
}
.adminAccessReviewSummaryGrid {
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 10px;
display: grid;
}
.adminAccessReviewMetric {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg);
border-radius: 8px;
gap: 6px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminAccessReviewMetric span {
color: var(--muted);
font-size: 12px;
line-height: 1.25;
}
.adminAccessReviewMetric strong {
color: var(--fg);
line-height: 1.1;
}
.adminAccessReviewItemToolbar {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
align-items: end;
padding-top: 8px;
}
.adminSeverityPill {
border-radius: 8px;
min-height: 34px;
padding: 7px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.15;
}
.adminSeverityPill.isCritical {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 16%);
}
.adminSeverityPill.isWarning {
border-color: color-mix(in srgb, var(--accent), transparent 48%);
background: color-mix(in srgb, var(--accent), white 90%);
color: color-mix(in srgb, var(--accent), black 35%);
}
.adminSeverityPill.isInfo {
border-color: color-mix(in srgb, var(--focus), transparent 56%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 18%);
}
.adminAccessReviewItemGroup {
gap: 10px;
display: grid;
}
.adminAccessReviewGroupHeader {
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding-top: 4px;
display: flex;
}
.adminAccessReviewIssueItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--stroke), transparent 20%);
border-radius: 8px;
grid-template-columns: minmax(190px, .85fr) minmax(0, 1.4fr);
align-items: start;
padding: 12px;
display: grid;
}
.adminAccessReviewIssueItem.isCritical {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger), transparent 10%);
}
.adminAccessReviewIssueItem.isWarning {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent), transparent 8%);
}
.adminAccessReviewIssueItem.isInfo {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--focus), transparent 22%);
}
.adminAccessReviewEvidenceGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-width: 0;
display: grid;
}
.adminAccessReviewEvidenceCell {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
background: color-mix(in srgb, var(--bg-2), var(--bg) 55%);
border-radius: 8px;
gap: 4px;
min-width: 0;
padding: 8px 10px;
display: grid;
}
.adminAccessReviewEvidenceCell span {
color: var(--muted);
font-size: 11px;
line-height: 1.2;
}
.adminAccessReviewEvidenceCell strong {
color: var(--fg);
overflow-wrap: anywhere;
word-break: normal;
font-size: 12px;
line-height: 1.3;
}
.adminAccessReviewNoEvidence {
margin: 0;
}
.adminAccessReviewIssueItem .adminSettingsDisclosure {
grid-column: 1 / -1;
}
#supplier-payment-accounts, #vehicle-itv {
scroll-margin-top: 88px;
}
@media (max-width: 1280px) and (min-width: 981px) {
.adminDataQualityMetricGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.adminDataQualityMetricGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDataQualityGroupHeader, .adminDataQualityIssueRow {
grid-template-columns: minmax(0, 1fr);
}
.adminDataQualityGroupHeader {
display: grid;
}
.adminDataQualityIssueMain {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.adminDataQualityGroupActions, .adminDataQualityIssueAction, .adminDataQualityGroupFooter {
justify-content: flex-start;
justify-items: start;
}
.adminDataQualityGroupFooter {
flex-wrap: wrap;
}
.adminAccessReviewSectionHeader, .adminAccessReviewDetailHeader, .adminAccessReviewItemToolbar, .adminAccessReviewDeleteConfirm {
justify-content: stretch;
display: grid;
}
.adminAccessReviewCreateRow, .adminAccessReviewListItem, .adminAccessReviewIssueItem, .adminAccessReviewEvidenceGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminAccessReviewListItem {
align-items: stretch;
}
.adminAccessReviewListActions, .adminAccessReviewDetailActions {
justify-content: flex-start;
}
}
.adminSettingsSnapshotGrid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 12px;
display: grid;
}
.adminSettingsSnapshotPage > .card, .adminSettingsSnapshotPage .adminSettingsSnapshotGrid, .adminSettingsSnapshotHero, .adminSettingsSnapshotActionBar, .adminSettingsSnapshotEditor {
width: min(100%, 1120px);
}
.adminSettingsSnapshotBody {
gap: 12px;
display: grid;
}
.adminSettingsSnapshotActions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
display: flex;
}
.adminSettingsSnapshotFileInput {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminSettingsSnapshotTextarea {
min-height: 320px;
font-size: 12px;
line-height: 1.4;
}
.adminSettingsSnapshotHero, .adminSettingsSnapshotActionBar, .adminSettingsSnapshotEditor {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
box-shadow: none;
background: #fff;
}
.adminSettingsSnapshotHero {
grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
align-items: stretch;
gap: 16px;
padding: 16px;
display: grid;
}
.adminSettingsSnapshotHeroText {
align-content: center;
gap: 10px;
min-width: 0;
display: grid;
}
.adminSettingsSnapshotHeroText h2 {
font-family: var(--font-condensed);
letter-spacing: .02em;
margin: 0;
font-size: 28px;
line-height: 1.08;
}
.adminSettingsSnapshotHeroText .muted {
max-width: 66ch;
margin: 0;
}
.adminSettingsSnapshotEyebrow {
letter-spacing: .12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--focus), var(--fg) 24%);
margin: 0;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
}
.adminSettingsSnapshotStatusPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: var(--bg);
align-content: start;
gap: 12px;
min-width: 0;
padding: 14px;
display: grid;
}
.adminSettingsSnapshotStatusBadge, .adminSettingsSnapshotInlineStatus {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: var(--bg);
width: fit-content;
min-height: 30px;
color: var(--fg);
white-space: nowrap;
justify-content: center;
align-items: center;
padding: 5px 10px;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
display: inline-flex;
}
.adminSettingsSnapshotStatusBadge.is-valid, .adminSettingsSnapshotInlineStatus.is-valid {
border-color: color-mix(in srgb, var(--ok), transparent 58%);
background: color-mix(in srgb, var(--ok), white 90%);
color: color-mix(in srgb, var(--ok), black 12%);
}
.adminSettingsSnapshotStatusBadge.is-invalid, .adminSettingsSnapshotInlineStatus.is-invalid {
border-color: color-mix(in srgb, var(--danger), transparent 55%);
background: color-mix(in srgb, var(--danger), white 91%);
color: color-mix(in srgb, var(--danger), black 8%);
}
.adminSettingsSnapshotStatusBadge.is-empty, .adminSettingsSnapshotInlineStatus.is-empty {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
}
.adminSettingsSnapshotMetaGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
margin: 0;
display: grid;
}
.adminSettingsSnapshotMetaGrid div {
min-width: 0;
}
.adminSettingsSnapshotMetaGrid dt {
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 3px;
font-size: 10px;
font-weight: 800;
line-height: 1.2;
}
.adminSettingsSnapshotMetaGrid dd {
min-width: 0;
color: var(--fg);
font-family: var(--font-mono);
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
font-size: 13px;
line-height: 1.35;
overflow: hidden;
}
.adminSettingsSnapshotActionBar {
grid-template-columns: minmax(190px, .32fr) minmax(0, 1fr);
align-items: start;
gap: 16px;
padding: 12px 14px;
display: grid;
}
.adminSettingsSnapshotActionText {
gap: 4px;
min-width: 0;
display: grid;
}
.adminSettingsSnapshotActionText .adminSettingsChecklistTitle {
margin: 0;
}
.adminSettingsSnapshotEditor {
background: #fff;
gap: 12px;
padding: 14px;
display: grid;
}
.adminSettingsSnapshotEditorHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
min-width: 0;
display: flex;
}
.adminSettingsSnapshotEditorHeader .adminSettingsCategory {
min-width: 0;
}
.adminSettingsSnapshotSectionList {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.adminSettingsSnapshotSectionPill {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--fg) 2%);
max-width: 100%;
min-height: 28px;
color: color-mix(in srgb, var(--fg), var(--muted) 12%);
cursor: pointer;
font: inherit;
align-items: center;
padding: 4px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
display: inline-flex;
}
.adminSettingsSnapshotSectionPill:hover, .adminSettingsSnapshotSectionPill:focus-visible, .adminSettingsSnapshotSectionPill.is-active {
border-color: color-mix(in srgb, var(--focus), transparent 34%);
background: color-mix(in srgb, var(--focus), white 91%);
color: color-mix(in srgb, var(--focus), black 14%);
}
.adminSettingsSnapshotSectionPill:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
outline: none;
}
.adminSettingsSnapshotPage .adminSettingsSnapshotTextarea {
height: min(46dvh, 500px);
min-height: 300px;
font-family: var(--font-mono);
tab-size: 2;
font-size: 12px;
line-height: 1.45;
}
.adminSettingsSnapshotNote {
color: var(--muted);
flex-wrap: wrap;
align-items: baseline;
gap: 5px;
padding-top: 2px;
font-size: 13px;
line-height: 1.4;
display: flex;
}
.adminSettingsSnapshotNote strong {
color: var(--fg);
}
@media (max-width: 900px) {
.adminSettingsSnapshotHero, .adminSettingsSnapshotActionBar {
grid-template-columns: minmax(0, 1fr);
}
.adminSettingsSnapshotHeroText h2 {
font-size: 30px;
}
.adminSettingsSnapshotActionBar .adminSettingsSnapshotActions {
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.adminSettingsSnapshotHero, .adminSettingsSnapshotActionBar, .adminSettingsSnapshotEditor {
padding: 12px;
}
.adminSettingsSnapshotMetaGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminSettingsSnapshotEditorHeader {
display: grid;
}
.adminSettingsSnapshotActionBar .adminSettingsSnapshotActions, .adminSettingsSnapshotActionBar .btn {
width: 100%;
}
.adminSettingsSnapshotPage .adminSettingsSnapshotTextarea {
height: 48dvh;
min-height: 320px;
}
}
.adminSettingsDisclosure {
gap: 10px;
display: grid;
}
.adminSettingsDisclosure summary {
cursor: pointer;
font-weight: 700;
}
.adminBackupOpsPage {
gap: 12px;
overflow-x: clip;
}
.adminBackupOpsLocalTabs {
border-bottom: 1px solid var(--stroke);
scrollbar-width: none;
flex-wrap: nowrap;
gap: 18px;
margin: -2px 0 0;
display: flex;
overflow-x: auto;
}
.adminBackupOpsLocalTabs::-webkit-scrollbar {
display: none;
}
.adminBackupOpsLocalTab {
min-height: 42px;
color: var(--muted);
white-space: nowrap;
border-bottom: 3px solid #0000;
flex: none;
align-items: center;
padding: 0 2px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
display: inline-flex;
}
.adminBackupOpsLocalTab:hover, .adminBackupOpsLocalTab.isActive {
color: var(--fg);
}
.adminBackupOpsLocalTab.isActive {
border-bottom-color: var(--focus);
}
.adminBackupOpsHeroCard, .adminBackupOpsSurface, .adminBackupOpsRestoreCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
box-shadow: none;
background: #fff;
}
.adminBackupOpsHeroCard {
box-shadow: none;
background: #fff;
}
.adminBackupOpsHeroBody, .adminBackupOpsRestoreBody {
gap: 16px;
padding: 18px;
display: grid;
}
.adminBackupOpsHeroBody {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminBackupOpsHeroCopy, .adminBackupOpsRestoreCopy, .adminBackupOpsSurfaceBody {
gap: 10px;
min-width: 0;
display: grid;
}
.adminBackupOpsHeroTitle {
font-size: clamp(26px, 2.4vw, 34px);
line-height: .98;
}
.adminBackupOpsStatusHero {
border-left: 3px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
}
.adminBackupOpsStatusHero.isSuccess {
border-left-color: var(--success);
}
.adminBackupOpsStatusHero.isPrimary {
border-left-color: var(--focus);
}
.adminBackupOpsStatusHero.isDanger {
border-left-color: var(--danger);
}
.adminBackupOpsStatusHero.isLoading {
border-left-color: color-mix(in srgb, var(--stroke), var(--muted) 14%);
}
.adminBackupOpsStatusTitleRow {
flex-wrap: wrap;
align-items: center;
gap: 10px;
display: flex;
}
.adminBackupOpsStatusTitleRow .adminBackupOpsStatusPill {
text-transform: none;
}
.adminBackupOpsHeroHeader {
justify-content: space-between;
align-items: flex-start;
gap: 18px;
display: flex;
}
.adminBackupOpsHeroFacts {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 14px 0 0;
display: grid;
}
.adminBackupOpsHeroFacts div {
gap: 4px;
min-width: 0;
display: grid;
}
.adminBackupOpsHeroFacts dt, .adminBackupOpsProtectedMetrics span, .adminBackupOpsCheckItem span {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 780;
line-height: 1.2;
}
.adminBackupOpsHeroFacts dd {
color: var(--fg);
overflow-wrap: anywhere;
margin: 0;
font-size: 16px;
font-weight: 780;
line-height: 1.2;
}
.adminBackupOpsHeroFactsLoading dd {
color: var(--muted);
font-weight: 700;
}
.adminBackupOpsHeroIntro {
max-width: 68ch;
font-size: 15px;
}
.adminBackupOpsEyebrow {
color: var(--muted);
letter-spacing: .12em;
text-transform: uppercase;
margin: 0;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
}
.adminBackupOpsHeroMeta, .adminBackupOpsActionRow, .adminBackupOpsHeroActions, .adminBackupOpsSectionHead, .adminBackupOpsFamilyList {
flex-wrap: wrap;
align-items: center;
gap: 10px;
display: flex;
}
.adminBackupOpsHeroActions {
justify-content: flex-end;
margin-top: 0;
margin-left: auto;
padding-top: 0;
}
.adminBackupOpsHeaderActions {
align-self: center;
gap: 10px;
max-width: min(100%, 720px);
}
.adminBackupOpsHeaderActions .btn {
border-radius: 9px;
min-height: 44px;
}
.adminBackupOpsHeroActions .btn, .adminStorageInlineAction {
justify-content: center;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminBackupOpsRefreshAction {
min-height: 36px;
color: var(--muted);
padding: 6px 10px;
font-size: 13px;
}
.adminBackupOpsSetupNotice {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, white, var(--bg-2) 12%);
color: var(--muted);
grid-column: 1 / -1;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px 16px;
line-height: 1.4;
display: grid;
}
.adminBackupOpsSetupNoticeIcon {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
width: 26px;
height: 26px;
color: var(--fg);
background: #fff;
border-radius: 999px;
place-items: center;
font-weight: 900;
line-height: 1;
display: inline-grid;
}
.adminBackupOpsSetupNoticeBody {
gap: 10px;
min-width: 0;
display: grid;
}
.adminBackupOpsSetupNoticeHeader {
gap: 3px;
display: grid;
}
.adminBackupOpsSetupNotice strong {
color: var(--fg);
}
.adminBackupOpsSetupTechnical {
max-width: 100%;
color: var(--muted);
gap: 10px;
font-size: 12px;
display: grid;
}
.adminBackupOpsSetupTechnical summary {
cursor: pointer;
width: fit-content;
color: var(--fg);
font-weight: 700;
}
.adminBackupOpsSetupTechnical .mono {
overflow-wrap: anywhere;
}
.adminBackupOpsSetupChecklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
display: grid;
}
.adminBackupOpsSetupChecklistItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg-2) 10%);
gap: 7px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminBackupOpsSetupChecklistItem span {
gap: 2px;
display: grid;
}
.adminBackupOpsSetupChecklistItem small {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
}
.adminBackupOpsSetupChecklistItem code, .adminBackupOpsSetupCommand {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, white, var(--bg-2) 18%);
width: fit-content;
max-width: 100%;
color: var(--fg);
overflow-wrap: anywhere;
padding: 4px 7px;
}
.adminBackupOpsSetupCommand {
box-sizing: border-box;
width: 100%;
}
.adminBackupOpsSetupNotice.isReady {
border-color: color-mix(in srgb, var(--success), transparent 52%);
background: color-mix(in srgb, var(--success), white 96%);
}
.adminBackupOpsSetupNotice.isReady .adminBackupOpsSetupNoticeIcon {
border-color: color-mix(in srgb, var(--success), transparent 42%);
color: color-mix(in srgb, var(--success), black 18%);
}
.adminBackupOpsSetupNotice.isPending {
border-color: color-mix(in srgb, var(--warning), transparent 46%);
background: color-mix(in srgb, var(--warning), white 94%);
}
.adminBackupOpsSetupNotice.isPending .adminBackupOpsSetupNoticeIcon {
border-color: color-mix(in srgb, var(--warning), transparent 34%);
color: color-mix(in srgb, var(--warning), black 34%);
}
.adminBackupOpsStrongAction, .adminBackupOpsSaveButton {
min-width: 154px;
box-shadow: 0 8px 18px #2848921f;
}
.adminBackupOpsQuietAction {
color: var(--muted);
}
.adminBackupOpsCoverageList {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
margin-top: 12px;
display: grid;
}
.adminBackupOpsCoverageRow {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 14px 0;
display: grid;
}
.adminBackupOpsCoverageRow > strong {
text-align: right;
justify-self: end;
font-size: 14px;
}
.adminBackupOpsCoverageMark {
border: 1px solid color-mix(in srgb, var(--focus), transparent 74%);
background: color-mix(in srgb, var(--focus), white 94%);
width: 36px;
height: 36px;
color: color-mix(in srgb, var(--success), black 24%);
border-radius: 999px;
justify-content: center;
align-items: center;
font-weight: 900;
display: inline-flex;
}
.adminBackupOpsCoverageMark.isNeutral {
border-color: color-mix(in srgb, var(--stroke), transparent 18%);
background: color-mix(in srgb, var(--bg-2), white 18%);
color: var(--muted);
}
.adminBackupOpsCoverageMark.isIcon {
color: var(--focus);
}
.adminBackupOpsCoverageMark.isIcon.isNeutral {
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
}
.adminBackupOpsPlanSummary {
border-top: 1px solid var(--stroke);
display: grid;
}
.adminBackupOpsPlanSummary div {
border-bottom: 1px solid var(--stroke);
grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
gap: 14px;
padding: 12px 0;
display: grid;
}
.adminBackupOpsPlanSummary span {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 760;
}
.adminBackupOpsPlanSummary strong {
overflow-wrap: anywhere;
}
.adminBackupOpsDiagnosticsStack {
gap: 16px;
display: grid;
}
.adminBackupOpsRestoreSelectedBackup, .adminBackupOpsDetailSummary, .adminBackupOpsReadonlyValue {
border: 1px solid var(--stroke);
background: var(--bg-2);
border-radius: 10px;
}
.adminBackupOpsRestoreSelectedBackup {
gap: 4px;
padding: 14px;
display: grid;
}
.adminBackupOpsRestoreSelectedBackup span {
color: var(--muted);
}
.adminBackupOpsAlternateSource {
border-top: 1px dashed var(--stroke);
padding-top: 12px;
}
.adminBackupOpsAlternateSource summary {
cursor: pointer;
color: var(--muted);
font-weight: 800;
}
.adminBackupOpsAlternateSource[open] summary {
margin-bottom: 12px;
}
.adminBackupOpsDetailSummary {
gap: 14px;
padding: 14px;
display: grid;
}
.adminBackupOpsReadonlyValue {
align-items: center;
min-height: 44px;
padding: 0 12px;
font-weight: 800;
display: flex;
}
.adminBackupOpsChip {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, white, var(--bg-2) 12%);
color: var(--fg);
font-weight: 700;
}
.adminBackupOpsSummaryGrid, .adminBackupOpsAssuranceGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminBackupOpsProtectionGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminBackupOpsNoticeGrid {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 36%);
flex-wrap: wrap;
gap: 8px;
padding: 12px;
display: flex;
}
.adminBackupOpsMetricCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: calc(var(--radius) + 6px);
background: color-mix(in srgb, white, var(--bg-2) 14%);
align-content: start;
gap: 8px;
min-width: 0;
min-height: 118px;
padding: 16px 18px;
display: grid;
box-shadow: inset 0 1px #ffffffb8;
}
.adminBackupOpsMetricCard.isPrimary {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, white, var(--bg-2) 12%);
box-shadow: inset 0 1px #ffffffb8;
}
.adminBackupOpsMetricCard.isSuccess {
border-color: color-mix(in srgb, var(--success), transparent 45%);
background: color-mix(in srgb, var(--success), white 95%);
}
.adminBackupOpsMetricCard.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 42%);
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminBackupOpsMetricValue {
overflow-wrap: anywhere;
font-size: clamp(21px, 2vw, 28px);
line-height: 1;
display: block;
}
.adminBackupOpsMetricHint {
font-size: 12px;
line-height: 1.35;
}
.adminBackupOpsLoadingSurface {
min-height: 210px;
}
.adminBackupOpsLoadingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding-top: 8px;
display: grid;
}
.adminBackupOpsLoadingBlock {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 4px);
background: linear-gradient(90deg, transparent, #ffffffb8, transparent),
color-mix(in srgb, white, var(--bg-2) 16%);
background-size: 220px 100%, 100% 100%;
min-height: 96px;
}
.adminBackupOpsLoadingBlock.isWide {
grid-column: 1 / -1;
min-height: 118px;
}
.adminStorageLoadingStack {
gap: 14px;
display: grid;
}
.adminStorageLoadingBlockCompact {
min-height: 72px;
}
.adminStorageLoadingTable {
min-height: 96px;
}
.adminBackupOpsSurfaceBody {
padding: 18px 20px;
}
.adminBackupOpsBreakdownBody {
gap: 9px;
padding: 16px 20px;
display: grid;
}
.adminBackupOpsExplainBox {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, white, var(--bg-2) 12%);
gap: 12px;
padding: 14px;
display: grid;
}
.adminBackupOpsContentsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminBackupOpsProtectedList {
gap: 0;
margin-top: 4px;
display: grid;
}
.adminBackupOpsProtectedRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
grid-template-columns: minmax(190px, .62fr) minmax(0, 1.7fr);
align-items: start;
gap: 24px;
padding: 18px 0;
display: grid;
}
.adminBackupOpsProtectedRow > div:first-child {
gap: 4px;
display: grid;
}
.adminBackupOpsProtectedMetrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminBackupOpsProtectedMetrics div {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 25%);
gap: 6px;
min-width: 0;
padding: 1px 16px 1px 0;
display: grid;
}
.adminBackupOpsProtectedMetrics div:last-child {
border-right: 0;
}
.adminBackupOpsProtectedMetrics strong {
color: var(--fg);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
font-weight: 780;
line-height: 1.25;
overflow: hidden;
}
.adminBackupOpsInlineDetails {
border: 0;
border-top: 1px dashed color-mix(in srgb, var(--stroke), transparent 20%);
background: none;
grid-column: 1 / -1;
min-width: 0;
}
.adminBackupOpsInlineDetails summary {
cursor: pointer;
width: fit-content;
color: color-mix(in srgb, var(--fg), var(--muted) 22%);
padding: 9px 0 0;
font-size: 12px;
font-weight: 760;
}
.adminBackupOpsInlineDetails .adminBackupOpsMetaGrid {
padding: 0 12px 12px;
}
.adminBackupOpsContentItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), white 54%);
gap: 5px;
min-width: 0;
padding: 12px;
display: grid;
overflow: hidden;
}
.adminBackupOpsContentItem strong {
overflow-wrap: anywhere;
font-size: 17px;
line-height: 1.1;
}
.adminBackupOpsContentItem .muted {
overflow-wrap: anywhere;
font-size: 12px;
line-height: 1.35;
}
.adminBackupOpsBreakdownGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminBackupOpsBreakdownItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg-2) 18%);
gap: 6px;
min-width: 0;
min-height: 94px;
padding: 12px 14px;
display: grid;
}
.adminBackupOpsBreakdownItem.isMeasured {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, white, var(--bg-2) 12%);
}
.adminBackupOpsBreakdownValue {
overflow-wrap: anywhere;
font-size: clamp(18px, 1.7vw, 24px);
line-height: 1;
display: block;
}
.adminBackupOpsSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
justify-content: space-between;
align-items: flex-start;
padding-bottom: 12px;
}
.adminBackupOpsConfigSummary {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: hidden;
}
.adminBackupOpsConfigSummary div {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 28%);
gap: 6px;
min-width: 0;
padding: 15px 16px;
display: grid;
}
.adminBackupOpsConfigSummary div:nth-child(3n) {
border-right: 0;
}
.adminBackupOpsConfigSummary span {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 740;
}
.adminBackupOpsConfigSummary strong {
color: var(--fg);
overflow-wrap: anywhere;
font-size: 15px;
font-weight: 760;
line-height: 1.35;
}
.adminBackupOpsEditConfig {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg-2) 7%);
margin-top: 14px;
}
.adminBackupOpsEditConfig > summary {
cursor: pointer;
padding: 13px 15px;
list-style: none;
}
.adminBackupOpsEditConfig > summary::-webkit-details-marker {
display: none;
}
.adminBackupOpsEditConfig > summary > span {
gap: 4px;
display: grid;
}
.adminBackupOpsEditConfig > summary strong {
color: var(--fg);
font-size: 15px;
}
.adminBackupOpsEditConfig > summary span span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminBackupOpsEditConfig > .adminBackupOpsConfigGrid {
padding: 0 14px 14px;
}
.adminBackupOpsFormActions {
justify-content: flex-end;
padding: 0 14px 14px;
display: flex;
}
.adminBackupOpsConfigGrid, .adminBackupOpsBottomGrid, .adminBackupOpsDecisionGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
display: grid;
}
.adminBackupOpsBottomGrid {
align-items: start;
}
.adminBackupOpsConfigGroup {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg-2) 10%);
gap: 12px;
min-width: 0;
padding: 16px;
display: grid;
}
.adminBackupOpsConfigAdvanced {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, white, var(--bg-2) 14%);
grid-column: 1 / -1;
gap: 12px;
min-width: 0;
padding: 0;
display: grid;
}
.adminBackupOpsConfigAdvanced summary {
cursor: pointer;
gap: 4px;
padding: 14px 16px;
list-style: none;
display: grid;
}
.adminBackupOpsConfigAdvanced summary::-webkit-details-marker {
display: none;
}
.adminBackupOpsConfigAdvanced summary span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminBackupOpsConfigAdvanced > .adminBackupOpsConfigGrid {
padding: 0 14px 14px;
}
.adminBackupOpsAdvancedChecks {
border-style: dashed;
border-color: color-mix(in srgb, var(--stroke), transparent 36%);
box-shadow: none;
background: none;
overflow: hidden;
}
.adminBackupOpsAdvancedSummary {
cursor: pointer;
padding: 14px 18px;
list-style: none;
}
.adminBackupOpsAdvancedSummary::-webkit-details-marker {
display: none;
}
.adminBackupOpsAdvancedSummary > span {
gap: 4px;
display: grid;
}
.adminBackupOpsAdvancedSummary strong {
color: color-mix(in srgb, var(--fg), var(--muted) 20%);
font-size: 15px;
}
.adminBackupOpsAdvancedSummary span span {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.adminBackupOpsAdvancedChecksBody {
gap: 14px;
padding: 0 14px 14px;
display: grid;
}
.adminBackupOpsAdvancedChecksBody > .adminBackupOpsSurface {
box-shadow: none;
}
.adminBackupOpsFamiliesGroup {
align-content: start;
}
.adminBackupOpsGroupTitle {
color: color-mix(in srgb, var(--fg), black 6%);
margin: 0;
font-size: 15px;
line-height: 1.2;
}
.adminBackupOpsDecisionText {
color: var(--fg);
margin: 0;
font-size: 14px;
font-weight: 650;
line-height: 1.45;
}
.adminBackupOpsField, .adminBackupOpsFieldPair {
gap: 8px;
min-width: 0;
display: grid;
}
.adminBackupOpsFieldPair {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminBackupOpsToggle {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), white 52%);
cursor: pointer;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 10px;
min-height: 54px;
padding: 12px;
display: grid;
}
.adminBackupOpsToggle input {
margin: 2px 0 0;
}
.adminBackupOpsToggle span {
gap: 3px;
display: grid;
}
.adminBackupOpsFamilyText {
color: var(--fg);
margin: 0;
font-size: 14px;
font-weight: 650;
line-height: 1.45;
}
.adminBackupOpsRestoreBody {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.adminBackupOpsRestoreCopy {
align-content: center;
max-width: 760px;
}
.adminBackupOpsRestorePanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, white, var(--bg-2) 12%);
gap: 12px;
min-width: 0;
padding: 16px;
display: grid;
}
.adminBackupOpsRestoreFields {
grid-template-columns: minmax(0, 1.2fr) minmax(140px, .6fr);
gap: 12px;
display: grid;
}
.adminBackupOpsRestoreConfirm {
grid-column: 1 / -1;
}
.adminBackupOpsRestoreWizardCard {
width: min(920px, 100%);
max-height: min(86dvh, 860px);
overflow: auto;
}
.adminBackupOpsWizardSteps, .adminBackupOpsSourceGrid, .adminBackupOpsCheckList {
gap: 10px;
display: grid;
}
.adminBackupOpsWizardSteps {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adminBackupOpsChip.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 46%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 16%);
}
.adminBackupOpsWizardPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg-2) 14%);
gap: 12px;
padding: 14px;
display: grid;
}
.adminBackupOpsSourceGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminBackupOpsSourceOption {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 48%);
min-height: 112px;
color: var(--fg);
cursor: pointer;
font: inherit;
text-align: left;
gap: 6px;
padding: 12px;
display: grid;
}
.adminBackupOpsSourceOption:disabled {
cursor: not-allowed;
opacity: .58;
}
.adminBackupOpsSourceOption.isSelected {
border-color: color-mix(in srgb, var(--focus), transparent 36%);
background: color-mix(in srgb, var(--focus), white 95%);
}
.adminBackupOpsSourceOption strong {
flex-wrap: wrap;
align-items: center;
gap: 6px;
line-height: 1.2;
display: flex;
}
.adminBackupOpsSourceOption span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminBackupOpsCheckList {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminBackupOpsCheckItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 48%);
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 12px;
display: grid;
}
.adminBackupOpsCheckItem.passed {
border-color: color-mix(in srgb, var(--success), transparent 52%);
background: color-mix(in srgb, var(--success), white 95%);
}
.adminBackupOpsCheckItem.failed {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminBackupOpsCheckItem.warning {
border-color: color-mix(in srgb, var(--warning), transparent 48%);
background: color-mix(in srgb, var(--warning), white 94%);
}
.adminBackupOpsRestoreResult {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 48%);
gap: 4px;
padding: 12px;
display: grid;
}
.adminBackupOpsRestoreResult.isSuccess {
border-color: color-mix(in srgb, var(--success), transparent 52%);
background: color-mix(in srgb, var(--success), white 95%);
}
.adminBackupOpsRestoreResult.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminBackupOpsRestoreResult p {
color: var(--muted);
margin: 0;
font-size: 13px;
line-height: 1.4;
}
.adminBackupOpsDangerAction {
margin-left: auto;
}
.adminBackupOpsEmptyInline, .adminBackupOpsEmptyState {
color: var(--muted);
margin: 0;
font-size: 13px;
line-height: 1.4;
}
.adminBackupOpsEmptyState {
border: 1px dashed color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), var(--bg) 16%);
gap: 4px;
padding: 16px;
display: grid;
}
.adminBackupOpsEmptyState strong {
color: var(--fg);
font-size: 14px;
}
.adminBackupOpsEmptyState span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminBackupOpsInventorySummary {
color: var(--muted);
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
font-size: 13px;
font-weight: 750;
display: flex;
}
.adminBackupOpsInventorySummary span + span:before {
content: "/";
color: color-mix(in srgb, var(--muted), transparent 35%);
margin-right: 8px;
}
.adminBackupOpsBackupTableWrap {
max-height: min(580px, calc(100vh - var(--admin-shell-header-height) - 220px));
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
max-width: 100%;
display: block;
overflow: auto;
}
.adminBackupOpsBackupTable {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.adminBackupOpsBackupColCopy {
width: 24%;
}
.adminBackupOpsBackupColStatus {
width: 12%;
}
.adminBackupOpsBackupColContents {
width: 14%;
}
.adminBackupOpsBackupColChecks {
width: 17%;
}
.adminBackupOpsBackupColStorage {
width: 19%;
}
.adminBackupOpsBackupColActions {
width: 14%;
}
.adminBackupOpsBackupTable th, .adminBackupOpsBackupTable td {
text-align: left;
vertical-align: middle;
min-width: 0;
}
.adminBackupOpsBackupTable thead th {
z-index: 1;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
background: #fff;
padding: 11px 10px;
font-size: 11px;
font-weight: 800;
position: sticky;
top: 0;
}
.adminBackupOpsBackupTable tbody td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 28%);
color: var(--fg);
padding: 12px 10px;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.adminBackupOpsBackupTable tbody tr:last-child td {
border-bottom: 0;
}
.adminBackupOpsBackupTable tbody tr:hover {
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminBackupOpsBackupCellMain {
gap: 3px;
min-width: 0;
display: grid;
}
.adminBackupOpsBackupCellCompact {
min-width: 110px;
}
.adminBackupOpsBackupCellMain strong {
color: var(--fg);
font-size: 14px;
font-weight: 800;
line-height: 1.25;
}
.adminBackupOpsBackupCellMain span {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.adminBackupOpsBackupCellError {
overflow-wrap: anywhere;
color: var(--danger) !important;
}
.adminBackupOpsBackupActionsHead {
text-align: left !important;
}
.adminBackupOpsBackupTableActions {
justify-items: start;
gap: 4px;
display: grid;
}
.adminBackupOpsTableAction {
appearance: none;
color: var(--focus);
cursor: pointer;
font: inherit;
white-space: nowrap;
background: none;
border: 0;
padding: 0;
font-size: 13px;
font-weight: 800;
line-height: 1.2;
}
.adminBackupOpsTableAction:hover {
text-underline-offset: 3px;
text-decoration: underline;
}
.adminBackupOpsTableAction:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), white 15%);
outline-offset: 3px;
border-radius: 4px;
}
.adminBackupOpsTableAction:disabled {
color: color-mix(in srgb, var(--muted), transparent 35%);
cursor: not-allowed;
text-decoration: none;
}
.adminBackupOpsTableAction.isDanger {
color: var(--danger);
}
.adminBackupOpsHistoryList {
gap: 0;
display: grid;
}
.adminBackupOpsHistoryItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
gap: 12px;
min-width: 0;
padding: 18px 0;
display: grid;
overflow-x: hidden;
}
.adminBackupOpsRunHeader, .adminBackupOpsRunPrimary, .adminBackupOpsRunFooter, .adminBackupOpsArtifactList {
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminBackupOpsRunHeader {
justify-content: space-between;
gap: 12px;
}
.adminBackupOpsRunPrimary {
flex: 240px;
}
.adminBackupOpsRunIdentity {
gap: 2px;
min-width: 0;
display: grid;
}
.adminBackupOpsRunIdentity p {
color: var(--muted);
font-family: var(--font-mono);
margin: 0;
font-size: 12px;
}
.adminBackupOpsRunTitle {
color: var(--fg);
margin: 0;
font-size: 16px;
line-height: 1.2;
}
.adminBackupOpsRunSnapshot {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 30%);
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
padding-top: 12px;
display: grid;
}
.adminBackupOpsRunSnapshot div {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 28%);
gap: 4px;
min-width: 0;
padding: 0 10px 0 0;
display: grid;
}
.adminBackupOpsRunSnapshot div:last-child {
border-right: 0;
}
.adminBackupOpsRunSnapshot span {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 740;
}
.adminBackupOpsRunSnapshot strong {
color: var(--fg);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 760;
line-height: 1.25;
overflow: hidden;
}
.adminBackupOpsRunActions {
justify-content: flex-end;
}
.adminBackupOpsRunFooter {
color: var(--muted);
gap: 6px;
font-size: 12px;
font-weight: 700;
}
.adminBackupOpsRunFooter span + span:before {
content: "/";
color: color-mix(in srgb, var(--muted), transparent 35%);
margin-right: 6px;
}
.adminBackupOpsMetaGrid {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr);
gap: 8px;
display: grid;
}
.adminBackupOpsLocationGrid {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
}
.adminBackupOpsMetaItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
gap: 4px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminBackupOpsMetaItem > span:first-child {
color: var(--muted);
font-size: 12px;
}
.adminBackupOpsMetaItem > span:last-child {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
overflow: hidden;
}
.adminBackupOpsFailureDetails {
border: 1px solid color-mix(in srgb, var(--danger), transparent 58%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--danger), white 96%);
min-width: 0;
color: color-mix(in srgb, var(--danger), black 18%);
}
.adminBackupOpsFailureDetails summary {
cursor: pointer;
padding: 10px 12px;
font-size: 13px;
font-weight: 800;
}
.adminBackupOpsFailureDetails p {
color: color-mix(in srgb, var(--fg), var(--danger) 28%);
overflow-wrap: anywhere;
margin: 0;
padding: 0 12px 12px;
font-size: 13px;
line-height: 1.45;
}
.adminBackupOpsOperationRef {
text-overflow: ellipsis;
white-space: nowrap;
gap: 4px;
min-width: 0;
margin: 0;
font-size: 13px;
display: grid;
overflow: hidden;
}
.adminBackupOpsOperationRef span {
color: var(--muted);
font-size: 11px;
font-family: var(--font-sans);
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 800;
}
.adminBackupOpsRawDetails {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 42%);
overflow: hidden;
}
.adminBackupOpsRawDetails[open] {
padding-bottom: 12px;
}
.adminBackupOpsRawDetails summary {
cursor: pointer;
color: var(--fg);
padding: 10px 12px;
font-size: 13px;
font-weight: 800;
}
.adminBackupOpsRawDetails .adminBackupOpsOperationRef {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
background: var(--bg);
white-space: normal;
margin: 0 12px 12px;
padding: 10px 12px;
}
.adminBackupOpsOperationTimingGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 0 12px 10px;
}
.adminBackupOpsOperationTimingGrid .adminBackupOpsMetaItem {
background: var(--bg);
}
.adminBackupOpsOperationTimingGrid .adminBackupOpsMetaItem > span:last-child {
white-space: normal;
}
.adminBackupOpsFailureInline {
border: 1px solid color-mix(in srgb, var(--danger), transparent 58%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--danger), white 96%);
color: color-mix(in srgb, var(--danger), black 18%);
gap: 6px;
margin: 0 12px 12px;
padding: 10px 12px;
display: grid;
}
.adminBackupOpsFailureInline strong {
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
}
.adminBackupOpsFailureInline p {
color: color-mix(in srgb, var(--fg), var(--danger) 28%);
overflow-wrap: anywhere;
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.adminBackupOpsStatusPill {
color: #344054;
text-transform: none;
background: #f9fafb;
border: 1px solid #d0d5dd;
border-radius: 999px;
justify-content: center;
align-items: center;
gap: 6px;
width: fit-content;
min-height: 22px;
padding: 3px 8px;
font-size: 12px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.adminBackupOpsStatusPill:before {
content: "";
background: currentColor;
border-radius: 999px;
width: 6px;
height: 6px;
}
.adminBackupOpsStatusPill.isPrimary {
color: #175cd3;
background: #eff8ff;
border-color: #b2ddff;
}
.adminBackupOpsStatusPill.isSuccess {
color: #067647;
background: #ecfdf3;
border-color: #abefc6;
}
.adminBackupOpsStatusPill.isDanger {
color: #b42318;
background: #fef3f2;
border-color: #fecdca;
}
.adminBackupOpsStatusPill.isWarning {
color: #b54708;
background: #fffaeb;
border-color: #fedf89;
}
.adminBackupOpsStatusPill.isNeutral {
color: #475467;
background: #f9fafb;
border-color: #d0d5dd;
}
.adminBackupOpsDetailDialogCard {
width: min(860px, 100%);
}
.adminBackupOpsAdvancedRefs {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 42%);
gap: 10px;
padding: 14px;
display: grid;
}
.adminBackupOpsDeleteDialogCard {
width: min(600px, 100%);
}
.adminBackupOpsDialogBody {
gap: 16px;
}
.adminBackupOpsDialogHeader, .adminBackupOpsArtifactTableHead, .adminBackupOpsArtifactTableRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
display: grid;
}
.adminBackupOpsDialogHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
padding-bottom: 14px;
}
.adminBackupOpsArtifactTable {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
gap: 0;
display: grid;
overflow: hidden;
}
.adminBackupOpsArtifactTableHead, .adminBackupOpsArtifactTableRow {
grid-template-columns: minmax(160px, 1.2fr) minmax(90px, .45fr) minmax(160px, 1fr);
padding: 11px 12px;
}
.adminBackupOpsArtifactTableHead {
background: color-mix(in srgb, var(--bg-2), white 28%);
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 850;
}
.adminBackupOpsArtifactTableRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
font-size: 13px;
}
.adminBackupOpsArtifactTableRow span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminBackupOpsPageChrome {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
height: 6px;
margin-top: -42px;
display: flex;
overflow: visible;
}
.adminBackupOpsPageChrome .adminSettingsIntro {
margin: 0;
}
.adminStorageOverviewCard {
overflow: hidden;
}
.adminStorageOverviewHead {
border-bottom: 0;
padding-bottom: 0;
}
.adminStorageOverviewTitleBlock {
gap: 6px;
min-width: 0;
display: grid;
}
.adminStorageOverviewMeta {
color: color-mix(in srgb, var(--muted), var(--fg) 28%);
flex-wrap: wrap;
gap: 8px 12px;
font-size: 13px;
font-weight: 800;
display: flex;
}
.adminStorageOverviewMeta span + span:before {
content: "/";
color: color-mix(in srgb, var(--muted), transparent 24%);
margin-right: 12px;
}
.adminStorageTitleWithIcon {
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.adminStorageTitleWithIcon .adminSettingsChecklistTitle {
margin: 0;
}
.adminStorageIconBadge {
border: 1px solid color-mix(in srgb, var(--focus), transparent 72%);
background: color-mix(in srgb, var(--focus), white 94%);
width: 38px;
height: 38px;
color: var(--focus);
border-radius: 12px;
flex: none;
place-items: center;
display: inline-grid;
box-shadow: inset 0 -1px #ffffffd9;
}
.adminStorageIconBadge.isgreen {
border-color: color-mix(in srgb, var(--success), transparent 68%);
background: color-mix(in srgb, var(--success), white 93%);
color: color-mix(in srgb, var(--success), black 10%);
}
.adminStorageIconBadge.isamber {
border-color: color-mix(in srgb, var(--warning), transparent 58%);
background: color-mix(in srgb, var(--warning), white 91%);
color: color-mix(in srgb, var(--warning), black 24%);
}
.adminStorageIconBadge.isred {
border-color: color-mix(in srgb, var(--danger), transparent 64%);
background: color-mix(in srgb, var(--danger), white 93%);
color: color-mix(in srgb, var(--danger), black 10%);
}
.adminStorageIconBadge.isgray {
border-color: color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 18%);
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
}
.adminStorageIconBadge.ispurple {
color: #6d28d9;
background: #f6f1fe;
border-color: #7c3aed52;
}
.adminStorageIconBadge.isCenter {
border-color: color-mix(in srgb, var(--focus), transparent 52%);
background: color-mix(in srgb, var(--focus), white 92%);
width: 54px;
height: 54px;
color: var(--focus);
box-shadow: none;
border-radius: 14px;
}
.adminStorageIconBadge.isCenter svg {
filter: none;
}
.adminStorageStackedBar {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), white 20%);
border-radius: 999px;
width: 100%;
height: 16px;
display: flex;
overflow: hidden;
box-shadow: inset 0 0 0 1px #ffffff61;
}
.adminStorageStackedSegment {
background: color-mix(in srgb, var(--muted), white 52%);
min-width: 3px;
height: 100%;
display: block;
}
.adminStorageStackedSegment.isFull {
width: 100%;
}
.adminStorageStackedSegment.isWidth3 {
width: 3%;
}
.adminStorageStackedSegment.isWidth5 {
width: 5%;
}
.adminStorageStackedSegment.isWidth10 {
width: 10%;
}
.adminStorageStackedSegment.isWidth15 {
width: 15%;
}
.adminStorageStackedSegment.isWidth20 {
width: 20%;
}
.adminStorageStackedSegment.isWidth25 {
width: 25%;
}
.adminStorageStackedSegment.isWidth30 {
width: 30%;
}
.adminStorageStackedSegment.isWidth35 {
width: 35%;
}
.adminStorageStackedSegment.isWidth40 {
width: 40%;
}
.adminStorageStackedSegment.isWidth45 {
width: 45%;
}
.adminStorageStackedSegment.isWidth50 {
width: 50%;
}
.adminStorageStackedSegment.isWidth55 {
width: 55%;
}
.adminStorageStackedSegment.isWidth60 {
width: 60%;
}
.adminStorageStackedSegment.isWidth65 {
width: 65%;
}
.adminStorageStackedSegment.isWidth70 {
width: 70%;
}
.adminStorageStackedSegment.isWidth75 {
width: 75%;
}
.adminStorageStackedSegment.isWidth80 {
width: 80%;
}
.adminStorageStackedSegment.isWidth85 {
width: 85%;
}
.adminStorageStackedSegment.isWidth90 {
width: 90%;
}
.adminStorageStackedSegment.isWidth95 {
width: 95%;
}
.adminStorageStackedSegment.isWidth100 {
width: 100%;
}
.adminStorageStackedSegment.isPrimary {
background: color-mix(in srgb, var(--focus), white 20%);
}
.adminStorageStackedSegment.isDanger {
background: color-mix(in srgb, var(--danger), white 18%);
}
.adminStorageStackedSegment.isStorageBlue {
background: #2f6fed;
}
.adminStorageStackedSegment.isStoragePink {
background: #e6548a;
}
.adminStorageStackedSegment.isStoragePurple {
background: #8d5cf6;
}
.adminStorageStackedSegment.isStorageViolet {
background: #6f55e8;
}
.adminStorageStackedSegment.isStorageGreen {
background: #35b86b;
}
.adminStorageStackedSegment.isStorageOrange {
background: #f08a24;
}
.adminStorageStackedSegment.isStorageCyan {
background: #33b9d6;
}
.adminStorageStackedSegment.isStorageTeal {
background: #2aa99a;
}
.adminStorageStackedSegment + .adminStorageStackedSegment {
border-left: 1px solid #ffffffb3;
}
.adminStorageFamilyGrid, .adminStorageOverviewGrid, .adminStorageOverviewGridWide, .adminStorageBackupsGrid, .adminStorageRestoreGrid {
gap: 14px;
display: grid;
}
.adminStorageFamilyGrid {
border-top: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-top: 4px;
}
.adminStorageFamilyRow {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 30%);
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-width: 0;
height: 34px;
padding: 5px 0;
font-size: 12.5px;
display: grid;
}
.adminStorageFamilyRow > strong, .adminStorageFamilyMetric span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminStorageFamilyMetric {
min-width: 0;
color: var(--muted);
grid-template-columns: minmax(0, auto) minmax(42px, auto);
justify-content: end;
align-items: center;
gap: 10px;
font-size: 12.5px;
font-weight: 700;
display: grid;
}
.adminStorageFamilyMetric small {
color: var(--ink);
text-align: right;
white-space: nowrap;
font-size: 12px;
font-weight: 850;
}
.adminStorageFamilyDot {
background: color-mix(in srgb, var(--muted), white 36%);
border-radius: 999px;
width: 10px;
height: 10px;
box-shadow: 0 0 0 3px #0f172a09;
}
.adminStorageFamilyDot.isPrimary {
background: var(--focus);
}
.adminStorageFamilyDot.isDanger {
background: var(--danger);
}
.adminStorageFamilyDot.isStorageBlue {
background: #2f6fed;
}
.adminStorageFamilyDot.isStoragePink {
background: #e6548a;
}
.adminStorageFamilyDot.isStoragePurple {
background: #8d5cf6;
}
.adminStorageFamilyDot.isStorageViolet {
background: #6f55e8;
}
.adminStorageFamilyDot.isStorageGreen {
background: #35b86b;
}
.adminStorageFamilyDot.isStorageOrange {
background: #f08a24;
}
.adminStorageFamilyDot.isStorageCyan {
background: #33b9d6;
}
.adminStorageFamilyDot.isStorageTeal {
background: #2aa99a;
}
.adminStorageSignalStrip {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
color: var(--muted);
background: #ffffffd1;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 2px -20px -18px;
font-size: 12.5px;
font-weight: 750;
display: grid;
}
.adminStorageSignalItem {
align-items: center;
gap: 9px;
min-width: 0;
min-height: 42px;
padding: 9px 16px;
display: inline-flex;
}
.adminStorageSignalItem + .adminStorageSignalItem {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
}
.adminStorageSignalItem svg {
color: var(--muted);
flex: none;
}
.adminStorageSignalItem span {
text-overflow: clip;
white-space: normal;
min-width: 0;
line-height: 1.25;
overflow: visible;
}
.adminStorageSignalItem.isDanger svg {
color: var(--warning);
}
.adminStorageSignalItem.isDanger span {
color: color-mix(in srgb, var(--warning), black 36%);
}
.adminStorageOverviewGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
}
.adminStorageOverviewGridWide {
grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
}
.adminStorageStatusCard {
min-height: 0;
}
.adminStorageStatusCard > .adminBackupOpsSurfaceBody {
grid-template-rows: auto 1fr;
height: 100%;
}
.adminStorageStatusTitle {
align-items: flex-start;
}
.adminStorageStatusTitle .adminSettingsChecklistTitle {
font-size: 17px;
line-height: 1.25;
}
.adminStorageProtectionSummary {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
align-content: center;
gap: 8px;
min-height: 104px;
padding-top: 14px;
display: grid;
}
.adminStorageProtectionSummary div {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageProtectionSummary strong {
color: var(--fg);
font-size: 14px;
line-height: 1.25;
}
.adminStorageProtectionSummary span:not(.pill) {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminStorageStatusCenter {
text-align: center;
align-content: center;
place-items: center;
gap: 8px;
min-height: 104px;
padding: 4px 8px 2px;
display: grid;
}
.adminStorageStatusCenter strong {
font-size: 16px;
line-height: 1.2;
}
.adminStorageStatusCenter span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminStorageStatusChips {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 2px;
display: flex;
}
.adminStorageRecommendationList, .adminStorageExcludedList {
gap: 0;
display: grid;
}
.adminStorageRecommendation {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
grid-template-columns: auto minmax(0, 1fr) 236px;
align-items: center;
gap: 12px;
padding: 12px 0;
display: grid;
}
.adminStorageRecommendation .adminStorageIconBadge {
border-color: color-mix(in srgb, var(--focus), transparent 72%);
background: color-mix(in srgb, var(--focus), white 94%);
width: 34px;
height: 34px;
color: var(--focus);
border-radius: 999px;
}
.adminStorageRecommendation:first-child {
border-top: 0;
}
.adminStorageRecommendation div {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageRecommendation span, .adminStorageExcludedList span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminStorageInlineAction {
inline-size: 236px;
white-space: nowrap;
justify-content: space-between;
min-width: 0;
}
.adminStorageInsightPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
grid-template-columns: 96px minmax(0, 1fr);
align-items: center;
gap: 16px;
min-height: 118px;
padding: 16px;
display: grid;
}
.adminStorageInsightGlyph {
background: radial-gradient(circle at center, white 0 34%, transparent 35%),
conic-gradient(#2f6fed 0 72%, #33b9d6 72% 82%, #35b86b 82% 90%, #8d5cf6 90% 96%, #f08a24 96% 100%);
width: 92px;
height: 92px;
color: var(--focus);
box-shadow: none;
border-radius: 999px;
place-items: center;
display: grid;
}
.adminStorageInsightCopy {
text-align: left;
justify-items: start;
gap: 8px;
min-width: 0;
display: grid;
}
.adminStorageInsightCopy strong {
color: var(--fg);
font-size: 15px;
line-height: 1.25;
}
.adminStorageInsightCopy span {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.adminStorageInsightAction {
justify-content: space-between;
justify-self: start;
align-items: center;
gap: 8px;
margin-top: 2px;
display: inline-flex;
}
.adminStorageBackupsGrid {
grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
align-items: start;
}
.adminBackupOpsBottomGrid {
grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
align-items: start;
}
.adminStorageRestoreGrid {
grid-template-columns: minmax(260px, 1fr) minmax(260px, .9fr) minmax(220px, .7fr);
}
.adminStorageRestoreStack {
gap: 18px;
display: grid;
}
.adminStorageRestoreTopGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
display: grid;
}
.adminStorageRestoreLowerGrid {
grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr);
align-items: start;
gap: 16px;
display: grid;
}
.adminStorageRestoreSummaryCard, .adminStorageRestoreSummaryCard > .adminBackupOpsSurfaceBody {
min-height: 100%;
}
.adminStorageReadinessRows, .adminStorageRestoreIncludedRows, .adminStorageExcludedRows, .adminStorageGuardrailList {
gap: 0;
display: grid;
}
.adminStorageReadinessRow, .adminStorageRestoreIncludedRow, .adminStorageExcludedRows article, .adminStorageGuardrailRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
align-items: center;
gap: 10px;
min-width: 0;
padding: 13px 0;
display: grid;
}
.adminStorageReadinessRow {
grid-template-columns: auto minmax(0, 1fr) minmax(104px, auto);
}
.adminStorageReadinessIcon, .adminStorageRestoreIncludedRow > span, .adminStorageExcludedRows article > span, .adminStorageGuardrailIcon {
background: color-mix(in srgb, var(--focus), white 92%);
width: 30px;
height: 30px;
color: var(--focus);
border-radius: 999px;
place-items: center;
display: inline-grid;
}
.adminStorageReadinessRow > div, .adminStorageReadinessValue {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageReadinessRow strong, .adminStorageRestoreIncludedRow strong, .adminStorageExcludedRows strong, .adminStorageGuardrailRow strong {
color: var(--fg);
font-size: 13px;
line-height: 1.25;
}
.adminStorageReadinessRow small, .adminStorageExcludedRows + .adminSettingsIntro {
color: var(--muted);
font-size: 12px;
font-weight: 650;
line-height: 1.35;
}
.adminStorageRestoreValidationChips {
flex-wrap: wrap;
gap: 5px;
min-width: 0;
margin-top: 5px;
display: flex;
}
.adminStorageRestoreValidationChips .adminBackupOpsStatusPill {
white-space: normal;
max-width: 100%;
padding: 3px 7px;
font-size: 11px;
line-height: 1.2;
}
.adminStorageReadinessValue {
text-align: right;
justify-items: end;
}
.adminStorageReadinessValue strong {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px;
overflow: hidden;
}
.adminStorageRestoreIncludedRow {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.adminStorageRestoreIncludedRow > span {
background: color-mix(in srgb, var(--ok), white 90%);
color: color-mix(in srgb, var(--ok), black 8%);
}
.adminStorageExcludedRows article {
grid-template-columns: auto minmax(0, 1fr);
padding: 11px 0;
}
.adminStorageExcludedRows article > span {
background: color-mix(in srgb, var(--muted), white 92%);
width: 26px;
height: 26px;
color: var(--muted);
}
.adminStorageRestoreStepper {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 22px 16px 10px;
display: grid;
}
.adminStorageRestoreStepper article {
text-align: center;
justify-items: center;
gap: 10px;
min-width: 0;
display: grid;
position: relative;
}
.adminStorageRestoreStepper article:before {
content: "";
background: color-mix(in srgb, var(--stroke), transparent 18%);
height: 2px;
position: absolute;
top: 15px;
left: -50%;
right: 50%;
}
.adminStorageRestoreStepper article:first-child:before {
display: none;
}
.adminStorageRestoreStepper article.isDone:before, .adminStorageRestoreStepper article.isCurrent:before {
background: color-mix(in srgb, var(--focus), transparent 8%);
}
.adminStorageRestoreStepper article > span {
z-index: 1;
border: 2px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg);
width: 32px;
height: 32px;
color: var(--muted);
border-radius: 999px;
place-items: center;
font-size: 13px;
font-weight: 900;
display: inline-grid;
position: relative;
}
.adminStorageRestoreStepper article.isDone > span {
border-color: var(--focus);
background: var(--focus);
color: #fff;
}
.adminStorageRestoreStepper article.isCurrent > span {
border-color: var(--focus);
background: color-mix(in srgb, var(--focus), white 90%);
color: var(--focus);
}
.adminStorageRestoreStepper div {
gap: 5px;
max-width: 190px;
display: grid;
}
.adminStorageRestoreStepper strong {
color: var(--fg);
font-size: 13px;
line-height: 1.25;
}
.adminStorageRestoreStepper small {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminStorageRestoreStack .adminStorageInfoNote {
grid-template-columns: auto auto minmax(0, 1fr);
margin-top: 14px;
padding: 12px 14px;
}
.adminStorageRestoreStack .adminStorageInfoNote svg {
color: var(--focus);
}
.adminStorageRestoreStack .adminBackupOpsStatusPill {
text-transform: none;
white-space: nowrap;
border-radius: 999px;
gap: 5px;
min-height: 22px;
padding: 3px 6px;
font-size: 10.5px;
font-weight: 850;
line-height: 1.1;
}
.adminStorageRestoreStack .adminBackupOpsStatusPill:before {
width: 5px;
height: 5px;
}
.adminStorageRestorePointTable tr.isSelected td {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminStorageRestorePointDate {
align-items: center;
gap: 6px;
min-width: 0;
display: inline-flex;
}
.adminStorageRestorePointDate > span {
border: 2px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: var(--bg);
border-radius: 999px;
flex: none;
width: 13px;
height: 13px;
}
.adminStorageRestorePointDate > span.isSelected {
border-color: var(--focus);
background: radial-gradient(circle, var(--focus) 0 42%, transparent 45%);
}
.adminStorageRestorePointDate strong {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11.5px;
overflow: hidden;
}
.adminStorageRestoreRowAction {
white-space: nowrap;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 34px;
padding: 8px;
font-size: 12px;
}
.adminStorageGuardrailRow {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.adminStorageGuardrailIcon.isSuccess {
background: color-mix(in srgb, var(--ok), white 90%);
color: color-mix(in srgb, var(--ok), black 8%);
}
.adminStorageGuardrailIcon.isWarning {
background: color-mix(in srgb, var(--warning), white 88%);
color: color-mix(in srgb, var(--warning), black 30%);
}
.adminStorageGuardrailIcon.isDanger {
background: color-mix(in srgb, var(--danger), white 88%);
color: var(--danger);
}
.adminStorageGuardrailIcon.isNeutral {
background: color-mix(in srgb, var(--muted), white 92%);
color: var(--muted);
}
.adminStorageRestoreWarning {
border: 1px solid color-mix(in srgb, var(--warning), transparent 50%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warning), white 92%);
color: color-mix(in srgb, var(--warning), black 36%);
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
margin-top: 12px;
padding: 12px;
display: grid;
}
.adminStorageRestoreWarning strong {
color: inherit;
font-size: 13px;
line-height: 1.35;
}
.adminStorageOperationCard, .adminStorageRestorePoint {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg-2) 12%);
gap: 10px;
min-width: 0;
padding: 14px;
display: grid;
}
.adminStorageOperationCard span, .adminStorageRestorePoint span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminStorageOperationSummary {
border: 1px solid color-mix(in srgb, var(--focus), transparent 72%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 97%);
gap: 16px;
padding: 14px;
display: grid;
}
.adminStorageOperationPrimary, .adminStorageOperationFooter {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
min-width: 0;
display: flex;
}
.adminStorageOperationPrimary > div {
gap: 4px;
min-width: 0;
display: grid;
}
.adminStorageOperationPrimary strong {
font-size: 16px;
line-height: 1.2;
}
.adminStorageOperationPrimary span, .adminStorageOperationFooter span {
color: var(--muted);
font-size: 12px;
font-weight: 750;
line-height: 1.35;
}
.adminStorageStageTracker {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
min-width: 0;
display: grid;
}
.adminStorageStageStep {
min-width: 0;
color: var(--muted);
text-align: center;
justify-items: center;
gap: 8px;
display: grid;
position: relative;
}
.adminStorageStageStep:before {
content: "";
background: color-mix(in srgb, var(--stroke), transparent 15%);
height: 2px;
position: absolute;
top: 8px;
left: -50%;
right: 50%;
}
.adminStorageStageStep:first-child:before {
display: none;
}
.adminStorageStageStep i {
z-index: 1;
border: 2px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: var(--bg);
border-radius: 999px;
width: 18px;
height: 18px;
position: relative;
}
.adminStorageStageStep small {
color: inherit;
font-size: 11px;
font-weight: 850;
line-height: 1.2;
}
.adminStorageStageStep.isDone, .adminStorageStageStep.isCurrent {
color: var(--focus);
}
.adminStorageStageStep.isDone:before, .adminStorageStageStep.isCurrent:before {
background: var(--focus);
}
.adminStorageStageStep.isDone i {
border-color: var(--focus);
background: var(--focus);
box-shadow: inset 0 0 0 4px var(--focus);
}
.adminStorageStageStep.isCurrent i {
border-color: var(--focus);
background: var(--bg);
box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--focus), white 88%);
}
.adminStorageStageStep.isFailed {
color: var(--danger);
}
.adminStorageStageStep.isFailed:before, .adminStorageStageStep.isFailed i {
border-color: var(--danger);
background: color-mix(in srgb, var(--danger), white 88%);
}
.adminStorageOperationFooter {
padding-top: 2px;
}
.adminStorageCompactEmpty {
text-align: center;
align-content: center;
justify-items: center;
min-height: 112px;
}
.adminStorageCompactEmpty svg {
color: var(--focus);
}
.adminStorageCompactAction {
inline-size: auto;
white-space: nowrap;
justify-content: space-between;
justify-self: start;
min-width: 176px;
}
.adminStorageRestorePointBanner {
border: 1px solid color-mix(in srgb, var(--focus), transparent 68%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--focus), white 96%);
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
min-width: 0;
padding: 13px;
display: grid;
}
.adminStorageRestorePointBanner.isEmpty {
border-color: color-mix(in srgb, var(--warning), transparent 65%);
background: color-mix(in srgb, var(--warning), white 94%);
}
.adminStorageRestorePointBanner svg {
color: var(--focus);
}
.adminStorageRestorePointBanner.isEmpty svg {
color: var(--warning);
}
.adminStorageRestorePointBanner div {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageRestorePointBanner strong {
color: var(--fg);
font-size: 14px;
line-height: 1.25;
}
.adminStorageRestorePointBanner span {
color: var(--muted);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.adminStorageRestorePointCells {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
border-radius: var(--radius);
grid-template-columns: repeat(5, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.adminStorageRestorePointCells > div {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
gap: 5px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminStorageRestorePointCells > div:last-child {
border-right: 0;
}
.adminStorageRestorePointCells svg {
color: var(--muted);
}
.adminStorageRestorePointCells > div > span:not(.adminBackupOpsStatusPill) {
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
font-size: 11px;
font-weight: 850;
}
.adminStorageRestorePointCells strong {
color: var(--fg);
font-size: 13px;
font-weight: 850;
}
.adminStorageBackupActionGroup {
flex-wrap: wrap;
align-items: center;
display: flex;
}
.adminStorageMiniButton {
appearance: none;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg);
min-height: 30px;
color: var(--fg);
cursor: pointer;
font: inherit;
white-space: nowrap;
border-radius: 8px;
padding: 0 10px;
font-size: 12px;
font-weight: 850;
line-height: 1;
}
.adminStorageMiniButton:hover {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
color: var(--focus);
}
.adminStorageMiniButton:disabled {
color: color-mix(in srgb, var(--muted), transparent 35%);
cursor: not-allowed;
}
.adminStorageMiniButton.isMuted {
color: var(--muted);
}
.adminStorageRowMenu {
display: inline-flex;
position: relative;
}
.adminStorageRowMenu summary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg);
width: 34px;
min-height: 30px;
color: var(--fg);
cursor: pointer;
border-radius: 8px;
place-items: center;
font-size: 17px;
font-weight: 900;
line-height: 1;
list-style: none;
display: inline-grid;
}
.adminStorageRowMenu summary::-webkit-details-marker {
display: none;
}
.adminStorageRowMenu summary:hover {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
color: var(--focus);
}
.adminStorageRowMenu > div {
z-index: 25;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: var(--bg);
border-radius: 10px;
gap: 2px;
min-width: 210px;
padding: 6px;
display: grid;
position: absolute;
top: calc(100% + 6px);
right: 0;
box-shadow: 0 16px 36px #0f172a24;
}
.adminStorageRowMenu button {
appearance: none;
width: 100%;
min-height: 34px;
color: var(--fg);
cursor: pointer;
font: inherit;
text-align: left;
background: none;
border: 0;
border-radius: 7px;
justify-content: flex-start;
padding: 0 10px;
font-size: 12px;
font-weight: 800;
display: flex;
}
.adminStorageRowMenu button:hover:not(:disabled) {
background: color-mix(in srgb, var(--focus), white 94%);
color: var(--focus);
}
.adminStorageRowMenu button:disabled {
color: color-mix(in srgb, var(--muted), transparent 35%);
cursor: not-allowed;
}
.adminStorageRowMenu button.isDanger {
color: var(--muted);
}
.adminStorageRowMenu button.isDanger:hover:not(:disabled) {
background: color-mix(in srgb, var(--danger), white 94%);
color: var(--danger);
}
.adminStorageStageRail {
gap: 8px;
padding-bottom: 3px;
display: flex;
overflow-x: auto;
}
.adminStorageStageRail span {
border-top: 3px solid color-mix(in srgb, var(--stroke), transparent 14%);
color: var(--muted);
flex: 0 0 112px;
padding-top: 10px;
font-size: 11px;
font-weight: 800;
line-height: 1.25;
}
.adminStorageStageRail span.isDone {
border-top-color: var(--focus);
color: var(--fg);
}
.adminStorageStageRail span.isCurrent {
border-top-color: var(--focus);
color: var(--focus);
}
.adminStorageRestoreSteps, .adminStorageSetupStepper {
gap: 10px;
display: grid;
}
.adminStorageRestoreSteps {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adminStorageSetupStepper {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.adminStorageRestoreSteps article, .adminStorageSetupStepper article {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg-2) 12%);
gap: 6px;
min-width: 0;
padding: 13px;
display: grid;
}
.adminStorageRestoreSteps article > span:first-child, .adminStorageSetupStepper article > span:first-child {
background: color-mix(in srgb, var(--focus), white 88%);
width: 24px;
height: 24px;
color: var(--focus);
border-radius: 999px;
place-items: center;
font-size: 12px;
font-weight: 900;
display: inline-grid;
}
.adminStorageSetupStepper small {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.adminStorageHealthStack {
gap: 14px;
display: grid;
}
.adminStorageDailyHealthCard .adminBackupOpsSurfaceBody, .adminStorageHealthPanel .adminBackupOpsSurfaceBody {
gap: 10px;
padding: 18px;
}
.adminStorageDailyHealthHeader {
grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
align-items: start;
gap: 16px;
padding-bottom: 10px;
display: grid;
}
.adminStorageDailyHealthTitleBlock {
gap: 5px;
min-width: 0;
display: grid;
}
.adminStorageHealthLastCheck {
color: var(--muted);
text-align: right;
justify-items: end;
gap: 3px;
font-size: 12px;
font-weight: 800;
line-height: 1.25;
display: grid;
}
.adminStorageHealthLastCheck strong {
color: color-mix(in srgb, var(--fg), var(--muted) 16%);
font-size: 13px;
font-weight: 850;
}
.adminStorageHealthTable {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
display: grid;
overflow: hidden;
}
.adminStorageHealthTableHead, .adminStorageHealthRow {
grid-template-columns: minmax(230px, .9fr) minmax(130px, .42fr) minmax(0, 1.28fr) minmax(146px, .44fr);
align-items: center;
gap: 10px;
padding: 7px 14px;
display: grid;
}
.adminStorageHealthTableHead {
background: color-mix(in srgb, var(--bg-2), white 28%);
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 850;
}
.adminStorageHealthRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 26%);
min-height: 44px;
font-size: 13px;
}
.adminStorageHealthCheck {
align-items: center;
gap: 9px;
min-width: 0;
display: flex;
}
.adminStorageHealthCheckIcon {
border: 1px solid color-mix(in srgb, var(--focus), transparent 78%);
background: color-mix(in srgb, var(--focus), white 94%);
width: 28px;
height: 28px;
color: var(--focus);
border-radius: 999px;
flex: none;
place-items: center;
display: inline-grid;
}
.adminStorageHealthRow > span:nth-child(3) {
color: var(--muted);
line-height: 1.35;
}
.adminStorageHealthAction {
min-width: 124px;
min-height: 30px;
padding: 6px 10px;
font-size: 12px;
line-height: 1.1;
}
.adminStorageTableFoot {
color: var(--muted);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 14px;
padding-top: 8px;
font-size: 12px;
font-weight: 700;
display: grid;
}
.adminStorageTableFoot span {
align-items: flex-start;
gap: 8px;
min-width: 0;
display: inline-flex;
}
.adminStorageTableFoot span:before {
content: "i";
border: 1px solid color-mix(in srgb, var(--muted), transparent 34%);
width: 15px;
height: 15px;
color: var(--muted);
border-radius: 999px;
flex: none;
place-items: center;
margin-top: 1px;
font-size: 10px;
font-weight: 900;
line-height: 1;
display: inline-grid;
}
.adminStorageHealthLowerGrid {
grid-template-columns: minmax(230px, .9fr) minmax(230px, .9fr) minmax(330px, 1.18fr) minmax(260px, .88fr);
align-items: stretch;
gap: 12px;
display: grid;
}
.adminStorageHealthPanel {
height: 100%;
}
.adminStorageHealthPanel .adminBackupOpsSurfaceBody {
align-content: start;
height: 100%;
}
.adminStorageCompactRows, .adminStorageLegendRows, .adminStorageActionQueue {
gap: 0;
display: grid;
}
.adminStorageCompactRow, .adminStorageLegendRows article, .adminStorageActionQueueItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
align-items: center;
gap: 9px;
min-width: 0;
padding: 8px 0;
display: grid;
}
.adminStoragePanelPreview .adminStorageCompactRow:first-child, .adminStoragePanelPreview .adminStorageActionQueueItem:first-child, .adminStorageLegendRows article:first-child {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
}
.adminStorageCompactRow {
grid-template-columns: minmax(0, 1fr) auto;
}
.adminStorageCompactRow div, .adminStorageActionQueueItem div {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageCompactRow strong, .adminStorageActionQueueCopy strong {
overflow-wrap: anywhere;
white-space: normal;
font-size: 12.5px;
line-height: 1.22;
}
.adminStorageCompactRow span, .adminStorageActionQueueItem small, .adminStorageLegendRows span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminStorageActionQueueItem small {
font-size: 10.5px;
}
.adminStoragePanelDisclosure, .adminStoragePanelLink {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
margin-top: auto;
padding-top: 7px;
}
.adminStoragePanelDisclosure summary, .adminStoragePanelLink {
min-height: 34px;
color: var(--focus);
cursor: pointer;
justify-content: flex-start;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 850;
line-height: 1.2;
list-style: none;
display: flex;
}
.adminStoragePanelLink {
cursor: default;
}
.adminStoragePanelDisclosure summary::-webkit-details-marker {
display: none;
}
.adminStoragePanelDisclosure summary svg, .adminStoragePanelLink svg {
transition: transform .16s;
}
.adminStoragePanelDisclosure[open] summary svg {
transform: rotate(90deg);
}
.adminStoragePanelDisclosureRows {
display: grid;
}
.adminStoragePanelDisclosureRows .adminStorageCompactRow:nth-child(-n+3), .adminStoragePanelDisclosureRows.adminStorageActionQueue .adminStorageActionQueueItem:nth-child(-n+3) {
display: none;
}
.adminStorageQueueHead {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminStorageActionQueueItem {
grid-template-columns: minmax(0, 1fr) 88px;
gap: 9px;
}
.adminStorageActionQueueCopy {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 9px;
display: grid;
}
.adminStorageActionQueueCopy strong {
white-space: normal;
}
.adminStoragePriorityChip {
color: #475467;
text-transform: none;
background: #f9fafb;
border: 1px solid #d0d5dd;
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 50px;
min-height: 22px;
padding: 3px 7px;
font-size: 9.5px;
font-weight: 900;
line-height: 1;
display: inline-flex;
}
.adminStoragePriorityChip.isHigh {
color: #b42318;
background: #fef3f2;
border-color: #fecdca;
}
.adminStoragePriorityChip.isMedium {
color: #b54708;
background: #fffaeb;
border-color: #fedf89;
}
.adminStoragePriorityChip.isLow {
color: #175cd3;
background: #eff8ff;
border-color: #b2ddff;
}
.adminStorageQueueAction {
width: 88px;
min-height: 34px;
padding: 6px 10px;
font-size: 11px;
line-height: 1.1;
}
.adminStorageActionQueueItem.isHigh, .adminStorageActionQueueItem.isMedium, .adminStorageActionQueueItem.isLow {
border-left-color: #0000;
}
.adminStorageLegendRows article {
grid-template-columns: minmax(124px, auto) minmax(0, 1fr);
}
.adminStorageRowChevron {
min-height: 30px;
color: var(--focus);
cursor: pointer;
font: inherit;
background: none;
border: 0;
justify-content: flex-end;
align-items: center;
gap: 5px;
padding: 0;
font-size: 12px;
font-weight: 850;
display: inline-flex;
}
.adminStorageRowChevron:disabled {
color: var(--muted);
cursor: default;
opacity: .68;
}
.adminStorageSetupGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
display: grid;
}
.adminStorageSetupStack, .adminStorageSetupDesktop {
gap: 10px;
display: grid;
}
.adminStorageSetupMobile {
display: none;
}
.adminStorageSetupProgressCard .adminBackupOpsSurfaceBody, .adminStorageSetupCard .adminBackupOpsSurfaceBody {
gap: 8px;
padding: 12px 16px;
}
.adminStorageSetupProgressCard .adminBackupOpsSurfaceBody {
padding: 14px 18px;
}
.adminStorageSetupProgressLayout {
grid-template-columns: minmax(260px, .62fr) minmax(0, 2.5fr);
align-items: center;
gap: 18px;
display: grid;
}
.adminStorageSetupProgressIntro {
gap: 6px;
min-width: 0;
display: grid;
}
.adminStorageSetupProgressIntro .adminSettingsIntro {
max-width: 34ch;
margin: 0;
font-size: 13px;
line-height: 1.42;
}
.adminStorageSetupJourney {
grid-template-columns: repeat(7, minmax(0, 1fr));
align-items: start;
gap: 0;
min-width: 0;
display: grid;
}
.adminStorageSetupJourneyStep {
min-width: 0;
color: var(--muted);
gap: 4px;
padding-top: 24px;
display: grid;
position: relative;
}
.adminStorageSetupJourneyStep:before {
content: "";
background: color-mix(in srgb, var(--stroke), transparent 14%);
height: 2px;
position: absolute;
top: 10px;
left: -50%;
right: 50%;
}
.adminStorageSetupJourneyStep:first-child:before {
display: none;
}
.adminStorageSetupJourneyStep.isdone:before, .adminStorageSetupJourneyStep.iscurrent:before {
background: color-mix(in srgb, var(--focus), transparent 18%);
}
.adminStorageSetupJourneyStep .adminStorageSetupStepNumber {
z-index: 1;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: var(--bg);
width: 22px;
height: 22px;
color: var(--muted);
border-radius: 999px;
place-items: center;
font-size: 11px;
font-weight: 900;
display: inline-grid;
position: absolute;
top: 0;
left: 0;
}
.adminStorageSetupJourneyStep.isdone .adminStorageSetupStepNumber {
border-color: var(--focus);
background: var(--focus);
color: #fff;
}
.adminStorageSetupJourneyStep.iscurrent .adminStorageSetupStepNumber {
border-color: color-mix(in srgb, var(--focus), transparent 12%);
background: color-mix(in srgb, var(--focus), white 91%);
color: var(--focus);
}
.adminStorageSetupJourneyStep strong {
min-width: 0;
max-width: 132px;
color: var(--fg);
font-size: 11px;
font-weight: 860;
line-height: 1.22;
}
.adminStorageSetupJourneyStep .adminBackupOpsStatusPill {
justify-self: start;
}
.adminStorageSetupStepper {
align-items: stretch;
gap: 12px;
}
.adminStorageSetupStepper article {
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 66px;
padding: 10px;
position: relative;
}
.adminStorageSetupStepper article > .adminStorageSetupStepNumber {
background: color-mix(in srgb, var(--focus), white 82%);
width: 22px;
height: 22px;
color: var(--focus);
position: absolute;
top: 8px;
left: 8px;
}
.adminStorageSetupStepper article > .adminStorageIconBadge {
margin-left: 22px;
}
.adminStorageSetupStepper article > div {
gap: 5px;
min-width: 0;
display: grid;
}
.adminStorageSetupStepper article strong {
text-overflow: ellipsis;
font-size: 13px;
line-height: 1.2;
overflow: hidden;
}
.adminStorageSetupGuideGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 10px 12px;
display: grid;
}
.adminStorageSetupCard {
min-width: 0;
}
.adminStorageSetupCard .adminBackupOpsSurfaceBody {
min-height: 100%;
}
.adminStorageSetupProgressCard .adminStorageIconBadge, .adminStorageSetupCard .adminStorageIconBadge, .adminStorageReviewSurface .adminStorageIconBadge {
border-radius: 10px;
width: 34px;
height: 34px;
min-height: 34px;
}
.adminStorageSetupProgressCard .adminSettingsChecklistTitle, .adminStorageSetupCard .adminSettingsChecklistTitle, .adminStorageReviewSurface .adminSettingsChecklistTitle {
font-size: 17px;
line-height: 1.18;
}
.adminStorageSetupCard .adminStorageTitleWithIcon, .adminStorageReviewSurface .adminStorageTitleWithIcon {
gap: 9px;
}
.adminStorageSetupScopeRows {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
display: grid;
}
.adminStorageSetupScopeRows article {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-width: 0;
padding: 8px 0;
display: grid;
}
.adminStorageSetupScopeRows .adminStorageIconBadge {
width: 32px;
height: 32px;
min-height: 32px;
}
.adminStorageSetupScopeRows .adminBackupOpsGroupTitle {
font-size: 13px;
}
.adminStorageSetupScopeRows .adminSettingsIntro {
margin: 0;
font-size: 12px;
line-height: 1.26;
}
.adminStorageSetupNote {
margin-top: 0;
padding: 8px 10px;
}
.adminStorageSetupNote strong {
color: color-mix(in srgb, var(--fg), black 4%);
font-size: 12px;
line-height: 1.3;
}
.adminStoragePrereqTableWrap {
overflow-x: hidden;
}
.adminStoragePrereqTable {
table-layout: fixed;
}
.adminStoragePrereqTable th:first-child, .adminStoragePrereqTable td:first-child {
width: 28%;
}
.adminStoragePrereqTable th:nth-child(2), .adminStoragePrereqTable td:nth-child(2) {
width: 24%;
}
.adminStoragePrereqTable th:nth-child(3), .adminStoragePrereqTable td:nth-child(3) {
width: 48%;
}
.adminBackupOpsBackupTable.adminStoragePrereqTable thead th, .adminBackupOpsBackupTable.adminStoragePrereqTable tbody td {
padding: 4px 8px;
font-size: 11px;
line-height: 1.16;
}
.adminBackupOpsBackupTable.adminStoragePrereqTable thead th {
padding-top: 7px;
padding-bottom: 7px;
}
.adminBackupOpsBackupTable.adminStoragePrereqTable tbody td {
font-weight: 780;
}
.adminBackupOpsBackupTable.adminStoragePrereqTable .adminBackupOpsStatusPill {
min-height: 20px;
padding: 2px 7px;
font-size: 11px;
}
.adminBackupOpsBackupTable.adminStoragePrereqTable td:nth-child(3) {
white-space: nowrap;
}
.adminStorageSetupCard > .adminBackupOpsSurfaceBody > .adminSettingsIntro {
font-size: 12px;
line-height: 1.32;
}
.adminStorageSetupPathField .input {
min-height: 36px;
}
.adminStorageSetupCard .input {
min-height: 34px;
font-size: 13px;
}
.adminStorageSetupCard .label {
font-size: 10px;
}
.adminStorageSetupMetricPills {
color: var(--muted);
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
font-size: 12px;
font-weight: 760;
display: flex;
}
.adminStorageSetupMetricPills span {
align-items: center;
gap: 6px;
min-width: 0;
display: inline-flex;
}
.adminStorageSetupMetricPills small {
color: var(--muted);
font-size: 12px;
font-weight: 760;
}
.adminStorageSetupMetricPills strong {
color: color-mix(in srgb, var(--fg), var(--muted) 18%);
font-size: 12px;
}
.adminStorageSetupActions {
gap: 8px;
margin-top: auto;
}
.adminStorageSetupActions .btn {
min-height: 32px;
}
.adminStorageSetupRetentionLayout {
grid-template-columns: minmax(120px, .62fr) minmax(0, 1.38fr);
align-items: start;
gap: 12px;
display: grid;
}
.adminStorageSetupNextRun {
min-width: 0;
color: var(--muted);
gap: 5px;
font-size: 12px;
font-weight: 760;
display: grid;
}
.adminStorageSetupNextRun > span {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 10px;
font-weight: 850;
}
.adminStorageSetupNextRun > strong {
color: var(--fg);
font-size: 14px;
}
.adminStorageSetupEmailPair .input {
min-height: 38px;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminBackupOpsSurfaceBody {
gap: 12px;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminStorageHealthTargetRows {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px 24px;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminStorageHealthTargetRows label {
grid-template-columns: minmax(124px, 1fr) 58px minmax(34px, auto);
align-items: center;
gap: 8px;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminStorageHealthTargetRows label > span {
line-height: 1.22;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminStorageHealthTargetRows .input {
justify-self: end;
width: 58px;
min-height: 32px;
padding-left: 8px;
padding-right: 8px;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminStorageHealthTargetRows small {
min-width: 34px;
}
.adminStorageSetupCard.adminStorageHealthTargetsCard .adminStorageSetupEmailPair {
align-items: start;
gap: 10px;
padding-top: 1px;
}
.adminStorageSetupCard .adminStorageTargetRows {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px 10px;
}
.adminStorageSetupCard .adminStorageTargetRows label {
grid-template-columns: minmax(0, 1fr) 64px 38px;
gap: 6px;
}
.adminStorageSetupCard .adminBackupOpsFieldPair {
gap: 10px;
}
.adminStorageSetupCard .adminStorageSegmentedControl button, .adminStorageSetupCard .adminStorageScheduleOptions button {
min-height: 32px;
}
.adminStorageSetupCard .adminStorageRetentionRows, .adminStorageSetupCard .adminStorageTargetRows {
gap: 6px;
}
.adminStorageSetupCard .adminStorageRetentionRows label, .adminStorageSetupCard .adminStorageTargetRows label {
font-size: 12px;
}
.adminStorageSetupCard .adminStorageRetentionRows .input, .adminStorageSetupCard .adminStorageTargetRows .input {
min-height: 29px;
}
.adminStorageReviewSurface .adminBackupOpsSurfaceBody {
padding: 0;
}
.adminStorageReviewSurface .adminStorageReviewCard {
border-radius: inherit;
background: color-mix(in srgb, var(--focus), white 98%);
border: 0;
gap: 10px;
margin: 0;
padding: 12px;
}
.adminStorageReviewIntro {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.adminStorageReviewActions {
justify-content: flex-end;
}
.adminStorageSetupMobileSection {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 4px);
min-width: 0;
box-shadow: none;
background: #fff;
}
.adminStorageSetupMobileSection summary {
cursor: pointer;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
min-height: 76px;
padding: 11px 14px;
list-style: none;
display: grid;
}
.adminStorageSetupMobileSection summary::-webkit-details-marker {
display: none;
}
.adminStorageSetupMobileCopy {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageSetupMobileCopy strong {
color: var(--fg);
font-size: 16px;
font-weight: 900;
line-height: 1.18;
}
.adminStorageSetupMobileCopy > span {
color: var(--muted);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
font-weight: 680;
line-height: 1.32;
display: -webkit-box;
overflow: hidden;
}
.adminStorageSetupMobileChip {
min-width: max-content;
}
.adminStorageSetupMobileChevron {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
transition: transform .14s;
}
.adminStorageSetupMobileSection[open] .adminStorageSetupMobileChevron {
transform: rotate(90deg);
}
.adminStorageSetupMobileDetail {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
gap: 10px;
padding: 0 14px 12px;
display: grid;
}
.adminStorageSetupMobileDetail > :first-child {
margin-top: 12px;
}
.adminStorageSetupMobileNote {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
background: color-mix(in srgb, var(--focus), white 97%);
margin-top: 2px;
}
.adminStorageSetupMobileNote svg {
color: var(--focus);
}
.adminStorageSetupMobileActions {
gap: 9px;
display: grid;
}
.adminStorageSegmentedControl, .adminStorageScheduleOptions {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 42%);
display: grid;
overflow: hidden;
}
.adminStorageSegmentedControl {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminStorageScheduleOptions {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adminStorageSegmentedControl button, .adminStorageScheduleOptions button, .adminStorageTimelineFilters button {
appearance: none;
border: 0;
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
min-height: 38px;
color: color-mix(in srgb, var(--fg), var(--muted) 18%);
cursor: pointer;
font: inherit;
background: none;
font-size: 12px;
font-weight: 800;
}
.adminStorageSegmentedControl button:last-child, .adminStorageScheduleOptions button:last-child {
border-right: 0;
}
.adminStorageSegmentedControl button.isSelected, .adminStorageScheduleOptions button.isSelected, .adminStorageTimelineFilters button.isSelected {
background: color-mix(in srgb, var(--focus), white 94%);
color: var(--focus);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 42%);
}
.adminStorageSegmentedControl button:disabled, .adminStorageScheduleOptions button:disabled {
cursor: not-allowed;
opacity: .58;
}
.adminStorageInlineStats {
color: var(--muted);
flex-wrap: wrap;
gap: 10px 16px;
font-size: 12px;
font-weight: 740;
display: flex;
}
.adminStorageInlineStats span {
align-items: center;
gap: 6px;
display: inline-flex;
}
.adminStorageRetentionRows, .adminStorageTargetRows {
gap: 8px;
display: grid;
}
.adminStorageRetentionRows label, .adminStorageTargetRows label {
color: var(--muted);
grid-template-columns: minmax(0, 1fr) 72px 54px;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 740;
display: grid;
}
.adminStorageRetentionRows .input, .adminStorageTargetRows .input {
text-align: center;
min-height: 34px;
}
.adminStorageRetentionRows small, .adminStorageTargetRows small {
color: var(--muted);
font-size: 12px;
}
.adminStorageReviewCard, .adminStorageInfoNote {
border: 1px solid color-mix(in srgb, var(--focus), transparent 70%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 97%);
gap: 12px;
min-width: 0;
margin-top: 14px;
padding: 14px;
display: grid;
}
.adminStorageInfoNote {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
margin-top: 12px;
}
.adminStorageInfoNote span {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminStorageReviewCard {
grid-column: 1 / -1;
}
.adminStorageReviewSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-radius: var(--radius);
background: var(--bg);
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: hidden;
}
.adminStorageReviewSummary div {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 25%);
gap: 4px;
min-width: 0;
padding: 8px 10px;
display: grid;
}
.adminStorageReviewSummary div:last-child {
border-right: 0;
}
.adminStorageReviewSummary span:first-child {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 10px;
font-weight: 850;
}
.adminStorageTableShell {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
}
.adminStorageCleanupStack {
gap: 16px;
display: grid;
}
.adminStorageCleanupGrid {
grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
align-items: start;
gap: 16px;
display: grid;
}
.adminStorageCleanupMetricGrid, .adminStorageCleanupSelected {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-radius: var(--radius);
background: var(--bg);
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: hidden;
}
.adminStorageCleanupSelected {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminStorageCleanupMetricGrid > div, .adminStorageCleanupSelected > div {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 26%);
gap: 4px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminStorageCleanupMetricGrid > div:last-child, .adminStorageCleanupSelected > div:last-child {
border-right: 0;
}
.adminStorageCleanupMetricGrid span, .adminStorageCleanupSelected span {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 10px;
font-weight: 850;
}
.adminStorageCleanupMetricGrid strong, .adminStorageCleanupSelected strong {
min-width: 0;
color: var(--fg);
overflow-wrap: anywhere;
font-size: 15px;
}
.adminStorageCleanupMetricGrid small, .adminStorageCleanupSelected small {
color: var(--muted);
font-size: 12px;
}
.adminStorageCleanupTableWrap {
margin-top: 14px;
overflow-x: auto;
}
.adminStorageCleanupTable {
min-width: 760px;
}
.adminStorageCleanupTable tr.isSelected td, .adminStorageCleanupTable tr.isSelected th {
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminStorageCleanupFamilyButton {
width: 100%;
min-height: 34px;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
font-weight: 850;
display: inline-grid;
}
.adminStorageCleanupFamilyButton:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: 6px;
}
.adminStorageCleanupActionCard .adminBackupOpsSurfaceBody {
gap: 14px;
}
.adminStorageCleanupActions {
justify-content: flex-start;
}
.adminStorageCleanupResult {
border: 1px solid color-mix(in srgb, var(--ok), transparent 60%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--ok), white 94%);
gap: 4px;
padding: 12px;
display: grid;
}
.adminStorageCleanupResult.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 60%);
background: color-mix(in srgb, var(--danger), white 94%);
}
.adminStorageCleanupResult span, .adminStorageCleanupResult small {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminStorageCleanupSampleList, .adminStorageCleanupReviewOnly {
gap: 8px;
margin-top: 12px;
display: grid;
}
.adminStorageCleanupSampleList article, .adminStorageCleanupReviewOnly article {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
background: color-mix(in srgb, var(--bg), white 50%);
border-radius: 8px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 9px 10px;
display: grid;
}
.adminStorageCleanupReviewOnly article {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminStorageCleanupSampleList span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminStorageCleanupSampleList strong, .adminStorageCleanupReviewOnly span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminStorageCleanupDetails {
margin-top: 12px;
}
@media (max-width: 900px) {
.adminStorageCleanupGrid, .adminStorageCleanupMetricGrid, .adminStorageCleanupSelected {
grid-template-columns: minmax(0, 1fr);
}
.adminStorageCleanupMetricGrid > div, .adminStorageCleanupSelected > div {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 26%);
}
.adminStorageCleanupMetricGrid > div:last-child, .adminStorageCleanupSelected > div:last-child {
border-bottom: 0;
}
.adminStorageCleanupSampleList article {
grid-template-columns: minmax(0, 1fr);
}
}
.adminStorageRestorePointTable {
table-layout: fixed;
width: 100%;
min-width: 0;
}
.adminStorageRestoreLowerGrid .adminBackupOpsBackupTableWrap {
max-height: none;
overflow: auto hidden;
}
.adminStorageRestorePointTable th, .adminStorageRestorePointTable td {
vertical-align: middle;
padding-left: 7px;
padding-right: 7px;
}
.adminStorageRestorePointTable th:first-child, .adminStorageRestorePointTable td:first-child {
width: 18%;
}
.adminStorageRestorePointTable th:nth-child(2), .adminStorageRestorePointTable td:nth-child(2) {
width: 11%;
}
.adminStorageRestorePointTable th:nth-child(5), .adminStorageRestorePointTable td:nth-child(5) {
width: 13%;
}
.adminStorageRestorePointTable th:nth-child(6), .adminStorageRestorePointTable td:nth-child(6) {
width: 15%;
}
.adminStorageRestorePointTable th:nth-child(3), .adminStorageRestorePointTable td:nth-child(3) {
width: 17%;
}
.adminStorageRestorePointTable th:nth-child(4), .adminStorageRestorePointTable td:nth-child(4) {
width: 8%;
}
.adminStorageRestorePointTable th:nth-child(7), .adminStorageRestorePointTable td:nth-child(7) {
width: 18%;
}
.adminStorageRestorePointTable td:nth-child(3), .adminStorageRestorePointTable td:nth-child(4) {
color: var(--fg);
font-size: 12px;
font-weight: 800;
line-height: 1.25;
}
.adminStorageRestoreDrillsTable {
table-layout: fixed;
}
.adminStorageRestoreTableFoot {
align-items: center;
padding-top: 12px;
}
.adminStorageTimelineFilters {
flex-wrap: wrap;
gap: 6px;
padding-top: 12px;
display: flex;
}
.adminStorageTimelineFilters button {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
background: var(--bg);
border-radius: 7px;
min-height: 30px;
padding: 0 10px;
}
.adminStorageTimelineList {
gap: 0;
padding-top: 6px;
display: grid;
}
.adminStorageTimelineRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 26%);
grid-template-columns: 118px 30px minmax(0, 1fr);
align-items: start;
gap: 12px;
min-width: 0;
padding: 12px 0;
display: grid;
}
.adminStorageTimelineRow time {
color: var(--muted);
font-size: 12px;
font-weight: 800;
line-height: 1.35;
}
.adminStorageTimelineMarker {
background: color-mix(in srgb, var(--muted), white 90%);
width: 28px;
height: 28px;
color: var(--muted);
border-radius: 999px;
place-items: center;
display: inline-grid;
}
.adminStorageTimelineMarker.isPrimary {
background: color-mix(in srgb, var(--focus), white 90%);
color: var(--focus);
}
.adminStorageTimelineMarker.isSuccess {
background: color-mix(in srgb, var(--success, var(--ok)), white 88%);
color: color-mix(in srgb, var(--success, var(--ok)), black 12%);
}
.adminStorageTimelineMarker.isDanger {
background: color-mix(in srgb, var(--danger), white 88%);
color: var(--danger);
}
.adminStorageTimelineMain {
gap: 4px;
min-width: 0;
display: grid;
}
.adminStorageTimelineMain > strong {
color: var(--fg);
font-size: 14px;
line-height: 1.25;
}
.adminStorageTimelineMain > span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminStorageTimelineMeta {
color: var(--muted);
flex-wrap: wrap;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 750;
display: flex;
}
.adminStorageTimelineMeta small {
color: var(--muted);
overflow-wrap: anywhere;
font-size: 11px;
}
.adminStorageRetentionSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
border-radius: var(--radius);
gap: 0;
display: grid;
overflow: hidden;
}
.adminStorageRetentionSummary article {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px;
display: grid;
}
.adminStorageRetentionSummary article + article {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 26%);
}
.adminStorageRetentionSummary article > span, .adminStorageSafetyCallout > span {
background: color-mix(in srgb, var(--focus), white 92%);
width: 32px;
height: 32px;
color: var(--focus);
border-radius: 999px;
place-items: center;
display: inline-grid;
}
.adminStorageRetentionSummary div, .adminStorageSafetyCallout div {
gap: 3px;
min-width: 0;
display: grid;
}
.adminStorageRetentionSummary strong, .adminStorageSafetyCallout strong {
color: var(--fg);
font-size: 14px;
line-height: 1.25;
}
.adminStorageRetentionSummary small, .adminStorageSafetyCallout small {
color: var(--muted);
font-size: 12px;
font-weight: 650;
line-height: 1.4;
}
.adminStorageSafetyCallout {
border: 1px solid color-mix(in srgb, var(--focus), transparent 64%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--focus), white 96%);
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px;
display: grid;
}
.adminStorageRestoreSteps small {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
@media (max-width: 1200px) {
.adminStorageOverviewGrid, .adminStorageBackupsGrid, .adminStorageRestoreGrid, .adminStorageRestoreTopGrid, .adminStorageRestoreLowerGrid, .adminStorageSetupStepper, .adminStorageSetupGuideGrid, .adminStorageHealthLowerGrid, .adminStorageSetupGrid, .adminStorageReviewSummary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminStorageOverviewGridWide, .adminStorageRestoreSteps, .adminStorageRestoreStepper, .adminBackupOpsBottomGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminStorageRestorePointCells {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminStorageRestorePointCells > div:nth-child(2n) {
border-right: 0;
}
.adminStorageSetupProgressLayout {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.adminStorageSetupProgressIntro .adminSettingsIntro {
max-width: none;
}
.adminStorageSetupJourney {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 0;
}
}
@media (max-width: 760px) {
.adminBackupOpsPage {
gap: 16px;
}
.adminBackupOpsLocalTabs {
grid-template-columns: repeat(3, max-content);
justify-content: start;
gap: 0 34px;
margin-top: 0;
padding-bottom: 0;
display: grid;
overflow-x: visible;
}
.adminBackupOpsLocalTab {
min-height: 42px;
padding: 0;
font-size: 15px;
}
.adminBackupOpsPageChrome, .adminBackupOpsPageChrome .adminBackupOpsHeroActions {
flex-direction: column;
align-items: stretch;
}
.adminBackupOpsPageChrome .adminBackupOpsHeroActions {
margin-top: 0;
margin-left: 0;
}
.adminBackupOpsPageChrome {
height: auto;
margin-top: 0;
}
.adminStorageSetupDesktop {
display: none;
}
.adminStorageSetupMobile {
gap: 12px;
display: grid;
}
.adminStorageFamilyGrid, .adminStorageSignalStrip, .adminStorageOverviewGrid, .adminStorageBackupsGrid, .adminBackupOpsBottomGrid, .adminStorageRestoreGrid, .adminStorageRestoreTopGrid, .adminStorageRestoreLowerGrid, .adminStorageSetupStepper, .adminStorageSetupGuideGrid, .adminStorageSetupRetentionLayout, .adminStorageHealthLowerGrid, .adminStorageSetupGrid, .adminStorageReviewSummary, .adminStorageSetupCard .adminStorageTargetRows, .adminStorageSegmentedControl, .adminStorageScheduleOptions {
grid-template-columns: minmax(0, 1fr);
}
.adminStorageOverviewHead {
align-items: flex-start;
}
.adminStorageOverviewMeta {
gap: 4px 8px;
font-size: 13px;
}
.adminStorageOverviewMeta span + span:before {
margin-right: 8px;
}
.adminStorageStackedBar {
height: 14px;
}
.adminStorageOverviewCard .adminStorageTitleWithIcon .adminSettingsChecklistTitle {
font-size: 17px;
line-height: 1.25;
}
.adminStorageFamilyGrid {
gap: 0;
padding-top: 2px;
}
.adminStorageFamilyRow {
grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto);
gap: 8px;
height: auto;
padding: 6px 0;
font-size: 13px;
}
.adminStorageFamilyRow > strong {
white-space: normal;
}
.adminStorageFamilyMetric {
grid-template-columns: minmax(0, auto) minmax(34px, auto);
gap: 6px;
font-size: 12px;
}
.adminStorageFamilyMetric span, .adminStorageFamilyMetric small {
font-size: 12px;
}
.adminStorageSignalStrip {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
margin: 8px 0 0;
font-size: 13px;
overflow: hidden;
}
.adminStorageSignalItem {
min-height: 34px;
padding: 9px 12px;
}
.adminStorageSignalItem span {
white-space: normal;
}
.adminStorageOverviewGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.adminStorageStatusCard > .adminBackupOpsSurfaceBody {
gap: 10px;
padding: 14px;
}
.adminStorageStatusTitle {
align-items: flex-start;
gap: 9px;
}
.adminStorageStatusTitle .adminSettingsChecklistTitle {
font-size: 15px;
line-height: 1.25;
}
.adminStorageStatusCenter {
text-align: left;
place-items: start;
min-height: 0;
padding: 0;
}
.adminStorageStatusCenter .adminStorageIconBadge.isCenter {
display: none;
}
.adminStorageStatusCenter strong {
font-size: 14px;
}
.adminStorageStatusCenter span {
font-size: 13px;
}
.adminStorageStatusChips {
justify-content: flex-start;
}
.adminStorageProtectionSummary {
align-content: start;
min-height: 0;
padding-top: 10px;
}
.adminStorageProtectionSummary .pill {
justify-self: start;
}
.adminStorageDailyHealthCard .adminBackupOpsSurfaceBody, .adminStorageHealthPanel .adminBackupOpsSurfaceBody {
padding: 14px;
}
.adminStorageDailyHealthHeader {
grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
gap: 9px;
padding-bottom: 8px;
}
.adminStorageHealthLastCheck {
text-align: right;
justify-items: end;
}
.adminStorageHealthTableHead {
display: none;
}
.adminStorageHealthRow {
grid-template-columns: minmax(0, 1fr) 128px;
grid-template-areas: "check action"
"status action"
"explanation explanation";
align-items: center;
gap: 8px 12px;
min-height: 86px;
padding: 11px 12px;
}
.adminStorageHealthCheck {
grid-area: check;
gap: 8px;
font-size: 13px;
line-height: 1.25;
}
.adminStorageHealthCheck > span:last-child {
overflow-wrap: anywhere;
min-width: 0;
}
.adminStorageHealthCheckIcon {
width: 28px;
height: 28px;
}
.adminStorageHealthRow > span:nth-child(2) {
grid-area: status;
justify-self: start;
}
.adminStorageHealthRow > span:nth-child(3) {
grid-area: explanation;
font-size: 13px;
}
.adminStorageHealthRow > span:nth-child(4) {
grid-area: action;
justify-self: stretch;
}
.adminStorageHealthAction {
white-space: normal;
width: 100%;
min-width: 0;
min-height: 44px;
padding: 7px 9px;
}
.adminStorageTableFoot {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding-top: 10px;
font-size: 12px;
}
.adminStorageHealthPanel .adminStoragePanelPreview {
display: none;
}
.adminStoragePanelDisclosure, .adminStoragePanelLink {
border-top: 0;
margin-top: 2px;
padding-top: 0;
}
.adminStoragePanelDisclosure summary, .adminStoragePanelLink {
justify-content: flex-end;
min-height: 26px;
font-size: 0;
}
.adminStoragePanelDisclosure summary span, .adminStoragePanelLink span {
clip: rect(0 0 0 0);
white-space: nowrap;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}
.adminStoragePanelDisclosure summary svg, .adminStoragePanelLink svg {
width: 22px;
height: 22px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
}
.adminStoragePanelDisclosureRows .adminStorageCompactRow:nth-child(-n+3), .adminStoragePanelDisclosureRows.adminStorageActionQueue .adminStorageActionQueueItem:nth-child(-n+3) {
display: grid;
}
.adminStoragePanelDisclosure[open] {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
padding-top: 8px;
}
.adminStorageHealthLowerGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 10px;
}
.adminStorageHealthPanel, .adminStorageHealthPanel .adminBackupOpsSurfaceBody {
height: auto;
}
.adminStorageHealthPanel .adminStorageTitleWithIcon {
align-items: flex-start;
gap: 9px;
}
.adminStorageHealthPanel .adminSettingsChecklistTitle {
font-size: 16px;
line-height: 1.2;
}
.adminStorageHealthPanel .adminSettingsIntro {
font-size: 13px;
line-height: 1.35;
}
.adminStorageQueueHead {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
display: grid;
}
.adminStorageLegendRows article {
grid-template-columns: minmax(0, 1fr);
gap: 5px;
}
.adminStorageRecommendation {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 8px 12px;
}
.adminStorageRecommendation .adminStorageIconBadge {
grid-row: 1 / span 2;
}
.adminStorageInlineAction {
grid-column: 2;
justify-content: center;
inline-size: 100%;
}
.adminStorageInsightPanel {
grid-template-columns: 88px minmax(0, 1fr);
gap: 14px;
padding: 14px;
}
.adminStorageInsightGlyph {
width: 86px;
height: 86px;
}
.adminStorageInsightAction {
width: 100%;
}
.adminStorageCompactAction {
justify-content: center;
inline-size: 100%;
}
.adminStorageStageTracker, .adminStorageReadinessRow, .adminStorageRestoreStepper article, .adminStorageRestoreStack .adminStorageInfoNote, .adminStorageRestorePointCells, .adminStorageTimelineRow, .adminStorageSafetyCallout, .adminStorageGuardrailRow, .adminStorageRestoreWarning {
grid-template-columns: minmax(0, 1fr);
}
.adminStorageStageStep {
text-align: left;
grid-template-columns: auto minmax(0, 1fr);
justify-items: start;
}
.adminStorageStageStep:before {
display: none;
}
.adminStorageRestoreStepper article {
text-align: left;
justify-items: start;
}
.adminStorageRestoreStepper article:before {
display: none;
}
.adminStorageRestorePointCells > div {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 24%);
}
.adminStorageRestorePointCells > div:last-child {
border-bottom: 0;
}
.adminStorageSignalItem + .adminStorageSignalItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-left: 0;
}
.adminStorageActionQueueItem, .adminStorageInfoNote, .adminStorageRetentionRows label, .adminStorageTargetRows label, .adminStorageSetupCard .adminStorageTargetRows label {
grid-template-columns: minmax(0, 1fr);
}
.adminStorageRestoreLowerGrid .adminBackupOpsBackupTableWrap {
overflow-x: auto;
}
.adminStorageSetupMobileNote {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
padding: 14px;
}
.adminStorageSetupMobileSection summary {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.adminStorageSetupMobileChevron {
grid-column: 3;
}
.adminStorageSetupMobileChip {
justify-self: end;
}
.adminBackupOpsHeaderActions {
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: none;
margin-left: 0;
display: grid;
}
.adminBackupOpsHeaderActions .btn {
width: 100%;
min-height: 44px;
}
.adminBackupOpsLocalTabs {
flex-wrap: nowrap;
justify-content: space-between;
gap: 12px;
padding-bottom: 0;
display: flex;
overflow-x: auto;
}
.adminBackupOpsLocalTab {
min-height: 44px;
font-size: 13px;
}
.adminStorageRestoreTopGrid, .adminStorageRestoreLowerGrid {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.adminStorageReadinessRow {
grid-template-columns: 30px minmax(0, 1fr) minmax(78px, auto);
gap: 8px;
padding: 12px 0;
}
.adminStorageReadinessValue {
text-align: right;
justify-items: end;
}
.adminStorageReadinessValue strong {
max-width: 104px;
font-size: 12px;
}
.adminStorageGuardrailRow {
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 9px;
padding: 12px 0;
}
.adminStorageRestoreStepper {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 18px 2px 8px;
}
.adminStorageRestoreStepper article {
text-align: center;
justify-items: center;
gap: 8px;
}
.adminStorageRestoreStepper article:before {
display: block;
top: 13px;
}
.adminStorageRestoreStepper article > span {
width: 28px;
height: 28px;
font-size: 12px;
}
.adminStorageRestoreStepper div {
gap: 4px;
max-width: 80px;
}
.adminStorageRestoreStepper strong {
font-size: 11px;
line-height: 1.18;
}
.adminStorageRestoreStepper small {
font-size: 10px;
line-height: 1.25;
}
.adminStorageRestoreStack .adminStorageInfoNote {
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 10px;
}
.adminStorageRestoreStack .adminStorageInfoNote span {
grid-column: 2;
}
.adminStorageRestorePointTable {
border-collapse: separate;
border-spacing: 0;
min-width: 0;
}
.adminStorageRestorePointTable thead {
display: none;
}
.adminStorageRestorePointTable, .adminStorageRestorePointTable tbody, .adminStorageRestorePointTable tr, .adminStorageRestorePointTable td {
width: auto;
display: block;
}
.adminStorageRestorePointTable tbody {
display: grid;
}
.adminStorageRestorePointTable tbody tr {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: minmax(0, 1fr) 104px;
grid-template-areas: "date action"
"contents action"
"status verification"
"location test";
gap: 9px 8px;
padding: 12px 10px;
display: grid;
}
.adminStorageRestorePointTable tbody tr:last-child {
border-bottom: 0;
}
.adminStorageRestorePointTable tbody tr.isSelected {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminStorageRestorePointTable tr.isSelected td {
background: none;
}
.adminStorageRestorePointTable td {
min-width: 0;
border: 0 !important;
width: auto !important;
padding: 0 !important;
}
.adminStorageRestorePointTable td:first-child {
grid-area: date;
}
.adminStorageRestorePointTable td:nth-child(2) {
grid-area: status;
}
.adminStorageRestorePointTable td:nth-child(3) {
grid-area: contents;
}
.adminStorageRestorePointTable td:nth-child(4) {
grid-area: location;
}
.adminStorageRestorePointTable td:nth-child(5) {
grid-area: verification;
}
.adminStorageRestorePointTable td:nth-child(6) {
grid-area: test;
}
.adminStorageRestorePointTable td:nth-child(7) {
grid-area: action;
place-self: center end;
width: 104px;
}
.adminStorageRestorePointTable td:nth-child(n+2):nth-child(-n+6):before {
display: none;
}
.adminStorageRestorePointTable td:nth-child(3), .adminStorageRestorePointTable td:nth-child(4) {
font-size: 11px;
line-height: 1.2;
}
.adminStorageRestoreRowAction {
white-space: normal;
width: 100%;
min-height: 36px;
}
.adminStorageRestoreDrillsTable {
width: 100%;
min-width: 0;
}
.adminStorageRestoreDrillsTable th, .adminStorageRestoreDrillsTable td {
padding-left: 8px;
padding-right: 8px;
}
.adminStorageRestoreDrillsTable th {
overflow-wrap: anywhere;
white-space: normal;
}
.adminStorageRestoreWarning {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
}
@media (max-width: 380px) {
.adminStorageOverviewGrid, .adminStorageRecommendation, .adminStorageHealthLowerGrid, .adminStorageInsightPanel {
grid-template-columns: minmax(0, 1fr);
}
.adminStorageRecommendation .adminStorageIconBadge {
grid-row: auto;
}
.adminStorageInlineAction {
grid-column: auto;
}
}
@media (max-width: 1100px) {
.adminBackupOpsSummaryGrid, .adminBackupOpsAssuranceGrid, .adminBackupOpsProtectionGrid, .adminBackupOpsConfigGrid, .adminBackupOpsBottomGrid, .adminBackupOpsDecisionGrid, .adminBackupOpsLoadingGrid, .adminBackupOpsBreakdownGrid, .adminBackupOpsContentsGrid, .adminBackupOpsConfigSummary, .adminBackupOpsProtectedMetrics, .adminBackupOpsSourceGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminBackupOpsBreakdownBody, .adminBackupOpsRestoreBody {
grid-template-columns: minmax(0, 1fr);
}
.adminBackupOpsRunSnapshot {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminBackupOpsConfigSummary div:nth-child(3n) {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
}
.adminBackupOpsConfigSummary div:nth-child(2n) {
border-right: 0;
}
}
@media (max-width: 760px) {
.adminBackupOpsHeroBody, .adminBackupOpsSurfaceBody, .adminBackupOpsRestoreBody {
padding: 16px;
}
.adminBackupOpsHeroBody, .adminBackupOpsSummaryGrid, .adminBackupOpsAssuranceGrid, .adminBackupOpsProtectionGrid, .adminBackupOpsConfigGrid, .adminBackupOpsBottomGrid, .adminBackupOpsDecisionGrid, .adminBackupOpsLoadingGrid, .adminBackupOpsBreakdownGrid, .adminBackupOpsContentsGrid, .adminBackupOpsHeroFacts, .adminBackupOpsConfigSummary, .adminBackupOpsCoverageRow, .adminBackupOpsPlanSummary div, .adminBackupOpsProtectedRow, .adminBackupOpsProtectedMetrics, .adminBackupOpsWizardSteps, .adminBackupOpsSourceGrid, .adminBackupOpsCheckList, .adminBackupOpsFieldPair, .adminBackupOpsRestoreFields {
grid-template-columns: minmax(0, 1fr);
}
.adminBackupOpsHeroHeader {
flex-direction: column;
}
.adminBackupOpsConfigSummary div, .adminBackupOpsConfigSummary div:nth-child(n) {
border-right: 0;
}
.adminBackupOpsHeroActions, .adminBackupOpsActionRow, .adminBackupOpsRunHeader, .adminBackupOpsSectionHead {
flex-direction: column;
align-items: stretch;
}
.adminBackupOpsHeroActions .btn, .adminBackupOpsActionRow .btn, .adminBackupOpsSaveButton {
width: 100%;
}
.adminBackupOpsMetaGrid, .adminBackupOpsLocationGrid, .adminBackupOpsSetupChecklist, .adminBackupOpsRunSnapshot, .adminBackupOpsArtifactTableHead, .adminBackupOpsArtifactTableRow {
grid-template-columns: minmax(0, 1fr);
}
.adminBackupOpsDangerAction {
margin-left: 0;
}
}
.adminBackupOpsPage {
gap: 14px;
width: 100%;
max-width: none;
}
.adminBackupOpsPage .adminBackupOpsSurfaceBody {
padding: 16px 18px;
}
.adminStorageBackupsGrid {
grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
align-items: stretch;
gap: 14px;
}
.adminBackupOpsPage .adminStorageBackupsGrid > .adminBackupOpsSurface {
height: 100%;
}
.adminBackupOpsPage .adminStorageBackupsGrid > .adminBackupOpsSurface > .adminBackupOpsSurfaceBody {
box-sizing: border-box;
height: 100%;
}
.adminBackupOpsBottomGrid {
grid-template-columns: minmax(0, 1.55fr) minmax(360px, .85fr);
gap: 14px;
}
.adminStorageOperationsEmpty {
border-style: solid;
border-left: 3px solid var(--ok);
text-align: left;
background: #fff;
align-content: start;
place-items: flex-start start;
min-height: 0;
padding: 14px 16px;
}
.adminStorageOperationsEmpty .adminStorageCompactAction {
justify-self: start;
}
.adminStorageRunsTableWrap {
border-top: 0;
max-height: none;
overflow-x: visible;
}
.adminStorageRunsTable {
table-layout: fixed;
min-width: 0;
}
.adminStorageRunsTable thead th {
padding: 9px 8px;
font-size: 10px;
line-height: 1.15;
}
.adminStorageRunsTable tbody td {
padding: 8px;
font-size: 12px;
line-height: 1.25;
}
.adminStorageRunsTable th:first-child, .adminStorageRunsTable td:first-child {
width: 8%;
}
.adminStorageRunsTable th:nth-child(2), .adminStorageRunsTable td:nth-child(2) {
width: 10.5%;
}
.adminStorageRunsTable th:nth-child(3), .adminStorageRunsTable td:nth-child(3) {
width: 6%;
}
.adminStorageRunsTable th:nth-child(4), .adminStorageRunsTable td:nth-child(4) {
width: 12%;
}
.adminStorageRunsTable th:nth-child(5), .adminStorageRunsTable td:nth-child(5) {
width: 9.5%;
}
.adminStorageRunsTable th:nth-child(6), .adminStorageRunsTable td:nth-child(6) {
width: 8%;
}
.adminStorageRunsTable th:nth-child(7), .adminStorageRunsTable td:nth-child(7), .adminStorageRunsTable th:nth-child(8), .adminStorageRunsTable td:nth-child(8), .adminStorageRunsTable th:nth-child(9), .adminStorageRunsTable td:nth-child(9) {
width: 8.5%;
}
.adminStorageRunsTable th:nth-child(10), .adminStorageRunsTable td:nth-child(10) {
width: 7.5%;
}
.adminStorageRunsTable th:nth-child(11), .adminStorageRunsTable td:nth-child(11) {
width: 11.5%;
}
.adminStorageRunsTable td:nth-child(2), .adminStorageRunsTable td:nth-child(3), .adminStorageRunsTable td:nth-child(4), .adminStorageRunsTable td:nth-child(5), .adminStorageRunsTable td:nth-child(6) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminStorageRunsTable td:nth-child(4) {
font-family: var(--font-mono);
font-size: 11.5px;
}
.adminStorageRunsTable .adminBackupOpsStatusPill {
min-height: 20px;
padding: 2px 7px;
font-size: 11px;
}
.adminStorageBackupActionGroup {
flex-wrap: nowrap;
gap: 6px;
}
.adminStorageMiniButton, .adminStorageRowMenu summary {
min-height: 32px;
}
.adminStorageMobileRunsList {
display: none;
}
@media (min-width: 861px) {
.adminBackupOpsBottomGrid .adminStorageTimelineFilters {
padding-top: 8px;
}
.adminBackupOpsBottomGrid .adminStorageTimelineRow {
grid-template-columns: 112px 22px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 9px 0;
}
.adminBackupOpsBottomGrid .adminStorageTimelineMarker {
background: none;
width: 18px;
height: 18px;
}
.adminBackupOpsBottomGrid .adminStorageTimelineMarker svg {
width: 14px;
height: 14px;
}
.adminBackupOpsBottomGrid .adminStorageTimelineMain {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2px 12px;
}
.adminBackupOpsBottomGrid .adminStorageTimelineMain > strong, .adminBackupOpsBottomGrid .adminStorageTimelineMain > span {
grid-column: 1;
}
.adminBackupOpsBottomGrid .adminStorageTimelineMeta {
grid-area: 1 / 2 / span 2;
justify-content: flex-end;
gap: 6px;
}
}
@media (max-width: 1200px) and (min-width: 761px) {
.adminStorageBackupsGrid {
grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr);
}
}
@media (max-width: 860px) {
.adminStorageBackupsGrid, .adminBackupOpsBottomGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminBackupOpsPage .adminBackupOpsSurfaceBody {
padding: 16px;
}
.adminStorageRunsTableWrap {
display: none;
}
.adminStorageMobileRunsList {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
gap: 10px;
padding-top: 10px;
display: grid;
}
.adminStorageMobileRunCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: #fff;
gap: 12px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminStorageMobileRunHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.adminStorageMobileRunHeader strong {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.25;
}
.adminStorageMobileRunFacts {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
border-radius: var(--radius);
gap: 0;
margin: 0;
display: grid;
overflow: hidden;
}
.adminStorageMobileRunFacts div {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 26%);
grid-template-columns: minmax(96px, .45fr) minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
padding: 9px 10px;
display: grid;
}
.adminStorageMobileRunFacts div:first-child {
border-top: 0;
}
.adminStorageMobileRunFacts dt {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 10px;
font-weight: 850;
}
.adminStorageMobileRunFacts dd {
min-width: 0;
color: var(--fg);
overflow-wrap: anywhere;
text-align: right;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
margin: 0;
font-size: 12px;
font-weight: 800;
line-height: 1.25;
display: flex;
}
.adminStorageMobileRunActions {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
align-items: center;
gap: 8px;
display: grid;
}
.adminStorageMobileRunActions .adminStorageMiniButton {
justify-content: center;
width: 100%;
min-height: 44px;
}
.adminStorageMobileRowMenu, .adminStorageMobileRowMenu summary {
width: 44px;
}
.adminStorageMobileRowMenu summary {
min-height: 44px;
}
}
@media (max-width: 520px) {
.adminStorageMobileRunActions {
grid-template-columns: minmax(0, 1fr) 44px;
}
.adminStorageMobileRunActions > .adminStorageMiniButton:nth-child(2) {
grid-area: 2 / 1 / auto / -1;
}
}
.adminListCardBody {
gap: 10px;
display: grid;
}
.adminAccessCheckGrid {
gap: 8px;
display: grid;
}
.adminAccessCheckItem {
align-items: center;
gap: 8px;
min-height: 32px;
display: flex;
}
.adminAccessPillWrap {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.adminAccessActions {
justify-content: flex-start;
display: flex;
}
.adminRolesOverviewGrid {
gap: 10px;
display: grid;
}
.adminRolesOverviewCard {
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminRolesOverviewIcon {
border: 1px solid color-mix(in srgb, var(--focus), transparent 72%);
background: color-mix(in srgb, var(--focus), white 94%);
width: 38px;
height: 38px;
color: color-mix(in srgb, var(--focus), black 10%);
border-radius: 12px;
flex: 0 0 38px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminRolesOverviewText {
gap: 2px;
min-width: 0;
display: grid;
}
.adminRolesOverviewLabel, .adminRolesOverviewHint, .adminRolesOverviewValue {
margin: 0;
}
.adminRolesOverviewLabel {
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted);
font-size: 12px;
}
.adminRolesOverviewValue {
font-family: var(--font-condensed);
font-size: 28px;
line-height: 1;
}
.adminRolesOverviewHint {
font-size: 13px;
}
.adminRolesOverviewPills {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminRolesImpactSummary {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 12px;
display: grid;
}
.adminRolesImpactItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 28%);
gap: 2px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminRolesImpactItem strong {
font-family: var(--font-condensed);
font-size: 24px;
line-height: 1;
}
.adminRolesPageSurface .adminFinanceReviewSections, .adminRolesPageSurface .adminSectionDisclosures {
gap: 0;
}
.adminRolesPageSurface .adminFinanceReviewSectionBody, .adminRolesPageSurface .adminSectionDisclosureBody {
gap: 14px;
}
.adminRolesSectionActions, .adminRolesDetailMeta {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminRolesWorkspace {
align-items: start;
gap: 16px;
display: grid;
}
.adminRolesWorkspaceV2 {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 14px;
display: grid;
}
.adminRolesRoleRail, .adminRolesEditorColumn, .adminRolesImpactPanelInner, .adminRolesSelectedOverview, .adminRolesDangerZone {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
}
.adminRolesRoleRail {
align-self: start;
gap: 12px;
padding: 14px;
display: grid;
}
.adminRolesRailHeader, .adminRolesSelectedOverview, .adminRolesDangerZone, .adminRolesReviewHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminRolesEditorColumn {
background: none;
border: 0;
gap: 14px;
min-width: 0;
padding: 0;
display: grid;
}
.adminRolesEditorColumn > *, .adminRolesSelectedOverview, .adminRolesPageSection, .adminRolesMatrixToolbar, .adminRolesMatrixToolbarControls {
min-width: 0;
}
.adminRolesSelectedOverview {
background: #fff;
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
align-items: stretch;
gap: 14px;
padding: 14px;
display: grid;
}
.adminRolesSelectedOverview > div {
min-width: 0;
}
.adminRolesSelectedHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
display: flex;
}
.adminRolesSelectedIntro {
gap: 5px;
max-width: 760px;
display: grid;
}
.adminRolesSelectedIntro .adminRolesEditorEyebrow, .adminRolesSelectedIntro .adminRolesEditorTitle, .adminRolesSelectedIntro > .muted {
margin: 0;
}
.adminRolesSelectedIntro .adminRolesEditorTitle {
line-height: 1.15;
}
.adminRolesSelectedIntro > .muted {
line-height: 1.4;
}
.adminRolesProtectedNotice {
border: 1px solid color-mix(in srgb, var(--focus), transparent 76%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--focus), white 97%);
width: fit-content;
max-width: 100%;
color: color-mix(in srgb, var(--ink), var(--focus) 14%);
align-items: flex-start;
gap: 8px;
margin-top: 4px;
padding: 8px 10px;
line-height: 1.35;
display: inline-flex;
}
.adminRolesProtectedNoticeIcon {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
width: 22px;
height: 22px;
color: color-mix(in srgb, var(--focus), black 8%);
background: #fff;
border-radius: 999px;
flex: 0 0 22px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminRolesProtectedNotice > span:last-child {
gap: 1px;
min-width: 0;
display: grid;
}
.adminRolesProtectedNotice strong {
font-size: 13px;
}
.adminRolesProtectedNotice span span {
color: var(--muted);
font-size: 13px;
}
.adminRolesImpactPanel {
display: none;
}
.adminRolesImpactPanelInner {
gap: 12px;
padding: 14px;
display: grid;
}
.adminRolesImpactStats {
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
gap: 8px;
display: grid;
}
.adminRolesSelectedImpact {
grid-column: 1 / -1;
gap: 12px;
width: 100%;
display: grid;
}
.adminRolesSelectedDetails {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
gap: 12px;
padding-top: 14px;
display: grid;
}
.adminRolesSelectedOverview .adminRolesMetaGrid {
align-items: start;
gap: 12px 16px;
}
.adminRolesSelectedOverview .adminRolesMetaGrid .field {
min-width: 0;
margin-top: 0;
}
.adminRolesSelectedOverview .adminRolesMetaGrid .input {
width: 100%;
max-width: 100%;
}
.adminRolesSelectedOverview .adminRolesFieldWide {
max-width: none;
}
.adminRolesImpactStats button {
text-align: left;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 24%);
min-width: 0;
color: inherit;
cursor: pointer;
gap: 3px;
padding: 10px;
display: grid;
}
.adminRolesImpactStats button:hover {
border-color: color-mix(in srgb, var(--focus), transparent 55%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminRolesImpactStats strong {
font-family: var(--font-condensed);
font-size: 22px;
line-height: 1;
}
.adminRolesImpactWarnings {
gap: 8px;
display: grid;
}
.adminRolesImpactWarnings ul, .adminRolesReviewGrid ul {
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.adminRolesImpactWarnings li {
color: color-mix(in srgb, var(--danger), black 16%);
align-items: center;
gap: 6px;
display: flex;
}
.adminRolesImpactWarnings li svg {
flex: none;
}
.adminRolesDependencyMessage, .adminRolesCriticalNote {
border: 1px solid color-mix(in srgb, var(--warning), transparent 46%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warning), white 90%);
color: color-mix(in srgb, var(--warning), black 36%);
margin: 0;
padding: 8px 10px;
font-size: 13px;
line-height: 1.4;
}
.adminRolesWorkspaceList, .adminRolesWorkspaceEditor, .adminRolesCatalogToolbar, .adminRolesCatalogModuleCard {
gap: 14px;
display: grid;
}
.adminRolesWorkspaceList {
gap: 16px;
}
.adminRolesWorkspaceHead, .adminRolesCatalogModuleHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminRolesEditorHeader {
gap: 8px;
display: grid;
}
.adminRolesWorkspaceHeadActions, .adminRolesEditorHeaderActions {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminRolesWorkspaceHeadActions .btn, .adminRolesEditorHeaderActions .btn {
min-height: 40px;
}
.adminRolesList {
gap: 10px;
display: grid;
}
.adminRolesWorkspaceV2 .adminRolesList {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminRolesListItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: linear-gradient(180deg, color-mix(in srgb, white, var(--bg) 2%) 0%, color-mix(in srgb, var(--bg-2), white 18%) 100%);
text-align: left;
cursor: pointer;
gap: 8px;
width: 100%;
padding: 13px 14px;
transition: border-color .14s, background .14s, transform .14s, box-shadow .14s;
display: grid;
}
.adminRolesListItem .adminRolesOverviewPills {
padding-top: 2px;
}
.adminRolesListItem:hover {
border-color: color-mix(in srgb, var(--focus), transparent 58%);
transform: translateY(-1px);
}
.adminRolesListItem.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 34%);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 96%) 0%, color-mix(in srgb, var(--focus), white 92%) 100%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 70%);
}
.adminRolesListItemHeader, .adminRolesCatalogRowHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminRolesListItemTitleWrap {
gap: 2px;
min-width: 0;
display: grid;
}
.adminRolesListItemTitle, .adminRolesCatalogItemTitle, .adminRolesCapabilityRowTitle, .adminRolesModuleTitle {
margin: 0;
font-weight: 700;
}
.adminRolesCapabilityRowTitleWrap {
gap: 2px;
min-width: 0;
display: grid;
}
.adminRolesCapabilityPage {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.adminRolesListItemDesc, .adminRolesCatalogItemDesc {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 0;
line-height: 1.45;
display: -webkit-box;
overflow: hidden;
}
.adminRolesEditorEyebrow, .adminRolesModuleEyebrow {
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
font-size: 12px;
font-weight: 700;
}
.adminRolesEditorTitle {
margin-bottom: 0;
}
.adminRolesOperatorNote {
border: 1px solid color-mix(in srgb, var(--focus), transparent 82%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 98%);
align-items: center;
gap: 10px;
padding: 10px 12px;
display: flex;
}
.adminRolesOperatorNoteIcon {
width: 28px;
height: 28px;
color: color-mix(in srgb, var(--focus), black 8%);
border: 1px solid color-mix(in srgb, var(--focus), transparent 74%);
background: #fff;
border-radius: 9px;
flex: 0 0 28px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminRolesOperatorNote > div {
min-width: 0;
}
.adminRolesOperatorNote strong, .adminRolesOperatorNote p {
margin: 0;
}
.adminRolesOperatorNote p {
margin-top: 2px;
line-height: 1.4;
}
.adminRolesMetaGrid {
gap: 10px;
display: grid;
}
.adminRolesFieldWide {
grid-column: 1 / -1;
}
.adminRolesCreateKeyHint {
max-width: 340px;
line-height: 1.45;
}
.adminRolesMatrixSection {
gap: 14px;
display: grid;
}
.adminRolesPermissionsHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
display: flex;
}
.adminRolesPermissionsHead h3, .adminRolesPermissionsHead p {
margin: 0;
}
.adminRolesPermissionsStats {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminRolesPermissionsStats button {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 28%);
min-height: 34px;
color: var(--ink);
cursor: pointer;
padding: 7px 10px;
font-size: 12px;
font-weight: 700;
}
.adminRolesMatrixToolbar {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 22%);
gap: 12px;
padding: 12px;
display: grid;
}
.adminRolesMatrixToolbarHint {
margin: 4px 0 0;
}
.adminRolesMatrixToolbarControls {
flex-wrap: wrap;
align-items: center;
gap: 10px;
display: flex;
}
.adminRolesMatrixToolbarControls > input.input {
flex: 260px;
min-width: 220px;
}
.adminRolesMatrixToolbarControls > .adminRolesMatrixSelect {
flex: 126px;
max-width: 170px;
}
.adminRolesMatrixToolbarControls > .adminRoleActionBtn {
flex: none;
}
.adminRolesQuickFilters {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminRolesMatrixFilters {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminRolesMatrixSelect {
width: 100%;
min-width: 0;
min-height: 38px;
}
.adminRolesModuleGrid, .adminRolesCatalogGrid {
gap: 10px;
display: grid;
}
.adminRolesModuleGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesModuleCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 18%);
gap: 10px;
padding: 12px 14px;
display: grid;
}
.adminRolesModuleDetails {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 18%);
gap: 0;
position: relative;
overflow: clip;
}
.adminRolesModuleSummary {
align-items: center;
padding: 10px 14px;
}
.adminRolesModuleSummary .adminSectionDisclosureSummary {
flex-wrap: wrap;
}
.adminRolesModuleSummary .adminRolesModuleTitle {
font-size: 16px;
line-height: 1.15;
}
.adminRolesModuleTitleRow {
flex-wrap: wrap;
align-items: center;
gap: 10px;
display: inline-flex;
}
.adminRolesModuleDetails .adminFinanceReviewSectionChevron, .adminRolesModuleDetails .adminSectionDisclosureChevron {
transform: rotate(-90deg);
}
.adminRolesModuleDetails[open] .adminFinanceReviewSectionChevron, .adminRolesModuleDetails[open] .adminSectionDisclosureChevron {
transform: rotate(0);
}
.adminRolesModuleDetails .adminFinanceReviewSectionToggleGlyph, .adminRolesModuleDetails .adminSectionDisclosureToggleGlyph {
margin-top: 0;
}
.adminRolesModuleDetails .adminRolesModuleCard {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: none;
border-radius: 0;
}
.adminRolesModuleHeadActions {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminRolesMatrixTableWrap {
width: 100%;
overflow: auto visible;
}
.adminRolesMatrixTable {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 680px;
font-size: 13px;
}
.adminRolesMatrixTable th, .adminRolesMatrixTable td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
text-align: left;
vertical-align: top;
padding: 8px;
}
.adminRolesMatrixTable th:first-child {
width: 50%;
}
.adminRolesMatrixTable th:not(:first-child), .adminRolesMatrixTable td:not(:first-child) {
text-align: center;
vertical-align: middle;
width: 12.5%;
}
.adminRolesMatrixTable th:last-child, .adminRolesMatrixTable td:last-child {
width: 112px;
}
.adminRolesMatrixTable thead th {
z-index: 1;
background: color-mix(in srgb, var(--bg-2), white 16%);
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
font-size: 11px;
position: sticky;
top: 0;
}
.adminRolesMatrixTable tbody tr:hover {
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminRolesMatrixTable tbody tr.isChanged {
background: color-mix(in srgb, var(--warning), white 94%);
}
.adminRolesMatrixTable tbody tr:last-child th, .adminRolesMatrixTable tbody tr:last-child td {
border-bottom: 0;
}
.adminRolesMatrixRowTitle, .adminRolesMatrixRowDesc, .adminRolesMatrixKeyList {
display: block;
}
.adminRolesMatrixRowTitle {
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-weight: 700;
display: inline-flex;
}
.adminRolesMatrixRowDesc {
margin-top: 2px;
line-height: 1.35;
}
.adminRolesMatrixKeyList {
color: var(--muted);
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
margin-top: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
font-size: 11px;
line-height: 1.35;
overflow: hidden;
}
.adminRolesMatrixToggle {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
white-space: nowrap;
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
gap: 6px;
width: 32px;
min-height: 32px;
margin: 0 4px 5px 0;
padding: 5px;
display: inline-flex;
}
.adminRolesMatrixToggle span {
clip: rect(0 0 0 0);
white-space: nowrap;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}
.adminRolesMatrixToggle.isChecked {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 10%);
}
.adminRolesMatrixToggle.isChanged {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning), transparent 25%);
}
.adminRolesMatrixToggle.isInherited {
border-style: dashed;
}
.adminRolesMatrixToggle.isInherited input {
cursor: not-allowed;
}
.adminRolesMatrixToggle input {
margin: 0;
}
.adminRolesRiskText {
color: var(--muted);
font-weight: 700;
}
.adminRolesDependencyPopover {
display: inline-flex;
position: relative;
}
.adminRolesDependencyPopover summary {
cursor: pointer;
color: color-mix(in srgb, var(--focus), black 10%);
white-space: nowrap;
font-weight: 700;
list-style: none;
}
.adminRolesDependencyPopover summary::-webkit-details-marker {
display: none;
}
.adminRolesDependencyPopover ul {
z-index: 9;
text-align: left;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: var(--radius);
background: #fff;
gap: 4px;
width: min(300px, 100vw - 40px);
margin: 0;
padding: 10px 10px 10px 24px;
display: grid;
position: absolute;
top: calc(100% + 8px);
right: 0;
box-shadow: 0 14px 36px #00000024;
}
.adminRolesInfoPopover {
display: inline-flex;
position: relative;
}
.adminRolesInfoPopover summary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
width: 24px;
height: 24px;
color: color-mix(in srgb, var(--focus), black 8%);
cursor: pointer;
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
list-style: none;
display: inline-flex;
}
.adminRolesInfoPopover summary::-webkit-details-marker {
display: none;
}
.adminRolesInfoPopover[open] summary {
border-color: color-mix(in srgb, var(--focus), transparent 35%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminRolesInfoPopoverBody {
z-index: 8;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: calc(var(--radius) + 2px);
width: min(420px, 100vw - 40px);
color: var(--ink);
background: #fff;
gap: 10px;
padding: 12px;
font-weight: 400;
display: grid;
position: absolute;
top: calc(100% + 8px);
left: 0;
box-shadow: 0 16px 42px #00000029;
}
.adminRolesInfoPopoverBody dl, .adminRolesInfoPopoverBody dd {
margin: 0;
}
.adminRolesInfoPopoverBody dl {
gap: 9px;
display: grid;
}
.adminRolesInfoPopoverBody dt {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 2px;
font-size: 11px;
font-weight: 700;
}
.adminRolesInfoPopoverBody dd {
overflow-wrap: anywhere;
gap: 5px;
line-height: 1.4;
display: grid;
}
.adminRolesCapabilityList, .adminRolesCatalogRows {
gap: 8px;
display: grid;
}
.adminRolesCapabilityRow, .adminRolesCatalogRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
padding: 10px 12px;
}
.adminRolesCapabilityRow {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
display: grid;
}
.adminRolesCapabilityRow.isChecked {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminRolesCapabilityRow input {
margin-top: 4px;
}
.adminRolesCapabilityRowMain {
gap: 5px;
min-width: 0;
display: grid;
}
.adminRolesCapabilityRowHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
display: flex;
}
.adminRolesCapabilityRowDesc {
line-height: 1.45;
}
.adminRolesCapabilityMeta {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminRiskPill-high {
border-color: color-mix(in srgb, var(--warning), transparent 45%);
background: color-mix(in srgb, var(--warning), white 88%);
color: color-mix(in srgb, var(--warning), black 35%);
}
.adminRiskPill-critical {
border-color: color-mix(in srgb, var(--danger), transparent 42%);
background: color-mix(in srgb, var(--danger), white 88%);
color: color-mix(in srgb, var(--danger), black 28%);
}
.adminRolesCapabilityKey {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
background: color-mix(in srgb, var(--bg-2), white 30%);
min-height: 24px;
color: var(--muted);
white-space: nowrap;
border-radius: 999px;
align-items: center;
padding: 3px 8px;
font-size: 11px;
line-height: 1;
display: inline-flex;
}
.adminRolesCatalogToolbarHint {
margin: 0;
}
.adminRolesReferenceBody {
gap: 12px;
display: grid;
}
.adminRolesEmptyEditor {
text-align: center;
border: 1px dashed color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 20%);
place-items: center;
gap: 10px;
min-height: 220px;
padding: 24px;
display: grid;
}
.adminRolesToggle {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 18%);
width: 100%;
min-height: 44px;
padding: 11px 12px;
}
.adminRolesToggle input {
flex: none;
}
.adminRolesToggle span {
overflow-wrap: anywhere;
min-width: 0;
line-height: 1.35;
}
.adminRolesCatalogModuleCard .adminSettingsChecklistTitle {
margin: 0;
font-size: 28px;
}
.adminRolesCatalogRowHead .pill, .adminRolesCapabilityRowHead .pill {
max-width: 100%;
}
.adminRoleFooterActions {
flex-wrap: wrap;
gap: 8px;
}
.adminRolesDangerZone {
border-color: color-mix(in srgb, var(--danger), transparent 58%);
align-items: center;
padding: 14px;
}
.adminRolesDangerZone .btnDanger:disabled {
opacity: .55;
cursor: not-allowed;
}
.adminRolesReviewOverlay {
z-index: 80;
background: #0000006b;
place-items: center;
padding: 18px;
display: grid;
position: fixed;
inset: 0;
}
.adminRolesReviewDialog {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 4px);
background: #fff;
gap: 14px;
width: min(760px, 100%);
max-height: min(780px, 100vh - 36px);
padding: 18px;
display: grid;
overflow: auto;
box-shadow: 0 24px 80px #0000003d;
}
.adminRolesReviewGrid {
gap: 12px;
display: grid;
}
.adminRolesReviewGrid section {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 28%);
min-width: 0;
padding: 12px;
}
.adminRolesReviewGrid h3 {
margin-top: 0;
}
.adminRolesStickySaveBar {
z-index: 12;
border: 1px solid color-mix(in srgb, var(--focus), transparent 46%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--focus) 4%);
justify-content: space-between;
align-items: center;
gap: 12px;
margin: 16px auto 0;
padding: 12px 14px;
display: flex;
position: sticky;
bottom: 12px;
box-shadow: 0 14px 36px #0000001f;
}
.adminRolesStickySaveBar p, .adminRolesStickySaveBar strong {
margin: 0;
}
.adminRolesStickySaveBar p {
margin-top: 2px;
}
.adminRolesStickySaveActions {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: inline-flex;
}
@media (min-width: 820px) {
.adminRolesImpactSummary {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adminRolesSelectedOverview .adminRolesImpactStats {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.adminRolesOverviewGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminRolesList, .adminRolesWorkspaceV2 .adminRolesList, .adminRolesMetaGrid, .adminRolesCatalogGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminRolesMatrixToolbarControls {
display: flex;
}
.adminRolesReviewGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1181px) {
.adminRolesWorkspaceV2 {
grid-template-columns: minmax(286px, 328px) minmax(0, 1fr);
gap: 16px;
}
.adminRolesRoleRail {
top: calc(var(--admin-shell-header-height) + 22px);
max-height: calc(100vh - var(--admin-shell-header-height) - 44px);
position: sticky;
overflow: auto;
}
.adminRolesWorkspaceV2 .adminRolesList {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.adminRolesWorkspaceV2 .adminRolesListItem {
gap: 7px;
padding: 11px 12px;
}
.adminRolesWorkspaceV2 .adminRolesListItemDesc {
-webkit-line-clamp: 1;
}
.adminRolesWorkspaceV2 .adminRolesListItem .adminRolesOverviewPills {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
display: grid;
}
.adminRolesWorkspaceV2 .adminRolesListItem .adminRolesOverviewPills .pill {
justify-content: center;
min-width: 0;
}
.adminRolesSelectedImpact .adminRolesImpactStats {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (max-width: 1280px) {
.adminRolesWorkspaceV2 {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 1040px) {
.adminRolesWorkspaceV2 {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesRoleRail {
position: static;
}
.adminRolesWorkspaceV2 .adminRolesList, .adminRolesList, .adminRolesMatrixToolbarControls {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.adminRolesStickySaveBar {
flex-direction: column;
align-items: stretch;
bottom: 8px;
}
.adminRolesStickySaveActions {
width: 100%;
}
.adminRolesStickySaveActions .btn {
flex: auto;
}
}
.adminAppearanceColorGrid {
gap: 12px;
display: grid;
}
.adminAppearanceColorItem {
gap: 6px;
display: grid;
}
.adminAppearanceColorControl {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminAppearanceColorSwatch {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 14%);
border-radius: 4px;
flex: none;
width: 28px;
height: 28px;
}
.adminAppearanceColorHex {
letter-spacing: .03em;
width: 130px;
min-height: 36px;
padding: 8px 10px;
}
.adminAppearanceColorSelectBtn, .adminAppearanceColorClearBtn {
min-height: 36px;
padding: 7px 12px;
font-size: 14px;
font-weight: 600;
}
.adminAppearanceColorClearBtn {
border-color: color-mix(in srgb, var(--stroke), var(--fg) 12%);
background: color-mix(in srgb, var(--bg), var(--bg-2) 32%);
min-height: 32px;
padding: 6px 10px;
font-size: 12px;
}
.adminAppearanceColorClearBtn:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--stroke), var(--fg) 20%);
background: color-mix(in srgb, var(--bg), var(--fg) 6%);
}
.adminAppearanceColorPickerInput {
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
position: absolute;
}
.adminSidebarStyleGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminSidebarStyleCard {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
cursor: pointer;
background: #fff;
border-radius: 12px;
align-content: start;
gap: 11px;
min-height: 220px;
padding: 12px;
transition: border-color .14s, box-shadow .14s, transform .14s;
display: grid;
position: relative;
}
.adminSidebarStyleCard:hover {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 52%);
box-shadow: 0 10px 24px color-mix(in srgb, var(--fg), transparent 94%);
}
.adminSidebarStyleCard:focus-within {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 28%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 72%);
outline: none;
}
.adminSidebarStyleCard.isChecked {
border-color: color-mix(in srgb, var(--focus), white 12%);
background: color-mix(in srgb, var(--focus), white 97%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 34%),
0 10px 24px color-mix(in srgb, var(--focus), transparent 92%);
}
.adminSidebarStyleCard input[type="radio"] {
width: 19px;
height: 19px;
margin: 0;
position: absolute;
top: 14px;
right: 14px;
}
.adminSidebarStylePreview {
aspect-ratio: .72;
background: linear-gradient(180deg, var(--sidebar-preview-bg-subtle), var(--sidebar-preview-bg));
width: 100%;
max-width: 108px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-preview-border), transparent 68%);
border-radius: 10px;
gap: 7px;
padding: 13px 12px;
display: grid;
}
.adminSidebarStyleGrid.isFlatSurface .adminSidebarStylePreview {
background: var(--sidebar-preview-bg);
}
.adminSidebarStylePreviewLogo {
color: #fff;
background: color-mix(in srgb, var(--sidebar-preview-border), transparent 64%);
width: 28px;
height: 22px;
font-family: var(--font-mono);
border-radius: 6px;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
display: inline-flex;
}
.adminSidebarStylePreview span:not(.adminSidebarStylePreviewLogo) {
background: #ffffff47;
border-radius: 999px;
height: 7px;
}
.adminSidebarStylePreview span:nth-child(2), .adminSidebarStylePreview span:nth-child(5) {
width: 58%;
}
.adminSidebarStylePreview span:nth-child(3), .adminSidebarStylePreview span:nth-child(6) {
width: 78%;
}
.adminSidebarStylePreview .isActive {
background: var(--sidebar-preview-active);
width: 94%;
height: 17px;
box-shadow: inset 3px 0 0 var(--sidebar-preview-border);
}
.adminSidebarStyleText {
gap: 6px;
min-width: 0;
display: grid;
}
.adminSidebarSurfaceGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
max-width: 640px;
display: grid;
}
.adminSidebarSurfaceCard {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
cursor: pointer;
background: #fff;
border-radius: 12px;
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 86px;
padding: 12px 42px 12px 12px;
transition: border-color .14s, box-shadow .14s, background-color .14s;
display: grid;
position: relative;
}
.adminSidebarSurfaceCard:hover {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 52%);
box-shadow: 0 10px 24px color-mix(in srgb, var(--fg), transparent 94%);
}
.adminSidebarSurfaceCard:focus-within {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 28%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 72%);
outline: none;
}
.adminSidebarSurfaceCard.isChecked {
border-color: color-mix(in srgb, var(--focus), white 12%);
background: color-mix(in srgb, var(--focus), white 97%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 34%),
0 10px 24px color-mix(in srgb, var(--focus), transparent 92%);
}
.adminSidebarSurfaceCard input[type="radio"] {
width: 19px;
height: 19px;
margin: 0;
position: absolute;
top: 14px;
right: 14px;
}
.adminSidebarSurfacePreview {
background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-bg-subtle), white 2%) 0%, var(--sidebar-bg) 42%, color-mix(in srgb, var(--sidebar-bg), black 8%) 100%);
width: 100%;
height: 52px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-active-border), transparent 70%),
0 1px 0 #0f172a0a;
border-radius: 10px;
}
.adminSidebarSurfacePreview.isFlat {
background: var(--sidebar-bg);
}
.adminSidebarSurfaceText {
gap: 6px;
min-width: 0;
display: grid;
}
.adminSidebarStyleName {
color: var(--fg);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.adminSidebarStyleHint {
max-width: 24ch;
font-size: 12px;
line-height: 1.4;
}
@media (max-width: 880px) {
.adminSidebarStyleGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminAppearanceColorHex {
flex: 220px;
width: 100%;
min-width: 0;
}
}
@media (max-width: 620px) {
.adminSidebarStyleGrid, .adminSidebarSurfaceGrid {
grid-template-columns: minmax(0, 1fr);
}
}
.adminRoleMatrixToolbar {
gap: 8px;
display: grid;
}
.adminRoleTemplateMetaGrid {
gap: 10px;
display: grid;
}
.adminRoleFieldError {
color: var(--danger);
}
.adminRoleSelectionSummary {
margin-top: 2px;
}
.adminRoleMatrix {
gap: 10px;
display: grid;
}
.adminRoleGroup {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 24%);
gap: 8px;
padding: 10px;
display: grid;
}
.adminRoleGroupHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.adminRoleGroupTitle {
align-items: center;
gap: 8px;
font-weight: 700;
display: inline-flex;
}
.adminRoleGroupActions {
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminRoleActionBtn {
border-radius: 6px;
min-height: 32px;
padding: 0 10px;
font-size: 12px;
}
.adminRoleCapabilityItem {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg);
align-items: flex-start;
gap: 8px;
min-height: 40px;
padding: 8px;
display: flex;
}
.adminRoleCapabilityMain {
gap: 2px;
display: grid;
}
.adminRoleCapabilityMain > span:first-child {
font-weight: 600;
}
.adminSessionsBody {
gap: 10px;
display: grid;
}
.adminSessionsPage {
gap: 16px;
}
.adminSessionsSummaryLine {
color: var(--muted);
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: -8px 0 6px;
font-size: 14px;
line-height: 1.35;
display: flex;
}
.adminSessionsSummaryLine > span + span {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
padding-left: 16px;
}
.adminSessionsControlBody {
gap: 12px;
display: grid;
}
.adminSessionsSummaryGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminSessionsSummaryCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), white 72%);
border-radius: 8px;
gap: 4px;
min-width: 0;
padding: 11px 12px;
display: grid;
}
.adminSessionsSummaryCard span {
min-width: 0;
color: var(--muted);
letter-spacing: .08em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
overflow: hidden;
}
.adminSessionsSummaryCard strong {
color: var(--fg);
font-size: 24px;
line-height: 1;
}
.adminSessionsSummaryCardMuted {
background: var(--bg);
}
.adminSessionsToolbarBody {
grid-template-columns: minmax(280px, 460px) minmax(240px, 280px) auto minmax(max-content, 1fr) auto;
align-items: center;
gap: 12px;
width: 100%;
margin-bottom: 4px;
display: grid;
}
@media (max-width: 1280px) {
.adminSessionsToolbarBody {
grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}
.adminSessionsToolbarMetaBody {
grid-column: 1 / -1;
}
.adminSessionsToolbarBody > .btnAction {
justify-self: end;
}
}
.adminSessionsSearchField {
margin-top: 0;
}
.adminSessionsSortWrap {
min-width: 240px;
margin-top: 0;
}
.adminSessionsToolbarMetaBody {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 0;
display: flex;
}
.adminSessionsActiveOnly {
align-items: center;
display: inline-flex;
}
.adminIncidentsPage {
align-content: start;
gap: 14px;
}
.adminIncidentsPage > .adminHeaderBody, .adminIncidentsPage > .card, .adminIncidentsWorkspace {
width: 100%;
max-width: none;
}
.adminIncidentsCard {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
box-shadow: none;
background: #fff;
border-radius: 10px;
}
.adminIncidentsCardBody {
gap: 16px;
padding: 20px;
display: grid;
}
.adminIncidentsSection {
gap: 14px;
}
.adminIncidentsPage .adminHeaderTitleWrap {
gap: 5px;
}
.adminIncidentsPage .adminSettingsChecklistTitle {
font-size: 21px;
line-height: 1.12;
}
.adminIncidentsPage .adminSettingsFieldHint {
line-height: 1.45;
}
.adminIncidentsPage .input, .adminIncidentsPage .listboxTrigger {
border-color: color-mix(in srgb, var(--stroke), transparent 7%);
background: #fff;
border-radius: 10px;
min-height: 48px;
}
.adminIncidentsCreateGrid, .adminIncidentsDetailGrid {
grid-template-columns: minmax(0, 1fr);
gap: 13px 14px;
display: grid;
}
.adminIncidentsCreateGrid > .field, .adminIncidentsDetailGrid > .field, .adminIncidentsCreateButtonRow {
align-content: start;
gap: 6px;
min-width: 0;
margin-top: 0;
display: grid;
}
.adminIncidentsFieldWide, .adminIncidentsFieldTitle, .adminIncidentsFieldDate {
min-width: 0;
}
.adminIncidentsFieldDate .input {
width: 100%;
min-width: 0;
max-width: 100%;
min-inline-size: 0;
}
.adminIncidentsCreateGrid .adminSettingsTextarea, .adminIncidentsDetailGrid .adminSettingsTextarea {
min-height: 78px;
}
.adminIncidentsDetailGrid .adminSettingsSnapshotTextarea {
min-height: 150px;
}
.adminIncidentsCreateButton {
min-width: 176px;
}
.adminIncidentsCreateButtonRow {
align-self: end;
justify-items: end;
}
.adminIncidentsWorkspace {
align-items: start;
gap: 14px;
min-width: 0;
display: grid;
}
.adminIncidentsTimelineCard, .adminIncidentsDetailCard {
min-width: 0;
}
.adminIncidentsTimelineSection {
gap: 14px;
}
.adminIncidentsToolbar {
grid-template-columns: minmax(0, 1fr) auto;
justify-content: space-between;
align-items: start;
gap: 12px;
display: grid;
}
.adminIncidentsStateText {
margin: 0;
padding: 12px 0;
}
.adminIncidentsEmptyState {
border: 1px dashed color-mix(in srgb, var(--stroke), transparent 4%);
background: #fff;
border-radius: 10px;
justify-content: center;
align-items: center;
gap: 22px;
min-height: 108px;
padding: 24px 22px;
display: flex;
}
.adminIncidentsEmptyIcon {
color: color-mix(in srgb, var(--fg), white 28%);
flex: none;
display: inline-flex;
position: relative;
}
.adminIncidentsEmptyIcon:after {
content: "";
background: var(--focus);
width: 4px;
height: 9px;
box-shadow: -12px 5px 0 -1px var(--focus),
12px 5px 0 -1px var(--focus);
border-radius: 999px;
position: absolute;
top: -10px;
left: calc(50% - 2px);
}
.adminIncidentsEmptyCopy {
gap: 4px;
min-width: 0;
display: grid;
}
.adminIncidentsEmptyCopy > p {
color: color-mix(in srgb, var(--fg), var(--muted) 24%);
margin: 0;
font-size: 17px;
line-height: 1.25;
}
.adminIncidentsEmptyCopy > span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminIncidentsList {
min-height: 0;
max-height: min(560px, calc(100vh - var(--admin-shell-header-height) - 260px));
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: 10px;
}
.adminIncidentsHistoryItem {
gap: 10px;
padding: 14px 16px;
}
.adminIncidentsHistoryItem.isSelected {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminIncidentsHistoryTop {
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 10px;
display: flex;
}
.adminIncidentsStatusPill, .adminIncidentsSeverityPill {
min-height: 28px;
padding: 5px 9px;
font-size: 12px;
font-weight: 800;
}
.adminIncidentsStatusPill.isOPEN, .adminIncidentsStatusPill.isINVESTIGATING {
border-color: color-mix(in srgb, var(--focus), transparent 56%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 18%);
}
.adminIncidentsStatusPill.isMITIGATED {
border-color: color-mix(in srgb, var(--warn), transparent 50%);
background: color-mix(in srgb, var(--warn), white 91%);
color: color-mix(in srgb, var(--warn), black 42%);
}
.adminIncidentsStatusPill.isRESOLVED {
border-color: color-mix(in srgb, var(--ok), transparent 54%);
background: color-mix(in srgb, var(--ok), white 93%);
color: color-mix(in srgb, var(--ok), black 32%);
}
.adminIncidentsSeverityPill.isINFO {
border-color: color-mix(in srgb, var(--stroke), transparent 2%);
background: color-mix(in srgb, var(--bg-2), var(--bg) 10%);
color: var(--muted);
}
.adminIncidentsSeverityPill.isWARNING {
border-color: color-mix(in srgb, var(--warn), transparent 50%);
background: color-mix(in srgb, var(--warn), white 92%);
color: color-mix(in srgb, var(--warn), black 44%);
}
.adminIncidentsSeverityPill.isCRITICAL {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 22%);
}
.adminIncidentsItemTitle {
overflow-wrap: anywhere;
font-size: 17px;
}
.adminIncidentsOpenButton {
min-height: 38px;
padding: 8px 11px;
font-size: 13px;
}
.adminIncidentsInfoGrid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.adminIncidentsTimelineItem strong, .adminIncidentsTimelineItem p {
margin: 0;
}
@media (min-width: 380px) and (max-width: 759px) {
.adminIncidentsCreateGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminIncidentsFieldTitle, .adminIncidentsFieldComponent, .adminIncidentsFieldSourceId, .adminIncidentsFieldSourceUrl, .adminIncidentsFieldDate, .adminIncidentsFieldRemediation, .adminIncidentsCreateButtonRow {
grid-column: 1 / -1;
}
.adminIncidentsCreateButtonRow {
justify-items: stretch;
}
}
@media (min-width: 760px) {
.adminIncidentsCreateGrid {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: end;
}
.adminIncidentsDetailGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminIncidentsFieldTitle {
grid-column: span 6;
}
.adminIncidentsFieldComponent, .adminIncidentsFieldSeverity, .adminIncidentsFieldSourceType, .adminIncidentsFieldSourceId, .adminIncidentsFieldSourceUrl, .adminIncidentsFieldDate {
grid-column: span 3;
}
.adminIncidentsFieldRemediation {
grid-column: span 9;
}
.adminIncidentsCreateButtonRow {
grid-column: span 3;
}
.adminIncidentsDetailGrid .adminIncidentsFieldWide {
grid-column: 1 / -1;
}
}
@media (min-width: 760px) and (max-width: 1099px) {
.adminIncidentsCreateGrid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.adminIncidentsFieldTitle {
grid-column: span 4;
}
.adminIncidentsFieldComponent, .adminIncidentsFieldSeverity, .adminIncidentsFieldSourceType, .adminIncidentsFieldSourceId {
grid-column: span 2;
}
.adminIncidentsFieldSourceUrl, .adminIncidentsFieldDate {
grid-column: span 3;
}
.adminIncidentsFieldRemediation {
grid-column: span 4;
}
.adminIncidentsCreateButtonRow {
grid-column: span 2;
}
}
@media (min-width: 1100px) {
.adminIncidentsCreateGrid .adminSettingsTextarea {
min-height: 64px;
}
}
@media (min-width: 1200px) {
.adminIncidentsWorkspace:has(.adminIncidentsDetailCard) {
grid-template-columns: minmax(0, 1fr) minmax(360px, .68fr);
}
}
@media (max-width: 640px) {
.adminDataQualityGroupList {
max-height: min(720px, calc(100dvh - var(--admin-shell-header-height) - 132px));
}
.adminDataQualityPage {
gap: 12px;
}
.adminDataQualityPage .adminHeaderBody {
align-items: start;
gap: 14px;
display: grid;
}
.adminDataQualityPage .adminPageTitle {
font-size: var(--page-title-size-phone);
line-height: 1.08;
}
.adminDataQualityPage .adminSettingsIntro {
max-width: none;
font-size: 20px;
line-height: 1.45;
}
.adminDataQualityRefreshButton {
border-radius: 10px;
width: max-content;
min-height: 52px;
padding: 12px 20px;
font-size: 19px;
}
.adminDataQualitySummaryBody {
gap: 14px;
padding: 14px;
}
.adminDataQualityMetricGrid {
gap: 10px;
}
.adminDataQualityMetric {
align-items: center;
gap: 8px;
min-height: 74px;
padding: 10px;
}
.adminDataQualityMetricIcon {
width: 26px;
height: 26px;
}
.adminDataQualityMetricLabel {
font-size: 14px;
}
.adminDataQualityMetric.isGenerated .adminDataQualityMetricText {
display: contents;
}
.adminDataQualityMetric.isGenerated .adminDataQualityMetricLabel {
align-self: center;
}
.adminDataQualityMetric strong {
text-overflow: clip;
white-space: normal;
font-size: 19px;
line-height: 1.25;
overflow: visible;
}
.adminDataQualityMetric.isGenerated strong {
overflow-wrap: normal;
word-break: normal;
grid-column: 1 / -1;
font-size: 18px;
}
.adminDataQualityGroupBody {
gap: 16px;
padding: 20px 22px;
}
.adminDataQualityGroupActions {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: center;
width: 100%;
display: grid;
}
.adminDataQualityGroupActions .btnAction {
border-radius: 10px;
justify-self: end;
min-height: 52px;
padding: 12px 18px;
font-size: 18px;
}
.adminDataQualityMetaLine {
gap: 8px 12px;
font-size: 16px;
}
.adminDataQualityIssueList {
max-height: min(370px, 52vh);
}
.adminDataQualityIssueRow {
gap: 12px;
padding: 14px 16px 14px 18px;
}
.adminDataQualityIssueMetaLine {
font-size: 15px;
}
.adminDataQualityIssueText {
gap: 6px;
}
.adminDataQualityIssueText strong {
font-size: 17px;
}
.adminDataQualityIssueText p {
font-size: 18px;
line-height: 1.35;
}
.adminDataQualityIssueAction {
white-space: normal;
justify-content: space-between;
align-items: center;
gap: 12px;
width: 100%;
font-size: 15px;
}
.adminDataQualityIssueOpenButton {
min-height: 48px;
padding: 10px 16px;
font-size: 18px;
}
.adminIncidentsPage {
gap: 12px;
padding-inline: 8px;
}
.adminIncidentsPage .adminSettingsIntro {
display: none;
}
.adminIncidentsPage > .card {
max-width: 100%;
}
.adminIncidentsCardBody {
padding: 18px;
}
.adminIncidentsPage .adminSettingsChecklistTitle {
font-size: 20px;
}
.adminIncidentsToolbar {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "title refresh"
"hint hint";
gap: 6px 8px;
}
.adminIncidentsTimelineCard .adminHeaderTitleWrap {
display: contents;
}
.adminIncidentsTimelineCard .adminSettingsChecklistTitle {
white-space: nowrap;
grid-area: title;
font-size: 18.5px;
}
.adminIncidentsTimelineCard .adminSettingsFieldHint {
grid-area: hint;
}
.adminIncidentsEmptyState {
text-align: center;
flex-direction: column;
gap: 12px;
min-height: 174px;
padding: 26px 18px;
}
.adminIncidentsHistoryTop {
align-items: stretch;
}
.adminIncidentsHistoryTop .btn {
width: 100%;
}
}
.adminSessionsActiveOnly .adminBooleanFieldRow {
min-height: 34px;
padding: 4px 2px;
}
.adminSessionsToolbarMetaActions {
align-items: center;
gap: 10px;
display: inline-flex;
}
.adminSessionsResultCount {
white-space: nowrap;
justify-self: end;
margin: 0;
font-size: 12px;
line-height: 1.3;
}
.adminSessionsToolbarBody > .btnAction {
justify-content: center;
align-items: center;
gap: 6px;
display: inline-flex;
}
.adminSessionsStatusPill {
min-height: 26px;
}
.adminSessionsBulkBar {
width: 100%;
}
.adminSessionsWorkspace {
grid-template-columns: minmax(0, 1fr) 340px;
align-items: start;
gap: 16px;
width: 100%;
min-width: 0;
display: grid;
}
.adminSessionsWorkspaceFull {
grid-template-columns: minmax(0, 1fr);
}
.adminSessionsTableSurface {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
min-width: 0;
overflow: hidden;
}
.adminSessionsTableWrap {
max-width: 100%;
max-height: max(560px, calc(100vh - var(--admin-shell-header-height) - 248px));
scrollbar-width: none;
background: #fff;
border: 0;
border-radius: 0;
display: block;
overflow: auto;
}
.adminSessionsTableWrap::-webkit-scrollbar {
display: none;
}
.adminSessionsTable {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 700px;
}
.adminSessionsColSelect {
width: 38px;
}
.adminSessionsColUser {
width: 27%;
}
.adminSessionsColSession {
width: 39%;
}
.adminSessionsColActivity {
width: 20%;
}
.adminSessionsColStatus {
width: 14%;
}
.adminSessionsTable thead th {
z-index: 2;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg), white 8%);
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
padding: 12px 14px;
font-size: 12px;
font-weight: 820;
position: sticky;
top: 0;
}
.adminSessionsTable tbody td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 15%);
vertical-align: middle;
padding: 11px 14px;
font-size: 13px;
line-height: 1.3;
}
.adminSessionsTable tbody tr {
cursor: pointer;
}
.adminSessionsTable tbody tr:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminSessionsTable tbody tr.isSelected {
background: color-mix(in srgb, var(--focus), white 94%);
box-shadow: inset 3px 0 0 var(--focus);
}
.adminSessionsTableText {
text-overflow: ellipsis;
white-space: nowrap;
color: var(--fg);
display: block;
overflow: hidden;
}
.adminSessionsTableStack, .adminSessionsTimeline {
gap: 4px;
min-width: 0;
display: grid;
}
.adminSessionsTableSubtext {
color: var(--muted);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
line-height: 1.25;
display: block;
overflow: hidden;
}
.adminSessionsUserRow {
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
position: relative;
}
.adminSessionsAvatar {
flex: none;
}
.adminSessionsAvatarCurrent {
--cm-user-avatar-ring-width: 2px;
--cm-user-avatar-ring-color: color-mix(in srgb, var(--success), transparent 44%);
}
.adminSessionsActiveDot {
background: var(--success);
border: 2px solid #fff;
border-radius: 999px;
width: 9px;
height: 9px;
position: absolute;
bottom: -1px;
left: 25px;
}
.adminSessionsTimelineRow {
grid-template-columns: minmax(52px, auto) minmax(0, 1fr);
align-items: baseline;
gap: 8px;
min-width: 0;
display: grid;
}
.adminSessionsTimelineLabel {
color: var(--muted);
letter-spacing: 0;
white-space: nowrap;
font-size: 11px;
font-weight: 700;
}
.adminSessionsList {
gap: 8px;
min-width: 0;
display: none;
}
.adminSessionsListTop {
justify-content: flex-start;
padding: 0 2px 4px;
display: flex;
}
.adminSessionsSelectAll {
min-height: 36px;
color: var(--fg);
gap: 8px;
font-size: 13px;
font-weight: 700;
}
.adminSessionsListItem {
border: 1px solid var(--stroke);
background: var(--bg);
border-radius: 8px;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-width: 0;
padding: 14px;
display: grid;
}
.adminSessionsListItem:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminSessionsListItem.isSelected {
border-color: color-mix(in srgb, var(--focus), transparent 24%);
background: color-mix(in srgb, var(--focus), white 95%);
box-shadow: inset 3px 0 0 var(--focus);
}
.adminSessionsSelectSlot {
align-self: start;
min-height: 30px;
padding-top: 4px;
}
.adminSessionsListMain {
gap: 10px;
min-width: 0;
display: grid;
}
.adminSessionsListHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
min-width: 0;
display: flex;
}
.adminSessionsUserCellInner {
gap: 2px;
min-width: 0;
display: grid;
}
.adminSessionsUserPrimary {
font-size: 14px;
font-weight: 700;
}
.adminSessionsUserSecondary {
color: var(--muted);
font-size: 12px;
}
.adminSessionsTableStatusStack {
justify-items: start;
gap: 5px;
min-width: 0;
display: grid;
}
.adminSessionsStatePills {
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 6px;
display: flex;
}
.adminSessionsCurrentPill {
min-height: 26px;
color: color-mix(in srgb, var(--success), black 24%);
background: color-mix(in srgb, var(--success), white 86%);
border-color: color-mix(in srgb, var(--success), transparent 34%);
font-weight: 700;
}
.adminSessionsMetaGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 14px;
min-width: 0;
margin: 0;
display: grid;
}
.adminSessionsMetaItem {
gap: 3px;
min-width: 0;
margin: 0;
display: grid;
}
.adminSessionsMetaItem dt {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
margin: 0;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.adminSessionsMetaItem dd {
min-width: 0;
color: color-mix(in srgb, var(--fg), var(--muted) 18%);
margin: 0;
font-size: 13px;
line-height: 1.3;
}
.adminSessionsMetaValue {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminSessionsActionCell {
text-align: right;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
min-width: 54px;
display: inline-flex;
}
.adminSessionsDateMeta {
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-size: 13px;
line-height: 1.25;
}
.adminSessionsRevokeBtn, .adminSessionsInspectBtn {
border-radius: 8px;
min-height: 34px;
padding: 0 10px;
font-size: 13px;
}
.adminSessionsStatusText {
color: color-mix(in srgb, var(--fg), var(--muted) 18%);
white-space: nowrap;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 720;
line-height: 1.2;
display: inline-flex;
}
.adminSessionsStatusDot {
background: var(--success);
border-radius: 999px;
width: 7px;
height: 7px;
}
.adminSessionsInspector {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
gap: 14px;
min-width: 0;
padding: 16px;
display: grid;
}
.adminSessionsInspectorHeader {
color: var(--muted);
letter-spacing: .06em;
text-transform: uppercase;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 820;
line-height: 1.2;
display: flex;
}
.adminSessionsInspectorCurrent {
justify-self: start;
min-height: 22px;
padding: 3px 8px;
font-size: 11px;
font-weight: 760;
line-height: 1.1;
}
.adminSessionsInspectorIdentity {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
align-items: center;
gap: 12px;
min-width: 0;
padding: 2px 0 8px;
display: flex;
}
.adminSessionsInspectorIdentity .adminSessionsAvatar {
flex: none;
}
.adminSessionsInspectorIdentity > div {
gap: 2px;
min-width: 0;
display: grid;
}
.adminSessionsInspectorIdentity strong {
color: var(--fg);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
line-height: 1.2;
overflow: hidden;
}
.adminSessionsInspectorIdentity > div span {
color: var(--muted);
font-size: 12px;
}
.adminSessionsInspectorMeta {
margin: 0;
display: grid;
}
.adminSessionsInspectorMetaRow {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-template-columns: minmax(100px, .65fr) minmax(0, 1fr);
align-items: baseline;
gap: 12px;
min-width: 0;
padding: 12px 0;
display: grid;
}
.adminSessionsInspectorMetaRow dt, .adminSessionsInspectorMetaRow dd {
min-width: 0;
margin: 0;
}
.adminSessionsInspectorMetaRow dt {
color: var(--muted);
font-size: 12px;
font-weight: 780;
}
.adminSessionsInspectorMetaRow dd {
color: var(--fg);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 1.3;
overflow: hidden;
}
.adminSessionsInspectorRevoke {
width: 100%;
min-height: 42px;
color: var(--danger);
border-color: color-mix(in srgb, var(--danger), white 28%);
background: #fff;
justify-content: center;
align-items: center;
gap: 7px;
display: inline-flex;
}
.adminSessionsInspectorRevoke:not(:disabled):hover {
color: #fff;
background: var(--danger);
border-color: var(--danger);
}
.adminSessionsInspectorEmpty {
text-align: center;
align-content: center;
gap: 6px;
min-height: 180px;
display: grid;
}
.adminSessionsInspectorEmpty strong, .adminSessionsInspectorEmpty p {
margin: 0;
}
.adminSessionsInspectorMobile {
display: none;
}
@media (max-width: 1180px) {
.adminSessionsWorkspace {
grid-template-columns: minmax(0, 1fr);
}
.adminSessionsInspectorDesktop {
display: none;
}
.adminSessionsInspectorMobile {
display: grid;
}
}
.adminDirectoryVisibleCount {
margin: 0;
font-size: 14px;
line-height: 1.25;
}
.adminDirectoryListMeta {
justify-content: flex-end;
margin-top: 6px;
padding-right: 10px;
display: flex;
}
.adminListCardBody .adminListTableWrap, .adminListTableSurface .adminListTableWrap {
max-width: 100%;
overflow: auto hidden;
}
.adminListCardBody .adminListTable, .adminListTableSurface .adminListTable {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.adminListCardBody .adminListTable thead th, .adminListTableSurface .adminListTable thead th {
text-align: left;
letter-spacing: .01em;
border-bottom: 1px solid var(--stroke);
color: color-mix(in srgb, var(--fg), black 8%);
padding: 12px;
font-size: 16px;
font-weight: 700;
}
.adminListSelectHeader, .adminListSelectCell {
text-align: center;
width: 44px;
padding-left: 8px !important;
padding-right: 8px !important;
}
.adminListSelectHeader .adminBulkCheckbox, .adminListSelectCell .adminBulkCheckbox {
justify-content: center;
margin-right: 0;
}
.adminListCardBody .adminListTable tbody td, .adminListTableSurface .adminListTable tbody td {
border-bottom: 1px solid var(--stroke);
vertical-align: middle;
padding: 14px 12px;
font-size: 14px;
line-height: 1.3;
}
.adminObraAddressCell {
white-space: nowrap;
text-overflow: ellipsis;
max-width: 360px;
overflow: hidden;
}
.adminListCardBody .adminListTable td:nth-last-child(2) {
font-size: 13px;
line-height: 1.25;
}
.adminListDateCell {
white-space: nowrap;
font-variant-numeric: tabular-nums;
min-width: 112px;
}
.adminListDateTimeCell {
white-space: nowrap;
font-variant-numeric: tabular-nums;
min-width: 154px;
}
.adminListCardBody .adminListRow, .adminListTableSurface .adminListRow {
transition: background-color .14s;
}
.adminListCardBody .adminListRow:hover, .adminListTableSurface .adminListRow:hover {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminListCardBody .adminListRow:focus-visible, .adminListTableSurface .adminListRow:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 32%);
outline-offset: -2px;
}
.adminFinanceInboxPage, .adminFinanceIntakeBody {
gap: 14px;
display: grid;
}
.adminFinanceIntakeBodyFlat {
padding: 0;
}
.adminFinanceModePicker {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminFinanceModeButton {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 6%);
min-height: 92px;
color: inherit;
text-align: left;
cursor: pointer;
gap: 5px;
padding: 14px 16px;
transition: border-color .14s, background-color .14s, transform .14s, box-shadow .14s;
display: grid;
}
.adminFinanceModeButton:hover {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
background: color-mix(in srgb, var(--focus), white 97%);
transform: translateY(-1px);
}
.adminFinanceModeButton:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 24%);
outline-offset: 2px;
}
.adminFinanceModeButtonActive {
border-color: color-mix(in srgb, var(--focus), transparent 8%);
background: color-mix(in srgb, var(--focus), white 95%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 28%),
0 8px 18px #28489212;
}
.adminFinanceModeButtonTitle {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.adminFinanceModeButtonHint {
color: var(--text-muted);
font-size: 13px;
line-height: 1.35;
}
.adminFinanceIntakeGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
display: grid;
}
.adminFinancePanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 8%);
padding: 18px;
}
.adminFinancePanelRefresh {
gap: 16px;
}
.adminFinancePanelHead {
gap: 4px;
display: grid;
}
.adminFinancePanelTitle {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
}
.adminFinancePanelActions {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceUploadStack {
gap: 12px;
display: grid;
}
.adminFinanceHiddenFileInput {
display: none;
}
.adminFinanceDropzone {
border: 1px dashed color-mix(in srgb, var(--focus), transparent 36%);
border-radius: calc(var(--radius) + 4px);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 98%), color-mix(in srgb, white, var(--bg) 8%));
cursor: pointer;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 148px;
padding: 18px;
transition: border-color .14s, background-color .14s, box-shadow .14s, transform .14s;
display: grid;
}
.adminFinanceDropzone:hover, .adminFinanceDropzone.isDragging {
border-color: color-mix(in srgb, var(--focus), transparent 14%);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 95%), color-mix(in srgb, white, var(--bg) 4%));
transform: translateY(-1px);
box-shadow: 0 10px 24px #28489214;
}
.adminFinanceDropzone:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 72%),
0 10px 24px #28489214;
outline: none;
}
.adminFinanceDropzoneIcon {
background: color-mix(in srgb, var(--focus), white 87%);
width: 48px;
height: 48px;
color: color-mix(in srgb, var(--focus), black 12%);
font-family: var(--font-mono);
border-radius: 999px;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: 600;
line-height: 1;
display: inline-flex;
}
.adminFinanceDropzoneText {
gap: 5px;
min-width: 0;
display: grid;
}
.adminFinanceDropzoneFormats {
font-family: var(--font-mono);
letter-spacing: .02em;
font-size: 12px;
}
.adminFinanceUploadQueue {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 10%);
gap: 10px;
padding: 12px 14px;
display: grid;
}
.adminFinanceUploadQueueHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
display: flex;
}
.adminFinanceUploadQueueList {
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.adminFinanceUploadQueueItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg) 6%);
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 12px;
display: flex;
position: relative;
}
.adminFinanceUploadQueueMeta {
gap: 2px;
min-width: 0;
display: grid;
}
.adminFinanceUploadQueueMeta strong {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminFinanceUploadQueueClearBtn {
min-width: auto;
padding-inline: 14px;
}
.adminFinanceUploadQueueRemoveBtn {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
width: 20px;
height: 20px;
color: var(--text);
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0;
font-size: 14px;
font-weight: 700;
line-height: 1;
display: inline-flex;
position: absolute;
top: 10px;
right: 10px;
}
.adminFinanceUploadQueueRemoveBtn:hover, .adminFinanceUploadQueueRemoveBtn:focus-visible {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
background: color-mix(in srgb, var(--bg-2), white 30%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 82%);
}
.adminFinanceUploadQueueEmpty {
margin: 0;
padding: 0 2px;
}
.adminFinanceManualFamilyField {
border: 0;
margin: 0;
padding: 0;
}
.adminFinanceManualDateField {
max-width: min(100%, 280px);
}
.adminFinanceUploadMetaGrid, .adminFinanceUploadOptionalGrid {
gap: 12px;
display: grid;
}
.adminFinanceUploadFooter {
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
gap: 24px;
display: flex;
}
.adminFinanceUploadBackendField {
flex: 560px;
min-width: 0;
}
.adminFinanceUploadActions {
flex: none;
justify-content: flex-end;
align-self: end;
}
.adminFinanceUploadSubmitRow {
justify-content: flex-end;
margin-top: 16px;
}
.adminFinanceUploadOptionalDetails {
padding-top: 2px;
}
.adminFinanceUploadOptionalDetails[open] .adminFinanceUploadOptionalGrid {
margin-top: 10px;
}
.adminFinanceTextarea {
min-height: 96px;
}
.adminFinanceTextareaMono {
font-family: var(--font-mono);
font-size: 12px;
}
.adminFinanceInboxResultsBody {
gap: 12px;
}
.adminFinanceInboxPager {
overflow-anchor: none;
padding-top: 8px;
}
.adminFinanceInboxResultsHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceInboxHeaderActions {
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceInboxRefreshBtn {
width: 42px;
min-width: 42px;
height: 42px;
color: var(--text);
cursor: pointer;
background: none;
border: 0;
border-radius: 10px;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.adminFinanceInboxRefreshBtn:hover:not(:disabled) {
background: color-mix(in srgb, var(--text), transparent 94%);
}
.adminFinanceInboxRefreshBtn:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.adminFinanceInboxRefreshBtn:disabled {
cursor: default;
opacity: .72;
}
.adminFinanceInboxTableActionHead {
text-align: right;
vertical-align: middle;
}
.adminFinanceInboxTableActionHeadInner {
inset-block: 0;
pointer-events: none;
justify-content: flex-end;
align-items: center;
display: flex;
position: absolute;
right: 12px;
}
.adminFinanceInboxTableActionHead .adminFinanceInboxRefreshBtn {
pointer-events: auto;
border-radius: 8px;
width: 28px;
min-width: 28px;
height: 28px;
}
.adminFinanceInboxTableActionHead .adminFinanceInboxRefreshIcon {
width: 16px;
height: 16px;
}
.adminFinanceInboxRefreshIcon {
object-fit: contain;
width: 18px;
height: 18px;
display: block;
}
.adminFinanceInboxRefreshIconSpinning {
animation: .9s linear infinite adminFinanceInboxRefreshSpin;
}
@keyframes adminFinanceInboxRefreshSpin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.adminFinanceInboxLauncher {
gap: 12px;
display: grid;
}
.adminFinanceInboxLauncherActions {
justify-content: flex-start;
}
.adminFinanceLauncherActionActive {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 8%);
}
.adminFinanceIntakePanel {
gap: 12px;
display: grid;
}
.adminFinancePanelFull {
grid-column: 1 / -1;
}
.adminFinanceNotice {
border: 1px solid var(--stroke);
border-radius: var(--radius);
margin: 0;
padding: 10px 12px;
}
.adminFinanceNoticeSuccess {
border-color: color-mix(in srgb, var(--success), transparent 34%);
background: color-mix(in srgb, var(--success), white 92%);
}
.adminFinanceNoticeWarn {
background: #fcf8f1;
border-color: #cc8a1194;
}
.adminFinanceNoticeError {
border-color: color-mix(in srgb, var(--danger), transparent 34%);
background: color-mix(in srgb, var(--danger), white 94%);
}
.adminFinanceInboxTable {
table-layout: fixed;
min-width: 1180px;
}
.adminFinanceInboxColDate {
width: 164px;
}
.adminFinanceInboxColInfo {
width: 290px;
}
.adminFinanceInboxColSupplier {
width: 220px;
}
.adminFinanceInboxColTotal {
width: 134px;
}
.adminFinanceInboxColStatus {
width: 126px;
}
.adminFinanceInboxColTags {
width: 190px;
}
.adminFinanceInboxColActions {
width: 106px;
}
.adminFinanceInboxTable td {
vertical-align: top;
min-width: 0;
overflow: visible;
}
.adminFinanceInboxTable th:last-child, .adminFinanceInboxTable td.adminFinanceActionsCell {
z-index: 2;
background: #fff;
position: sticky;
right: 0;
}
.adminFinanceInboxTable th:last-child {
z-index: 3;
background: #f8fafc;
}
.adminListTableSurface .adminFinanceInboxTable .adminListRow:hover, .adminListTableSurface .adminFinanceInboxTable .adminListRow:focus-within {
background: none;
}
.adminListTableSurface .adminFinanceInboxTable .adminListRow:hover > td, .adminListTableSurface .adminFinanceInboxTable .adminListRow:focus-within > td {
background: color-mix(in srgb, var(--focus), white 96%);
}
:is(.adminFinanceInboxTable td.adminFinanceActionsCell:has(.adminUsersMenu), .adminFinanceInboxTable td.adminFinanceActionsCell:has(.adminUsersMenuFloating)) {
z-index: 8;
}
.adminFinanceInfoCell {
min-width: 280px;
max-width: 0;
}
.adminFinanceInfoCell strong, .adminFinanceInfoCell .muted {
overflow-wrap: anywhere;
}
.adminFinanceInboxDateCell strong, .adminFinanceInboxDateCell .muted {
white-space: nowrap;
}
.adminFinanceStack {
gap: 2px;
display: grid;
}
.adminFinanceInboxStatusCell .adminFinanceStack, .adminFinanceInboxTypeCell .adminFinanceStack {
gap: 6px;
}
.adminFinanceInboxTypePills {
white-space: nowrap;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminFinanceInboxDocumentLine {
flex-wrap: wrap;
align-items: baseline;
gap: 4px;
display: inline-flex;
}
.adminFinanceInboxDocumentLink {
color: var(--text);
text-underline-offset: .14em;
text-decoration: underline;
text-decoration-thickness: 1px;
}
.adminFinanceInboxDocumentLink:hover {
color: var(--focus);
}
.adminFinanceInboxSupplierCell strong, .adminFinanceInboxTotalCell strong {
display: block;
}
.adminFinanceInboxTotalCell strong {
white-space: nowrap;
}
.adminFinanceProcessingPill {
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminFinanceProcessingDot {
border: 2px solid color-mix(in srgb, var(--focus), white 45%);
border-right-color: #0000;
border-radius: 999px;
flex: none;
width: 10px;
height: 10px;
animation: .9s linear infinite adminFinanceProcessingSpin;
}
.adminFinanceFamilyPillSite {
border-color: color-mix(in srgb, var(--focus), white 52%);
color: color-mix(in srgb, var(--focus), black 22%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminFinanceFamilyPillVehicle {
border-color: color-mix(in srgb, var(--accent), white 48%);
color: color-mix(in srgb, var(--accent), black 18%);
background: color-mix(in srgb, var(--accent), white 95%);
}
.adminFinanceFamilyPillNeutral {
border-color: color-mix(in srgb, var(--stroke), white 8%);
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
}
.adminFinanceFamilyPillUnknown {
border-color: color-mix(in srgb, var(--danger), white 58%);
color: color-mix(in srgb, var(--danger), black 18%);
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminFinanceParserPill {
border-color: color-mix(in srgb, var(--stroke), white 10%);
color: color-mix(in srgb, var(--muted), var(--fg) 20%);
background: color-mix(in srgb, var(--bg-2), var(--bg) 6%);
}
.adminFinanceMailboxDatasetPage {
gap: 14px;
display: grid;
}
.adminFinanceMailboxDatasetShell, .adminFinanceMailboxDatasetCardBody, .adminFinanceMailboxDatasetDatasetBody {
gap: 12px;
display: grid;
}
.adminFinanceMailboxDatasetShell > .card, .adminFinanceMailboxDatasetControlGrid > .card, .adminFinanceMailboxDatasetControlColumn > .card {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
box-shadow: none;
}
.adminFinanceMailboxDatasetWorkflow {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
display: grid;
}
.adminFinanceMailboxDatasetWorkflow > li {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, var(--bg-2), white 44%);
min-height: 40px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
align-items: center;
gap: 8px;
padding: 8px 10px;
font-size: 13px;
font-weight: 700;
display: flex;
}
.adminFinanceMailboxDatasetWorkflow strong {
background: color-mix(in srgb, var(--focus), white 88%);
width: 22px;
height: 22px;
color: color-mix(in srgb, var(--focus), black 24%);
font-family: var(--font-mono);
border-radius: 999px;
place-items: center;
font-size: 11px;
line-height: 1;
display: inline-grid;
}
.adminFinanceMailboxDatasetControlGrid {
grid-template-columns: minmax(0, 1.48fr) minmax(340px, .72fr);
}
.adminFinanceMailboxDatasetControlColumn {
gap: 12px;
min-width: 0;
display: grid;
}
@media (min-width: 1280px) {
.adminFinanceMailboxDatasetControlColumn {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
align-items: start;
}
.adminFinanceMailboxDatasetDatasetCard .adminFinanceMailboxDatasetStats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.adminFinanceMailboxDatasetGrid {
grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
align-items: start;
gap: 14px;
display: grid;
}
.adminFinanceMailboxDatasetStats {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
display: grid;
}
.adminFinanceMailboxDatasetStats > div, .adminFinanceMailboxDatasetSelectionBox, .adminFinanceMailboxDatasetPlanRows > div {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, var(--bg-2), white 34%);
gap: 3px;
min-width: 0;
padding: 9px 11px;
display: grid;
}
.adminFinanceMailboxDatasetStats span, .adminFinanceMailboxDatasetSelectionBox .muted, .adminFinanceMailboxDatasetPlanRows .muted {
overflow-wrap: anywhere;
min-width: 0;
}
.adminFinanceMailboxDatasetStats span {
color: var(--muted);
font-size: 12px;
}
.adminFinanceMailboxDatasetStats strong {
font-family: var(--font-condensed);
overflow-wrap: anywhere;
min-width: 0;
font-size: 21px;
line-height: 1;
}
.adminFinanceMailboxDatasetMeta, .adminFinanceMailboxDatasetMiniStats, .adminFinanceMailboxDatasetMessageMeta, .adminFinanceMailboxDatasetAttachmentPills, .adminFinanceMailboxDatasetBrowserTools, .adminFinanceMailboxDatasetPager {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminFinanceMailboxDatasetMeta span, .adminFinanceMailboxDatasetMiniStats span {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 32%);
min-height: 28px;
font-family: var(--font-mono);
border-radius: 999px;
align-items: center;
padding: 4px 8px;
font-size: 12px;
line-height: 1.25;
display: inline-flex;
}
.adminFinanceMailboxDatasetFilterGrid {
display: grid;
}
.adminFinanceMailboxDatasetSenderSearch {
gap: 6px;
display: grid;
}
.adminFinanceMailboxDatasetSenderResults {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), white 50%);
border-radius: 8px;
gap: 4px;
padding: 5px;
display: grid;
}
.adminFinanceMailboxDatasetSenderResult {
width: 100%;
min-height: 34px;
color: color-mix(in srgb, var(--fg), var(--muted) 20%);
text-align: left;
background: #fff;
border: 1px solid #0000;
border-radius: 6px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 6px 8px;
font-size: 12px;
font-weight: 700;
display: grid;
}
.adminFinanceMailboxDatasetSenderResult:hover:not(:disabled), .adminFinanceMailboxDatasetSenderResult.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 40%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 24%);
}
.adminFinanceMailboxDatasetSenderResult span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminFinanceMailboxDatasetSenderResult strong {
color: var(--muted);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
}
.adminFinanceMailboxDatasetSenderEmpty {
margin: 0;
padding: 5px 6px;
font-size: 12px;
line-height: 1.25;
}
.adminFinanceMailboxDatasetToggleGrid {
display: grid;
}
.adminFinanceMailboxDatasetToggleGrid label, .adminFinanceMailboxDatasetAttachment {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
display: grid;
}
.adminFinanceMailboxDatasetToggleGrid label {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg) 8%);
min-height: 44px;
padding: 9px 10px;
}
.adminFinanceMailboxDatasetPlanCard {
top: calc(var(--admin-shell-header-height) + 18px);
align-self: start;
position: sticky;
}
.adminFinanceMailboxDatasetPlanButton {
width: 100%;
}
.adminFinanceMailboxDatasetPlanResult, .adminFinanceMailboxDatasetReplayBox, .adminFinanceMailboxDatasetReplayResult, .adminFinanceMailboxDatasetHistoryList, .adminFinanceMailboxDatasetCleanupBox {
gap: 12px;
display: grid;
}
.adminFinanceMailboxDatasetReplayBox, .adminFinanceMailboxDatasetCleanupBox {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
margin-top: 12px;
padding-top: 12px;
}
.adminFinanceMailboxDatasetHistoryRun {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
gap: 10px;
padding: 12px;
display: grid;
}
.adminFinanceMailboxDatasetInlineCheck {
min-height: 44px;
color: var(--fg);
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
display: grid;
}
.adminFinanceMailboxDatasetWarningList {
border: 1px solid color-mix(in srgb, var(--warn), transparent 36%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warn), white 94%);
gap: 6px;
margin: 0;
padding: 10px 12px 10px 28px;
display: grid;
}
.adminFinanceMailboxDatasetPlanRows {
gap: 8px;
display: grid;
}
.adminFinanceMailboxDatasetPlanRows a {
width: fit-content;
min-height: 28px;
color: var(--focus);
font-weight: 700;
text-decoration: none;
}
.adminFinanceMailboxDatasetPlanRows a:hover {
text-decoration: underline;
}
.adminFinanceMailboxDatasetBrowserTools {
justify-content: flex-end;
}
.adminFinanceMailboxDatasetBrowserCard .adminFinanceInboxResultsHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 12px;
padding-bottom: 10px;
}
.adminFinanceMailboxDatasetPageIndicator {
min-height: 30px;
color: var(--muted);
font-family: var(--font-mono);
align-items: center;
font-size: 12px;
font-weight: 650;
display: inline-flex;
}
.adminFinanceMailboxDatasetMessageList {
max-height: min(660px, calc(100vh - var(--admin-shell-header-height) - 166px));
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: #fff;
gap: 0;
display: grid;
overflow: auto;
}
.adminFinanceMailboxDatasetMessage {
background: #fff;
grid-template-columns: 78px minmax(0, 1fr);
gap: 10px;
padding: 10px 12px;
display: grid;
}
.adminFinanceMailboxDatasetMessage + .adminFinanceMailboxDatasetMessage {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminFinanceMailboxDatasetMessageDate {
color: var(--muted);
font-family: var(--font-mono);
align-content: start;
gap: 3px;
padding-top: 1px;
font-size: 12px;
font-weight: 700;
line-height: 1.25;
display: grid;
}
.adminFinanceMailboxDatasetMessageDate time {
color: var(--fg);
}
.adminFinanceMailboxDatasetMessageContent {
gap: 7px;
min-width: 0;
display: grid;
}
.adminFinanceMailboxDatasetMessageHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceMailboxDatasetMessageIdentity {
gap: 2px;
min-width: 0;
display: grid;
}
.adminFinanceMailboxDatasetMessageIdentity strong, .adminFinanceMailboxDatasetAttachmentMain strong {
overflow-wrap: anywhere;
}
.adminFinanceMailboxDatasetMessageIdentity strong {
color: var(--fg);
font-size: 13px;
line-height: 1.25;
}
.adminFinanceMailboxDatasetMessageIdentity span {
color: var(--muted);
overflow-wrap: anywhere;
font-size: 12px;
font-weight: 650;
line-height: 1.25;
}
.adminFinanceMailboxDatasetSubject {
color: var(--fg);
font-family: var(--font-sans);
overflow-wrap: anywhere;
margin: 0;
font-size: 14px;
font-weight: 850;
line-height: 1.25;
}
.adminFinanceMailboxDatasetExcerpt {
-webkit-line-clamp: 2;
border-left: 3px solid color-mix(in srgb, var(--focus), transparent 58%);
background: color-mix(in srgb, var(--focus), white 98%);
color: color-mix(in srgb, var(--fg), var(--muted) 28%);
overflow-wrap: anywhere;
white-space: pre-wrap;
-webkit-box-orient: vertical;
margin: 0;
padding: 7px 9px;
font-size: 13px;
line-height: 1.4;
display: -webkit-box;
overflow: hidden;
}
.adminFinanceMailboxDatasetAttachmentList {
gap: 6px;
display: grid;
}
.adminFinanceMailboxDatasetAttachment {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, var(--bg-2), white 42%);
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 40px;
padding: 6px 8px;
}
.adminFinanceMailboxDatasetAttachment:has(input:checked) {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminFinanceMailboxDatasetAttachmentMain {
gap: 2px;
min-width: 0;
display: grid;
}
@media (max-width: 1120px) {
.adminFinanceMailboxDatasetControlGrid, .adminFinanceMailboxDatasetGrid, .adminFinanceMailboxDatasetStats, .adminFinanceMailboxDatasetToggleGrid, .adminFinanceMailboxDatasetWorkflow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminFinanceMailboxDatasetPlanCard {
position: static;
}
}
@media (max-width: 720px) {
.adminFinanceMailboxDatasetControlGrid, .adminFinanceMailboxDatasetPickerRow, .adminFinanceMailboxDatasetFilterGrid, .adminFinanceMailboxDatasetGrid, .adminFinanceMailboxDatasetStats, .adminFinanceMailboxDatasetToggleGrid, .adminFinanceMailboxDatasetWorkflow, .adminFinanceMailboxDatasetMessageHead, .adminFinanceMailboxDatasetMessage, .adminFinanceMailboxDatasetBrowserTools {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceMailboxDatasetMessageList {
max-height: none;
overflow: visible;
}
.adminFinanceMailboxDatasetMessageHead {
display: grid;
}
.adminFinanceMailboxDatasetBrowserTools {
justify-content: stretch;
display: grid;
}
.adminFinanceMailboxDatasetPager .btn {
flex: 120px;
}
.adminFinanceMailboxDatasetAttachment {
grid-template-columns: auto minmax(0, 1fr);
}
.adminFinanceMailboxDatasetAttachmentPills {
grid-column: 2;
justify-content: flex-start;
}
}
.adminFinanceMailboxDatasetPage {
gap: 15px;
width: 100%;
max-width: none;
margin-right: auto;
}
.adminFinanceMailboxDatasetBackButton, .adminFinanceMailboxDatasetIconButton, .adminFinanceMailboxDatasetReplayButton {
justify-content: center;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminFinanceMailboxDatasetBackButton {
min-height: 42px;
padding-inline: 14px;
}
.adminFinanceMailboxDatasetPage .adminHeaderBody {
flex-wrap: nowrap;
align-items: flex-start;
}
.adminFinanceMailboxDatasetPage .adminHeaderTitleWrap {
flex: 1 1 0;
max-width: calc(100% - 250px);
}
.adminFinanceMailboxDatasetPage .adminHeaderBody .adminFinanceMailboxDatasetBackButton {
flex: none;
margin-left: auto;
}
.adminFinanceMailboxDatasetShell {
gap: 14px;
min-width: 0;
display: grid;
}
.adminFinanceMailboxDatasetWorkflow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 4px);
background: #fff;
grid-template-columns: repeat(5, minmax(150px, 1fr));
gap: 0;
min-width: 0;
padding: 14px 16px;
display: grid;
overflow: hidden;
}
.adminFinanceMailboxDatasetWorkflow > li {
min-width: 0;
min-height: auto;
color: color-mix(in srgb, var(--muted), var(--fg) 20%);
background: none;
border: 0;
border-radius: 0;
align-items: center;
gap: 10px;
padding: 0 18px 0 2px;
display: flex;
position: relative;
}
.adminFinanceMailboxDatasetWorkflow > li:not(:last-child):after {
content: "";
background: color-mix(in srgb, var(--stroke), white 12%);
z-index: 0;
height: 2px;
position: absolute;
top: 50%;
left: 42px;
right: 18px;
transform: translateY(-50%);
}
.adminFinanceMailboxDatasetWorkflow li.isActive:after, .adminFinanceMailboxDatasetWorkflow li.isComplete:after {
background: var(--focus);
}
.adminFinanceMailboxDatasetWorkflow strong {
z-index: 1;
background: color-mix(in srgb, var(--stroke), white 34%);
width: 31px;
height: 31px;
color: color-mix(in srgb, var(--muted), var(--fg) 22%);
flex: none;
font-size: 12px;
font-weight: 780;
position: relative;
}
.adminFinanceMailboxDatasetWorkflow .isActive strong {
background: var(--focus);
color: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), white 82%);
}
.adminFinanceMailboxDatasetWorkflow .adminFinanceMailboxDatasetWorkflowText {
z-index: 1;
min-width: 0;
min-height: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
background: #fff;
border: 0;
border-radius: 0;
gap: 2px;
padding-block: 0;
padding-inline-end: 6px;
display: grid;
position: relative;
}
.adminFinanceMailboxDatasetWorkflowText > span {
min-width: 0;
min-height: 0;
color: color-mix(in srgb, var(--fg), black 2%);
background: none;
border: 0;
border-radius: 0;
gap: 0;
padding: 0;
font-size: 14px;
font-weight: 800;
line-height: 1.15;
display: block;
}
.adminFinanceMailboxDatasetWorkflow .adminFinanceMailboxDatasetWorkflowText > span:after {
content: none;
display: none;
}
.adminFinanceMailboxDatasetWorkflowText small {
color: var(--muted);
font-size: 12px;
font-weight: 650;
line-height: 1.2;
}
.adminFinanceMailboxDatasetWorkflow .isActive .adminFinanceMailboxDatasetWorkflowText > span, .adminFinanceMailboxDatasetWorkflow .isActive .adminFinanceMailboxDatasetWorkflowText small {
color: var(--focus);
}
.adminFinanceMailboxDatasetControlGrid {
grid-template-columns: minmax(315px, .98fr) minmax(380px, 1.22fr) minmax(310px, .94fr);
align-items: start;
gap: 14px;
display: grid;
}
.adminFinanceMailboxDatasetControlCard, .adminFinanceMailboxDatasetSectionCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 7%);
border-radius: calc(var(--radius) + 3px);
min-width: 0;
box-shadow: none;
background: #fff;
gap: 14px;
display: grid;
}
.adminFinanceMailboxDatasetControlCard {
padding: 16px;
}
.adminFinanceMailboxDatasetSectionCard {
padding: 14px 16px 16px;
}
.adminFinanceMailboxDatasetCardHead, .adminFinanceMailboxDatasetSectionTitle, .adminFinanceMailboxDatasetSectionHeader, .adminFinanceMailboxDatasetHistoryRunHead {
align-items: center;
min-width: 0;
display: flex;
}
.adminFinanceMailboxDatasetCardHead, .adminFinanceMailboxDatasetSectionTitle {
gap: 10px;
}
.adminFinanceMailboxDatasetCardIcon {
width: 24px;
height: 24px;
color: color-mix(in srgb, var(--fg), var(--muted) 10%);
flex: none;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminFinanceMailboxDatasetSectionHeader {
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
}
.adminFinanceMailboxDatasetSectionTitle {
flex-wrap: wrap;
}
.adminFinanceMailboxDatasetPickerRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 10px;
display: grid;
}
.adminFinanceMailboxDatasetPicker {
min-width: 0;
}
.adminFinanceMailboxDatasetStats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminFinanceMailboxDatasetStats > div, .adminFinanceMailboxDatasetSelectionBox, .adminFinanceMailboxDatasetPlanRows > div {
background: color-mix(in srgb, #fff, var(--bg-2) 24%);
border-radius: 8px;
align-content: center;
min-height: 60px;
padding: 10px 12px;
}
.adminFinanceMailboxDatasetStats span {
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
letter-spacing: .045em;
text-transform: uppercase;
font-size: 11px;
font-weight: 760;
line-height: 1.15;
}
.adminFinanceMailboxDatasetStats strong {
color: color-mix(in srgb, var(--fg), black 3%);
font-family: var(--font-sans);
font-size: 20px;
font-weight: 860;
line-height: 1.05;
}
.adminFinanceMailboxDatasetMeta {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 9%);
background: #fff;
border-radius: 8px;
gap: 0;
display: grid;
overflow: hidden;
}
.adminFinanceMailboxDatasetMeta span {
min-height: 34px;
color: color-mix(in srgb, var(--fg), var(--muted) 18%);
font-family: var(--font-mono);
overflow-wrap: anywhere;
background: none;
border: 0;
border-radius: 0;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 7px 10px;
font-size: 12px;
line-height: 1.25;
display: grid;
}
.adminFinanceMailboxDatasetMeta span + span {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 13%);
}
.adminFinanceMailboxDatasetMeta svg {
color: var(--muted);
}
.adminFinanceMailboxDatasetMiniStats span {
min-height: 27px;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
background: #fff;
padding: 4px 10px;
font-weight: 690;
}
.adminFinanceMailboxDatasetFilterGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.adminFinanceMailboxDatasetToggleGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.adminFinanceMailboxDatasetToggleGrid label {
min-height: 44px;
color: color-mix(in srgb, var(--fg), var(--muted) 10%);
background: #fff;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
font-weight: 680;
line-height: 1.2;
}
.adminFinanceMailboxDatasetToggleGrid label:has(input:checked) {
border-color: color-mix(in srgb, var(--focus), transparent 46%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminFinanceMailboxDatasetToggleGrid input[type="checkbox"], .adminFinanceMailboxDatasetAttachment input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--focus);
margin: 0;
}
.adminFinanceMailboxDatasetPlanActions {
gap: 8px;
display: grid;
}
.adminFinanceMailboxDatasetPlanActions .btn, .adminFinanceMailboxDatasetPlanButton, .adminFinanceMailboxDatasetReplayButton {
width: 100%;
}
.adminFinanceMailboxDatasetBlueButton {
border-color: var(--focus);
background: var(--focus);
color: #fff;
box-shadow: none;
}
.adminFinanceMailboxDatasetBlueButton:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), black 14%);
background: color-mix(in srgb, var(--focus), black 8%);
}
.adminFinanceMailboxDatasetReplayButton {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 94%);
min-height: 44px;
color: var(--focus);
font-weight: 760;
}
.adminFinanceMailboxDatasetReplayButton:disabled {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 58%);
color: color-mix(in srgb, var(--muted), white 8%);
}
.adminFinanceMailboxDatasetReplayBox, .adminFinanceMailboxDatasetCleanupBox {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
padding-top: 12px;
}
.adminFinanceMailboxDatasetHistoryRun {
border-radius: 10px;
gap: 12px;
padding: 0;
overflow: hidden;
}
.adminFinanceMailboxDatasetHistoryRunHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), white 68%);
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
}
.adminFinanceMailboxDatasetMessageMain {
gap: 3px;
min-width: 0;
display: grid;
}
.adminFinanceMailboxDatasetMessageMain strong {
color: color-mix(in srgb, var(--fg), black 3%);
overflow-wrap: anywhere;
font-size: 14px;
line-height: 1.25;
}
.adminFinanceMailboxDatasetPlanRows > div {
min-height: auto;
}
.adminFinanceMailboxDatasetBrowserCard .adminFinanceMailboxDatasetSectionHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
padding-bottom: 10px;
}
.adminFinanceMailboxDatasetPager .btn {
min-height: 34px;
padding: 0 12px;
}
.adminFinanceMailboxDatasetMessageList {
max-height: min(660px, calc(100vh - var(--admin-shell-header-height) - 190px));
border-radius: 10px;
}
.adminFinanceMailboxDatasetMessage {
grid-template-columns: 90px minmax(0, 1fr);
gap: 14px;
padding: 12px 14px;
}
.adminFinanceMailboxDatasetMessageContent {
gap: 8px;
}
.adminFinanceMailboxDatasetMessageMeta {
color: var(--muted);
justify-content: flex-end;
column-gap: 10px;
font-size: 12px;
}
.adminFinanceMailboxDatasetMessageKey {
font-family: var(--font-mono);
overflow-wrap: anywhere;
}
.adminFinanceMailboxDatasetAttachmentPills .pill {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
min-height: 28px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
background: #fff;
font-size: 12px;
font-weight: 670;
}
.adminFinanceMailboxDatasetAttachmentPills .pillStatusApproved {
border-color: color-mix(in srgb, var(--ok), transparent 40%);
background: color-mix(in srgb, var(--ok), white 93%);
color: color-mix(in srgb, var(--ok), black 18%);
}
.adminFinanceMailboxDatasetAttachmentPills .pillStatusRejected {
border-color: color-mix(in srgb, var(--danger), transparent 42%);
background: color-mix(in srgb, var(--danger), white 94%);
color: color-mix(in srgb, var(--danger), black 15%);
}
.adminFinanceMailboxDatasetAttachmentPills .pillStatusPending {
border-color: color-mix(in srgb, var(--warn), transparent 42%);
background: color-mix(in srgb, var(--warn), white 94%);
color: color-mix(in srgb, var(--warn), black 26%);
}
.adminFinanceMailboxDatasetAttachmentList {
gap: 7px;
}
.adminFinanceMailboxDatasetAttachment {
background: color-mix(in srgb, var(--bg-2), white 66%);
border-radius: 8px;
grid-template-columns: auto auto minmax(0, 1fr) auto;
min-height: 46px;
padding: 8px 10px;
}
.adminFinanceMailboxDatasetAttachmentIcon {
color: color-mix(in srgb, var(--danger), white 10%);
}
.adminFinanceMailboxDatasetHistoryFiles {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 0 14px 2px;
display: grid;
}
.adminFinanceMailboxDatasetHistoryFiles > div {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: 20px minmax(0, 1fr);
grid-template-areas: "icon name"
"icon link";
align-items: start;
gap: 2px 8px;
min-width: 0;
padding: 8px 12px;
display: grid;
}
.adminFinanceMailboxDatasetHistoryFiles > div:nth-child(4n+1) {
border-left: 0;
}
.adminFinanceMailboxDatasetHistoryFiles svg {
color: color-mix(in srgb, var(--danger), white 10%);
grid-area: icon;
}
.adminFinanceMailboxDatasetHistoryFiles strong {
overflow-wrap: anywhere;
min-width: 0;
color: var(--fg);
grid-area: name;
font-size: 13px;
line-height: 1.2;
}
.adminFinanceMailboxDatasetHistoryFiles a {
width: fit-content;
color: var(--focus);
grid-area: link;
font-size: 12px;
font-weight: 760;
line-height: 1.2;
text-decoration: none;
}
.adminFinanceMailboxDatasetHistoryFiles a:hover {
text-decoration: underline;
}
.adminFinanceMailboxDatasetHistoryRun .adminFinancePanelActions {
padding: 0 14px 14px;
}
@media (max-width: 1280px) {
.adminFinanceMailboxDatasetControlGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceMailboxDatasetHistoryFiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminFinanceMailboxDatasetHistoryFiles > div:nth-child(4n+1) {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminFinanceMailboxDatasetHistoryFiles > div:nth-child(odd) {
border-left: 0;
}
}
@media (max-width: 760px) {
.adminFinanceMailboxDatasetPage .adminHeaderBody {
flex-wrap: wrap;
align-items: stretch;
}
.adminFinanceMailboxDatasetPage .adminHeaderTitleWrap {
flex-basis: 100%;
max-width: none;
}
.adminFinanceMailboxDatasetPage .adminHeaderBody .adminFinanceMailboxDatasetBackButton {
width: fit-content;
max-width: 100%;
margin-left: 0;
}
.adminFinanceMailboxDatasetWorkflow {
grid-template-columns: repeat(5, minmax(0, 1fr));
padding: 12px 10px 0;
display: grid;
overflow: hidden;
}
.adminFinanceMailboxDatasetWorkflow > li {
text-align: center;
justify-items: center;
gap: 5px;
min-width: 0;
padding: 0 2px 12px;
display: grid;
}
.adminFinanceMailboxDatasetWorkflow > li:not(:last-child):after {
top: 14px;
left: calc(50% + 17px);
right: calc(17px - 50%);
}
.adminFinanceMailboxDatasetWorkflowText small {
display: none;
}
.adminFinanceMailboxDatasetWorkflowText > span {
overflow-wrap: anywhere;
font-size: 11px;
line-height: 1.1;
}
.adminFinanceMailboxDatasetWorkflow strong {
width: 28px;
height: 28px;
font-size: 11px;
}
.adminFinanceMailboxDatasetWorkflow .isActive {
border-bottom: 3px solid var(--focus);
}
.adminFinanceMailboxDatasetControlCard, .adminFinanceMailboxDatasetSectionCard {
border-radius: calc(var(--radius) + 2px);
padding: 15px;
}
.adminFinanceMailboxDatasetSectionHeader, .adminFinanceMailboxDatasetHistoryRunHead, .adminFinanceMailboxDatasetMessageHead, .adminFinanceMailboxDatasetBrowserTools {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
display: grid;
}
.adminFinanceMailboxDatasetBrowserTools {
justify-items: start;
}
.adminFinanceMailboxDatasetPager {
justify-content: flex-end;
width: 100%;
}
.adminFinanceMailboxDatasetPager .btn {
flex: 120px;
}
.adminFinanceMailboxDatasetMessageList {
max-height: none;
overflow: visible;
}
.adminFinanceMailboxDatasetMessage {
grid-template-columns: 86px minmax(0, 1fr);
gap: 12px;
padding: 13px 0;
}
.adminFinanceMailboxDatasetMessageMeta {
justify-content: flex-start;
}
.adminFinanceMailboxDatasetExcerpt {
display: none;
}
.adminFinanceMailboxDatasetAttachment {
grid-template-columns: auto auto minmax(0, 1fr);
}
.adminFinanceMailboxDatasetAttachmentPills {
grid-column: 3;
justify-content: flex-start;
}
.adminFinanceMailboxDatasetHistoryFiles {
grid-template-columns: minmax(0, 1fr);
padding-inline: 10px;
}
.adminFinanceMailboxDatasetHistoryFiles > div, .adminFinanceMailboxDatasetHistoryFiles > div:nth-child(odd), .adminFinanceMailboxDatasetHistoryFiles > div:nth-child(4n+1) {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
}
@media (max-width: 430px) {
.adminFinanceMailboxDatasetControlCard, .adminFinanceMailboxDatasetSectionCard {
padding: 14px;
}
.adminFinanceMailboxDatasetPickerRow, .adminFinanceMailboxDatasetFilterGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceMailboxDatasetPicker select {
background: none;
border-color: #0000;
min-height: 34px;
padding-inline: 0;
font-size: 18px;
font-weight: 500;
}
.adminFinanceMailboxDatasetStats {
gap: 7px;
}
.adminFinanceMailboxDatasetStats > div {
padding: 9px 10px;
}
}
.adminDocumentProcessingHeaderActions {
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
display: flex;
}
@keyframes adminFinanceProcessingSpin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.adminFinanceRowActions {
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
gap: 6px;
display: flex;
}
.adminFinanceRowActions .btn {
white-space: nowrap;
}
.adminFinanceRowPrimaryAction {
min-width: 72px;
padding-inline: 12px;
}
.adminFinanceInboxPrimaryAction {
justify-content: center;
width: 60px;
min-width: 60px;
font-weight: 700;
padding-left: 0 !important;
padding-right: 0 !important;
}
.adminFinanceActionsCell {
text-align: right;
min-width: 124px;
}
.adminFinanceActionsCell:has(.adminFinanceRowActions .adminFinanceRowPrimaryAction:only-child) {
min-width: 92px;
}
.adminFinanceReviewPage, .adminFinanceReviewExperience {
gap: 16px;
min-width: 0;
display: grid;
}
.adminFinanceReviewHead {
gap: 10px;
display: grid;
position: static;
}
.adminFinanceReviewTitleRow {
align-items: center;
gap: 16px;
padding-inline: 0;
}
.adminFinanceReviewTitleActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 10px;
display: flex;
}
.adminFinanceReviewPageHead {
align-items: flex-start;
}
.adminFinanceReviewSummaryBar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminFinanceReviewSummaryCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 6%);
align-content: start;
gap: 4px;
min-width: 0;
min-height: 92px;
padding: 14px 16px;
transition: border-color .14s, background-color .14s, box-shadow .14s;
display: grid;
}
.adminFinanceReviewSummaryBody {
min-height: 0;
display: grid;
}
.adminFinanceReviewSummaryCard.isPrimary {
border-color: color-mix(in srgb, var(--focus), transparent 12%);
background: color-mix(in srgb, var(--focus), white 95%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 28%),
0 8px 18px #2848920d;
}
.adminFinanceReviewSummaryCard.isPrimary:hover {
border-color: color-mix(in srgb, var(--focus), transparent 4%);
background: color-mix(in srgb, var(--focus), white 93%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 18%),
0 10px 22px #28489214;
}
.adminFinanceReviewSummaryCard.isNeutralStrong {
border-color: color-mix(in srgb, var(--fg), transparent 18%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 22%);
background: #fff;
}
.adminFinanceReviewSummaryCard.isWarning {
border-color: color-mix(in srgb, var(--warning), transparent 42%);
background: color-mix(in srgb, var(--warning), white 94%);
}
.adminFinanceReviewSummaryCard.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 42%);
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminFinanceReviewSummaryCard.isSuccess {
border-color: color-mix(in srgb, var(--success), transparent 44%);
background: color-mix(in srgb, var(--success), white 94%);
}
.adminFinanceSupplierMeta, .adminFinanceReviewSummaryMeta {
gap: 2px;
display: grid;
}
.adminFinanceReviewSummaryMeta {
margin-top: 2px;
}
.adminFinanceSupplierMetaAddress {
color: color-mix(in srgb, var(--fg), var(--muted) 68%);
max-width: 42ch;
font-size: .9rem;
line-height: 1.28;
}
.adminFinanceSupplierMetaTaxId {
color: color-mix(in srgb, var(--fg), var(--muted) 42%);
letter-spacing: .01em;
font-size: .88rem;
line-height: 1.2;
}
.adminFinanceReviewSummaryIssueList {
gap: 4px;
margin-top: 0;
display: grid;
}
.adminFinanceReviewStateSummaryCard.isSingleIssue .adminFinanceReviewSummaryIssueList {
margin-top: 6px;
}
.adminFinanceReviewSummaryStateRow {
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceReviewSummaryIssueItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 1px);
text-align: left;
cursor: pointer;
width: 100%;
color: color-mix(in srgb, var(--fg), var(--muted) 38%);
background: #fff;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
padding: 7px 10px;
font-size: 14px;
line-height: 1.25;
transition: border-color .16s, background-color .16s, transform .16s;
display: grid;
}
.adminFinanceReviewStateSummaryCard.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 36%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 76%);
background: #fff;
}
.adminFinanceReviewStateSummaryCard.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 42%);
background: color-mix(in srgb, var(--warn), white 96%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn), transparent 78%);
}
.adminFinanceReviewStateSummaryCard.isSuccess {
border-color: color-mix(in srgb, var(--ok), transparent 40%);
background: color-mix(in srgb, var(--ok), white 95%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok), transparent 78%);
}
.adminFinanceReviewStateSummaryCard.isDanger .label {
color: color-mix(in srgb, var(--danger), var(--fg) 34%);
}
.adminFinanceReviewStateSummaryCard.isWarning .label {
color: color-mix(in srgb, var(--warn), var(--fg) 30%);
}
.adminFinanceReviewStateSummaryCard.isSuccess .label {
color: color-mix(in srgb, var(--ok), var(--fg) 30%);
}
.adminFinanceReviewSummaryIssueItem:hover {
transform: translateY(-1px);
}
.adminFinanceReviewSummaryIssueItem:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), white 8%);
outline-offset: 3px;
}
.adminFinanceReviewSummaryIssueMarker {
opacity: .95;
background: currentColor;
border-radius: 999px;
width: 7px;
height: 7px;
}
.adminFinanceReviewSummaryIssueText {
min-width: 0;
}
.adminFinanceReviewSummaryIssueContent {
gap: 2px;
min-width: 0;
display: grid;
}
.adminFinanceReviewSummaryIssueDescription {
color: color-mix(in srgb, var(--fg), var(--muted) 54%);
font-size: 12px;
font-weight: 400;
line-height: 1.3;
}
.adminFinanceReviewSummaryIssueChevron {
color: currentColor;
opacity: .72;
font-size: 18px;
line-height: 1;
}
.adminFinanceReviewSummaryIssueItem.isBlocker {
color: color-mix(in srgb, var(--danger), var(--fg) 16%);
border-color: color-mix(in srgb, var(--danger), transparent 62%);
font-weight: 500;
}
.adminFinanceReviewSummaryIssueItem.isWarning {
color: color-mix(in srgb, var(--warn), var(--fg) 0%);
border-color: color-mix(in srgb, var(--warn), transparent 48%);
font-weight: 500;
}
.adminFinanceReviewSummaryIssueItem.isInfo {
color: color-mix(in srgb, var(--focus), var(--fg) 18%);
border-color: color-mix(in srgb, var(--focus), transparent 58%);
}
.adminFinanceReviewSummaryIssueItem.isRich {
align-items: start;
padding-top: 10px;
padding-bottom: 10px;
}
.adminFinanceReviewSummaryIssueItem.isBlocker:hover {
border-color: color-mix(in srgb, var(--danger), transparent 40%);
}
.adminFinanceReviewSummaryIssueItem.isWarning:hover {
border-color: color-mix(in srgb, var(--warn), transparent 34%);
}
.adminFinanceReviewSummaryIssueItem.isInfo:hover {
border-color: color-mix(in srgb, var(--focus), transparent 40%);
}
.adminFinanceReviewSummaryIssueToggle {
width: fit-content;
color: var(--focus);
font: inherit;
cursor: pointer;
background: none;
border: 0;
padding: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.adminFinanceReviewSummaryIssueToggle.isCompact {
color: var(--focus);
margin-top: 2px;
font-size: 13px;
font-weight: 500;
}
.adminFinanceReviewSummaryIssueToggle:hover {
text-decoration: underline;
}
.adminFinanceReviewSummaryIssueToggle.isCompact:hover {
opacity: 1;
text-decoration: underline;
}
.adminFinanceReviewSummaryIssueToggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), white 8%);
outline-offset: 4px;
}
.adminFinanceReviewAmountBreakdown {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 0;
display: grid;
}
.adminFinanceReviewAmountBreakdownItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
gap: 3px;
min-width: 0;
padding-top: 8px;
display: grid;
}
.adminFinanceReviewAmountBreakdownItem strong {
font-size: 15px;
line-height: 1.25;
}
.adminFinanceReviewAmountBreakdownItem.isDanger strong, .adminFinanceReviewSummaryValueDanger {
color: color-mix(in srgb, var(--danger), var(--fg) 18%);
}
.adminFinanceCostControlSourceSummaryList {
gap: 10px;
margin-top: 6px;
display: grid;
}
.adminFinanceCostControlSourceSummaryItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
gap: 3px;
min-width: 0;
padding-top: 8px;
display: grid;
}
.adminFinanceCostControlSourceSummaryItem strong {
font-size: 15px;
line-height: 1.3;
}
.adminFinanceReviewSummaryActionLink {
color: var(--focus);
align-self: flex-start;
margin-top: 2px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.adminFinanceReviewSummaryActionLinkInline {
align-items: center;
gap: 6px;
display: inline-flex;
}
.adminFinanceReviewSummaryActionIcon {
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
display: inline-flex;
}
.adminFinanceReviewSummaryActionIcon svg {
stroke: currentColor;
stroke-width: 1.8px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
width: 14px;
height: 14px;
}
.adminFinanceReviewSummaryActionLink:hover {
color: color-mix(in srgb, var(--focus), black 12%);
text-decoration: underline;
}
.adminFinanceReviewSummaryActionLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 68%);
border-radius: 2px;
outline: none;
}
.adminFinanceReviewSummaryActionLinkButton {
font: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
.adminFinanceReviewDuplicateCompactSummary {
gap: 4px;
display: grid;
}
.adminFinanceReviewDuplicateCompactActions {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr));
align-items: stretch;
gap: 6px;
min-width: 0;
display: grid;
}
.adminFinanceReviewDuplicateCompactButton {
white-space: normal;
overflow-wrap: anywhere;
text-wrap: balance;
width: 100%;
min-width: 0;
min-height: 44px;
padding-inline: 8px;
font-size: .82rem;
line-height: 1.08;
}
.adminFinanceReviewDuplicateCompactReason {
font-size: .92rem;
line-height: 1.24;
}
.adminFinanceReviewDuplicateSummaryCard, .adminFinanceReviewTotalsSummaryCard {
grid-template-rows: auto 1fr;
}
.adminFinanceReviewDuplicateSummaryBody {
align-content: center;
gap: 8px;
}
.adminFinanceReviewDuplicateSummaryBody > strong {
line-height: 1.1;
}
.adminFinanceReviewSummaryNote {
margin-top: 8px;
line-height: 1.35;
display: block;
}
.adminFinanceReviewTotalsSummaryBody {
align-content: center;
gap: 12px;
}
.adminFinanceReviewHeadActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceReviewTitleButton {
white-space: nowrap;
min-height: 44px;
padding-inline: 16px;
}
.adminFinanceReviewPrimaryAction {
align-items: center;
display: flex;
}
.adminFinanceReviewPrimaryActionHint {
display: inline-flex;
position: relative;
}
.adminFinanceReviewPrimaryActionHint.hasHint {
cursor: help;
}
.adminFinanceReviewTitleUtilityButton {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, white, var(--bg) 12%);
color: color-mix(in srgb, var(--muted), var(--fg) 22%);
}
.adminFinanceReviewTitleUtilityButton:hover {
border-color: color-mix(in srgb, var(--focus), transparent 54%);
background: color-mix(in srgb, var(--focus), white 97%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminFinanceReviewTitleUtilityButton.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 38%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 14%);
}
.adminFinanceReviewAutosaveStatus {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, white, var(--bg) 8%);
min-width: 0;
min-height: 44px;
color: color-mix(in srgb, var(--muted), var(--fg) 24%);
align-items: center;
gap: 8px;
padding: 0 12px;
font-size: 13px;
line-height: 1.25;
display: inline-flex;
}
.adminFinanceReviewAutosaveStatusDot {
opacity: .9;
background: currentColor;
border-radius: 999px;
flex: none;
width: 8px;
height: 8px;
}
.adminFinanceReviewAutosaveStatus.isPending, .adminFinanceReviewAutosaveStatus.isProgress {
border-color: color-mix(in srgb, var(--focus), transparent 56%);
background: color-mix(in srgb, var(--focus), white 96%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminFinanceReviewAutosaveStatus.isSuccess {
border-color: color-mix(in srgb, var(--ok), transparent 50%);
background: color-mix(in srgb, var(--ok), white 95%);
color: color-mix(in srgb, var(--ok), black 10%);
}
.adminFinanceReviewAutosaveStatus.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 42%);
background: color-mix(in srgb, var(--warn), white 95%);
color: color-mix(in srgb, var(--warn), black 18%);
}
.adminFinanceReviewAutosaveStatus.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 44%);
background: color-mix(in srgb, var(--danger), white 96%);
color: color-mix(in srgb, var(--danger), black 16%);
}
.adminFinanceReviewAutosaveRetryButton {
white-space: nowrap;
min-height: 30px;
padding-inline: 10px;
}
.adminFinanceReviewTitleSaveButton {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
background: var(--focus);
color: #fff;
}
.adminFinanceReviewDecisionMenuTrigger.adminFinanceReviewTitleButton {
min-width: 0;
}
.adminFinanceReviewStructureRule {
align-items: start;
min-width: 0;
margin-bottom: -16px;
display: grid;
}
.adminFinanceReviewStructureRule.isEvidenceCollapsed {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceReviewStructureRule.isEvidenceOpen {
grid-template-columns: minmax(0, var(--admin-finance-evidence-width, 540px)) 14px minmax(0, 1fr);
}
.adminFinanceReviewStructureRuleSegment {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
min-width: 0;
}
.adminFinanceReviewStructureRuleSplitter {
width: 14px;
min-height: 18px;
position: relative;
}
.adminFinanceReviewStructureRuleSplitter:before {
content: "";
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
position: absolute;
inset: 0;
}
.adminFinanceReviewStructureRuleSplitter:after {
display: none;
}
.adminFinanceReviewDecisionMenu {
position: relative;
}
.adminFinanceReviewDecisionMenuTrigger {
min-width: 176px;
list-style: none;
}
.adminFinanceReviewDecisionMenuTrigger::-webkit-details-marker {
display: none;
}
.adminFinanceReviewDecisionMenuTrigger[aria-disabled="true"] {
cursor: not-allowed;
opacity: .58;
}
.adminFinanceReviewDecisionMenuPanel {
z-index: 8;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 12%);
gap: 6px;
min-width: 240px;
padding: 8px;
display: grid;
position: absolute;
top: calc(100% + 8px);
right: 0;
box-shadow: 0 12px 32px #1a160f14;
}
.adminFinanceReviewDecisionOption {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), white 24%);
width: 100%;
min-height: 42px;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
padding: 0 12px;
font-weight: 600;
transition: border-color .12s, background-color .12s, color .12s;
}
.adminFinanceReviewDecisionOption:hover {
border-color: color-mix(in srgb, var(--focus), transparent 56%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminFinanceReviewDecisionOption:disabled {
cursor: not-allowed;
opacity: .55;
}
.adminFinanceReviewDecisionHint {
margin: 2px 2px 0;
font-size: 13px;
line-height: 1.35;
}
.adminFinanceReviewWorkspace {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 16px;
min-width: 0;
display: grid;
position: relative;
}
.adminFinanceReviewWorkspace.isEvidenceCollapsed {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceReviewWorkspace.isEvidenceOpen {
grid-template-columns: minmax(0, var(--admin-finance-evidence-width, 540px)) 14px minmax(0, 1fr);
}
.adminFinanceReviewWorkspace.isEvidenceResizing {
cursor: col-resize;
}
.adminFinanceReviewEvidenceRail {
align-self: start;
min-width: 0;
display: grid;
position: sticky;
top: 184px;
}
.adminFinanceReviewWorkspaceCard {
min-width: 0;
}
.adminFinanceReviewWorkspaceCard.isEvidenceCollapsed {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
padding: 18px 18px 14px;
}
.adminFinanceReviewEvidenceBody {
scrollbar-width: none;
-ms-overflow-style: none;
flex-direction: column;
gap: 12px;
height: calc(100vh - 228px);
min-height: 0;
display: flex;
overflow: hidden;
}
.adminFinanceReviewEvidenceBody::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.adminFinanceReviewWorkspaceBody {
gap: 12px;
max-height: calc(100vh - 228px);
padding: 0;
overflow: auto;
}
.adminFinanceReviewWorkspaceBody.isEvidenceCollapsed {
gap: 16px;
}
.adminFinanceReviewRailHead {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.adminFinanceReviewEvidenceFilename {
overflow-wrap: anywhere;
min-width: 0;
font-size: 18px;
line-height: 1.3;
display: block;
}
.adminFinanceReviewWorkspaceSplitter {
cursor: col-resize;
touch-action: none;
justify-content: center;
align-items: stretch;
width: 14px;
min-height: calc(100vh - 228px);
display: flex;
position: sticky;
top: 184px;
}
button.adminFinanceReviewWorkspaceSplitter {
appearance: none;
color: inherit;
font: inherit;
background: none;
border: 0;
margin: 0;
padding: 0;
}
.adminFinanceReviewWorkspaceSplitter:before {
content: "";
background: color-mix(in srgb, var(--stroke), transparent 4%);
width: 1px;
}
.adminFinanceReviewWorkspaceSplitter:after {
content: "";
background: color-mix(in srgb, var(--stroke), transparent 4%);
width: 1px;
height: 16px;
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
}
.adminFinanceReviewWorkspaceSplitter:hover:before, .adminFinanceReviewWorkspace.isEvidenceResizing .adminFinanceReviewWorkspaceSplitter:before, .adminFinanceReviewWorkspaceSplitter:hover:after, .adminFinanceReviewWorkspace.isEvidenceResizing .adminFinanceReviewWorkspaceSplitter:after {
background: color-mix(in srgb, var(--focus), transparent 12%);
}
.adminFinanceReviewWorkspaceSplitter:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 18%);
outline-offset: 2px;
}
.adminFinanceReviewRailModes {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceReviewEvidenceRail.isCollapsed {
display: none;
}
.adminFinanceReviewEvidenceToggle {
width: 30px;
min-width: 30px;
height: 30px;
color: inherit;
cursor: pointer;
background: none;
border: 0;
border-radius: 9px;
justify-content: center;
align-items: center;
transition: background-color .12s, color .12s, transform .12s;
display: inline-flex;
}
.adminFinanceReviewEvidenceToggle:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 64%);
outline: none;
}
.adminFinanceReviewEvidenceEdgeToggle {
z-index: 2;
cursor: pointer;
background: none;
border: 0;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin: 0;
padding: 0;
display: inline-flex;
position: absolute;
top: 18px;
left: 0;
transform: translateX(-50%);
}
.adminFinanceReviewEvidenceEdgeToggle:focus-visible {
outline: none;
}
.adminFinanceReviewEvidenceEdgeToggle:focus-visible .adminFinanceReviewEvidenceEdgeToggleGlyphBox {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 64%);
}
.adminFinanceReviewEvidenceToggleGlyphBox, .adminFinanceReviewEvidenceEdgeToggleGlyphBox {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 20%);
border-radius: 9px;
flex: none;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
display: inline-flex;
}
.adminFinanceReviewEvidenceToggleGlyph, .adminFinanceReviewEvidenceEdgeToggleGlyph {
width: 15px;
height: 15px;
stroke: color-mix(in srgb, var(--fg), var(--muted) 24%);
stroke-width: 2.2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
display: block;
transform: translateX(-.5px);
}
.adminFinanceReviewEvidenceToggle:hover .adminFinanceReviewEvidenceToggleGlyph, .adminFinanceReviewEvidenceEdgeToggle:hover .adminFinanceReviewEvidenceEdgeToggleGlyph {
stroke: color-mix(in srgb, var(--fg), var(--focus) 22%);
}
body[data-admin-finance-evidence-resizing="1"] {
cursor: col-resize;
-webkit-user-select: none;
user-select: none;
}
body[data-admin-finance-pdf-panning="1"] {
cursor: grabbing;
-webkit-user-select: none;
user-select: none;
}
.adminFinanceReviewDocumentTabs {
gap: 10px;
padding-bottom: 2px;
display: flex;
overflow: auto;
}
.adminFinanceReviewDocumentTabsSubtle {
gap: 14px;
}
.adminFinanceReviewDocumentTab {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
font: inherit;
cursor: pointer;
background: none;
border: 0;
border-bottom: 1px solid #0000;
flex: none;
padding: 0 0 4px;
font-weight: 500;
transition: border-color .12s, color .12s;
}
.adminFinanceReviewDocumentTab:hover {
color: var(--text);
}
.adminFinanceReviewDocumentTab.isActive {
border-bottom-color: color-mix(in srgb, var(--focus), transparent 30%);
color: var(--text);
}
.adminFinanceRegistryBody {
gap: 14px;
}
.adminFinanceRegistryFilterBody, .adminFinanceFilterCardBody {
gap: 12px;
container: admin-filter-card / inline-size;
}
.adminListFilterCard .adminFiltersCardBody {
container: admin-filter-card / inline-size;
}
.adminFinanceRegistryFilterBody .field, .adminFinanceRegistryFilterBody label.field, .adminFinanceFilterCardBody .field, .adminFinanceFilterCardBody label.field, .adminFiltersCardBody .field, .adminFiltersCardBody label.field {
margin-top: 0;
}
.adminFinanceCostControlSiteField {
min-width: 0;
}
.adminFinanceFilterRow, .adminFilterSimpleRow {
align-items: end;
gap: 12px;
min-width: 0;
display: grid;
}
.adminFinanceFilterRow + .adminFinanceFilterRow, .adminFilterSimpleRow + .adminFilterSimpleRow {
margin-top: 10px;
}
.adminFinanceFilterRow > .field, .adminFinanceFilterRow > label.field, .adminFinanceFilterRow > .adminFinanceFilterActionField, .adminFinanceFilterRow > .adminFilterActionField, .adminFilterSimpleRow > .field, .adminFilterSimpleRow > label.field, .adminFilterSimpleRow > .adminFinanceFilterActionField, .adminFilterSimpleRow > .adminFilterActionField {
min-width: 0;
margin-top: 0;
}
.adminFinanceFilterRowSingleField, .adminFilterSimpleRowSingleField {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceFilterRowTwoFields, .adminFilterSimpleRowTwoFields {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.adminFinanceFilterRowDatesClear, .adminFilterSimpleRowDatesClear {
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 108px;
}
.adminFinanceFilterRowSiteClear, .adminFilterSimpleRowLookupClear {
grid-template-columns: minmax(0, 1fr) 108px;
}
.adminFinanceFilterRowStateDatesClear, .adminFilterSimpleRowStateDatesClear {
grid-template-columns: minmax(170px, .85fr) minmax(190px, 1fr) minmax(190px, 1fr) 108px;
}
.adminListFilterStack {
gap: 14px;
width: 100%;
min-width: 0;
max-width: 100%;
display: grid;
}
.adminListFilterCard {
z-index: 2;
width: 100%;
max-width: 100%;
box-shadow: none;
background: none;
border: 0;
border-radius: 0;
position: relative;
container: admin-filter-card / inline-size;
}
.adminListFilterCard:focus-within {
z-index: 120;
}
.adminListFilterCard:has(.adminListFilterMultiSelectTrigger[aria-expanded="true"]) {
z-index: 80;
}
.adminListFilterCard .adminFiltersCardBody {
padding: 0;
}
.adminListFilterShell {
gap: 12px;
min-width: 0;
display: grid;
}
.adminListFilterPinnedGrid {
grid-template-columns: minmax(260px, 1.2fr) minmax(188px, .55fr) minmax(205px, .7fr) minmax(250px, .85fr) max-content;
grid-template-areas: "search state family period add";
align-items: stretch;
gap: 12px;
min-width: 0;
display: grid;
}
.adminListFilterPinnedGrid > * {
min-width: 0;
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(320px, 1.18fr) minmax(220px, .58fr) minmax(320px, .94fr);
grid-template-areas: "search state period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount4:not(.isExpanded) {
grid-template-columns: minmax(320px, 1.25fr) minmax(188px, .6fr) minmax(205px, .72fr) minmax(320px, 1fr);
grid-template-areas: "search state family period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact:not(.isExpanded) {
grid-template-columns: minmax(260px, 1.2fr) minmax(210px, .62fr) minmax(280px, .85fr) max-content;
grid-template-areas: "search state period add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact.isExpanded {
grid-template-columns: minmax(280px, 1.2fr) minmax(190px, .6fr) minmax(300px, .9fr);
grid-template-areas: "search state period";
}
.adminListFilterPinnedGrid.isExpanded {
grid-template-columns: minmax(260px, 1.2fr) minmax(188px, .55fr) minmax(205px, .7fr) minmax(210px, .65fr) max-content;
grid-template-areas: "search state family period period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox {
grid-template-columns: minmax(280px, 1.24fr) minmax(188px, .55fr) minmax(280px, .85fr) max-content;
grid-template-areas: "search family period add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox.isExpanded {
grid-template-columns: minmax(280px, 1.24fr) minmax(188px, .55fr) minmax(280px, .85fr) minmax(210px, .62fr) max-content;
grid-template-areas: "search family period period period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocuments, .adminListFilterPinnedGrid.adminListFilterGridVariantDocuments:not(.isExpanded) {
grid-template-columns: minmax(250px, 1.08fr) minmax(138px, .5fr) minmax(150px, .54fr) minmax(142px, .52fr) minmax(178px, .68fr) minmax(152px, .56fr);
grid-template-areas: "search state visibility family period action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox, .adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox:not(.isExpanded) {
grid-template-columns: minmax(320px, 1.25fr) minmax(220px, .58fr) minmax(220px, .58fr) minmax(220px, .7fr);
grid-template-areas: "search state action family";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(360px, 1fr) max-content;
grid-template-areas: "search add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(320px, 1fr) minmax(320px, .82fr) max-content;
grid-template-areas: "search period add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory, .adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(320px, 1fr) minmax(220px, .42fr);
grid-template-areas: "search state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(300px, 1fr) minmax(210px, .45fr) minmax(220px, .45fr);
grid-template-areas: "search family state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantQueue, .adminListFilterPinnedGrid.adminListFilterGridVariantQueue.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(240px, 320px) max-content;
grid-template-areas: "state add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
grid-template-areas: none;
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance > * {
grid-area: auto !important;
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance .adminListFilterActionWrap {
justify-self: stretch;
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance .adminListFilterActionButton {
width: 100%;
}
.adminAuditExportFilter .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminAuditExportFilter .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: minmax(174px, .62fr) minmax(174px, .62fr) minmax(190px, .82fr) minmax(160px, .72fr) minmax(128px, .48fr) minmax(260px, 1fr);
}
.adminAuditExportDateField > .label {
max-width: 42px !important;
}
.adminAuditExportDateField .localizedDateInputTrigger {
font-family: var(--font-sans);
letter-spacing: 0;
padding-left: 68px !important;
}
.adminAuditExportActions {
grid-template-columns: minmax(100px, .62fr) minmax(163px, 1.38fr);
align-self: stretch;
gap: 8px;
min-width: 0;
display: grid;
}
.adminAuditExportActionButton {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
width: 100%;
min-width: 0;
height: 100%;
min-height: 44px;
color: var(--ink);
box-shadow: none;
background: #fff;
border-radius: 8px;
}
.adminAuditExportActionButton > span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
@media (max-width: 1600px) {
.adminAuditExportFilter .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminAuditExportFilter .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1040px) {
.adminAuditExportActions {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 680px) {
.adminAuditExportFilter .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminAuditExportFilter .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
}
}
.adminListFilterShell .field, .adminListFilterShell fieldset.field {
align-content: start;
gap: 0;
min-width: 0;
margin-top: 0;
position: relative;
}
.adminListFilterShell .field > .label, .adminListFilterShell fieldset.field > .label {
z-index: 2;
max-width: 78px;
color: color-mix(in srgb, var(--muted), transparent 7%);
letter-spacing: .055em;
pointer-events: none;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
font-size: .66rem;
font-weight: 800;
line-height: 1;
position: absolute;
top: 50%;
left: 14px;
overflow: hidden;
transform: translateY(-50%);
}
.adminListFilterShell .field > .input, .adminListFilterShell .field > .listboxRoot > .input, .adminListFilterShell .field > .listboxRoot > .listboxTrigger {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
min-height: 44px;
box-shadow: none;
background: #fff;
border-radius: 8px;
font-size: .88rem;
}
.adminListFilterShell .field > .input, .adminListFilterShell .field > .listboxRoot > .input {
padding-block: 9px;
}
.adminListFilterShell .field > .listboxRoot > .input {
padding-inline: 82px 12px;
}
.adminListFilterShell .field > .listboxRoot > .listboxTrigger {
align-items: center;
padding: 0 34px 0 78px;
}
.adminListFilterShell .field > .listboxRoot > .listboxTrigger .listboxOptionLabelWrap {
flex: auto;
min-width: 0;
}
.adminListFilterShell .field > .listboxRoot > .listboxTrigger .listboxOptionLabelWrap > span {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
display: block;
overflow: hidden;
}
.adminListFilterFieldFamily > .label {
max-width: 48px !important;
}
.adminListFilterFieldState > .label {
max-width: 38px !important;
}
.adminListFilterFieldSupplier > .label {
max-width: 70px !important;
}
.adminListFilterFieldSupplier > .listboxRoot > .input {
padding-left: 86px !important;
}
.adminListFilterFieldSite > .label {
max-width: 40px !important;
}
.adminListFilterFieldSite > .listboxRoot > .input {
padding-left: 58px !important;
}
.adminListFilterFieldUser > .label {
max-width: 54px !important;
}
.adminListFilterFieldUser > .listboxRoot > .input {
padding-left: 70px !important;
}
.adminListFilterFieldTarget > .label {
max-width: 74px !important;
}
.adminListFilterFieldTarget > .listboxRoot > .input {
padding-left: 90px !important;
}
.adminListFilterFieldRegister > .label, .adminListFilterFieldInvoice > .label {
max-width: 108px !important;
}
.adminListFilterFieldRegister > .listboxRoot > .input, .adminListFilterFieldInvoice > .listboxRoot > .input {
padding-left: 126px !important;
}
.adminListFilterRemovableField > .listboxRoot > .input, .adminListFilterRemovableField > .listboxRoot > .listboxTrigger {
padding-right: 42px !important;
}
.adminListFilterAsyncLookupRoot {
width: 100%;
}
.adminListFilterShell .field > .adminListFilterAsyncLookupRoot > .input {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
min-height: 44px;
box-shadow: none;
background: #fff;
border-radius: 8px;
padding-right: 54px;
font-size: .88rem;
}
.adminListFilterFieldSupplier > .adminListFilterAsyncLookupRoot > .input {
padding-left: 86px;
}
.adminListFilterFieldSite > .adminListFilterAsyncLookupRoot > .input {
padding-left: 58px;
}
.adminListFilterRemoveAddedButton {
z-index: 4;
width: 28px;
height: 28px;
color: color-mix(in srgb, var(--muted), transparent 14%);
cursor: pointer;
background: none;
border: 0;
border-radius: 7px;
justify-content: center;
align-items: center;
display: inline-flex;
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
}
.adminListFilterRemoveAddedButton:hover {
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 6%);
}
.adminListFilterRemoveAddedButton:focus-visible {
background: color-mix(in srgb, var(--focus), white 92%);
color: color-mix(in srgb, var(--focus), black 8%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
outline: none;
}
.adminListFilterFieldSearch .input {
padding-left: 42px;
}
.adminListFilterInputField > .label {
max-width: 92px !important;
}
.adminListFilterInputField > .input {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
width: 100%;
min-width: 0;
min-height: 44px;
box-shadow: none;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
padding-left: 112px;
font-size: .88rem;
}
.adminListFilterInputField > .input:focus {
border-color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
}
.adminAuditExportFilter .adminListFilterInputField {
align-self: start;
height: 44px;
min-height: 44px;
display: block;
}
.adminAuditExportFilter .adminListFilterInputField > .label {
z-index: 2;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1;
overflow: hidden;
max-width: 92px !important;
position: absolute !important;
top: 50% !important;
left: 14px !important;
transform: translateY(-50%) !important;
}
.adminAuditExportFilter .adminListFilterInputField > .input, .adminAuditExportFilter .adminListFilterInputField .localizedDateInputTrigger {
height: 44px;
padding-block: 0;
}
.adminAuditExportFilter .adminAuditExportDateField > .label {
max-width: 42px !important;
}
.adminListFilterFieldSearch, .adminFinanceCostControlLookupField {
grid-area: search;
}
.adminListFilterFieldState {
grid-area: state;
}
.adminListFilterFieldFamily {
grid-area: family;
}
.adminDocumentsListFilterFieldRequired {
grid-area: period;
}
.adminDocumentsListFilterFieldDirection {
grid-area: action;
}
.adminDocumentsListFilterFieldVisibility {
grid-area: visibility;
}
.adminDocumentsListFilterFieldRequired > .label, .adminDocumentsListFilterFieldDirection > .label, .adminDocumentsListFilterFieldVisibility > .label {
max-width: 92px !important;
}
.adminListFilterMultiSelectField {
position: relative;
}
.adminListFilterMultiSelectTrigger {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
width: 100%;
min-height: 44px;
color: var(--ink);
cursor: pointer;
text-align: left;
background: #fff;
border-radius: 8px;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 0 12px 0 14px;
font-size: .88rem;
line-height: 1;
display: grid;
position: relative;
}
.adminListFilterMultiSelectTrigger .label {
max-width: none;
position: static;
transform: none;
}
.adminListFilterMultiSelectValue {
min-width: 0;
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminListFilterRemovableField .adminListFilterMultiSelectTrigger {
padding-right: 42px;
}
.adminListFilterMultiSelectChevron {
justify-self: end;
font-size: 12px;
line-height: 1;
}
.adminListFilterMultiSelectField:focus-within {
z-index: 95;
}
.adminListFilterMultiSelectTrigger:hover {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
}
.adminListFilterMultiSelectTrigger[aria-expanded="true"], .adminListFilterMultiSelectTrigger:focus-visible {
border-color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
outline: none;
}
.adminListFilterMultiSelectPopover {
z-index: 96;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
border-radius: 12px;
grid-template-rows: auto minmax(0, 1fr) auto;
width: 294px;
max-height: min(420px, 100vh - 180px);
padding: 12px;
display: grid;
position: fixed;
box-shadow: 0 22px 52px #0f172a2e;
}
.adminListFilterMultiSelectTitle {
color: var(--ink);
margin-bottom: 8px;
font-size: .88rem;
font-weight: 750;
line-height: 1.2;
}
.adminListFilterMultiSelectOptions {
gap: 2px;
min-height: 0;
padding-block: 2px 8px;
display: grid;
overflow: auto;
}
.adminListFilterMultiSelectOption {
min-height: 44px;
color: color-mix(in srgb, var(--ink), transparent 12%);
cursor: pointer;
border-radius: 7px;
grid-template-columns: 18px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 6px 4px;
font-size: .88rem;
line-height: 1.2;
display: grid;
}
.adminListFilterMultiSelectOptionText {
min-width: 0;
color: color-mix(in srgb, var(--ink), transparent 7%);
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 650;
overflow: hidden;
}
.adminListFilterMultiSelectOptionCount {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
background: color-mix(in srgb, var(--bg-2), white 56%);
min-width: 24px;
min-height: 22px;
color: color-mix(in srgb, var(--muted), var(--ink) 18%);
font-family: var(--font-mono);
text-align: center;
border-radius: 999px;
padding: 2px 7px;
font-size: 12px;
font-weight: 750;
line-height: 1.35;
}
.adminListFilterMultiSelectOption:hover {
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminListFilterMultiSelectCheckbox {
width: 16px;
height: 16px;
accent-color: var(--focus);
cursor: pointer;
margin: 0;
}
.adminListFilterMultiSelectApply {
border: 1px solid color-mix(in srgb, var(--focus), transparent 18%);
background: var(--focus);
color: #fff;
cursor: pointer;
border-radius: 8px;
width: 100%;
min-height: 44px;
font-size: .88rem;
font-weight: 750;
}
.adminListFilterMultiSelectApply:hover {
background: color-mix(in srgb, var(--focus), #001f4f 10%);
}
.adminListFilterMultiSelectApply:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 72%);
outline: none;
}
.adminListFilterSearchIcon {
z-index: 2;
color: color-mix(in srgb, var(--muted), transparent 10%);
pointer-events: none;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
.adminListFilterFieldPeriod {
grid-area: period;
min-inline-size: 0;
container-type: inline-size;
}
.adminListFilterValidationError {
color: var(--danger);
margin: -6px 0 0;
font-size: .82rem;
line-height: 1.4;
}
.adminListFilterPeriodIcon {
z-index: 2;
color: color-mix(in srgb, var(--muted), transparent 8%);
pointer-events: none;
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
}
.adminListFilterFieldPeriod > .label {
max-width: 72px !important;
left: 42px !important;
}
.adminListFilterDateRange {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-width: 0;
display: grid;
}
.adminListFilterDateRangeCompact {
--admin-list-filter-period-offset: 104px;
max-width: 100%;
min-height: 44px;
padding: 0 0 0 var(--admin-list-filter-period-offset);
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
border-radius: 8px;
align-items: center;
gap: 0;
transition: border-color .16s, box-shadow .16s, background .16s;
display: flex;
position: relative;
overflow: visible;
container-type: inline-size;
}
.adminListFilterDateRangeCompact .adminListFilterDateRangeField {
z-index: 3;
cursor: pointer;
min-width: 0;
position: absolute;
top: 0;
bottom: 0;
}
.adminListFilterDateRangeCompact .adminListFilterDateRangeFieldFrom {
left: var(--admin-list-filter-period-offset);
width: calc((100% - var(--admin-list-filter-period-offset)) / 2);
}
.adminListFilterDateRangeCompact .adminListFilterDateRangeFieldTo {
width: calc((100% - var(--admin-list-filter-period-offset)) / 2);
right: 0;
}
.adminListFilterDateRangeValue {
width: 100%;
min-width: 0;
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-self: stretch;
align-items: center;
font-size: .88rem;
line-height: 1;
display: grid;
overflow: hidden;
}
.adminListFilterDateRangeEndpoint {
background: none;
border-radius: 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
min-width: 0;
min-height: 100%;
padding: 0 12px;
display: inline-flex;
}
.adminListFilterDateRangeEndpoint + .adminListFilterDateRangeEndpoint {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
}
.adminListFilterDateRangeEndpointLabel {
min-width: 0;
max-width: 74px;
color: color-mix(in srgb, var(--muted), var(--ink) 8%);
letter-spacing: .04em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
flex: 0 auto;
font-size: .68rem;
font-weight: 850;
line-height: 1;
overflow: hidden;
}
.adminListFilterDateRangeEndpointValue {
min-width: 0;
font-family: var(--font-mono);
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .82rem;
font-weight: 700;
line-height: 1;
overflow: hidden;
}
.adminListFilterDateRangeEndpoint.isEmpty .adminListFilterDateRangeEndpointValue {
color: color-mix(in srgb, var(--muted), white 3%);
font-weight: 600;
}
@container (max-width: 190px) {
.adminListFilterDateRangeEndpointLabel {
display: none;
}
.adminListFilterDateRangeEndpoint {
justify-content: center;
}
}
@container (max-width: 310px) {
.adminListFilterFieldPeriod > .label {
display: none;
}
.adminListFilterDateRangeCompact {
--admin-list-filter-period-offset: 44px;
}
}
.adminListFilterDateRangeCompact .input {
width: 100%;
height: 100%;
min-height: 44px;
box-shadow: none;
color: var(--ink);
cursor: pointer;
letter-spacing: 0;
opacity: 0;
background: none;
border: 0;
border-radius: 0;
padding: 0;
font-size: .88rem;
}
.adminListFilterDateRangeCompact .input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0;
width: auto;
height: auto;
position: absolute;
inset: 0;
}
.adminListFilterDateRangeCompact .input:focus {
box-shadow: none;
}
.adminListFilterDateRangeCompact:focus-within {
border-color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
}
:is(.adminListFilterDateRangeCompact:has(.adminListFilterDateRangeFieldFrom:focus-within) .adminListFilterDateRangeEndpoint:first-child, .adminListFilterDateRangeCompact:has(.adminListFilterDateRangeFieldFrom:hover) .adminListFilterDateRangeEndpoint:first-child, .adminListFilterDateRangeCompact:has(.adminListFilterDateRangeFieldTo:focus-within) .adminListFilterDateRangeEndpoint:last-child, .adminListFilterDateRangeCompact:has(.adminListFilterDateRangeFieldTo:hover) .adminListFilterDateRangeEndpoint:last-child) {
background: color-mix(in srgb, var(--focus), white 93%);
}
.adminListFilterDateRangeSeparator {
color: color-mix(in srgb, var(--muted), transparent 6%);
font-size: .95rem;
font-weight: 800;
line-height: 1;
}
.adminListFilterFieldPerPage {
grid-area: per-page;
}
.adminListFilterRowsField, .adminFilterFieldPerPage {
min-width: 0;
}
.adminListFilterRowsField {
grid-template-columns: auto minmax(72px, auto);
justify-content: end;
align-items: center;
gap: 9px;
min-width: 0;
min-height: 44px;
display: inline-grid;
position: relative;
}
.adminListFilterRowsLabel {
color: color-mix(in srgb, var(--muted), transparent 12%);
white-space: nowrap;
font-size: .82rem;
font-weight: 650;
line-height: 1.2;
}
.adminListFilterRowsField .listboxRoot {
min-width: 0;
position: relative;
}
.adminListFilterRowsField .listboxMenu {
z-index: 80;
width: max(100%, 96px);
min-width: 96px;
left: auto;
right: 0;
}
.adminListFilterRowsField .listboxTrigger {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
min-height: 44px;
box-shadow: none;
background: #fff;
border-radius: 8px;
padding-inline: 13px 9px;
font-size: .9rem;
}
.adminListFilterRowsField:focus-within {
z-index: 70;
}
.adminListFilterActionWrap {
grid-area: add;
place-self: stretch end;
min-width: 0;
}
.adminListFilterActionButton {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
min-width: 112px;
height: 100%;
min-height: 44px;
color: var(--ink);
white-space: nowrap;
box-shadow: none;
background: #fff;
border-radius: 8px;
justify-content: center;
align-items: center;
gap: 8px;
padding-inline: 14px;
display: inline-flex;
}
.adminListFilterActionButton:hover {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminFilterClearField {
min-width: 0;
}
.adminListFilterActiveFiltersContainer {
min-width: 0;
max-width: 100%;
}
.adminListFilterActiveFilters {
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
min-width: 0;
display: flex;
}
.adminListFilterActiveFilterChip {
background: color-mix(in srgb, var(--focus), white 91%);
min-width: 0;
max-width: 100%;
min-height: 44px;
color: color-mix(in srgb, var(--focus), black 24%);
font: inherit;
text-align: left;
cursor: pointer;
appearance: none;
border: 1px solid #0000;
border-radius: 7px;
align-items: center;
gap: 10px;
padding: 7px 8px 7px 11px;
font-size: .82rem;
font-weight: 600;
line-height: 1.15;
display: inline-flex;
}
.adminListFilterActiveFilterChip:hover {
background: color-mix(in srgb, var(--focus), white 86%);
}
.adminListFilterActiveFilterChip:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
outline: none;
}
.adminListFilterActiveFilterChipValue {
overflow-wrap: anywhere;
min-width: 0;
}
.adminListFilterActiveFilterChipRemove {
flex: 0 0 17px;
place-items: center;
width: 17px;
height: 17px;
margin-left: 2px;
display: inline-grid;
}
.adminListFilterAutoApplyHint {
color: var(--muted);
white-space: nowrap;
font-size: .82rem;
}
.adminListFilterClearButton {
min-width: 0;
min-height: 44px;
color: color-mix(in srgb, var(--focus), black 10%);
font: inherit;
cursor: pointer;
background: none;
border: 0;
justify-self: end;
padding: 0 4px;
font-size: .82rem;
font-weight: 600;
}
.adminListFilterMetaRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-width: 0;
padding-top: 2px;
display: grid;
}
.adminListFilterMetaRowCountOnly {
grid-template-columns: minmax(0, 1fr);
}
.adminOperationsListFilterActionRow {
justify-content: flex-end;
margin-top: -2px;
display: flex;
}
.adminListFilterResultCount {
box-sizing: border-box;
color: color-mix(in srgb, var(--muted), var(--fg) 6%);
padding-inline-start: 12px;
font-size: .85rem;
font-weight: 600;
line-height: 1.2;
}
.adminListFilterMetaRowsControl {
z-index: 40;
justify-content: flex-end;
min-width: 0;
display: flex;
position: relative;
}
.adminListFilterEmptyClear {
min-height: 44px;
}
.adminListFilterClearButton:hover {
color: color-mix(in srgb, var(--focus), black 24%);
text-underline-offset: 3px;
text-decoration: underline;
}
.adminListFilterClearButton:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 78%);
border-radius: 6px;
outline: none;
}
.adminFinanceFilterActionField, .adminFilterActionField {
justify-self: end;
width: 108px;
min-width: 0;
}
.adminFinanceCostControlActionField, .adminFilterActionField {
justify-self: end;
width: 108px;
}
.adminFinanceFilterActionField .btn, .adminFilterActionField .btn {
width: 100%;
}
@container admin-filter-card (max-width: 1080px) {
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(240px, 1fr) minmax(150px, .62fr) minmax(230px, .9fr);
grid-template-areas: "search state period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount4:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search state"
"family period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact:not(.isExpanded) {
grid-template-columns: minmax(220px, 1fr) minmax(210px, .62fr) minmax(230px, .82fr) max-content;
grid-template-areas: "search state period add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact.isExpanded {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search state"
"period period";
}
.adminListFilterPinnedGrid {
grid-template-columns: minmax(280px, 1fr) minmax(150px, .55fr) minmax(170px, .65fr);
grid-template-areas: "search state family"
"period period add";
}
.adminListFilterPinnedGrid.isExpanded {
grid-template-columns: minmax(280px, 1fr) minmax(150px, .55fr) minmax(170px, .65fr);
grid-template-areas: "search state family"
"period period period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox {
grid-template-columns: minmax(280px, 1fr) minmax(170px, .62fr) minmax(220px, .8fr);
grid-template-areas: "search family period"
"add . .";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox.isExpanded {
grid-template-columns: minmax(280px, 1fr) minmax(170px, .62fr) minmax(220px, .8fr);
grid-template-areas: "search family period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocuments, .adminListFilterPinnedGrid.adminListFilterGridVariantDocuments:not(.isExpanded) {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas: "search search search"
"state visibility family"
"period period action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox, .adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state family"
"action action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr) max-content;
grid-template-areas: "search add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"period add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory, .adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(240px, 1fr) minmax(180px, .58fr);
grid-template-areas: "search state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(240px, 1fr) minmax(180px, .58fr) minmax(180px, .58fr);
grid-template-areas: "search family state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantQueue, .adminListFilterPinnedGrid.adminListFilterGridVariantQueue.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(220px, 320px) max-content;
grid-template-areas: "state add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
grid-template-areas: none;
}
}
@container admin-filter-card (max-width: 680px) {
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount4:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state family"
"period period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact:not(.isExpanded), .adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact.isExpanded {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state period"
"add add";
}
.adminListFilterPinnedGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state family"
"period period"
"add add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup .adminListFilterActionWrap {
justify-self: stretch;
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup .adminListFilterActionButton {
width: 100%;
}
.adminListFilterPinnedGrid.isExpanded {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state family"
"period period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"family period"
"add add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox.isExpanded {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"family period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocuments, .adminListFilterPinnedGrid.adminListFilterGridVariantDocuments:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state visibility"
"family period"
"action action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox, .adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"state family"
"action action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount2:not(.isExpanded), .adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"period period"
"add add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-areas: "search search"
"add add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory, .adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "search search"
"family state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantQueue, .adminListFilterPinnedGrid.adminListFilterGridVariantQueue.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "state add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: none;
}
}
@container admin-filter-card (max-width: 430px) {
.adminFinanceFilterRowSingleField, .adminFinanceFilterRowTwoFields, .adminFinanceFilterRowDatesClear, .adminFinanceFilterRowSiteClear, .adminFinanceFilterRowStateDatesClear, .adminFilterSimpleRowSingleField, .adminFilterSimpleRowTwoFields, .adminFilterSimpleRowDatesClear, .adminFilterSimpleRowLookupClear, .adminFilterSimpleRowStateDatesClear {
grid-template-columns: minmax(0, 1fr);
}
.adminListFilterPinnedGrid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"family"
"period"
"add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistry.adminListFilterPinnedCount4:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"family"
"period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact:not(.isExpanded), .adminListFilterPinnedGrid.adminListFilterGridVariantRegistryCompact.isExpanded {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"period"
"add";
}
.adminListFilterPinnedGrid.isExpanded {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"family"
"period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"family"
"period"
"add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantInbox.isExpanded {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"family"
"period";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocuments, .adminListFilterPinnedGrid.adminListFilterGridVariantDocuments:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"visibility"
"family"
"period"
"action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox, .adminListFilterPinnedGrid.adminListFilterGridVariantDocumentsInbox:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state"
"family"
"action";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount2:not(.isExpanded), .adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"period"
"add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantLookup.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-areas: "search"
"add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory, .adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantDirectory.adminListFilterPinnedCount3:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "search"
"family"
"state";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantQueue, .adminListFilterPinnedGrid.adminListFilterGridVariantQueue.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "state"
"add";
}
.adminListFilterPinnedGrid.adminListFilterGridVariantGovernance, .adminListFilterPinnedGrid.adminListFilterGridVariantGovernance:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: none;
}
.adminListFilterActionWrap {
justify-self: stretch;
}
.adminListFilterActionButton {
width: 100%;
}
.adminListFilterMetaRow {
grid-template-columns: minmax(0, 1fr);
}
.adminListFilterDateRange {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.adminListFilterDateRangeCompact {
padding-left: 102px;
}
.adminListFilterDateRangeEndpointLabel {
display: none;
}
.adminListFilterFieldPerPage, .adminFilterClearField, .adminFilterFieldPerPage {
width: 100%;
max-width: none;
}
.adminFinanceFilterActionField, .adminFilterActionField {
justify-self: stretch;
width: 100%;
}
}
.adminFinanceInvoicesTable {
table-layout: fixed;
}
.adminFinanceRegistryBody {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 12px;
margin-top: 6px;
overflow: visible;
}
.adminFinanceCostControlDetailBody {
gap: 16px;
min-width: 0;
margin-top: 6px;
}
.adminFinanceRegistryBody:has( > .cmListEmptyState) {
background: none;
border: 0;
border-radius: 0;
}
.adminFinanceRegistryBody .adminListTableWrap {
border-radius: 12px;
}
.adminFinanceRegistryBody .adminListTable thead th {
background: #f8fafc;
padding-block: 13px;
font-size: .88rem;
line-height: 1.2;
}
.adminFinanceRegistryBody .adminListTable tbody td {
padding-block: 15px;
font-size: .86rem;
}
.adminFinanceInvoicesColUpdated {
width: 156px;
}
.adminFinanceInvoicesColInvoice {
width: 172px;
}
.adminFinanceInvoicesColSupplier {
width: 194px;
}
.adminFinanceInvoicesColInfo {
width: 204px;
}
.adminFinanceInvoicesColDates {
width: 190px;
}
.adminFinanceInvoicesColTotal {
width: 118px;
}
.adminFinanceInvoicesColActions {
width: 96px;
}
.adminFinanceInvoicesTable td {
vertical-align: top;
min-width: 0;
transition: background-color .14s;
overflow: visible;
}
.adminFinanceInvoicesTable th:last-child, .adminFinanceInvoicesTable td.adminFinanceRegistryActionsCell {
z-index: 2;
background: #fff;
position: sticky;
right: 0;
}
.adminFinanceInvoicesTable th:last-child {
z-index: 3;
background: #f8fafc;
}
.adminFinanceInvoicesTable tbody tr:hover, .adminFinanceInvoicesTable tbody tr:focus-within {
background: none;
}
.adminFinanceInvoicesTable tbody tr:hover > td, .adminFinanceInvoicesTable tbody tr:focus-within > td {
background-color: color-mix(in srgb, var(--focus), white 96%);
}
.adminFinanceInvoicesUpdatedAt {
flex-wrap: wrap;
gap: 0 .35em;
line-height: 1.25;
display: inline-flex;
}
.adminFinanceInvoicesUpdatedAtDate, .adminFinanceInvoicesUpdatedAtTime {
white-space: nowrap;
}
:is(.adminFinanceInvoicesTable td.adminFinanceRegistryActionsCell:has(.adminUsersMenu), .adminFinanceInvoicesTable td.adminFinanceRegistryActionsCell:has(.adminUsersMenuFloating)) {
z-index: 8;
}
.adminFinanceRegistryActionsCell {
text-align: right;
width: 96px;
min-width: 96px;
vertical-align: middle !important;
}
.adminFinanceRegistryActionsCell .adminFinanceRowActions {
width: 100%;
}
.adminFinanceRegistryViewAction {
justify-content: center;
width: 60px;
min-width: 60px;
font-weight: 700;
padding-left: 0 !important;
padding-right: 0 !important;
}
.adminFinanceRegistryActionMenuSpacer {
pointer-events: none;
width: 28px;
min-width: 28px;
height: 32px;
display: inline-flex;
}
.adminFinanceRegistryActionDialogCard {
width: min(640px, 100vw - 32px);
}
.adminFinanceRegistryActionSummary {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 30%);
gap: 4px;
padding: 10px 12px;
display: grid;
}
.adminFinanceManualDuplicateCandidates {
gap: 8px;
max-height: 280px;
padding: 2px;
display: grid;
overflow: auto;
}
.adminFinanceManualDuplicateCandidate {
border: 1px solid var(--stroke);
border-radius: var(--radius);
cursor: pointer;
grid-template-columns: auto minmax(0, 1fr);
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
display: grid;
}
.adminFinanceManualDuplicateCandidate:hover, .adminFinanceManualDuplicateCandidate.isSelected {
border-color: color-mix(in srgb, var(--focus), transparent 36%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminFinanceManualDuplicateCandidate input {
margin-top: 3px;
}
.adminFinanceManualDuplicateCandidateBody {
gap: 3px;
min-width: 0;
display: grid;
}
.adminFinanceRegistryInvoiceMeta {
flex-wrap: nowrap;
align-items: center;
gap: 6px;
min-width: 0;
display: flex;
}
.adminFinanceRegistryDuplicateMarker {
border: 1px solid color-mix(in srgb, var(--danger), white 18%);
background: color-mix(in srgb, white, var(--danger) 8%);
width: fit-content;
max-width: max-content;
min-height: 16px;
color: color-mix(in srgb, var(--danger), black 10%);
letter-spacing: .01em;
white-space: nowrap;
border-radius: 8px;
justify-content: center;
place-self: flex-start start;
align-items: center;
padding: 0 5px;
font-size: 9px;
font-weight: 700;
line-height: 1;
display: inline-flex;
}
.adminFinanceRegistryAllocation {
min-width: 0;
display: block;
}
.adminFinanceRegistryAllocationBody {
gap: 3px;
min-width: 0;
display: grid;
}
.adminFinanceRegistryAllocationHint {
max-width: 100%;
display: inline-block;
}
.adminFinanceRegistryAllocationHint strong {
-webkit-text-decoration: underline dotted color-mix(in srgb, var(--muted), var(--fg) 20%);
text-decoration: underline dotted color-mix(in srgb, var(--muted), var(--fg) 20%);
text-underline-offset: 2px;
}
.adminFinanceRegistryAllocationBody strong, .adminFinanceRegistryDatesCell strong, .adminFinanceRegistryTotalCell strong {
line-height: 1.25;
}
.adminFinanceRegistryInfoBlock {
flex-direction: column;
gap: 2px;
line-height: 1.2;
display: flex;
}
.adminFinanceRegistryInfoBlock span {
color: color-mix(in srgb, var(--fg), white 28%);
}
.adminFinanceRegistryAllocationBody .muted, .adminFinanceRegistryDatesCell .muted, .adminFinanceRegistryTotalCell .muted {
line-height: 1.25;
}
.adminFinanceRegistryTotalCell strong, .adminFinanceRegistryTotalCell .muted {
white-space: nowrap;
}
.adminFinanceInvoicesPager {
justify-content: center;
padding-top: 4px;
display: flex;
}
.adminFinanceReviewGrid {
grid-template-columns: minmax(340px, .8fr) minmax(460px, 1.2fr);
align-items: start;
gap: 16px;
display: grid;
}
.adminFinanceReviewGrid > .card, .adminFinanceReviewEvidenceBody, .adminFinanceReviewForm, .adminFinanceDocumentSection, .adminFinanceExtractionCard, .adminFinanceAllocationRow, .adminFinanceLinkedSupplierCard, .adminFinanceDocumentButton, .adminFinanceReviewSummaryItem, .adminFinanceEvidenceMetaItem {
gap: 14px;
min-width: 0;
}
.adminFinanceReviewWorkspaceBody {
scrollbar-width: none;
-ms-overflow-style: none;
gap: 10px;
min-width: 0;
display: grid;
}
.adminFinanceReviewWorkspaceBody::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.adminFinanceReviewTabs {
z-index: 2;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg), white 100%) 0%, color-mix(in srgb, var(--bg), white 99%) 86%, transparent 100%);
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 0 0 10px;
display: flex;
position: sticky;
top: 0;
}
.adminFinanceReviewTab {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg) 10%);
min-height: 40px;
color: color-mix(in srgb, var(--text), var(--muted) 16%);
font: inherit;
cursor: pointer;
justify-content: center;
align-items: center;
padding: 0 14px;
font-weight: 580;
transition: background-color .12s, border-color .12s, color .12s;
display: inline-flex;
}
.adminFinanceReviewTab:hover {
border-color: color-mix(in srgb, var(--focus), transparent 64%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminFinanceReviewTab.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 24%);
background: color-mix(in srgb, var(--focus), white 92%);
color: color-mix(in srgb, var(--focus), black 18%);
}
.adminFinanceReviewTabPanel {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
width: 100%;
min-width: 0;
max-width: 100%;
display: grid;
}
.adminFinanceDiagnosticsTabs {
z-index: auto;
background: none;
border-bottom: 0;
padding: 0;
position: static;
top: auto;
}
.adminFinanceDiagnosticsStagePanel[hidden] {
display: none;
}
.adminFinanceDiagnosticsPanel, .adminFinanceDiagnosticsStagePanel, .adminFinanceDiagnosticsPanel > .adminFinanceReviewSummaryGrid, .adminFinanceDiagnosticsStagePanel > .adminFinanceReviewSummaryGrid, .adminFinanceDiagnosticsStagePanel > .adminFinanceExtractionOverview, .adminFinanceDiagnosticsStagePanel > .adminFinanceDiagnosticsCardGrid {
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: 100%;
}
.adminFinanceReviewUtilityRow {
justify-content: flex-end;
margin: -2px 0 2px;
display: flex;
}
.adminFinanceReviewUtilityButton {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, white, var(--bg) 12%);
min-height: 36px;
color: color-mix(in srgb, var(--muted), var(--fg) 22%);
padding: 0 12px;
}
.adminFinanceReviewUtilityButton:hover {
border-color: color-mix(in srgb, var(--focus), transparent 54%);
background: color-mix(in srgb, var(--focus), white 97%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminFinanceReviewUtilityButton.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 38%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 14%);
}
.adminFinanceReviewSections, .adminSectionDisclosures {
gap: 14px;
display: grid;
}
.adminFinanceReviewSection, .adminSectionDisclosure {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: #fff;
gap: 12px;
padding: 12px 14px;
display: grid;
}
.adminFinanceSectionHint, .adminFinanceReviewFieldHint {
margin: 0;
}
.adminFinanceReviewSectionGrid, .adminSectionDisclosureGrid, .adminFinanceReviewSectionGrid.isTwoColumn, .adminSectionDisclosureGrid.isTwoColumn {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.adminFinanceReviewSummaryGrid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
display: grid;
}
.adminFinanceReviewSummaryItem, .adminFinanceEvidenceMetaItem {
align-content: start;
gap: 6px;
display: grid;
}
.adminFinanceEvidenceMetaGrid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 8px;
display: grid;
}
.adminFinanceFailureDetails {
gap: 12px;
min-width: 0;
display: grid;
}
.adminFinanceFailureDetailsFacts {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 8px;
display: grid;
}
.adminFinanceFailureDetailsBlocks {
gap: 8px;
display: grid;
}
.adminFinanceFailureDetailItem, .adminFinanceFailureDetailBlock {
gap: 6px;
min-width: 0;
display: grid;
}
.adminFinanceFailureDetailBlock {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fffffffa;
padding: 12px 14px;
}
.adminFinanceFailureDetailValue {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
font-weight: 600;
line-height: 1.5;
}
.adminFinanceEvidenceChipRow {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminFinanceEvidenceMetaLine {
margin: 0;
}
.adminFinanceDocumentSection {
gap: 10px;
display: grid;
}
.adminFinanceContextSection {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), white 18%);
padding: 12px;
}
.adminFinanceExtractionCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 24%);
gap: 12px;
padding: 12px 14px;
display: grid;
}
.adminFinanceDiagnosticsPanel {
gap: 16px;
min-width: 0;
display: grid;
}
.adminFinanceDiagnosticsPanel > .adminFinancePanelHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding-bottom: 4px;
}
.adminFinanceDiagnosticsPanel > .adminFinanceReviewSummaryGrid, .adminFinanceDiagnosticsStagePanel > .adminFinanceReviewSummaryGrid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
gap: 12px;
}
.adminFinanceDiagnosticsPanel > .adminFinanceReviewSummaryGrid .adminFinanceReviewSummaryItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: var(--bg-2);
min-height: 92px;
padding: 12px 14px;
}
.adminFinanceDiagnosticsPanel > .adminFinanceReviewSummaryGrid .adminFinanceReviewSummaryItem strong, .adminFinanceDiagnosticsPanel > .adminFinanceReviewSummaryGrid .adminFinanceReviewSummaryItem .pill {
font-size: 16px;
line-height: 1.2;
}
.adminFinanceExtractionCard.isCompleted {
border-color: color-mix(in srgb, var(--ok), transparent 62%);
}
.adminFinanceExtractionCard.isFailed {
border-color: color-mix(in srgb, var(--danger), transparent 58%);
background: color-mix(in srgb, var(--danger), white 96%);
}
.adminFinanceExtractionHead {
align-items: flex-start;
}
.adminFinanceExtractionOverview {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
border-left: 4px solid color-mix(in srgb, var(--focus), transparent 22%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 96%);
gap: 6px;
padding: 14px 16px;
display: grid;
}
.adminFinanceExtractionOverview.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 56%);
border-left-color: color-mix(in srgb, var(--warn), transparent 14%);
background: color-mix(in srgb, var(--warn), white 96%);
}
.adminFinanceExtractionWarnings, .adminFinanceExtractionChecks, .adminFinanceExtractionHintList, .adminFinanceExtractionLineItems, .adminFinanceCorrectionList {
gap: 8px;
display: grid;
}
.adminFinanceExtractionWarning, .adminFinanceExtractionCheck, .adminFinanceExtractionHintCard, .adminFinanceExtractionLineItemCard, .adminFinanceExtractionFieldCard, .adminFinanceCorrectionCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fffffffa;
gap: 6px;
padding: 12px 14px;
display: grid;
}
.adminFinanceExtractionWarning.isInfo, .adminFinanceExtractionCheck.isOk, .adminFinanceExtractionCheck.isPending {
border-color: color-mix(in srgb, var(--focus), transparent 64%);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--focus), transparent 18%);
}
.adminFinanceExtractionWarning.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 56%);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warn), transparent 12%);
}
.adminFinanceExtractionWarning.isError, .adminFinanceExtractionCheck.isFail {
border-color: color-mix(in srgb, var(--danger), transparent 56%);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger), transparent 14%);
}
.adminFinanceContextSignalList, .adminFinanceContextLineMeta {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminFinanceContextReferenceList {
gap: 8px;
display: grid;
}
.adminFinanceContextReferenceCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 76%);
background: color-mix(in srgb, var(--focus), white 97%);
gap: 8px;
padding: 10px 12px;
display: grid;
}
.adminFinanceExtractionFieldGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminFinanceExtractionMeta {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceExtractionSnippet {
margin: 0;
line-height: 1.45;
}
.adminFinanceCorrectionHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 10px;
display: flex;
}
.adminFinanceCorrectionValues {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
display: grid;
}
.adminFinanceExtractionTechnical {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 6%);
gap: 12px;
padding: 16px;
display: grid;
}
.adminFinanceExtractionTechnicalSummary {
cursor: pointer;
justify-content: space-between;
align-items: baseline;
gap: 10px;
list-style: none;
display: flex;
}
.adminFinanceExtractionTechnicalSummary::-webkit-details-marker {
display: none;
}
.adminFinanceSubTitle {
font-size: 18px;
line-height: 1.18;
}
.adminFinanceDocumentList {
gap: 8px;
display: grid;
}
.adminFinanceDocumentButton {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg);
text-align: left;
justify-items: start;
gap: 2px;
padding: 10px 12px;
display: grid;
}
.adminFinanceDocumentButton.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 20%);
background: color-mix(in srgb, var(--focus), white 95%);
}
.adminFinanceReviewFormGrid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
align-items: start;
gap: 10px;
display: grid;
}
.adminFinanceReviewFieldShell {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), white 22%);
padding: 10px 12px;
}
.adminFinanceReviewFieldShell.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 50%);
background: color-mix(in srgb, var(--warn), white 97%);
}
.adminFinanceReviewFieldShell.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 97%);
}
.adminFinanceReviewFieldShell.isDanger .input, .adminFinanceReviewFieldShell.isDanger .textarea {
border-color: color-mix(in srgb, var(--danger), transparent 45%);
background: color-mix(in srgb, white, var(--bg) 10%);
}
.adminFinanceReviewFieldShell.isInferredMismatch {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 97%);
}
.adminFinanceReviewFieldShell.isInferredMismatch .input {
border-color: color-mix(in srgb, var(--danger), transparent 45%);
background: color-mix(in srgb, white, var(--bg) 10%);
}
.adminFinanceReviewDueDateFieldShell {
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
}
.adminFinanceReviewDueDateFieldMain {
align-content: start;
gap: 8px;
display: grid;
}
.adminFinanceReviewDueDateShortcutStack {
grid-template-rows: repeat(3, minmax(0, 1fr));
align-self: stretch;
gap: 4px;
display: grid;
}
.adminFinanceReviewDueDateShortcutButton {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, white, var(--bg) 6%);
min-block-size: 0;
inline-size: 34px;
min-inline-size: 34px;
color: inherit;
font: inherit;
cursor: pointer;
border-radius: 10px;
padding: 0;
font-size: 10px;
font-weight: 500;
line-height: 1;
transition: border-color .12s, background .12s, transform .12s;
}
.adminFinanceReviewDueDateShortcutButton:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminFinanceReviewDueDateShortcutButton:active:not(:disabled) {
transform: translateY(1px);
}
.adminFinanceReviewDueDateShortcutButton:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 28%);
outline-offset: 2px;
}
.adminFinanceReviewDueDateShortcutButton:disabled {
opacity: .48;
cursor: not-allowed;
}
.adminFinanceReviewFieldHeader {
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminFinanceReviewFieldMeta {
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
display: inline-flex;
}
.adminFinanceReviewFieldTag, .adminFinanceReviewReasonChip {
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.adminFinanceReviewFieldTagDot {
background: currentColor;
border-radius: 999px;
flex: none;
width: 6px;
height: 6px;
}
.adminFinanceReviewFieldTag--info {
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 20%);
}
.adminFinanceReviewFieldTag--warning, .adminFinanceReviewReasonChip.isWarning {
background: color-mix(in srgb, var(--warn), white 91%);
color: color-mix(in srgb, var(--warn), black 24%);
}
.adminFinanceReviewFieldTag--danger, .adminFinanceReviewReasonChip.isDanger, .adminFinanceReviewReasonChip.isConfidenceUnreliable {
background: color-mix(in srgb, var(--danger), white 90%);
color: color-mix(in srgb, var(--danger), black 20%);
}
.adminFinanceReviewReasonChip.isConfidenceVeryHigh {
background: color-mix(in srgb, var(--success), white 90%);
color: color-mix(in srgb, var(--success), black 26%);
}
.adminFinanceReviewReasonChip.isConfidenceHigh {
color: #0c5c56;
background: #e9f3f2;
}
.adminFinanceReviewReasonChip.isConfidenceMedium {
background: color-mix(in srgb, var(--warn), white 88%);
color: color-mix(in srgb, var(--warn), black 34%);
}
.adminFinanceReviewReasonChip.isConfidenceLow {
color: #ab390b;
background: #feeee3;
}
.adminFinanceReviewReasonChip {
background: color-mix(in srgb, var(--bg-2), white 45%);
color: color-mix(in srgb, var(--muted), black 12%);
}
.adminFinanceReviewReasonChip.isInfo {
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 20%);
}
.adminFinanceParsingConfidencePanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: var(--radius);
background: var(--bg);
gap: 16px;
width: 100%;
min-width: 0;
padding: 14px 16px;
display: grid;
}
.adminFinanceParsingConfidenceHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding-bottom: 12px;
display: grid;
}
.adminFinanceParsingConfidenceTitle {
gap: 4px;
min-width: 0;
display: grid;
}
.adminFinanceParsingConfidenceTitle span {
color: var(--muted);
font-size: 13px;
}
.adminFinanceParsingConfidenceStatus {
white-space: nowrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceParsingConfidenceStatus strong {
font-size: 18px;
}
.adminFinanceParsingConfidenceReasons {
min-width: 0;
}
.adminFinanceParsingConfidenceSection {
gap: 10px;
min-width: 0;
display: grid;
}
.adminFinanceParsingConfidenceSectionHead {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
display: grid;
}
.adminFinanceParsingConfidenceSectionHead p {
margin: 4px 0 0;
line-height: 1.4;
}
.adminFinanceParsingConfidenceCount {
border-color: color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), var(--focus) 3%);
color: var(--muted);
}
.adminFinanceDiagnosticsConfidenceList {
gap: 0;
display: grid;
}
.adminFinanceDiagnosticsConfidenceGroups {
gap: 14px;
margin-top: 12px;
display: grid;
}
.adminFinanceDiagnosticsConfidenceGroup {
gap: 6px;
display: grid;
}
.adminFinanceDiagnosticsConfidenceGroup h4 {
color: var(--muted);
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
font-size: 12px;
font-weight: 800;
}
.adminFinanceDiagnosticsConfidenceRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: minmax(0, 1fr) auto;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
display: grid;
}
.adminFinanceDiagnosticsConfidenceRow > .adminFinanceExtractionMeta {
white-space: nowrap;
justify-content: flex-end;
}
.adminFinanceDiagnosticsConfidenceRow:first-child {
border-top: 0;
padding-top: 0;
}
.adminFinanceDiagnosticsConfidenceMain {
gap: 4px;
min-width: 0;
display: grid;
}
.adminFinanceDiagnosticsConfidenceValue {
color: var(--muted);
overflow-wrap: anywhere;
font-size: 13px;
line-height: 1.35;
}
.adminFinanceDiagnosticsConfidenceDisclosure {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
margin-top: 14px;
padding-top: 12px;
}
.adminFinanceDiagnosticsConfidenceDisclosure summary {
cursor: pointer;
justify-content: space-between;
align-items: center;
font-weight: 800;
list-style: none;
display: flex;
}
.adminFinanceDiagnosticsConfidenceDisclosure summary::-webkit-details-marker {
display: none;
}
.adminFinanceDiagnosticsConfidenceDisclosure summary:after {
color: var(--muted);
content: "+";
margin-left: 10px;
font-weight: 900;
}
.adminFinanceDiagnosticsConfidenceDisclosure[open] summary:after {
content: "-";
}
.adminRolesWorkspaceV2 {
gap: 12px;
grid-template-columns: minmax(0, 1fr) !important;
}
.adminRolesRoleSelectorStrip {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
align-self: start;
gap: 9px;
padding: 10px 12px 12px;
display: grid;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader {
align-items: center;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader .adminFinancePanelTitle {
margin: 2px 0 0;
font-size: 17px;
line-height: 1.2;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
border-radius: var(--radius);
min-height: 56px;
box-shadow: none;
background: #fff;
align-content: center;
gap: 5px;
padding: 9px 12px;
position: relative;
transform: none;
}
.adminRolesRoleSelectorStrip .adminRolesListItem:hover {
background: color-mix(in srgb, var(--focus), white 98%);
transform: none;
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive:after {
content: "";
background: color-mix(in srgb, var(--focus), black 4%);
border-radius: 999px;
width: 8px;
height: 8px;
position: absolute;
top: 9px;
right: 9px;
}
.adminRolesRoleSelectorStrip .adminRolesListItemHeader {
align-items: flex-start;
gap: 8px;
}
.adminRolesRoleSelectorStrip .adminRolesListItemTitleWrap, .adminRolesRoleSelectorStrip .adminRolesListItemTitle, .adminRolesRoleSelectorStrip .adminRolesOverviewPills .pill {
min-width: 0;
}
.adminRolesRoleSelectorStrip .adminRolesListItemTitle, .adminRolesRoleSelectorStrip .mono {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminRolesRoleSelectorStrip .adminRolesOverviewPills {
flex-wrap: nowrap;
gap: 6px;
padding-top: 0;
}
.adminRolesRoleSelectorStrip .adminAccessPillWrap .pill, .adminRolesRoleSelectorStrip .adminRolesOverviewPills .pill {
min-height: 24px;
padding: 3px 8px;
font-size: 12px;
}
.adminRolesRoleSelectorStrip .adminRolesOverviewPills .pill {
text-overflow: ellipsis;
white-space: nowrap;
justify-content: flex-start;
max-width: 100%;
overflow: hidden;
}
.adminRolesSelectedOverview {
border-radius: calc(var(--radius) + 2px);
gap: 10px;
padding: 11px 12px;
}
.adminRolesSelectedHeader {
align-items: center;
}
.adminRolesProtectedNotice {
border-radius: var(--radius);
padding: 7px 9px;
}
.adminRolesSelectedOverview .adminRolesImpactStats {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.adminRolesImpactStats button {
border-radius: var(--radius);
min-height: 54px;
box-shadow: none;
background: #fff;
padding: 8px 10px;
}
.adminRolesImpactStats span {
font-size: 11px;
}
.adminRolesImpactWarnings {
border: 1px solid color-mix(in srgb, var(--danger), transparent 76%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--danger), white 97%);
align-items: center;
gap: 10px;
padding: 8px 10px;
display: flex;
}
.adminRolesImpactWarnings > strong {
color: color-mix(in srgb, var(--danger), black 18%);
flex: none;
font-size: 12px;
}
.adminRolesImpactWarnings ul {
flex-wrap: wrap;
flex: auto;
gap: 0;
display: flex;
}
.adminRolesImpactWarnings li {
border-left: 1px solid color-mix(in srgb, var(--danger), transparent 78%);
min-height: 24px;
padding: 2px 10px;
font-size: 12px;
line-height: 1.35;
}
.adminRolesToggle {
background: #fff;
min-height: 40px;
padding: 8px 10px;
}
.adminRolesPageSection {
border-radius: calc(var(--radius) + 2px);
gap: 12px;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%) !important;
background: #fff !important;
padding: 12px !important;
}
.adminRolesPageSection > .adminSectionDisclosureToggle {
align-items: flex-start;
}
.adminRolesPageSection > .adminSectionDisclosureBody {
gap: 12px;
padding: 0 !important;
}
.adminRolesPermissionsHead {
align-items: center;
}
.adminRolesPermissionsStats {
justify-content: flex-start;
}
.adminRolesPermissionsStats button {
background: #fff;
min-height: 32px;
}
.adminRolesPermissionsStats button:first-child {
border-color: color-mix(in srgb, var(--focus), transparent 58%);
background: color-mix(in srgb, var(--focus), white 96%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminRolesPermissionsStats button:nth-child(3) {
border-color: color-mix(in srgb, var(--warning), transparent 56%);
color: color-mix(in srgb, var(--warning), black 28%);
}
.adminRolesPermissionsStats button:nth-child(4) {
border-color: color-mix(in srgb, var(--danger), transparent 58%);
color: color-mix(in srgb, var(--danger), black 18%);
}
.adminRolesQuickFilters .adminRoleActionBtn {
min-height: 32px;
padding: 6px 10px;
}
.adminRolesMatrixToolbarControls {
gap: 8px;
}
.adminRolesModuleGrid {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
gap: 0;
overflow: hidden;
}
.adminRolesModuleSummary .adminSectionDisclosureToggleMain {
align-items: center;
}
.adminRolesModuleSummary .adminSectionDisclosureToggleText {
align-items: center;
gap: 10px;
display: flex;
}
.adminRolesModuleTitleRow {
align-items: center;
}
.adminRolesModuleSummary .adminRolesModuleEyebrow {
letter-spacing: 0;
text-transform: none;
color: var(--ink);
font-size: 13px;
}
.adminRolesModuleSummary .adminRolesModuleTitle {
font-family: var(--font-sans);
color: var(--muted);
font-size: 13px;
font-weight: 700;
}
.adminRolesModuleSummary .adminSectionDisclosureSummary {
text-align: right;
white-space: nowrap;
text-overflow: clip;
flex: none;
padding-left: 0;
font-size: 12px;
line-height: 1.25;
overflow: visible;
}
.adminRolesModuleDetails .adminRolesModuleCard {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding: 0;
}
.adminRolesDangerZone {
border-color: color-mix(in srgb, var(--danger), transparent 52%);
background: color-mix(in srgb, var(--danger), white 98%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px;
display: grid;
}
@media (max-width: 900px) {
.adminRolesSelectedOverview .adminRolesImpactStats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminRolesSelectedOverview .adminRolesMetaGrid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.adminRolesRoleSelectorStrip {
padding: 10px;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader {
align-items: stretch;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader .btn {
width: 100%;
}
.adminRolesRoleSelectorStrip .adminRolesList {
scrollbar-width: none;
scroll-snap-type: x proximity;
gap: 8px;
margin-inline: -10px;
padding: 0 10px 2px;
display: flex;
overflow-x: auto;
}
.adminRolesRoleSelectorStrip .adminRolesList::-webkit-scrollbar {
display: none;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
scroll-snap-align: start;
flex: 0 0 min(82vw, 300px);
}
.adminRolesSelectedHeader, .adminRolesImpactWarnings, .adminRolesDangerZone {
align-items: stretch;
}
.adminRolesImpactWarnings {
display: grid;
}
.adminRolesImpactWarnings ul {
gap: 5px;
display: grid;
}
.adminRolesImpactWarnings li {
border-left: 0;
padding: 0;
}
.adminRolesMatrixToolbarControls > input.input, .adminRolesMatrixToolbarControls > .adminRolesMatrixSelect, .adminRolesMatrixToolbarControls > .adminRoleActionBtn {
flex: 100%;
max-width: none;
}
.adminRolesModuleSummary, .adminRolesModuleSummary .adminSectionDisclosureSummary {
text-align: left;
white-space: normal;
align-items: flex-start;
}
.adminRolesDangerZone {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesToggle {
align-items: flex-start;
width: 100%;
}
.adminRolesToggle span {
white-space: normal;
min-width: 0;
line-height: 1.35;
}
.adminFinanceParsingConfidenceHeader, .adminFinanceParsingConfidenceSectionHead {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceParsingConfidenceStatus, .adminFinanceDiagnosticsConfidenceRow > .adminFinanceExtractionMeta {
justify-content: flex-start;
}
.adminFinanceDiagnosticsConfidenceRow {
grid-template-columns: minmax(0, 1fr);
}
}
.adminFinanceReviewFieldPrimary {
grid-column: span 2;
}
.adminFinanceReviewSheet {
gap: 18px;
}
.adminFinanceReviewSheet .muted {
color: color-mix(in srgb, var(--muted), var(--fg) 6%);
}
.adminFinanceReviewSheet > .adminFinancePanelHead .adminFinancePanelTitle {
font-size: 15px;
line-height: 1.2;
}
.adminFinanceReviewSheet > .adminFinancePanelHead .adminFinanceSectionHint {
max-width: 72ch;
}
.adminFinanceReviewSheet .adminFinanceReviewSections, .adminFinanceReviewSheet .adminSectionDisclosures {
gap: 22px;
}
.adminFinanceReviewSheet .adminFinanceReviewSection, .adminFinanceReviewSheet .adminSectionDisclosure {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
background: none;
padding: 18px 0 0;
}
.adminFinanceReviewSheet .adminFinanceReviewSection:first-child, .adminFinanceReviewSheet .adminSectionDisclosure:first-child {
border-top: 0;
padding-top: 0;
}
.adminFinanceReviewSectionToggle, .adminSectionDisclosureToggle {
width: 100%;
color: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 0;
display: flex;
}
.adminFinanceReviewSectionToggle:hover .adminFinanceReviewSectionToggleGlyph, .adminSectionDisclosureToggle:hover .adminSectionDisclosureToggleGlyph {
color: color-mix(in srgb, var(--focus), black 10%);
}
.adminFinanceReviewSectionToggle:focus-visible, .adminSectionDisclosureToggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 12%);
outline-offset: 6px;
border-radius: var(--radius);
}
.adminFinanceReviewSectionToggleMain, .adminSectionDisclosureToggleMain {
align-items: flex-start;
gap: 10px;
min-width: 0;
display: flex;
}
.adminFinanceReviewSectionToggleGlyph, .adminSectionDisclosureToggleGlyph {
width: 20px;
height: 20px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
flex: none;
justify-content: center;
align-items: center;
margin-top: 1px;
transition: color .12s;
display: inline-flex;
}
.adminFinanceReviewSectionChevron, .adminSectionDisclosureChevron {
fill: currentColor;
width: 16px;
height: 16px;
transition: transform .12s;
}
.adminFinanceReviewSection.isCollapsed .adminFinanceReviewSectionChevron, .adminSectionDisclosure.isCollapsed .adminSectionDisclosureChevron {
transform: rotate(-90deg);
}
.adminFinanceReviewSectionToggleText, .adminSectionDisclosureToggleText {
gap: 4px;
min-width: 0;
display: grid;
}
.adminFinanceReviewSection.isCollapsed .adminFinanceSectionHint, .adminSectionDisclosure.isCollapsed .adminFinanceSectionHint {
display: none;
}
.adminFinanceReviewSectionSummary, .adminSectionDisclosureSummary {
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 42%;
align-self: center;
min-width: 0;
padding-left: 12px;
font-size: 15px;
line-height: 1.4;
overflow: hidden;
}
.adminFinanceReviewSection.isOpen .adminFinanceReviewSectionSummary, .adminSectionDisclosure.isOpen .adminSectionDisclosureSummary {
display: none;
}
.adminFinanceReviewSectionBody, .adminSectionDisclosureBody {
gap: 12px;
padding: 10px 0 0 30px;
display: grid;
}
.adminFinanceReviewSectionBody[hidden], .adminSectionDisclosureBody[hidden] {
display: none !important;
}
.adminFinanceReviewSectionBodyNotes, .adminSectionDisclosureBodyNotes {
padding-top: 2px;
}
.adminFinanceReviewPaymentBody {
gap: 8px;
padding-top: 6px;
}
.adminFinanceCostControlSection {
gap: 12px;
display: grid;
}
.adminFinanceCostControlDetailStack {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
gap: 0;
margin-top: 12px;
padding-top: 14px;
display: grid;
}
.adminFinanceCostControlSection + .adminFinanceCostControlSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
margin-top: 10px;
padding-top: 18px;
}
.adminFinanceCostControlSection.isCollapsed {
gap: 0;
}
.adminFinanceCostControlSectionToggle {
width: 100%;
color: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 0;
display: flex;
}
.adminFinanceCostControlSection.isCollapsed .adminFinanceCostControlSectionToggle {
border-radius: calc(var(--radius) + 6px);
padding: 10px 8px;
transition: background-color .12s, box-shadow .12s;
}
.adminFinanceCostControlSection.isCollapsed .adminFinanceCostControlSectionToggle:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminFinanceCostControlSectionToggle:hover .adminFinanceCostControlSectionToggleGlyph {
color: color-mix(in srgb, var(--focus), black 10%);
}
.adminFinanceCostControlSectionToggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 12%);
outline-offset: 6px;
border-radius: var(--radius);
}
.adminFinanceCostControlSection.isCollapsed .adminFinanceCostControlSectionToggle:focus-visible {
outline-offset: 2px;
}
.adminFinanceCostControlSectionToggleMain {
align-items: flex-start;
gap: 10px;
min-width: 0;
display: flex;
}
.adminFinanceCostControlSectionToggleGlyph {
width: 20px;
height: 20px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
flex: none;
justify-content: center;
align-items: center;
margin-top: 1px;
transition: color .12s;
display: inline-flex;
}
.adminFinanceCostControlSectionToggleText {
gap: 4px;
min-width: 0;
display: grid;
}
.adminFinanceCostControlSectionSummary {
min-width: 0;
color: var(--fg);
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 42%;
align-self: center;
padding-left: 12px;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
overflow: hidden;
}
.adminFinanceCostControlSectionBody {
gap: 12px;
padding: 2px 0 0 30px;
display: grid;
}
.adminFinanceReviewSheet .adminFinanceReviewFieldShell, .adminFinanceReviewSheet .adminFinanceReviewReadOnlyCard {
border-color: color-mix(in srgb, var(--stroke), transparent 18%);
background: color-mix(in srgb, white, var(--bg) 9%);
}
.adminFinanceReviewSheet .adminFinanceReviewFieldShell.isInferredMismatch {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 97%);
}
.adminFinanceReviewSheet .adminFinanceReviewFieldShell .label, .adminFinanceReviewSheet .adminFinanceReviewReadOnlyCard .label, .adminFinanceReviewSheet .adminFinanceSectionHint, .adminFinanceReviewSheet .adminFinanceReviewFieldHint, .adminFinanceReviewSheet .adminFinanceLookupHint {
color: color-mix(in srgb, var(--muted), var(--fg) 10%);
}
.adminFinanceReviewNotesTextarea {
min-height: 160px;
}
@media (max-width: 720px) {
.adminFinanceReviewDueDateFieldShell {
grid-template-columns: 1fr;
}
.adminFinanceReviewDueDateShortcutStack {
grid-template-rows: none;
grid-template-columns: repeat(3, minmax(0, auto));
justify-content: start;
}
.adminFinanceReviewDueDateShortcutButton {
min-block-size: 32px;
}
}
.adminFinanceReviewReadOnlyCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
padding: 10px 12px;
}
.adminFinanceReviewReadOnlyCard.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 50%);
background: color-mix(in srgb, var(--warn), white 97%);
}
.adminFinanceReviewReadOnlyCard.isInfo {
border-color: color-mix(in srgb, var(--focus), transparent 52%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminFinanceReviewReadOnlyCard.isDanger {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: color-mix(in srgb, var(--danger), white 97%);
}
.adminFinanceReviewStaticValue {
overflow-wrap: anywhere;
min-width: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.28;
display: block;
}
.adminFinanceReviewStaticMeta {
margin: 0;
}
.adminFinanceReviewStaticNote {
min-height: 44px;
color: color-mix(in srgb, var(--fg), black 4%);
white-space: pre-wrap;
font-size: 15px;
line-height: 1.5;
}
.adminFinanceReviewCandidates {
gap: 8px;
display: grid;
}
.adminFinanceReviewCandidatesSummary {
cursor: pointer;
justify-content: space-between;
align-items: baseline;
gap: 10px;
list-style: none;
display: flex;
}
.adminFinanceReviewCandidatesSummary::-webkit-details-marker {
display: none;
}
.adminFinanceReviewCandidateList {
gap: 8px;
display: grid;
}
.adminFinanceReviewCandidateOption {
border: 1px solid color-mix(in srgb, var(--focus), transparent 58%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--focus), white 97%);
text-align: left;
justify-items: start;
gap: 4px;
padding: 10px 12px;
display: grid;
}
.adminFinanceReviewCandidateOption:hover {
border-color: color-mix(in srgb, var(--focus), transparent 30%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminFinanceReviewCandidateOption.isStatic {
cursor: default;
}
.adminFinanceReviewCandidateOption.isStatic:hover {
border-color: color-mix(in srgb, var(--focus), transparent 58%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminFinanceDiagnosticsCardGrid {
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 12px;
min-width: 0;
display: grid;
}
.adminFinanceDiagnosticsDecisionGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceDiagnosticsCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: var(--radius);
background: #fffffffa;
gap: 10px;
min-width: 0;
padding: 14px 16px;
display: grid;
box-shadow: 0 8px 24px #11151b0a;
}
.adminFinanceDiagnosticsCardHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceDiagnosticsCardHead strong {
overflow-wrap: anywhere;
font-size: 15px;
line-height: 1.3;
}
.adminFinanceDiagnosticsReasonList {
gap: 8px;
display: grid;
}
.adminFinanceDiagnosticsReasonListCompact {
margin-top: 4px;
}
.adminFinanceDiagnosticsReasonItem {
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceDiagnosticsReasonBullet {
background: color-mix(in srgb, var(--focus), white 24%);
border-radius: 999px;
flex: 0 0 8px;
width: 8px;
height: 8px;
margin-top: 7px;
}
.adminFinanceCompareStrip {
border: 1px solid color-mix(in srgb, var(--focus), transparent 68%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 97%);
gap: 14px;
padding: 16px;
display: grid;
}
.adminFinanceCompareIntro {
gap: 6px;
display: grid;
}
.adminFinanceCompareIntro strong {
max-width: 26ch;
}
.adminFinanceCompareIntro p {
max-width: 54ch;
margin: 0;
}
.adminFinanceCompareActions {
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceCompareActions:has( > :nth-child(4)):not(:has( > :nth-child(5))) {
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
justify-content: center;
place-items: stretch stretch;
gap: 10px 12px;
width: min(100%, 540px);
max-width: 540px;
margin-inline: auto;
display: grid;
}
.adminFinanceDiagnosticsStagePanel .adminFinanceCompareActions:has( > :nth-child(4)):not(:has( > :nth-child(5))) {
grid-template-columns: minmax(0, 1fr);
width: 100%;
max-width: 100%;
}
.adminFinanceCompareActions:has( > :nth-child(4)):not(:has( > :nth-child(5))) > .btn {
justify-content: center;
width: 100%;
}
.adminFinanceDiagnosticsStagePanel .adminFinanceParserToolActions:has( > :nth-child(4)):not(:has( > :nth-child(5))) {
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
width: 100%;
max-width: 100%;
margin-inline: 0;
display: flex;
}
.adminFinanceDiagnosticsStagePanel .adminFinanceParserToolActions:has( > :nth-child(4)):not(:has( > :nth-child(5))) > .adminFinanceCompareUtilityButton {
flex: 180px;
width: auto;
}
.adminFinanceDiagnosticsStagePanel .adminFinanceParserToolActions:has( > :nth-child(4)):not(:has( > :nth-child(5))) > .adminFinanceComparePrimaryButton {
flex: 100%;
}
.adminFinanceCompareUtilityButton {
min-height: 44px;
}
.adminFinanceComparePrimaryButton {
min-height: 46px;
}
.adminFinanceCompareCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 98%);
gap: 12px;
padding: 14px 16px;
display: grid;
}
.adminFinanceClassificationCompareGrid {
align-items: start;
}
.adminFinanceDiagnosticsDiffValue {
color: color-mix(in srgb, var(--focus), black 14%);
}
.adminFinanceCompareDiffList {
gap: 8px;
display: grid;
}
.adminFinanceCompareDiffRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg) 10%);
gap: 4px;
padding: 10px 12px;
display: grid;
}
.adminFinanceCompareDiffValues {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceCompareDiffArrow {
color: var(--muted);
}
.adminFinanceDiagnosticsPanel .adminFinanceCompactDetails {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
background: none;
border-radius: 0;
gap: 0;
padding: 18px 0 0;
}
.adminFinanceDiagnosticsPanel .adminFinanceCompactDetails:first-of-type {
border-top: 0;
padding-top: 0;
}
.adminFinanceDiagnosticsPanel .adminFinanceCompactDetailsSummary {
border: 0;
align-items: flex-start;
gap: 16px;
padding: 0;
}
.adminFinanceDiagnosticsDetailsSummary:hover .adminFinanceReviewSectionToggleGlyph {
color: color-mix(in srgb, var(--focus), black 10%);
}
.adminFinanceDiagnosticsDetailsSummary:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 12%);
outline-offset: 6px;
border-radius: var(--radius);
}
.adminFinanceDiagnosticsDetailsBody {
gap: 12px;
padding: 10px 0 0 30px;
display: grid;
}
.adminFinanceDiagnosticsPanel .adminFinanceCompactDetails[open] > .adminFinanceDiagnosticsDetailsSummary .adminFinanceReviewSectionSummary {
display: none;
}
.adminFinanceDiagnosticsPanel .adminFinanceCompactDetails > .adminFinanceDiagnosticsDetailsSummary .adminFinanceReviewSectionChevron {
transition: transform .12s;
}
.adminFinanceDiagnosticsPanel .adminFinanceCompactDetails[open] > .adminFinanceDiagnosticsDetailsSummary .adminFinanceReviewSectionChevron {
transform: rotate(90deg);
}
.adminFinanceInlineAlert {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg), white 22%);
gap: 4px;
padding: 10px 12px;
display: grid;
}
.adminFinanceInlineAlert.isError {
border-color: color-mix(in srgb, var(--danger), transparent 52%);
background: color-mix(in srgb, var(--danger), white 97%);
}
.adminFinanceInlineAlert.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 52%);
background: color-mix(in srgb, var(--warn), white 97%);
}
.adminFinanceInlineAlert.isInfo {
border-color: color-mix(in srgb, var(--focus), transparent 60%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminFinanceAllocationSummaryGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminFinanceAllocationSummaryCard {
min-height: 84px;
}
.adminFinanceAllocationSummaryPrimaryValue {
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
display: inline-flex;
}
.adminFinanceAllocationSummaryInlineSecondary {
color: color-mix(in srgb, var(--fg), var(--muted) 62%);
font-size: .72em;
font-weight: 600;
line-height: 1.2;
}
.adminFinanceAllocationSummaryMetaInline {
color: color-mix(in srgb, var(--fg), var(--muted) 62%);
align-items: baseline;
gap: 8px;
margin: 2px 0 0;
font-size: .94rem;
line-height: 1.25;
display: inline-flex;
}
.adminFinanceAllocationSummaryMetaInline strong {
color: inherit;
font-size: 1em;
font-weight: 600;
}
.adminFinanceAllocationSurface {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 8%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 28%);
padding: 14px 16px;
}
.adminFinanceFuelCompanionTableWrap {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: var(--radius);
background: #fff;
overflow: auto;
}
.adminFinanceFuelCompanionTable {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
min-width: 880px;
}
.adminFinanceFuelCompanionTable th, .adminFinanceFuelCompanionTable td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
text-align: left;
vertical-align: top;
padding: 10px 12px;
font-size: 13px;
}
.adminFinanceFuelCompanionTable th {
background: color-mix(in srgb, var(--bg-2), white 25%);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-muted);
font-size: 12px;
}
.adminFinanceFuelCompanionTable tbody tr:last-child td {
border-bottom: none;
}
.adminFinanceAllocationSeedRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 30%);
border-radius: var(--radius);
gap: 10px;
padding: 12px;
display: grid;
}
.adminFinanceAllocationSuggestionPill {
cursor: pointer;
}
.adminFinanceAllocationSeedDetails {
gap: 0;
padding: 0;
}
.adminFinanceAllocationSeedDetails > .adminFinanceCompactDetailsSummary {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
min-height: 0;
margin: 0;
padding: 10px 14px;
line-height: 1.2;
display: grid;
}
.adminFinanceAllocationSeedDetails[open] > .adminFinanceCompactDetailsSummary {
padding-bottom: 0;
}
.adminFinanceAllocationSeedDetails > .adminFinanceCompactDetailsSummary > span {
align-items: center;
min-height: 22px;
margin: 0;
padding: 0;
line-height: 1.2;
display: flex;
}
.adminFinanceAllocationSeedDetails > .adminFinanceDocumentSection {
padding: 8px 14px 12px;
}
.adminFinanceAllocationModeCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 34%);
border-radius: var(--radius);
gap: 12px;
padding: 12px;
display: grid;
}
.adminFinanceAllocationLineSeedGrid {
gap: 10px;
display: grid;
}
.adminFinanceParsedLinesSurface[data-finance-history-flag-active="true"] .adminFinanceParsedLinesShowAllAction, .adminFinanceParsedLinesSurface:not([data-finance-history-flag-active="true"]) [data-finance-preview-overflow="true"] {
display: none;
}
.adminFinanceSiteBulkTray {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 26%);
gap: 12px;
padding: 14px;
display: grid;
}
.adminFinanceSiteBulkTray.isPending {
border-color: color-mix(in srgb, var(--warn), transparent 52%);
background: color-mix(in srgb, var(--warn), white 97%);
}
.adminFinanceSiteBulkTray.isReady {
border-color: color-mix(in srgb, var(--focus), transparent 36%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminFinanceSiteBulkTrayHead {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminFinanceFuelBulkTrayActions {
align-items: flex-start;
gap: 10px;
}
.adminFinanceFuelBulkTrayActions > .btn, .adminFinanceFuelBulkTrayUtilities > .btn {
font-size: 13px;
}
.adminFinanceFuelBulkTrayUtilities {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminFinanceButtonUtility {
color: var(--text-muted);
background: color-mix(in srgb, white, var(--bg-2) 12%);
padding: 7px 11px;
font-size: 13px;
}
.adminFinanceButtonUtility:hover:not(:disabled) {
color: var(--text);
background: color-mix(in srgb, white, var(--bg-2) 22%);
}
.adminFinanceSiteBulkPresetSection {
gap: 8px;
display: grid;
}
.adminFinanceSiteBulkPresetGrid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
display: grid;
}
.adminFinanceSiteBulkPreset {
border: 1px solid color-mix(in srgb, var(--focus), transparent 70%);
border-radius: var(--radius);
text-align: left;
background: #fff;
justify-items: stretch;
gap: 8px;
padding: 12px;
display: grid;
}
.adminFinanceSiteBulkPreset:hover {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminFinanceSiteBulkPreset:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 18%);
outline-offset: 2px;
}
.adminFinanceSiteBulkPreset.isSelected {
border-color: color-mix(in srgb, var(--focus), transparent 18%);
background: color-mix(in srgb, var(--focus), white 96%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 58%);
}
.adminFinanceSiteBulkPresetHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceSiteBulkPresetEvidence {
gap: 6px;
display: grid;
}
.adminFinanceSiteBulkTrayGrid {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
align-items: end;
gap: 12px;
display: grid;
}
.adminFinanceGeneralExpenseBulkTrayGrid {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto;
}
.adminFinanceSiteBulkTrayField, .adminFinanceSiteBulkTrayEvidence, .adminFinanceSiteBulkTrayAction {
min-width: 0;
}
.adminFinanceSiteBulkTrayEvidence {
align-self: end;
gap: 6px;
display: grid;
}
.adminFinanceSiteBulkTrayAction {
align-items: flex-end;
display: flex;
}
.adminFinanceSiteBulkTrayAction > .btn {
width: 100%;
}
.adminFinanceAllocationLineProgress {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminFinanceAllocationLineSeedCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 46%);
border-radius: calc(var(--radius) + 1px);
background: #fff;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
display: flex;
}
.adminFinanceAllocationLineSeedCard.isSelected {
border-color: color-mix(in srgb, var(--focus), transparent 10%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminFinanceAllocationLineSeedCardAdded {
border-color: color-mix(in srgb, var(--ok), transparent 48%);
background: color-mix(in srgb, var(--ok), white 97%);
}
.adminFinanceAllocationLineSeedCard > .adminFinanceStack {
flex: auto;
min-width: 0;
}
.adminFinanceAllocationLineSelect {
color: var(--fg);
font-size: inherit;
font-weight: inherit;
align-items: center;
gap: 12px;
width: fit-content;
display: inline-flex;
}
.adminFinanceAllocationLineSelect input[type="checkbox"] {
flex: none;
margin: 0;
}
.adminFinanceAllocationLineSelect strong {
color: var(--fg);
}
.adminFinanceAllocationLineSeedCard > .btn {
align-self: center;
}
.adminFinanceFuelGroupCard {
align-items: stretch;
}
.adminFinanceFuelGroupCardBody {
gap: 12px;
}
.adminFinanceFuelGroupCardHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminFinanceFuelGroupIdentity {
min-width: 0;
display: block;
}
.adminFinanceFuelGroupHeading {
align-items: flex-start;
}
.adminFinanceFuelGroupMetrics {
gap: 10px;
}
.adminFinanceFuelGroupCardFooter {
justify-content: flex-start;
display: flex;
}
.adminFinanceFuelGroupToggle {
appearance: none;
color: var(--accent-strong);
font: inherit;
cursor: pointer;
background: none;
border: none;
padding: 0;
font-weight: 600;
}
.adminFinanceFuelGroupToggle:hover {
text-decoration: underline;
}
.adminFinanceFuelGroupRows {
gap: 10px;
padding-top: 2px;
display: grid;
}
.adminFinanceFuelGroupTableWrap {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, var(--bg-2), white 56%);
overflow-x: auto;
}
.adminFinanceFuelGroupTable {
border-collapse: collapse;
width: 100%;
min-width: 760px;
font-size: 12px;
line-height: 1.35;
}
.adminFinanceFuelGroupTable th, .adminFinanceFuelGroupTable td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 28%);
vertical-align: middle;
white-space: nowrap;
padding: 8px 10px;
}
.adminFinanceFuelGroupTable thead th {
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-muted);
text-align: left;
background: color-mix(in srgb, white, var(--bg-2) 12%);
font-size: 10px;
font-weight: 600;
}
.adminFinanceFuelGroupTable tbody td {
color: var(--text);
}
.adminFinanceFuelGroupTable th:nth-child(n+3), .adminFinanceFuelGroupTable td:nth-child(n+3) {
text-align: right;
}
.adminFinanceFuelGroupTable th:first-child, .adminFinanceFuelGroupTable td:first-child {
padding-left: 12px;
}
.adminFinanceFuelGroupTable th:last-child, .adminFinanceFuelGroupTable td:last-child {
padding-right: 12px;
}
.adminFinanceFuelGroupTable tbody tr:last-child td {
border-bottom: none;
}
.adminFinanceFuelGroupTable tfoot th, .adminFinanceFuelGroupTable tfoot td {
color: var(--text);
background: color-mix(in srgb, white, var(--bg-2) 10%);
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-bottom: none;
font-weight: 600;
}
.adminFinanceFuelGroupTable tfoot td:nth-child(2) {
color: var(--text-muted);
font-weight: 500;
}
@media (max-width: 640px) {
.adminFinanceFuelGroupTable {
min-width: 680px;
}
}
.adminFinanceReviewAllocationBody {
gap: 16px;
}
.adminFinanceCostControlSummaryBar {
margin-bottom: 6px;
}
.adminFinanceCostControlHead {
z-index: auto;
position: static;
top: auto;
}
.adminFinanceCostControlSummaryFrame {
min-width: 0;
display: block;
}
.adminFinanceCostControlSummaryShell {
align-items: start;
gap: 16px;
display: grid;
}
.adminFinanceCostControlSummaryHeader {
margin-bottom: 0;
}
.adminFinanceCostControlSummaryLayout {
grid-template-columns: minmax(440px, .92fr) minmax(0, 1.08fr);
align-items: start;
gap: 16px;
display: grid;
}
.adminFinanceCostControlSummaryLayout > * {
align-self: start;
min-width: 0;
}
.adminFinanceCostControlSummaryColumn {
flex-direction: column;
align-items: start;
gap: 16px;
display: flex;
}
.adminFinanceCostControlSummaryColumn > * {
width: 100%;
}
.adminFinanceCostControlContextBlock {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--focus), white 98%);
gap: 10px;
padding: 16px;
display: grid;
}
.adminFinanceCostControlContextBlock.isCompact {
gap: 8px;
padding-block: 14px;
}
.adminFinanceCostControlContextBlock strong {
font-size: 18px;
line-height: 1.25;
}
.adminFinanceCostControlContextMeta {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminFinanceCostControlContextMeta span {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
width: fit-content;
max-width: 100%;
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
background: #fff;
border-radius: 999px;
padding: 3px 8px;
font-size: 13px;
line-height: 1.25;
display: inline-flex;
}
.adminFinanceCostControlContextSecondary {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-width: 48ch;
margin: 0;
display: -webkit-box;
overflow: hidden;
}
.adminFinanceCostControlSummaryPanelCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
gap: 14px;
min-width: 0;
padding: 16px;
display: grid;
}
.adminFinanceCostControlBreakdownCard {
border-color: color-mix(in srgb, var(--fg), transparent 52%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 36%);
gap: 16px;
padding: 18px 20px;
}
.adminFinanceCostControlSummaryPanelHead, .adminFinanceCostControlTotalHead {
gap: 5px;
display: grid;
}
.adminFinanceCostControlTotalAmount {
font-size: 30px;
line-height: 1.05;
}
.adminFinanceCostControlSourceRows {
gap: 0;
display: grid;
}
.adminFinanceCostControlSourceRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 34%);
grid-template-columns: minmax(86px, 92px) minmax(0, 1fr) auto;
align-items: start;
gap: 8px 10px;
min-width: 0;
padding: 10px 0;
display: grid;
}
.adminFinanceCostControlSourceRow:first-child {
border-top: 0;
padding-top: 0;
}
.adminFinanceCostControlSourceRow:last-child {
padding-bottom: 0;
}
.adminFinanceCostControlSourceRow.isEmpty {
color: color-mix(in srgb, var(--muted), var(--fg) 10%);
}
.adminFinanceCostControlSourceRow.isEmpty strong {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
font-weight: 650;
}
.adminFinanceCostControlSourceRow strong {
white-space: nowrap;
font-size: 14px;
line-height: 1.25;
}
.adminFinanceCostControlSourceLabel {
color: color-mix(in srgb, var(--muted), var(--fg) 8%);
font-size: 13px;
line-height: 1.3;
}
.adminFinanceCostControlSourceAction {
color: var(--focus);
white-space: nowrap;
justify-self: end;
align-items: center;
gap: 4px;
margin-top: 1px;
font-size: 13px;
font-weight: 650;
line-height: 1.25;
display: inline-flex;
}
.adminFinanceCostControlDistributionBar {
background: color-mix(in srgb, var(--bg-2), white 12%);
width: 100%;
min-height: 14px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: 999px;
display: flex;
overflow: hidden;
}
.adminFinanceCostControlDistributionSegment {
flex-basis: var(--segment-width);
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
height: 14px;
display: block;
}
.adminFinanceCostControlDistributionSegment.isLabor, .adminFinanceCostControlDistributionDot.isLabor {
background: color-mix(in srgb, var(--focus), white 18%);
}
.adminFinanceCostControlDistributionSegment.isInvoice, .adminFinanceCostControlDistributionDot.isInvoice {
background: color-mix(in srgb, var(--warn), white 16%);
}
.adminFinanceCostControlDistributionSegment.isFuel, .adminFinanceCostControlDistributionDot.isFuel {
background: #e7b836;
}
.adminFinanceCostControlDistributionSegment.isRepair, .adminFinanceCostControlDistributionDot.isRepair {
background: #d38634;
}
.adminFinanceCostControlDistributionSegment.isTicket, .adminFinanceCostControlDistributionDot.isTicket {
background: color-mix(in srgb, var(--ok), white 14%);
}
.adminFinanceCostControlDistributionSegment.isOther, .adminFinanceCostControlDistributionDot.isOther {
background: color-mix(in srgb, var(--accent), white 20%);
}
.adminFinanceCostControlDistributionLegend {
gap: 9px;
display: grid;
}
.adminFinanceCostControlDistributionLegendRow {
grid-template-columns: 12px minmax(0, 1fr) auto auto;
align-items: center;
gap: 9px;
min-width: 0;
display: grid;
}
.adminFinanceCostControlDistributionDot {
border-radius: 999px;
width: 12px;
height: 12px;
}
.adminFinanceCostControlDistributionLabel {
min-width: 0;
color: color-mix(in srgb, var(--fg), var(--muted) 38%);
font-size: 14px;
line-height: 1.25;
}
.adminFinanceCostControlDistributionLegendRow strong {
white-space: nowrap;
font-size: 14px;
line-height: 1.2;
}
.adminFinanceCostControlDistributionLegendRow .muted {
text-align: right;
white-space: nowrap;
min-width: 3.4ch;
}
.adminFinanceCostControlDistributionNote {
margin: 0;
font-size: 13px;
line-height: 1.35;
}
.adminFinanceCostControlSummaryMeta {
flex-wrap: wrap;
gap: 8px 12px;
display: flex;
}
.adminFinanceCostControlSummaryAddress {
max-width: 44ch;
}
.adminFinanceCostControlSummaryCompositionCard {
align-content: start;
}
.adminFinanceCostControlSummaryTotalCard {
grid-column: span 2;
}
.adminFinanceCostControlSummaryContextGrid {
grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, .8fr));
gap: 10px;
display: grid;
}
.adminFinanceCostControlSummaryContextItem {
align-content: start;
gap: 6px;
display: grid;
}
.adminFinanceCostControlSummaryMatrixWrap {
overflow-x: auto;
}
.adminFinanceCostControlCompositionGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
display: grid;
}
.adminFinanceCostControlCompositionCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
gap: 12px;
padding: 14px;
display: grid;
}
.adminFinanceCostControlCompositionCard.isExpanded {
grid-column: 1 / -1;
}
.adminFinanceCostControlCompositionCard.isPending {
background: color-mix(in srgb, var(--focus), white 98%);
border-color: color-mix(in srgb, var(--focus), transparent 74%);
}
.adminFinanceCostControlCompositionHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceCostControlCompositionBar {
background: color-mix(in srgb, var(--bg-2), white 18%);
width: 100%;
height: 12px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: 999px;
display: flex;
overflow: hidden;
}
.adminFinanceCostControlCompositionBarCompact {
height: 10px;
margin-top: 2px;
}
.adminFinanceCostControlCompositionSegment {
flex: 10%;
min-width: 0;
height: 100%;
display: block;
}
.adminFinanceCostControlCompositionSegment.isLabor, .adminFinanceCostControlCompositionSwatch.isLabor {
background: color-mix(in srgb, var(--focus), white 24%);
}
.adminFinanceCostControlCompositionSegment.isInvoice, .adminFinanceCostControlCompositionSwatch.isInvoice {
background: color-mix(in srgb, var(--warning), white 18%);
}
.adminFinanceCostControlCompositionSegment.isFuel, .adminFinanceCostControlCompositionSwatch.isFuel {
background: #e9bd45;
}
.adminFinanceCostControlCompositionSegment.isRepair, .adminFinanceCostControlCompositionSwatch.isRepair {
background: #d48939;
}
.adminFinanceCostControlCompositionSegment.isTicket, .adminFinanceCostControlCompositionSwatch.isTicket {
background: color-mix(in srgb, var(--success), white 18%);
}
.adminFinanceCostControlCompositionLegend {
gap: 8px;
display: grid;
}
.adminFinanceCostControlCompositionLegendCompact {
gap: 6px;
}
.adminFinanceCostControlCompositionLegendItem {
grid-template-columns: 12px minmax(0, 1fr) auto;
align-items: center;
gap: 4px 8px;
display: grid;
}
.adminFinanceCostControlSummarySplit {
gap: 7px;
margin-top: 2px;
display: grid;
}
.adminFinanceCostControlSummarySplitRow {
grid-template-columns: 12px minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px;
min-width: 0;
display: grid;
}
.adminFinanceCostControlSummarySplitLabel {
min-width: 0;
color: color-mix(in srgb, var(--fg), var(--muted) 42%);
font-size: 14px;
line-height: 1.25;
}
.adminFinanceCostControlSummarySplitRow strong {
white-space: nowrap;
font-size: 14px;
line-height: 1.2;
}
.adminFinanceCostControlSummarySplitRow .muted {
text-align: right;
white-space: nowrap;
min-width: 3.4ch;
}
.adminFinanceCostControlCompositionSwatch {
border-radius: 999px;
width: 12px;
height: 12px;
}
.adminFinanceCostControlSummaryMatrix {
border-collapse: collapse;
width: 100%;
}
.adminFinanceCostControlSummaryMatrix th, .adminFinanceCostControlSummaryMatrix td {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
text-align: left;
vertical-align: middle;
padding: 12px 14px;
}
.adminFinanceCostControlSummaryMatrix thead th {
color: color-mix(in srgb, var(--muted), var(--fg) 10%);
letter-spacing: .08em;
text-transform: uppercase;
border-top: 0;
padding-top: 0;
font-size: 12px;
}
.adminFinanceCostControlSummaryMatrix tbody th, .adminFinanceCostControlSummaryMatrix tbody td {
font-size: 16px;
line-height: 1.35;
}
.adminFinanceCostControlSummaryMatrix tbody th {
font-weight: 700;
}
.adminFinanceCostControlSummaryMatrixRow.isMatched th, .adminFinanceCostControlSummaryMatrixRow.isMatched td:last-child {
color: color-mix(in srgb, var(--ok), black 22%);
}
.adminFinanceCostControlSummaryMatrixRow.isDifferent th, .adminFinanceCostControlSummaryMatrixRow.isDifferent td:last-child {
color: #a55300;
}
.adminFinanceCostControlSummaryMatrixRow.isPending td:last-child {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
}
.adminFinanceCostControlDiscrepancyGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminFinanceCostControlDiscrepancyCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
gap: 12px;
padding: 14px;
display: grid;
}
.adminFinanceCostControlDiscrepancyCard.isMatched {
border-color: color-mix(in srgb, var(--ok), transparent 56%);
background: color-mix(in srgb, var(--ok), white 96%);
}
.adminFinanceCostControlDiscrepancyCard.isDifferent {
border-color: color-mix(in srgb, var(--warn), transparent 52%);
background: color-mix(in srgb, var(--warn), white 96%);
}
.adminFinanceCostControlDiscrepancyCard.isPending {
border-color: color-mix(in srgb, var(--focus), transparent 72%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminFinanceCostControlDiscrepancyHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceCostControlDiscrepancyHead .pill {
flex: none;
}
.adminFinanceCostControlDiscrepancyValues {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminFinanceCostControlDiscrepancyActions {
justify-content: flex-start;
display: flex;
}
.adminFinanceInlineLink {
color: var(--focus);
text-underline-offset: 2px;
text-decoration: underline;
}
.adminFinanceInlineLink:hover {
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminFinanceInlineLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 68%);
border-radius: 2px;
outline: none;
}
.adminFinanceAllocationList {
gap: 12px;
display: grid;
}
.adminFinanceAllocationHeader, .adminFinanceAllocationRow {
flex-wrap: wrap;
gap: 12px;
display: flex;
}
.adminFinanceAllocationHeader {
align-items: end;
padding: 0 14px;
}
.adminFinanceAllocationHeader .label, .adminFinanceAllocationFieldLabel {
margin: 0;
}
.adminFinanceAllocationRow {
border: 1px solid color-mix(in srgb, var(--focus), transparent 56%);
border-radius: calc(var(--radius) + 1px);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 82%);
background: #fff;
align-items: end;
padding: 14px;
}
.adminFinanceAllocationRow > .field, .adminFinanceAllocationRow > label.field {
margin-top: 0;
}
.adminFinanceAllocationField {
flex: 0 auto;
min-width: 0;
position: relative;
}
.adminFinanceAllocationField.isTarget {
flex: 0 96px;
}
.adminFinanceAllocationField.isSite {
flex: 1.15 176px;
}
.adminFinanceAllocationField.isAmount {
flex: .8 144px;
}
.adminFinanceAllocationField.isNote {
flex: 150px;
}
.adminFinanceAllocationRowActions {
justify-content: flex-end;
align-items: flex-end;
gap: 8px;
display: flex;
}
.adminFinanceAllocationField.isAction {
flex: none;
}
.adminFinanceAllocationHeader .adminFinanceAllocationField.isAction {
width: 44px;
min-width: 44px;
}
.adminFinanceAllocationAmountControl {
position: relative;
}
.adminFinanceAllocationAmountControl > .adminFinanceAllocationAmountInput {
width: 100%;
min-width: 0;
padding-right: 60px;
}
.adminFinanceAllocationAmountMaxBtn {
min-width: 32px;
min-height: 22px;
color: color-mix(in srgb, var(--muted), var(--fg) 24%);
box-shadow: none;
z-index: 1;
background: none;
border: 0;
padding: 0 4px;
font-size: .9rem;
font-weight: 500;
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
}
.adminFinanceAllocationAmountMaxBtn:hover {
color: color-mix(in srgb, var(--focus), var(--fg) 30%);
box-shadow: none;
background: none;
border: 0;
}
.adminFinanceAllocationRowRemoveBtn {
width: 44px;
min-width: 44px;
min-height: 44px;
font-size: 18px;
line-height: 1;
padding: 0 !important;
}
.adminFinanceAllocationRowRemoveBtn > span {
justify-content: center;
align-items: center;
width: 100%;
line-height: 1;
display: inline-flex;
}
.adminFinanceAllocationSurface .adminFinancePanelHead {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding-bottom: 4px;
display: flex;
}
.adminFinanceAllocationSurface .adminFinancePanelActions {
flex: none;
justify-content: flex-end;
margin-left: auto;
padding-top: 4px;
}
.adminFinanceAllocationSurface .adminFinancePanelHead > :first-child {
flex: auto;
min-width: 0;
}
.adminFinanceAllocationSurface.isManual {
container: allocation-manual / inline-size;
}
.adminFinanceAllocationFieldLabel {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminFinanceCostControlFeedGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminFinanceCostControlFeedCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
gap: 12px;
padding: 12px 14px;
display: grid;
}
.adminFinanceCostControlFeedCard.isPending {
border-color: color-mix(in srgb, var(--focus), transparent 74%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminFinanceCostControlFeedHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminFinanceCostControlFeedHead .pill.isSuccess {
border-color: color-mix(in srgb, var(--success), transparent 44%);
background: color-mix(in srgb, var(--success), white 94%);
}
.adminFinanceCostControlFeedHead .pill.isWarning {
border-color: color-mix(in srgb, var(--warning), transparent 42%);
background: color-mix(in srgb, var(--warning), white 94%);
}
.adminFinanceCostControlSectionSummaryGrid {
margin-bottom: 8px;
}
.adminFinanceCostControlPendingCompareGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminFinanceCostControlSectionSummaryGrid .adminFinanceReviewReadOnlyCard, .adminFinanceCostControlPendingCompareGrid .adminFinanceReviewReadOnlyCard {
border-radius: calc(var(--radius) + 2px);
}
.adminFinanceCostControlPendingBaselineBody {
gap: 10px;
display: grid;
}
.adminFinanceCostControlTable td, .adminFinanceCostControlTable th {
vertical-align: top !important;
}
.adminFinanceCostControlTable .adminListRow.isDanger {
background: color-mix(in srgb, var(--danger), white 97%);
}
.adminFinanceCostControlTable .adminListRow.isWarning {
background: color-mix(in srgb, var(--warning), white 97%);
}
.adminFinanceCostControlTable .adminListRow.isDanger:hover {
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminFinanceCostControlTable .adminListRow.isWarning:hover {
background: color-mix(in srgb, var(--warning), white 95%);
}
.adminFinanceCostControlCellStack {
gap: 4px;
display: grid;
}
.adminFinanceCostControlBrowseSiteCell {
justify-content: flex-start;
align-items: center;
min-width: 0;
display: flex;
}
.adminFinanceCostControlBrowseVehicleCell {
justify-content: flex-start;
align-items: start;
gap: 4px;
min-width: 0;
display: grid;
}
.adminFinanceCostControlBrowseTableWrap {
padding: 0;
overflow: auto visible;
}
.adminFinanceCostControlBrowseTableWrap .adminListTableWrap {
overflow: auto visible;
}
.adminFinanceCostControlBrowseCell {
vertical-align: middle !important;
}
.adminFinanceCostControlTable tbody .adminFinanceCostControlBrowseCell {
padding-top: 16px;
padding-bottom: 16px;
line-height: 1.1;
}
.adminFinanceCostControlBrowseValue {
align-items: center;
min-height: 34px;
display: flex;
}
.adminFinanceCostControlBrowseCell.isCentered {
text-align: center;
}
.adminFinanceCostControlBrowseCell.isCentered .adminFinanceCostControlBrowseValue {
justify-content: center;
}
.adminFinanceCostControlBrowseCell.isCentered .adminGeoSortHeaderBtn {
justify-content: center;
width: 100%;
}
.adminFinanceCostControlBrowseSiteTitle, .adminFinanceCostControlBrowseVehicleTitle {
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-weight: 700;
line-height: 1.1;
display: inline-flex;
}
.adminFinanceCostControlBrowseColIssues {
width: 96px;
}
.adminFinanceIssuesHint {
cursor: help;
align-items: center;
gap: 6px;
display: inline-flex;
position: relative;
}
.adminFinanceIssuesHintIcon {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 35%);
width: 18px;
height: 18px;
color: color-mix(in srgb, var(--muted), var(--fg) 24%);
border-radius: 999px;
justify-content: center;
align-items: center;
font-size: 11px;
line-height: 1;
display: inline-flex;
}
.adminFinanceIssuesTooltip {
z-index: 120;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
min-width: 220px;
max-width: min(360px, 72vw);
color: color-mix(in srgb, var(--fg), black 8%);
white-space: normal;
opacity: 1;
pointer-events: none;
background: #fff;
border-radius: 8px;
padding: 9px 10px;
font-size: 12px;
line-height: 1.35;
position: fixed;
box-shadow: 0 10px 24px #00000029;
}
.adminFinanceIssuesTooltipLine {
display: block;
}
.adminFinanceIssuesTooltipLine + .adminFinanceIssuesTooltipLine {
margin-top: 4px;
}
.adminFinanceCostControlBrowseColInvoices {
width: 108px;
}
.adminFinanceCostControlBrowseColCost {
width: 142px;
}
.adminFinanceCostControlBrowseColAction {
width: 92px;
}
.adminFinanceCostControlBrowseIssuesValue.isWarning {
color: color-mix(in srgb, var(--warn), black 24%);
font-weight: 700;
}
.adminFinanceCostControlBrowseActionBtn {
min-height: 34px;
padding: 0 12px;
font-size: 13px;
line-height: 1;
}
.adminFinanceCostControlRecordLink {
color: var(--focus);
text-underline-offset: 2px;
font-weight: 600;
text-decoration: underline;
}
.adminFinanceCostControlRecordLink:hover {
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminFinanceCostControlRecordLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 68%);
border-radius: 2px;
outline: none;
}
.adminFinanceSupplierLookup {
gap: 10px;
display: grid;
}
.adminFinanceSupplierLookupBlock {
gap: 14px;
display: grid;
}
.adminFinanceAcceptedAllocationTableWrap {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg) 6%);
overflow-x: auto;
}
.adminFinanceAcceptedAllocationTable {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: 100%;
min-width: 680px;
}
.adminFinanceAcceptedAllocationTable th, .adminFinanceAcceptedAllocationTable td {
vertical-align: top;
padding: 12px 14px;
}
.adminFinanceAcceptedAllocationTable thead th {
color: color-mix(in srgb, var(--muted), var(--text) 22%);
text-align: left;
background: color-mix(in srgb, var(--stroke), white 94%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.adminFinanceAcceptedAllocationTable tbody td {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
color: var(--text);
line-height: 1.45;
}
.adminFinanceAcceptedAllocationTable tbody tr:first-child td {
border-top: 0;
}
.adminFinanceAcceptedAllocationTable th:nth-child(3), .adminFinanceAcceptedAllocationTable td:nth-child(3) {
text-align: right;
}
.adminFinanceAcceptedCellStack {
gap: 4px;
min-width: 0;
display: grid;
}
.adminFinanceAcceptedSourceCell {
white-space: normal;
word-break: break-word;
}
.adminFinanceAcceptedSourceSecondary {
color: color-mix(in srgb, var(--muted), var(--text) 18%);
font-size: 13px;
line-height: 1.4;
}
.adminFinanceAcceptedFuelTable {
min-width: 840px;
}
.adminFinanceAcceptedFuelTable th:nth-child(n+2), .adminFinanceAcceptedFuelTable td:nth-child(n+2) {
text-align: right;
}
.adminFinanceAcceptedFuelVehicleCell {
gap: 8px;
min-width: 0;
display: grid;
}
.adminFinanceAcceptedFuelToggle {
width: fit-content;
color: color-mix(in srgb, var(--muted), var(--text) 26%);
font: inherit;
cursor: pointer;
background: none;
border: 0;
align-items: center;
gap: 6px;
padding: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
display: inline-flex;
}
.adminFinanceAcceptedFuelToggle:hover {
color: var(--text);
}
.adminFinanceAcceptedFuelToggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 18%);
outline-offset: 4px;
border-radius: 6px;
}
.adminFinanceAcceptedFuelParentRow.isFallback td {
background: color-mix(in srgb, white, var(--bg) 8%);
}
.adminFinanceAcceptedFuelDetailRow td {
background: color-mix(in srgb, var(--focus), white 98%);
border-top: 0;
padding: 0;
}
.adminFinanceAcceptedFuelDetailWrap {
padding: 4px 14px 14px 40px;
}
.adminFinanceAcceptedFuelDetailTable {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
.adminFinanceAcceptedFuelDetailTable th, .adminFinanceAcceptedFuelDetailTable td {
vertical-align: top;
padding: 10px 12px;
}
.adminFinanceAcceptedFuelDetailTable thead th {
color: color-mix(in srgb, var(--muted), var(--text) 24%);
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
font-size: 12px;
font-weight: 700;
}
.adminFinanceAcceptedFuelDetailTable tbody td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminFinanceAcceptedFuelDetailTable tbody tr:last-child td {
border-bottom: 0;
}
.adminFinanceAcceptedFuelDetailTable tfoot th, .adminFinanceAcceptedFuelDetailTable tfoot td {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
color: color-mix(in srgb, var(--muted), var(--text) 18%);
font-size: 12px;
font-weight: 700;
}
.adminFinanceAcceptedFuelDetailTable th:nth-child(n+3), .adminFinanceAcceptedFuelDetailTable td:nth-child(n+3) {
text-align: right;
}
.adminFinanceSupplierDecisionBlock {
gap: 8px;
display: grid;
}
.adminFinanceSupplierDecisionHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminFinanceSupplierIdentity {
flex: auto;
min-width: 0;
}
.adminFinanceLinkedSupplierCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 24%);
background: color-mix(in srgb, var(--focus), white 95%);
border-radius: var(--radius);
padding: 12px 18px 16px;
}
.adminFinanceLinkedSupplierHead {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 8px 14px;
display: grid;
}
.adminFinanceLinkedSupplierHead .adminFinanceStack {
min-width: 0;
}
.adminFinanceLinkedSupplierBadge {
place-self: start end;
}
.adminFinanceSupplierEmptyState {
border: 1px solid color-mix(in srgb, var(--focus), transparent 70%);
background: color-mix(in srgb, var(--focus), white 98%);
border-radius: var(--radius);
gap: 6px;
padding: 12px 14px;
display: grid;
}
.adminFinanceSupplierSearchLane {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
gap: 8px;
padding-bottom: 14px;
display: grid;
}
.adminFinanceSupplierSearchField {
gap: 8px;
}
.adminFinanceSupplierSearchBlock {
gap: 0;
display: grid;
}
.adminFinanceLookupHint {
margin: 0;
}
.adminFinanceSupplierResults {
gap: 8px;
display: grid;
}
.adminFinanceSupplierSuggestionGrid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 10px;
display: grid;
}
.adminFinanceSupplierSuggestionIntro {
gap: 7px;
display: grid;
}
.adminFinanceSupplierSuggestionList {
gap: 9px;
display: grid;
}
.adminFinanceSupplierCreateCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 26%);
background: color-mix(in srgb, var(--focus), white 95%);
border-radius: calc(var(--radius) + 2px);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 56%);
gap: 10px;
padding: 16px 18px;
display: grid;
}
.adminFinanceSupplierSuggestionTitle {
flex-wrap: wrap;
align-items: baseline;
gap: 7px;
margin: 0;
display: flex;
}
.adminFinanceSupplierSuggestionTitle span:not(:first-child) {
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
font-size: 13px;
font-weight: 500;
}
.adminFinanceReviewSubsectionHeader {
gap: 4px;
display: grid;
}
.adminFinanceReviewSubsectionHeader + .adminFinanceReviewFormGrid {
margin-top: -4px;
}
.adminFinanceObraSuggestionGrid {
gap: 12px;
display: grid;
}
.adminFinanceObraSuggestionCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 76%);
background: color-mix(in srgb, var(--bg-2), white 40%);
border-radius: var(--radius);
gap: 10px;
padding: 12px;
display: grid;
}
.adminFinanceObraEvidenceList {
gap: 6px;
display: grid;
}
.adminFinanceObraEvidenceItem {
border-left: 2px solid color-mix(in srgb, var(--focus), transparent 30%);
background: color-mix(in srgb, var(--focus), white 97%);
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
padding: 8px 10px;
font-size: 13px;
line-height: 1.35;
display: block;
}
.adminFinanceSupplierSuggestionCard {
border: 1px solid color-mix(in srgb, var(--focus), transparent 26%);
background: color-mix(in srgb, var(--focus), white 95%);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus), transparent 56%);
gap: 10px;
padding: 12px;
display: grid;
}
.adminFinanceSupplierSuggestionRow {
border-color: color-mix(in srgb, var(--stroke), transparent 4%);
background: var(--bg);
min-height: 86px;
box-shadow: none;
grid-template-columns: 58px minmax(0, 1fr) 118px;
align-items: center;
gap: 8px 12px;
padding: 10px 10px 10px 11px;
}
.adminFinanceSupplierSuggestionRow.hasNameVariant {
border-color: color-mix(in srgb, var(--focus), transparent 26%);
background: color-mix(in srgb, var(--focus), white 97.5%);
border-left-width: 3px;
}
.adminFinanceSupplierSuggestionStatusRail {
border-radius: calc(var(--radius) - 2px);
background: color-mix(in srgb, var(--bg-2), white 36%);
min-height: 54px;
color: color-mix(in srgb, var(--muted), var(--fg) 22%);
text-align: center;
text-transform: uppercase;
align-content: center;
justify-items: center;
gap: 3px;
padding: 6px 5px;
font-size: 10px;
font-weight: 700;
line-height: 1.15;
display: grid;
}
.adminFinanceSupplierSuggestionStatusRail strong {
color: var(--text);
font-size: 17px;
line-height: 1;
}
.adminFinanceSupplierSuggestionStatusRail.isHigh {
background: color-mix(in srgb, var(--ok), white 94%);
color: color-mix(in srgb, var(--ok), black 28%);
}
.adminFinanceSupplierSuggestionStatusRail.isMedium, .adminFinanceSupplierSuggestionStatusRail.isReview {
color: #9b690d;
background: #fbf7ee;
}
.adminFinanceSupplierSuggestionStatusRail.isConflict {
background: color-mix(in srgb, var(--danger), white 95%);
color: color-mix(in srgb, var(--danger), black 22%);
}
.adminFinanceSupplierSuggestionHead {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
display: flex;
}
.adminFinanceSupplierSuggestionRow .adminFinanceSupplierSuggestionHead {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 3px;
display: grid;
}
.adminFinanceSupplierSuggestionMain {
gap: 6px;
min-width: 0;
display: grid;
}
.adminFinanceSupplierSuggestionIdentity {
min-width: 0;
}
.adminFinanceSupplierSuggestionTaxId, .adminFinanceSupplierSuggestionAddress {
overflow-wrap: break-word;
}
.adminFinanceSupplierSuggestionAddress {
max-width: 92ch;
}
.adminFinanceSupplierSuggestionMeta {
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
gap: 6px;
display: flex;
}
.adminFinanceSupplierScorePill {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
}
.adminFinanceSupplierStrengthBadge.isHigh {
border-color: color-mix(in srgb, var(--ok), transparent 48%);
background: color-mix(in srgb, var(--ok), white 94%);
color: color-mix(in srgb, var(--ok), black 28%);
}
.adminFinanceSupplierStrengthBadge.isMedium {
color: #9f6c0d;
background: #fbf7ee;
border-color: #cc8a1180;
}
.adminFinanceSupplierStrengthBadge.isLow {
border-color: color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 8%);
color: var(--text);
}
.adminFinanceSupplierStrengthBadge.isConflict, .adminFinanceConflictPill, .adminFinanceSupplierNameVariantPill, .adminFinanceSupplierNeedsEnrichmentPill, .adminFinanceSupplierSuggestionConfirmPill {
color: #9f6c0d;
background: #fbf7ee;
border-color: #cc8a1185;
}
.adminFinanceSupplierTaxIdPdfPill, .adminFinanceSupplierTaxIdDatabasePill {
border-color: color-mix(in srgb, var(--focus), transparent 62%);
background: color-mix(in srgb, var(--focus), white 95%);
color: color-mix(in srgb, var(--focus), var(--text) 22%);
}
.adminFinanceSupplierTaxIdConflictPill {
border-color: color-mix(in srgb, var(--danger), transparent 62%);
background: color-mix(in srgb, var(--danger), white 96%);
color: color-mix(in srgb, var(--danger), var(--text) 18%);
}
.adminFinanceSupplierSuggestionConflict {
color: color-mix(in srgb, var(--muted), var(--fg) 30%);
margin: -2px 0 0;
font-size: 13px;
line-height: 1.4;
}
.adminFinanceSupplierLink {
color: inherit;
text-decoration: underline;
-webkit-text-decoration-color: color-mix(in srgb, var(--focus), transparent 36%);
text-decoration-color: color-mix(in srgb, var(--focus), transparent 36%);
text-underline-offset: .14em;
}
.adminFinanceSupplierLink:hover, .adminFinanceSupplierLink:focus-visible {
color: color-mix(in srgb, var(--focus), var(--text) 28%);
text-decoration-color: currentColor;
}
.adminFinanceSupplierSuggestionActions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 7px;
display: flex;
}
.adminFinanceSupplierSuggestionRow .adminFinanceSupplierSuggestionActions {
flex-direction: column;
grid-area: 1 / 3;
justify-content: flex-end;
place-self: center end;
min-width: 118px;
}
.adminFinanceSupplierSuggestionRow .adminFinanceSupplierSuggestionActions .btn {
justify-content: center;
width: 100%;
min-height: 34px;
padding-inline: 10px;
}
.adminFinanceSupplierSuggestionPrimaryAction {
border-color: color-mix(in srgb, var(--stroke), transparent 4%);
background: var(--bg);
color: var(--text);
}
.adminFinanceSupplierSuggestionPrimaryAction:hover, .adminFinanceSupplierSuggestionPrimaryAction:focus-visible {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminFinanceSupplierSuggestionSecondaryAction {
border-color: color-mix(in srgb, var(--focus), transparent 18%);
background: var(--focus);
color: #fff;
box-shadow: none;
}
.adminFinanceSupplierSuggestionSecondaryAction:hover, .adminFinanceSupplierSuggestionSecondaryAction:focus-visible {
border-color: color-mix(in srgb, var(--focus), black 8%);
background: color-mix(in srgb, var(--focus), black 8%);
color: #fff;
}
.adminFinanceSupplierCreateGrid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 10px;
display: grid;
}
.adminFinanceSupplierResultButton {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg);
text-align: left;
justify-items: start;
gap: 2px;
padding: 10px 12px;
display: grid;
}
.adminFinanceReviewFieldFull {
grid-column: 1 / -1;
}
.adminFinanceReviewStatusStrip {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 10px;
display: grid;
}
.adminFinanceStatusCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 42%);
gap: 6px;
padding: 10px 12px;
display: grid;
}
.adminFinanceStatusCard.isReady {
border-color: color-mix(in srgb, var(--ok), transparent 54%);
background: color-mix(in srgb, var(--ok), white 95%);
}
.adminFinanceStatusCard.isNeutral {
border-color: color-mix(in srgb, var(--focus), transparent 76%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminFinanceStatusCard.isIncomplete, .adminFinanceStatusCard.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 48%);
background: color-mix(in srgb, var(--warn), white 95%);
}
.adminDocumentProcessingLayout, .adminDocumentProcessingShell {
gap: 14px;
}
.adminDocumentProcessingShell {
display: grid;
}
.adminDocumentProcessingSurface {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: var(--bg);
box-shadow: none;
}
.adminDocumentProcessingSurfaceBody {
gap: 16px;
padding: 18px;
display: grid;
}
.adminDocumentProcessingOverviewGrid {
gap: 10px;
}
.adminDocumentProcessingOverviewCard {
background: var(--bg);
min-height: 126px;
box-shadow: none;
border-radius: 8px;
gap: 10px;
padding: 14px;
}
.adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isReady {
border-color: color-mix(in srgb, var(--ok), transparent 52%);
background: var(--bg);
}
.adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isNeutral {
border-color: color-mix(in srgb, var(--focus), transparent 76%);
background: var(--bg);
}
.adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isIncomplete, .adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 50%);
background: var(--bg);
}
.adminDocumentProcessingOverviewHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminDocumentProcessingOverviewTitle {
font-family: var(--font-condensed);
letter-spacing: .01em;
font-size: 16px;
line-height: 1.1;
}
.adminDocumentProcessingOverviewHead .pill {
flex: none;
min-height: 25px;
padding: 0 9px;
font-size: 11px;
line-height: 1.1;
}
.adminDocumentProcessingOverviewMeta {
min-width: 0;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
max-width: 44ch;
font-size: 13px;
line-height: 1.45;
}
.adminDocumentProcessingPillRow .pill {
min-height: 26px;
padding: 0 10px;
font-size: 12px;
line-height: 1.1;
}
.adminDocumentProcessingSection {
gap: 10px;
}
.adminDocumentProcessingFormSection {
gap: 14px;
}
.adminDocumentProcessingSectionHead {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminDocumentProcessingRuntimeGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminDocumentProcessingRuntimeItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: var(--bg);
min-width: 0;
box-shadow: none;
border-radius: 8px;
gap: 7px;
padding: 11px 12px;
}
.adminDocumentProcessingDiagnostics {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), white 70%);
border-radius: 8px;
margin-top: 12px;
padding: 12px 14px;
}
.adminDocumentProcessingDiagnostics[open] .adminDocumentProcessingDiagnosticsGrid {
margin-top: 12px;
}
.adminDocumentProcessingRuntimeValueStack {
gap: 8px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProfileStackShell, .adminDocumentProcessingProfileGrid, .adminDocumentProcessingStackGrid, .adminDocumentProcessingStackList {
gap: 12px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProfileGrid {
grid-template-columns: 1fr;
}
.adminDocumentProcessingStackGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingProfileCard, .adminDocumentProcessingStackCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: var(--bg);
border-radius: 8px;
gap: 12px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminDocumentProcessingProfileSummary, .adminDocumentProcessingProfileEditor, .adminDocumentProcessingProfileHead, .adminDocumentProcessingProfileFields, .adminDocumentProcessingProfileActions, .adminDocumentProcessingStackRow, .adminDocumentProcessingStackRowActions {
gap: 10px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProfileSummary {
border-radius: calc(var(--radius) + 2px);
cursor: pointer;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "top actions"
"pills actions";
align-items: start;
padding: 2px;
display: grid;
}
.adminDocumentProcessingProfileSummary:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
.adminDocumentProcessingProfileSummaryTop {
grid-area: top;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 10px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProfileSummaryMain {
gap: 4px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProfileTitleRow {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingProfileSummaryActions {
flex-wrap: wrap;
grid-area: actions;
justify-content: flex-end;
align-self: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingProfileSummary .adminDocumentProcessingPillRow {
grid-area: pills;
}
.adminDocumentProcessingProfileInlineToggle {
flex: none;
justify-content: center;
align-items: center;
min-width: 28px;
min-height: 28px;
display: inline-flex;
}
.adminDocumentProcessingProfileSecondary {
font-size: 12px;
line-height: 1.35;
}
.adminDocumentProcessingProfileEditor {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding-top: 12px;
}
.adminDocumentProcessingProfileWarning {
border: 1px solid color-mix(in srgb, var(--warn), transparent 24%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--warn) 10%);
gap: 6px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminDocumentProcessingProfileHead, .adminDocumentProcessingProfileActions, .adminDocumentProcessingStackRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.adminDocumentProcessingProfileFields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingProfileModelExamples {
grid-column: 1 / -1;
margin-top: -4px;
}
.adminDocumentProcessingStackRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 2px);
background: #fff;
grid-template-columns: auto minmax(0, 1fr) auto;
padding: 10px 12px;
}
.adminDocumentProcessingStackRow[draggable="true"] {
cursor: grab;
}
.adminDocumentProcessingStackRowLocked {
background: color-mix(in srgb, white, var(--bg-2) 30%);
}
.adminDocumentProcessingStackRowMain {
gap: 4px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingStackRowMain strong {
font-size: 14px;
line-height: 1.25;
}
.adminDocumentProcessingStackMeta {
font-size: 12px;
line-height: 1.35;
}
.adminDocumentProcessingStackRowActions {
grid-auto-flow: column;
justify-content: end;
}
.adminDocumentProcessingStageGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0 14px;
display: grid;
}
.adminDocumentProcessingStageGrid[hidden] {
display: none;
}
.adminDocumentProcessingStageCard, .adminDocumentProcessingSupportCard, .adminDocumentProcessingStageCompareCell {
gap: 8px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingStageCompareCell {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, white, var(--bg-2) 18%);
align-content: start;
padding: 10px 14px 0;
}
.adminDocumentProcessingStageCompareCellTop {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-top-left-radius: calc(var(--radius) + 5px);
border-top-right-radius: calc(var(--radius) + 5px);
padding-top: 12px;
}
.adminDocumentProcessingStageCompareCellBottom {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom-left-radius: calc(var(--radius) + 5px);
border-bottom-right-radius: calc(var(--radius) + 5px);
padding-bottom: 12px;
}
.adminDocumentProcessingStageCompareCellClassification {
grid-column: 1;
}
.adminDocumentProcessingStageCompareCellExtraction {
grid-column: 2;
}
.adminDocumentProcessingStageCard, .adminDocumentProcessingSupportCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: var(--bg);
border-radius: 8px;
padding: 14px;
}
.adminDocumentProcessingStageHead {
align-content: start;
gap: 4px;
min-height: 56px;
display: grid;
}
.adminDocumentProcessingStageHeadHint {
min-height: 2.8em;
line-height: 1.45;
}
.adminDocumentProcessingStageFields {
gap: 12px;
}
.adminDocumentProcessingStageRow {
align-content: start;
}
.adminDocumentProcessingStageRowProvider {
min-height: 150px;
}
.adminDocumentProcessingStageRowBaseUrl, .adminDocumentProcessingStageRowTimeout {
min-height: 60px;
}
.adminDocumentProcessingStageRowModel, .adminDocumentProcessingStageRowReasoning {
min-height: 94px;
}
.adminDocumentProcessingStageFieldHint {
min-height: 2.6em;
line-height: 1.45;
}
.adminDocumentProcessingStageMetaGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminDocumentProcessingStageMetaItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg-2) 26%);
align-content: start;
gap: 6px;
min-width: 0;
min-height: 94px;
padding: 10px 12px;
display: grid;
}
.adminDocumentProcessingStageMetaCode {
letter-spacing: -.01em;
font-size: .76rem;
line-height: 1.2;
}
.adminDocumentProcessingSupportGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminDocumentProcessingSupportCard {
align-content: start;
}
.adminDocumentProcessingSupportSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 70%);
border-radius: 8px;
padding: 11px 12px;
}
.adminDocumentProcessingSupportSummary .adminSettingsFieldHint {
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.adminDocumentProcessingSecretBlock {
gap: 14px;
width: 100%;
display: grid;
}
.adminDocumentProcessingSecretActions {
justify-content: flex-start;
}
.adminDocumentProcessingActionLane {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
display: flex;
}
.adminDocumentProcessingActionLaneRight {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 12px;
display: flex;
}
.adminDocumentProcessingPrimaryActions {
justify-content: flex-end;
}
.adminDocumentProcessingSecretBlock .adminSettingsFormMeta {
text-align: right;
white-space: nowrap;
}
.adminDocumentProcessingPromptCatalogGrid {
margin-top: 2px;
}
.adminDocumentProcessingPromptCatalogSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) + 5px);
background: linear-gradient(180deg, color-mix(in srgb, white, var(--bg) 4%), color-mix(in srgb, var(--bg-2), white 70%));
gap: 12px;
padding: 14px 16px 16px;
display: grid;
}
.adminDocumentProcessingPromptCatalogSummaryTop, .adminDocumentProcessingPromptCatalogSummaryMeta {
gap: 12px;
display: grid;
}
.adminDocumentProcessingPromptCatalogSummaryTop {
grid-template-columns: 180px minmax(0, 1fr);
align-items: stretch;
}
.adminDocumentProcessingPromptCatalogSummaryMeta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingPromptFact {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, white, var(--bg-2) 12%);
gap: 8px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminDocumentProcessingPromptFactStatus {
align-content: start;
}
.adminDocumentProcessingPromptFactPath {
background: color-mix(in srgb, white, var(--bg) 8%);
}
.adminDocumentProcessingPromptChipSection {
gap: 8px;
display: grid;
}
.adminDocumentProcessingPromptChipRow {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminDocumentProcessingPromptChip {
border-color: color-mix(in srgb, var(--focus), transparent 82%);
background: color-mix(in srgb, var(--focus), white 97%);
min-height: 30px;
color: color-mix(in srgb, var(--fg), black 2%);
padding: 0 11px;
font-size: 12px;
}
.adminDocumentProcessingPromptEmpty {
color: color-mix(in srgb, var(--muted), var(--fg) 8%);
font-size: 14px;
}
.adminDocumentProcessingPromptWorkbench {
grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
gap: 16px;
display: grid;
}
.adminDocumentProcessingPromptEditorCard, .adminDocumentProcessingPromptAside {
gap: 14px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingPromptEditorCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: calc(var(--radius) + 5px);
background: linear-gradient(180deg, color-mix(in srgb, white, var(--bg-2) 20%), color-mix(in srgb, var(--bg-2), white 42%));
padding: 16px;
}
.adminDocumentProcessingPromptAside {
align-content: start;
}
.adminDocumentProcessingPromptCatalogTextarea {
min-height: 28rem;
font-family: var(--font-mono);
background: color-mix(in srgb, var(--bg), white 48%);
font-size: 13px;
line-height: 1.5;
}
.adminDocumentProcessingPromptCatalogActions {
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
display: flex;
}
.adminDocumentProcessingPromptCatalogNotice {
border: 1px solid color-mix(in srgb, var(--ok), transparent 46%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, var(--ok), white 94%);
color: color-mix(in srgb, var(--ok), var(--fg) 38%);
padding: 12px 14px;
}
.adminDocumentProcessingPromptCatalogIssues {
border: 1px solid color-mix(in srgb, var(--warn), transparent 58%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, var(--warn), white 95%);
gap: 8px;
padding: 14px 16px;
display: grid;
}
.adminDocumentProcessingPromptPreviewStack {
gap: 10px;
margin-top: 12px;
display: grid;
}
.adminDocumentProcessingPromptPreview {
border-radius: calc(var(--radius) + 2px);
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, white, var(--bg-2) 22%);
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: var(--font-mono);
margin: 0;
padding: 12px 14px;
font-size: 12px;
line-height: 1.5;
}
.adminDocumentProcessingTextBreak {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
@media (max-width: 1100px) {
.adminDocumentProcessingRuntimeGrid, .adminDocumentProcessingStackGrid, .adminDocumentProcessingSupportGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingPromptWorkbench, .adminDocumentProcessingStageGrid, .adminDocumentProcessingStageMetaGrid {
grid-template-columns: 1fr;
}
.adminDocumentProcessingStageCompareCellClassification, .adminDocumentProcessingStageCompareCellExtraction {
grid-column: auto;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellHeader {
order: 1;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellProvider {
order: 2;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellBaseUrl {
order: 3;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellModel {
order: 4;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellReasoning {
order: 5;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellTimeout {
order: 6;
}
.adminDocumentProcessingStageCompareCellClassification.adminDocumentProcessingStageCompareCellMeta {
order: 7;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellHeader {
order: 8;
margin-top: 14px;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellProvider {
order: 9;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellBaseUrl {
order: 10;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellModel {
order: 11;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellReasoning {
order: 12;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellTimeout {
order: 13;
}
.adminDocumentProcessingStageCompareCellExtraction.adminDocumentProcessingStageCompareCellMeta {
order: 14;
}
.adminDocumentProcessingPromptCatalogSummaryTop, .adminDocumentProcessingPromptCatalogSummaryMeta {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.adminDocumentProcessingHeaderActions {
justify-content: stretch;
width: 100%;
}
.adminDocumentProcessingHeaderActions .btn {
flex: 100%;
}
.adminDocumentProcessingOverviewCard {
min-height: auto;
}
.adminDocumentProcessingSurfaceBody {
padding: 16px;
}
.adminDocumentProcessingRuntimeGrid, .adminDocumentProcessingStackGrid, .adminDocumentProcessingProfileFields, .adminDocumentProcessingSupportGrid, .adminDocumentProcessingProfileSummary, .adminDocumentProcessingProfileSummaryTop, .adminDocumentProcessingProfileHead, .adminDocumentProcessingProfileActions, .adminDocumentProcessingStackRow, .adminDocumentProcessingStackRowActions {
grid-template-columns: 1fr;
}
.adminDocumentProcessingProfileSummaryActions, .adminDocumentProcessingActionLaneRight, .adminDocumentProcessingPrimaryActions, .adminDocumentProcessingSecretBlock .adminSettingsFormMeta {
text-align: left;
white-space: normal;
justify-content: flex-start;
}
.adminDocumentProcessingProfileInlineToggle {
min-height: 0;
}
.adminDocumentProcessingProfileSummary {
grid-template-areas: "top"
"pills"
"actions";
}
.adminDocumentProcessingRuntimeItemWide {
grid-column: auto;
}
.adminDocumentProcessingSecretFooter {
grid-template-columns: 1fr;
align-items: start;
}
.adminDocumentProcessingActionLane {
align-items: start;
}
}
.adminDocumentProcessingShell {
gap: 10px;
}
.adminDocumentProcessingSurface {
border-color: color-mix(in srgb, var(--stroke), transparent 10%);
box-shadow: none;
border-radius: 8px;
}
.adminDocumentProcessingSurfaceBody {
gap: 10px;
padding: 10px 12px;
}
.adminDocumentProcessingSection, .adminDocumentProcessingForm, .adminDocumentProcessingFormSection {
gap: 9px;
}
.adminDocumentProcessingSectionHead .adminSettingsFieldHint, .adminDocumentProcessingFormSection > .adminSettingsFieldHint {
display: none;
}
.adminDocumentProcessingOverviewGrid {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 8px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingOverviewCard, .adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isReady, .adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isNeutral, .adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isIncomplete, .adminDocumentProcessingOverviewCard.adminFinanceStatusCard.isWarning {
border: 0;
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
border-radius: 0;
min-height: 82px;
padding: 10px 12px;
}
.adminDocumentProcessingOverviewCard:last-child {
border-right: 0;
}
.adminDocumentProcessingOverviewTitle {
font-size: 13px;
line-height: 1.18;
}
.adminDocumentProcessingOverviewMeta {
font-size: 11.5px;
line-height: 1.32;
}
.adminDocumentProcessingOverviewCard .pill, .adminDocumentProcessingRuntimeItem .pill, .adminDocumentProcessingPillRow .pill, .adminDocumentProcessingPromptFact .pill {
min-height: 21px;
padding: 0 7px;
font-size: 10.5px;
line-height: 1;
}
.adminDocumentProcessingRuntimeGrid {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
border-radius: 0;
gap: 0;
overflow: hidden;
}
.adminDocumentProcessingRuntimeItem {
border: 0;
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
background: none;
border-radius: 0;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 3px;
min-height: 30px;
padding: 4px 8px;
display: grid;
}
.adminDocumentProcessingRuntimeGrid > .adminDocumentProcessingRuntimeItem:nth-child(3n), .adminDocumentProcessingRuntimeGrid > .adminDocumentProcessingRuntimeItem:last-child {
border-right: 0;
}
.adminDocumentProcessingRuntimeItem .label, .adminDocumentProcessingPromptFact .label, .adminDocumentProcessingLedgerFields .label, .adminDocumentProcessingActionsPanel .label {
letter-spacing: .052em;
font-size: 10.5px;
}
.adminDocumentProcessingRuntimeItem .label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminDocumentProcessingRuntimeItem strong, .adminDocumentProcessingRuntimeItem .adminDocumentProcessingTextBreak {
font-size: 12.5px;
line-height: 1.22;
}
.adminDocumentProcessingRuntimeValueStack {
flex-wrap: wrap;
align-items: center;
gap: 5px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingRuntimeItemWide {
grid-column: span 3;
}
.adminDocumentProcessingRuntimeGroups {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
grid-template-columns: minmax(0, .92fr) minmax(0, 1fr) minmax(360px, .9fr);
gap: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingRuntimeGroup {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 13%);
align-content: start;
min-width: 0;
display: grid;
}
.adminDocumentProcessingRuntimeGroup:last-child {
border-right: 0;
}
.adminDocumentProcessingRuntimeGroupTitle {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
min-width: 0;
color: color-mix(in srgb, var(--fg), var(--muted) 20%);
font-family: var(--font-condensed);
margin: 0;
padding: 8px 10px;
font-size: 13px;
font-weight: 800;
line-height: 1.15;
}
.adminDocumentProcessingRuntimeGroup > .adminDocumentProcessingRuntimeGrid {
border-top: 0;
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingRuntimeGroup .adminDocumentProcessingRuntimeItem {
border-right: 0;
grid-template-columns: minmax(150px, .44fr) minmax(0, 1fr);
min-height: 34px;
padding: 5px 10px;
}
.adminDocumentProcessingRuntimeGroup .adminDocumentProcessingRuntimeItem .label {
text-overflow: clip;
white-space: normal;
overflow: visible;
}
.adminDocumentProcessingRuntimeGroup .adminDocumentProcessingRuntimeItem:last-child {
border-bottom: 0;
}
.adminDocumentProcessingRuntimeGroupSchedule .adminDocumentProcessingRuntimeItem {
grid-template-columns: minmax(166px, .48fr) minmax(0, 1fr);
}
.adminDocumentProcessingRuntimeGroup .adminDocumentProcessingRuntimeItemWide {
grid-column: auto;
}
.adminDocumentProcessingDiagnostics {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
border-radius: 0;
margin-top: 0;
padding: 7px 0 0;
}
.adminDocumentProcessingDiagnostics > .adminCompactDisclosureSummary .muted {
display: none;
}
.adminDocumentProcessingPolicyActionGrid {
grid-template-columns: minmax(0, 1.42fr) minmax(280px, .58fr);
align-items: start;
gap: 10px;
display: grid;
}
.adminDocumentProcessingPolicyColumn {
gap: 8px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingLedgerFields {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
border-radius: 0;
grid-template-columns: minmax(0, 1fr);
gap: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingLedgerFields > .field {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: none;
border-radius: 0;
margin: 0;
padding: 7px 9px;
}
.adminDocumentProcessingLedgerFields > .field:last-child {
border-bottom: 0;
}
.adminDocumentProcessingLedgerFields .adminSettingsFieldHint, .adminDocumentProcessingActionsPanel .adminSettingsFieldHint {
margin: 1px 0 0;
font-size: 10.8px;
line-height: 1.25;
}
.adminDocumentProcessingLedgerFields .adminBooleanFieldRow, .adminDocumentProcessingLedgerFields .adminChoiceFieldOption {
min-height: 22px;
}
.adminDocumentProcessingLedgerFields .adminChoiceFieldGroup {
gap: 5px;
}
.adminDocumentProcessingLedgerFields .adminChoiceFieldOption {
grid-template-columns: 16px minmax(0, 1fr);
gap: 8px;
}
.adminDocumentProcessingLedgerFields .adminChoiceFieldOption input[type="radio"], .adminDocumentProcessingLedgerFields .adminBooleanFieldRow input[type="checkbox"] {
width: 16px;
height: 16px;
}
.adminDocumentProcessingLedgerFields .adminChoiceFieldHint, .adminDocumentProcessingLedgerFields .adminBooleanFieldHint, .adminDocumentProcessingLedgerFields > .field > .adminSettingsFieldHint {
display: none;
}
.adminDocumentProcessingLedgerFields .input, .adminDocumentProcessingSupportCard .input, .adminDocumentProcessingMailboxGrid .input {
min-height: 32px;
}
.adminDocumentProcessingLedgerFields .adminChoiceFieldLabel, .adminDocumentProcessingLedgerFields .adminBooleanFieldLabel {
font-size: 13px;
line-height: 1.22;
}
.adminDocumentProcessingActionsPanel {
border: 0;
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: none;
border-radius: 0;
gap: 7px;
min-width: 0;
padding: 0 0 0 12px;
display: grid;
}
.adminDocumentProcessingActionList {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: 0;
gap: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingActionRow {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: none;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-width: 0;
padding: 7px 9px;
display: grid;
}
.adminDocumentProcessingActionRow:last-child {
border-bottom: 0;
}
.adminDocumentProcessingActionRow strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingActionRow .btn {
white-space: nowrap;
min-height: 31px;
padding-inline: 10px;
}
.adminDocumentProcessingActionsPanel .adminDocumentProcessingActionRow {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminDocumentProcessingActionsPanel .adminDocumentProcessingActionRow .btn {
justify-content: center;
width: 100%;
}
.adminDocumentProcessingProbeAction {
gap: 9px;
}
.adminDocumentProcessingProbeAction .adminChoiceFieldGroup {
gap: 4px;
}
.adminDocumentProcessingProbeFields {
gap: 6px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProbeFields .field {
border: 0;
gap: 4px;
padding: 0;
}
.adminDocumentProcessingProbeResult {
gap: 7px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProbeSummaryGrid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.adminDocumentProcessingProbeSamples {
gap: 5px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingProbeSample {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 2px;
min-width: 0;
padding: 6px 0;
display: grid;
}
.adminDocumentProcessingProfileStackShell {
gap: 8px;
}
.adminDocumentProcessingProfileGrid {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
border-radius: 0;
gap: 0;
overflow: hidden;
}
.adminDocumentProcessingProfileCard {
border: 0;
border-radius: 0;
gap: 0;
padding: 0;
}
.adminDocumentProcessingProfileCard + .adminDocumentProcessingProfileCard {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingProfileSummary {
border-radius: 0;
grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr) auto;
grid-template-areas: "top pills actions";
align-items: center;
gap: 8px;
padding: 7px 9px;
}
.adminDocumentProcessingProfileSummary:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminDocumentProcessingProfileSummaryActions .btn, .adminDocumentProcessingStackRowActions .btn, .adminDocumentProcessingSecretActions .btn, .adminDocumentProcessingPrimaryActions .btn {
min-height: 31px;
padding-inline: 10px;
}
.adminDocumentProcessingProfileEditor {
background: color-mix(in srgb, var(--bg-2), white 58%);
padding: 9px;
}
.adminDocumentProcessingStackGrid {
gap: 10px;
}
.adminDocumentProcessingStackCard {
background: none;
border: 0;
border-radius: 0;
gap: 7px;
padding: 0;
}
.adminDocumentProcessingStackList {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
border-radius: 0;
gap: 0;
overflow: hidden;
}
.adminDocumentProcessingStackRow {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: 0;
min-height: 34px;
padding-block: 6px;
}
.adminDocumentProcessingStackRow:last-child {
border-bottom: 0;
}
.adminDocumentProcessingSupportGrid {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 8px 12px;
padding-top: 9px;
}
.adminDocumentProcessingSupportCard {
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
.adminDocumentProcessingMailboxGrid {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-template-columns: minmax(0, 1fr) minmax(330px, .76fr);
align-items: start;
gap: 10px;
margin-top: 2px;
padding-top: 10px;
display: grid;
}
.adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection {
background: none;
border: 0;
border-radius: 0;
align-self: start;
height: auto;
padding: 0;
}
.adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
padding-left: 10px;
}
.adminDocumentProcessingMailboxGrid .adminTemplateFieldsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.adminDocumentProcessingMailboxGrid .adminTemplateFieldFull {
grid-column: 1 / -1;
}
.adminDocumentProcessingMailboxGrid .adminChoiceFieldGroup {
flex-wrap: wrap;
gap: 7px 14px;
display: flex;
}
.adminDocumentProcessingSecretBlock {
gap: 8px;
}
.adminDocumentProcessingActionLane {
align-items: flex-start;
}
.adminDocumentProcessingSecretActionLane {
display: block;
}
.adminDocumentProcessingSecretBlock .adminSettingsFormMeta {
font-size: 12px;
}
.adminDocumentProcessingCredentialStatus {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
background: none;
border-radius: 0;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 32px;
padding: 6px 8px;
display: flex;
}
.adminDocumentProcessingPromptCatalogSummary {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: none;
border-radius: 0;
gap: 8px;
padding: 0 0 9px;
}
.adminDocumentProcessingPromptFact {
background: none;
border: 0;
border-radius: 0;
gap: 4px;
padding: 0;
}
.adminDocumentProcessingPromptChip {
min-height: 21px;
padding: 0 7px;
font-size: 10.5px;
}
.adminDocumentProcessingPromptWorkbench {
grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
align-items: start;
gap: 10px;
}
.adminDocumentProcessingPromptEditorCard, .adminDocumentProcessingPromptAside {
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
.adminDocumentProcessingPromptAside {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
align-content: start;
max-height: 320px;
padding-left: 10px;
overflow: auto;
}
.adminDocumentProcessingPromptCatalogTextarea {
background: #fff;
height: 200px;
min-height: 180px;
max-height: 220px;
font-size: 11px;
line-height: 1.35;
overflow: auto;
}
.adminDocumentProcessingPromptCatalogActions {
align-items: center;
}
.adminDocumentProcessingPromptCatalogActions .btn {
flex: none;
min-height: 32px;
}
.adminDocumentProcessingPromptPreviewDisclosure {
background: none;
border: 0;
padding: 0;
}
.adminDocumentProcessingPromptPreviewDisclosure > .adminCompactDisclosureSummary {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
padding: 0 0 7px;
}
.adminDocumentProcessingPromptPreviewStack {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 0;
margin-top: 7px;
}
.adminDocumentProcessingPromptPreview {
background: none;
border: 0;
border-radius: 0;
max-height: 110px;
padding: 0;
font-size: 10.5px;
line-height: 1.35;
overflow: auto;
}
.adminDocumentProcessingPromptPreviewStack .adminDocumentProcessingRuntimeItem {
border-right: 0;
grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr);
padding: 7px 0;
}
@media (max-width: 1180px) {
.adminDocumentProcessingOverviewGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingOverviewCard:nth-child(2n) {
border-right: 0;
}
.adminDocumentProcessingRuntimeGroups {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingRuntimeGroup {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingRuntimeGroup:last-child {
border-bottom: 0;
}
.adminDocumentProcessingPolicyActionGrid, .adminDocumentProcessingMailboxGrid, .adminDocumentProcessingPromptWorkbench {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingActionsPanel, .adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection, .adminDocumentProcessingPromptAside {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
padding-top: 10px;
padding-left: 0;
}
}
@media (max-width: 760px) {
.adminDocumentProcessingSurfaceBody {
padding: 12px;
}
.adminDocumentProcessingOverviewGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingOverviewCard, .adminDocumentProcessingOverviewCard:nth-child(2n) {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
min-height: auto;
}
.adminDocumentProcessingOverviewCard:last-child {
border-bottom: 0;
}
.adminDocumentProcessingRuntimeGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingRuntimeGrid > .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingRuntimeGrid > .adminDocumentProcessingRuntimeItem:nth-child(3n) {
border-right: 0;
}
.adminDocumentProcessingRuntimeItemWide {
grid-column: auto;
}
.adminDocumentProcessingRuntimeItem {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingRuntimeGroup .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingRuntimeGroupSchedule .adminDocumentProcessingRuntimeItem {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.adminDocumentProcessingRuntimeItem .label {
white-space: normal;
overflow: visible;
}
.adminDocumentProcessingProfileSummary, .adminDocumentProcessingActionRow {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingProfileSummary {
grid-template-areas: "top"
"pills"
"actions";
}
.adminDocumentProcessingActionRow .btn, .adminDocumentProcessingActionsPanel .btn, .adminDocumentProcessingSecretActions .btn, .adminDocumentProcessingPrimaryActions .btn {
width: 100%;
}
}
.adminFinanceStatusChipRow {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.adminFinanceCompactDetails, .adminCompactDisclosure {
gap: 10px;
display: grid;
}
.adminFinanceCompactDetailsSummary, .adminCompactDisclosureSummary {
cursor: pointer;
justify-content: space-between;
align-items: baseline;
gap: 10px;
list-style: none;
display: flex;
}
.adminFinanceCompactDetailsSummary::-webkit-details-marker {
display: none;
}
.adminCompactDisclosureSummary::-webkit-details-marker {
display: none;
}
.adminFinancePanelActionsSticky {
z-index: 2;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: color-mix(in srgb, white, var(--bg-2) 22%);
padding: 12px;
display: grid;
position: sticky;
bottom: 0;
box-shadow: 0 -8px 24px #2721140f;
}
.adminFinanceDecisionFooterActions {
justify-content: flex-end;
display: flex;
}
.adminFinanceReviewFormEnd {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
gap: 12px;
margin-top: 8px;
padding-top: 12px;
display: grid;
}
@media (max-width: 1080px) {
.adminFinanceModePicker, .adminFinanceIntakeGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceReviewHead, .adminFinanceReviewEvidenceRail, .adminFinanceReviewTabs {
position: static;
}
.adminFinanceReviewExperience, .adminFinanceReviewStructureRule, .adminFinanceReviewStructureRule.isEvidenceCollapsed, .adminFinanceReviewStructureRule.isEvidenceOpen, .adminFinanceReviewWorkspace, .adminFinanceReviewWorkspace.isEvidenceCollapsed, .adminFinanceReviewWorkspace.isEvidenceOpen, .adminFinanceReviewGrid, .adminFinanceReviewSummaryBar, .adminFinanceReviewSummaryGrid, .adminFinanceCorrectionValues, .adminFinanceExtractionFieldGrid, .adminFinanceAllocationSummaryGrid, .adminFinanceCostControlDiscrepancyGrid, .adminFinanceCostControlDiscrepancyValues, .adminFinanceCostControlSummaryLayout, .adminFinanceCostControlSummaryContextGrid, .adminFinanceCostControlFeedGrid, .adminDocumentProcessingRuntimeGrid, .adminFinanceUploadMetaGrid, .adminFinanceCostControlSourceRow {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceCostControlSourceAction {
justify-self: start;
}
.adminFinanceReviewEvidenceBody, .adminFinanceReviewWorkspaceBody {
max-height: none;
overflow: visible;
}
.adminFinanceReviewWorkspaceSplitter {
display: none;
}
.adminFinanceReviewHeadActions, .adminFinanceReviewTitleActions, .adminFinanceReviewRailModes {
justify-content: flex-start;
}
.adminFinanceReviewTitleActions {
width: 100%;
}
.adminFinanceReviewAutosaveStatus {
justify-content: space-between;
width: 100%;
}
.adminFinanceReviewStructureRuleSplitter {
display: none;
}
.adminFinanceUploadFooter {
flex-direction: column;
align-items: stretch;
}
.adminFinanceDecisionFooterActions {
justify-content: flex-start;
}
.adminFinanceDecisionFooterActions > .btn {
width: 100%;
}
.adminFinanceUploadActions, .adminFinanceUploadSubmitRow {
justify-content: flex-start;
width: 100%;
}
.adminFinanceCompareStrip {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
}
.adminFinanceCompareActions {
justify-content: flex-start;
display: flex;
}
.adminFinanceCompareDiffValues {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.adminFinanceReviewFieldPrimary, .adminDocumentProcessingRuntimeItemWide {
grid-column: auto;
}
.adminFinanceAllocationLineSeedCard {
flex-direction: column;
}
.adminFinanceSiteBulkTrayGrid {
grid-template-columns: 1fr;
}
.adminFinanceSiteBulkTrayHead {
flex-direction: column;
}
.adminFinanceFuelBulkTrayUtilities {
width: 100%;
}
.adminFinanceAllocationRowActions {
justify-content: flex-start;
}
.adminFinanceSupplierSuggestionHead, .adminFinanceSupplierDecisionHeader {
flex-direction: column;
align-items: flex-start;
}
.adminFinanceLinkedSupplierHead {
grid-template-columns: minmax(0, 1fr) auto;
}
.adminFinanceSupplierCreateGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container allocation-manual (max-width: 720px) {
.adminFinanceAllocationField.isTarget {
flex-basis: 88px;
}
.adminFinanceAllocationField.isSite {
flex-basis: 164px;
}
.adminFinanceAllocationField.isAmount {
flex-basis: 132px;
}
.adminFinanceAllocationField.isNote {
flex-basis: 136px;
}
.adminFinanceAllocationField.isAction {
flex-basis: auto;
}
.adminFinanceAllocationRowActions {
justify-content: flex-end;
}
}
@media (max-width: 720px) {
.adminFinanceSupplierSuggestionGrid, .adminFinanceSupplierSuggestionRow, .adminFinanceSupplierSuggestionRow .adminFinanceSupplierSuggestionHead {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceSupplierSuggestionStatusRail {
text-align: left;
grid-template-columns: auto auto;
justify-content: start;
place-items: center start;
min-height: 0;
}
.adminFinanceSupplierSuggestionRow .adminFinanceSupplierSuggestionActions {
flex-direction: row;
grid-area: auto / 1;
justify-content: flex-start;
justify-self: stretch;
min-width: 0;
}
.adminFinanceFilterRowThreeFields, .adminFinanceFilterRowDatesClear, .adminFinanceFilterRowSiteDatesClear, .adminFinanceFilterRowSiteClear {
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceCostControlActionField {
justify-self: stretch;
width: 100%;
max-width: none;
}
.adminFinanceDropzone {
text-align: left;
grid-template-columns: minmax(0, 1fr);
}
.adminFinanceDropzoneIcon {
width: 42px;
height: 42px;
}
.adminFinanceUploadQueueItem {
flex-direction: column;
align-items: flex-start;
}
.adminFinanceAcceptedAllocationTable {
min-width: 600px;
}
.adminFinanceAcceptedFuelTable {
min-width: 760px;
}
.adminFinanceAcceptedFuelDetailWrap {
padding-left: 14px;
}
}
.adminDirectoryActionsCell {
text-align: right;
width: 104px;
}
.adminDirectoryPrimaryCell {
align-items: center;
gap: 6px;
min-width: 0;
display: inline-flex;
}
.adminDirectoryPrimaryValue {
min-width: 0;
}
.adminDirectoryInlineStatusBadge {
flex-shrink: 0;
}
.adminVehicleModelCell {
min-width: 0;
}
.adminVehicleModelInline {
flex-wrap: wrap;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 100%;
display: inline-flex;
}
.adminVehicleModelName {
min-width: 0;
}
.adminVehicleTourismBadge {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
background: color-mix(in srgb, var(--focus), white 91%);
min-height: 20px;
color: color-mix(in srgb, var(--focus), black 16%);
white-space: nowrap;
border-radius: 999px;
align-items: center;
padding: 2px 7px;
font-size: 11px;
font-weight: 720;
line-height: 1;
display: inline-flex;
}
.adminVehicleItvListCell {
min-width: 132px;
}
.adminVehicleItvListStatus {
flex-direction: column;
align-items: flex-start;
gap: 5px;
min-width: 0;
display: inline-flex;
}
.adminVehicleItvListDate {
color: color-mix(in srgb, var(--fg), black 8%);
white-space: nowrap;
font-weight: 650;
}
.adminVehicleItvListBadge {
flex-shrink: 0;
}
.adminVehicleItvListBadge.pillStatusRejected {
color: color-mix(in srgb, var(--danger), black 18%);
}
.adminDirectoryRowActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
width: 100%;
display: inline-flex;
}
.adminPeriodActionsCell {
text-align: right;
min-width: 178px;
}
.adminPeriodRowActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
width: 100%;
display: inline-flex;
}
.adminPeriodDeleteBtn {
white-space: nowrap;
border-radius: 8px;
min-height: 40px;
}
.adminOperationsListPage .adminListTable th, .adminOperationsListPage .adminListTable td {
vertical-align: middle;
}
.adminSettingsBrowsePage .adminListTableWrap, .adminOperationsListPage .adminListTableWrap {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 12px;
}
.adminSettingsBrowsePage .adminListTable thead th, .adminOperationsListPage .adminListTable thead th {
color: color-mix(in srgb, var(--fg), black 8%);
font-size: var(--ops-font-table-header, 13px);
letter-spacing: .01em;
background: #f8fafc;
padding-top: 13px;
padding-bottom: 13px;
line-height: 1.2;
}
.adminOperationsListPage .adminListTable tbody td {
font-size: var(--ops-font-row, 13px);
}
.adminOperationsListPage, .adminTimesheetDetailReviewStrip {
--ops-font-table-header: 13px;
--ops-font-row: 13px;
--ops-font-primary: 13px;
--ops-font-meta: 12px;
--ops-font-chip: 12px;
--ops-font-micro: 11px;
--ops-font-action: 12px;
--timesheet-status-track: #e6ebf1;
--timesheet-status-neutral: #64748b;
--timesheet-status-amber: #d29421;
--timesheet-status-amber-text: #8a5714;
--timesheet-status-amber-bg: #fff8eb;
--timesheet-status-amber-border: #efd29d;
--timesheet-status-red: #cf4c55;
--timesheet-status-red-text: #9f2732;
--timesheet-status-red-bg: #fff5f6;
--timesheet-status-red-border: #efc8ce;
--timesheet-status-green: #2f8f61;
--timesheet-status-green-text: #206b45;
--timesheet-status-green-bg: #f2fbf6;
--timesheet-status-green-border: #bfdfcc;
--timesheet-status-blue: #326fd1;
--timesheet-status-blue-text: #2859ae;
--timesheet-status-blue-bg: #f2f7ff;
--timesheet-status-blue-border: #c6d7f5;
--timesheet-status-variance: #4f8fa3;
--timesheet-status-variance-text: #2f6473;
--timesheet-status-variance-extra-text: #0e7490;
}
.adminOperationsTableLink {
color: inherit;
text-underline-offset: 2px;
border-radius: 3px;
text-decoration: none;
}
.adminOperationsTableLink:hover {
text-decoration: underline;
}
.adminOperationsTableLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 68%);
outline: none;
text-decoration: underline;
}
.adminOperationsListPage .adminUsersNameLine {
font-size: var(--ops-font-primary, 13px);
line-height: 1.2;
}
.adminOperationsListPage .adminUsersNameMeta, .adminOperationsListPage .adminUsersNameMeta .muted {
font-size: var(--ops-font-meta, 12px);
line-height: 1.18;
}
.adminOperationsQuickActions {
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 6px;
display: flex;
}
.adminOperationsQuickActions .btn {
min-height: 32px;
font-size: var(--ops-font-action, 12px);
padding: 5px 10px !important;
}
.adminOperationsApprovalsPage {
gap: 18px;
}
.adminApprovalsListSurface {
overflow-anchor: none;
gap: 0;
padding-top: 4px;
display: grid;
position: relative;
}
.adminApprovalsResultsCard {
box-shadow: none;
background: none;
border: 0;
}
.adminApprovalsResultsBody {
gap: 12px;
padding: 0;
}
.adminApprovalsResultsBody .adminEmptyText {
margin-top: 0;
}
.adminApprovalsTableWrap {
overflow-anchor: none;
overflow: auto hidden;
}
.adminOperationsTimesheetsTable {
table-layout: fixed;
min-width: 1038px;
}
.adminTimesheetsMonthWorkbenchHeader {
justify-content: flex-start;
align-items: center;
gap: 12px;
margin-top: -2px;
display: flex;
}
.adminTimesheetsMonthNavCluster {
align-items: center;
gap: 12px;
min-width: 0;
display: flex;
}
.adminTimesheetsMonthPickerBar {
width: auto;
min-width: 0;
}
.adminTimesheetsMonthPickerBar .timesheetMonthNav {
grid-template-columns: 44px auto 44px;
gap: 8px;
width: auto;
}
.adminTimesheetsMonthPickerBar .timesheetMonthNavBtn {
color: var(--fg);
border: 1px solid var(--stroke) !important;
background: #fff !important;
border-radius: 10px !important;
}
.adminTimesheetsMonthPickerBar .timesheetMonthNavBtn:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), transparent 58%) !important;
background: color-mix(in srgb, var(--focus), white 94%) !important;
}
.adminTimesheetsMonthPickerBar .timesheetMonthNavTrigger {
letter-spacing: 0;
border-radius: 10px;
max-width: none;
padding: 0 8px;
font-size: 22px;
font-weight: 800;
}
.adminTimesheetsMonthPickerBar .timesheetMonthNavLabelChevron {
opacity: .62;
flex-basis: 8px;
width: 8px;
height: 8px;
}
.adminTimesheetsMonthNavButton {
width: 44px;
min-width: 44px;
height: 44px;
padding: 0 !important;
}
.adminTimesheetsMonthTitle {
min-height: 44px;
color: var(--fg);
letter-spacing: 0;
white-space: nowrap;
align-items: center;
gap: 11px;
font-size: 22px;
font-weight: 800;
display: inline-flex;
}
.adminTimesheetsMonthTitle svg {
color: var(--muted);
}
.adminTimesheetsTodayButton {
gap: 8px;
min-height: 44px;
padding: 0 16px !important;
}
.adminTimesheetsAttentionFilterField {
grid-area: period;
align-items: end;
min-width: 0;
display: flex;
}
.adminTimesheetsAttentionFilterField .adminListFilterFieldLabel {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminTimesheetsAttentionFilterButton {
border: 1px solid var(--stroke);
border-radius: var(--radius);
width: fit-content;
min-width: 218px;
max-width: 100%;
min-height: 44px;
color: var(--fg);
font: inherit;
cursor: pointer;
background: #fff;
justify-content: flex-start;
align-items: center;
gap: 9px;
padding: 0 14px;
font-weight: 700;
transition: border-color .15s, background .15s, color .15s;
display: inline-flex;
}
.adminTimesheetsAttentionFilterButton svg {
color: var(--timesheet-status-amber-text);
}
.adminTimesheetsAttentionFilterButton:hover {
border-color: var(--timesheet-status-amber-border);
background: var(--timesheet-status-amber-bg);
}
.adminTimesheetsAttentionFilterButton.isActive {
border-color: var(--timesheet-status-amber-border);
background: var(--timesheet-status-amber-bg);
color: var(--timesheet-status-amber-text);
}
.adminTimesheetsColUser {
width: 185px;
}
.adminTimesheetsColProgress {
width: 194px;
}
.adminTimesheetsColMissing {
width: 248px;
}
.adminTimesheetsColNonWorked {
width: 84px;
}
.adminTimesheetsColStatus {
width: 118px;
}
.adminTimesheetsColDocument {
width: 112px;
}
.adminTimesheetsColActions {
width: 96px;
}
.adminTimesheetsWorkerCell {
align-items: center;
gap: 12px;
min-width: 0;
display: flex;
}
.adminTimesheetsWorkerAvatar {
flex: none;
}
.adminTimesheetsMetricCell {
min-width: 0;
color: var(--fg);
align-content: center;
gap: 3px;
font-weight: 760;
display: grid;
}
.adminTimesheetsMetricCell .muted {
font-size: var(--ops-font-meta, 12px);
font-weight: 650;
}
.adminTimesheetsProgressCell {
--admin-timesheets-progress: 0%;
--admin-timesheets-report-progress: 0%;
min-width: 0;
max-width: 232px;
color: var(--fg);
grid-template-columns: auto minmax(34px, auto) minmax(78px, 1fr);
align-items: center;
gap: 4px 7px;
display: grid;
}
.adminTimesheetsCoverageLabel {
color: color-mix(in srgb, var(--muted), black 5%);
font-size: var(--ops-font-micro, 11px);
text-transform: uppercase;
white-space: nowrap;
font-weight: 790;
line-height: 1;
}
.adminTimesheetsTimeCoverageLabel {
color: color-mix(in srgb, var(--muted), black 10%);
}
.adminTimesheetsProgressPercent {
color: var(--fg);
white-space: nowrap;
font-weight: 800;
line-height: 1;
}
.adminTimesheetsProgressTrack {
background: var(--timesheet-status-track);
border-radius: 999px;
min-width: 0;
height: 7px;
position: relative;
overflow: hidden;
}
.adminTimesheetsProgressBar {
width: var(--admin-timesheets-progress);
border-radius: inherit;
background: var(--timesheet-status-amber);
min-width: 0;
position: absolute;
inset: 0 auto 0 0;
}
.adminTimesheetsProgressCell.isComplete .adminTimesheetsProgressBar {
background: var(--timesheet-status-green);
}
.adminTimesheetsProgressCell.isEmpty .adminTimesheetsProgressBar {
background: var(--timesheet-status-red);
}
.adminTimesheetsProgressCell.isNotDue .adminTimesheetsProgressBar {
background: var(--timesheet-status-neutral);
}
.adminTimesheetsProgressHours, .adminTimesheetsProgressDays {
font-size: var(--ops-font-meta, 12px);
white-space: nowrap;
grid-column: 1 / -1;
font-weight: 650;
line-height: 1.15;
}
.adminTimesheetsReportCoverage {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 36%);
grid-column: 1 / -1;
grid-template-columns: auto auto minmax(64px, 1fr);
align-items: center;
gap: 3px 6px;
min-width: 0;
margin-top: 5px;
padding-top: 6px;
display: grid;
}
.adminTimesheetsReportCoverageLabel {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
text-transform: uppercase;
font-weight: 780;
line-height: 1;
}
.adminTimesheetsReportCoveragePercent {
color: var(--timesheet-status-amber-text);
font-size: var(--ops-font-meta, 12px);
white-space: nowrap;
font-weight: 830;
line-height: 1;
}
.adminTimesheetsReportCoverageTrack {
background: var(--timesheet-status-track);
border-radius: 999px;
min-width: 0;
height: 5px;
position: relative;
overflow: hidden;
}
.adminTimesheetsReportCoverageTrack span {
width: var(--admin-timesheets-report-progress);
border-radius: inherit;
background: var(--timesheet-status-amber);
position: absolute;
inset: 0 auto 0 0;
}
.adminTimesheetsReportCoverage.isComplete .adminTimesheetsReportCoveragePercent {
color: var(--timesheet-status-green-text);
}
.adminTimesheetsReportCoverage.isComplete .adminTimesheetsReportCoverageTrack span {
background: var(--timesheet-status-green);
}
.adminTimesheetsReportCoverage.isMatched .adminTimesheetsReportCoveragePercent {
color: color-mix(in srgb, var(--timesheet-status-neutral), var(--fg) 12%);
}
.adminTimesheetsReportCoverage.isMatched .adminTimesheetsReportCoverageTrack span {
background: color-mix(in srgb, var(--timesheet-status-neutral), white 24%);
}
.adminTimesheetsReportCoverage.isExtra .adminTimesheetsReportCoveragePercent {
color: var(--timesheet-status-variance-text);
}
.adminTimesheetsReportCoverage.isExtra .adminTimesheetsReportCoverageTrack span {
background: var(--timesheet-status-variance);
}
.adminTimesheetsReportCoverage.isEmpty .adminTimesheetsReportCoveragePercent {
color: var(--timesheet-status-amber-text);
}
.adminTimesheetsReportCoverage.isEmpty .adminTimesheetsReportCoverageTrack span {
background: var(--timesheet-status-amber);
}
.adminTimesheetsReportCoverage.isNoBaseline {
grid-template-columns: auto minmax(0, 1fr);
}
.adminTimesheetsReportCoverageHours, .adminTimesheetsReportCoverageExtra {
font-size: var(--ops-font-micro, 11px);
white-space: nowrap;
grid-column: 1 / -1;
font-weight: 690;
line-height: 1.15;
}
.adminTimesheetsReportCoverageExtra {
color: var(--timesheet-status-variance-extra-text);
font-weight: 820;
}
.adminTimesheetsMissingPreview {
grid-template-columns: minmax(88px, 1fr) max-content;
justify-content: start;
align-items: center;
column-gap: 22px;
width: min(100%, 252px);
min-width: 0;
display: grid;
}
.adminTimesheetsMissingSummary {
gap: 4px;
width: fit-content;
min-width: 0;
max-width: 88px;
display: grid;
}
.adminTimesheetsMissingSummary .adminTimesheetsMissingCount {
width: 100%;
min-height: 0;
color: var(--muted);
font-size: var(--ops-font-primary, 13px);
white-space: normal;
font-weight: 820;
line-height: 1.08;
}
.adminTimesheetsMissingSummary .adminTimesheetsMissingCount svg {
color: currentColor;
flex: 0 0 15px;
width: 15px;
height: 15px;
}
.adminTimesheetsMissingSummary.isAttention .adminTimesheetsMissingCount {
color: var(--timesheet-status-red);
}
.adminTimesheetsMissingSummary.isAttention .adminTimesheetsMissingCount.isReportAttention {
color: var(--timesheet-status-amber-text);
}
.adminTimesheetsMissingSummary:not(.isAttention) .adminTimesheetsMissingCount, .adminTimesheetsMissingSummary:not(.isAttention) .adminTimesheetsMissingCount svg {
color: #64748b;
}
.adminTimesheetsMissingRanges {
min-width: 0;
color: color-mix(in srgb, var(--muted), black 8%);
font-size: var(--ops-font-meta, 12px);
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 720;
line-height: 1.15;
display: block;
overflow: hidden;
}
.adminTimesheetsWorkableStrip {
border-inline-start: 1px solid color-mix(in srgb, var(--border), transparent 18%);
align-content: center;
gap: 7px;
min-width: 108px;
padding-inline-start: 10px;
display: grid;
}
.adminTimesheetsWorkableRow {
gap: 4px;
display: grid;
}
.adminTimesheetsWorkableLabels, .adminTimesheetsWorkableDots {
grid-template-columns: repeat(5, 17px);
justify-content: start;
align-items: center;
gap: 5px;
display: grid;
}
.adminTimesheetsWorkableLabels {
color: color-mix(in srgb, var(--muted), black 12%);
font-size: var(--ops-font-micro, 11px);
text-align: center;
font-weight: 790;
line-height: 1;
}
.adminTimesheetsWorkableLabels span {
display: block;
}
.adminTimesheetsDayStateDot {
border-radius: 999px;
justify-content: center;
justify-self: center;
align-items: center;
width: 10px;
height: 10px;
font-size: 9px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.adminTimesheetsDayStateDot.isWorked {
background: var(--timesheet-status-green);
}
.adminTimesheetsDayStateDot.isMissing {
background: var(--timesheet-status-red);
}
.adminTimesheetsDayStateDot.isMissing.isMuted {
background: none;
border: 2px solid #64748b;
}
.adminTimesheetsDayStateDot.isWeekend {
background: #94a3b8;
border-radius: 999px;
width: 10px;
height: 2px;
}
.adminTimesheetsDayStateDot.isHoliday, .adminTimesheetsDayStateDot.isDayOff, .adminTimesheetsDayStateDot.isAbsence {
border: 1px solid var(--calendar-holiday-border);
background: var(--calendar-holiday-base);
width: 16px;
height: 16px;
}
.adminTimesheetsDayStateDot.isDayOff {
border-color: var(--calendar-day-off-border);
background: var(--calendar-day-off-base);
}
.adminTimesheetsDayStateDot.isAbsence {
border-color: var(--calendar-absence-border);
background: var(--calendar-absence-base);
}
.adminTimesheetsDayStateDot.isOutside {
background: none;
border: 2px solid #d1d5db;
width: 11px;
height: 11px;
}
.adminTimesheetsDayStateDot.isSplit {
--admin-timesheets-time-dot: color-mix(in srgb, var(--timesheet-status-neutral), white 18%);
--admin-timesheets-report-dot: color-mix(in srgb, var(--timesheet-status-neutral), white 18%);
width: 16px;
height: 16px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--border), transparent 22%);
background: none;
position: relative;
overflow: hidden;
}
.adminTimesheetsDayStateDot.isSplit:before, .adminTimesheetsDayStateDot.isSplit:after {
content: "";
position: absolute;
inset: 0;
}
.adminTimesheetsDayStateDot.isSplit:before {
background: var(--admin-timesheets-time-dot);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.adminTimesheetsDayStateDot.isSplit:after {
background: var(--admin-timesheets-report-dot);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.adminTimesheetsDayStateDot.isSplit.isTimeOk {
--admin-timesheets-time-dot: var(--timesheet-status-green);
}
.adminTimesheetsDayStateDot.isSplit.isTimeMissing {
--admin-timesheets-time-dot: var(--timesheet-status-red);
}
.adminTimesheetsDayStateDot.isSplit.isTimeReview {
--admin-timesheets-time-dot: var(--timesheet-status-amber);
}
.adminTimesheetsDayStateDot.isSplit.isReportOk {
--admin-timesheets-report-dot: var(--timesheet-status-green);
}
.adminTimesheetsDayStateDot.isSplit.isReportMissing {
--admin-timesheets-report-dot: var(--timesheet-status-red);
}
.adminTimesheetsDayStateDot.isSplit.isReportReview {
--admin-timesheets-report-dot: var(--timesheet-status-amber);
}
.adminTimesheetsMissingCount {
min-width: 0;
min-height: 28px;
color: var(--muted);
white-space: normal;
align-items: center;
gap: 7px;
font-weight: 720;
display: inline-flex;
}
.adminTimesheetsMissingCount span {
overflow-wrap: anywhere;
min-width: 0;
}
.adminTimesheetsMissingCount.isAttention {
color: var(--timesheet-status-red-text);
}
.adminTimesheetsMissingCount.isAttention svg {
color: var(--timesheet-status-red);
}
.adminTimesheetsDayLegend {
color: color-mix(in srgb, var(--muted), black 8%);
font-size: var(--ops-font-meta, 12px);
flex-wrap: wrap;
align-items: center;
gap: 18px;
padding: 12px 16px;
font-weight: 650;
display: flex;
}
.adminTimesheetsDayLegendItem {
white-space: nowrap;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminTimesheetsLegendAttentionIcon {
color: var(--timesheet-status-red);
}
.adminTimesheetsReviewPillPending, .adminTimesheetsReviewPillAttention {
border-color: var(--timesheet-status-amber-border);
background: var(--timesheet-status-amber-bg);
color: var(--timesheet-status-amber-text);
}
.adminTimesheetsReviewPillReady {
border-color: var(--timesheet-status-blue-border);
background: var(--timesheet-status-blue-bg);
color: var(--timesheet-status-blue-text);
}
.adminTimesheetsReviewPillNotDue {
color: #475569;
background: #f8fafc;
border-color: #64748b47;
}
.adminTimesheetsDocumentCell {
min-width: 0;
color: var(--fg);
font-size: var(--ops-font-primary, 13px);
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 2px 8px;
font-weight: 700;
display: grid;
}
.adminTimesheetsDocumentCell svg {
color: var(--timesheet-status-blue);
grid-row: span 2;
}
.adminTimesheetsDocumentCell.isSigned svg {
color: var(--timesheet-status-green);
}
.adminTimesheetsDocumentCell .muted {
font-size: var(--ops-font-meta, 12px);
font-weight: 650;
}
.adminOperationsReportsTable {
table-layout: fixed;
}
.adminReportsColDate {
width: 116px;
}
.adminReportsColUser {
width: 198px;
}
.adminReportsColStatus {
width: 162px;
}
.adminReportsColSite {
width: auto;
}
.adminReportsColWorked {
width: 112px;
}
.adminReportsColTickets {
width: 86px;
}
.adminReportsSiteStack {
gap: 1px;
min-width: 0;
display: grid;
}
.adminReportsWorkedStack {
align-content: start;
gap: 2px;
display: grid;
}
.adminReportsSiteCode, .adminReportsSiteAddress {
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.adminReportsSiteCode {
font-size: var(--ops-font-primary, 13px);
color: color-mix(in srgb, var(--fg), black 8%);
line-height: 1.05;
}
.adminReportsSiteAddress {
font-size: var(--ops-font-meta, 12px);
color: var(--muted);
line-height: 1.05;
}
.adminApprovalsTable {
table-layout: fixed;
}
.adminApprovalsTable th, .adminApprovalsTable td {
vertical-align: top;
}
.adminApprovalsResultsBody .adminApprovalsTable thead th {
color: color-mix(in srgb, var(--fg), black 8%);
font-size: var(--ops-font-table-header, 13px);
letter-spacing: .01em;
text-transform: none;
background: #f8fafc;
padding-top: 13px;
padding-bottom: 13px;
line-height: 1.2;
}
.adminListCardBody .adminApprovalsTable tbody td {
vertical-align: top;
padding-top: 10px;
padding-bottom: 10px;
}
.adminApprovalsColItem {
width: 170px;
}
.adminApprovalsColContext {
width: auto;
}
.adminApprovalsColUser {
width: 152px;
}
.adminApprovalsColState {
width: 162px;
}
.adminApprovalsColActionLane {
width: 198px;
}
.adminApprovalsSecondaryLine {
font-size: var(--ops-font-meta, 12px);
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 2px;
line-height: 1.18;
display: block;
overflow: hidden;
}
.adminApprovalsReferenceLink {
color: inherit;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 4px;
text-decoration: none;
display: block;
overflow: hidden;
}
.adminApprovalsItemPrimaryLine {
flex-wrap: nowrap;
align-items: center;
gap: 7px;
min-width: 0;
max-width: 100%;
display: flex;
}
.adminApprovalsTable .adminUsersNameLine, .adminApprovalsReferenceLink {
font-size: var(--ops-font-primary, 13px);
font-weight: 600;
line-height: 1.22;
}
.adminApprovalsItemPrimaryLine .adminApprovalsReferenceLink {
flex: 0 auto;
min-width: 0;
max-width: 100%;
}
.adminApprovalsReferenceLink:hover {
text-decoration: underline;
}
.adminApprovalsReferenceLink:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 68%);
outline: none;
text-decoration: underline;
}
.adminApprovalsInfoCell {
align-content: start;
gap: 1px;
min-width: 0;
display: grid;
}
.adminApprovalsInfoLine {
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
line-height: 1.22;
display: block;
overflow: hidden;
}
.adminApprovalsInfoLinePrimary {
color: color-mix(in srgb, var(--fg), black 8%);
font-size: var(--ops-font-primary, 13px);
font-weight: 500;
}
.adminApprovalsInfoLineSecondary {
color: var(--muted);
font-size: var(--ops-font-meta, 12px);
}
.adminApprovalsInfoLineWithTaskHint {
align-items: baseline;
display: flex;
overflow: visible;
}
.adminApprovalsInfoLineWithTargetHint {
align-items: center;
gap: 6px;
display: flex;
overflow: visible;
}
.adminApprovalsInfoLineWithInlineHints {
flex-wrap: wrap;
align-items: baseline;
gap: 0;
display: flex;
overflow: visible;
}
.adminTicketTargetHint {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: color-mix(in srgb, var(--bg), white 50%);
width: 18px;
height: 18px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
border-radius: 5px;
outline: none;
flex: none;
justify-content: center;
align-items: center;
display: inline-flex;
position: relative;
}
.adminTicketTargetHint.isSite {
color: color-mix(in srgb, var(--focus), black 10%);
background: color-mix(in srgb, var(--focus), white 88%);
border-color: color-mix(in srgb, var(--focus), transparent 72%);
}
.adminTicketTargetHint.isVehicle {
color: color-mix(in srgb, var(--ok), black 8%);
background: color-mix(in srgb, var(--ok), white 88%);
border-color: color-mix(in srgb, var(--ok), transparent 72%);
}
.adminTicketTargetHint.isOther {
color: color-mix(in srgb, var(--muted), var(--fg) 26%);
background: color-mix(in srgb, var(--bg), var(--fg) 4%);
}
.adminTicketTargetHintIcon {
stroke-width: 1.9px;
width: 12px;
height: 12px;
}
.adminApprovalsExpenseAmount {
font-variant-numeric: tabular-nums;
flex: none;
}
.adminApprovalsExpenseSeparator {
color: color-mix(in srgb, var(--muted), transparent 16%);
flex: none;
}
.adminApprovalsInfoPrimaryText {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminApprovalsInfoRouteHints {
align-items: baseline;
gap: .16em;
margin-left: .38em;
display: inline-flex;
}
.adminApprovalsTaskCountHint {
-webkit-text-decoration: underline dotted color-mix(in srgb, var(--muted), var(--fg) 20%);
text-decoration: underline dotted color-mix(in srgb, var(--muted), var(--fg) 20%);
text-underline-offset: 2px;
cursor: default;
}
.adminApprovalsTaskCountTooltip {
z-index: 120;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
min-width: 180px;
max-width: min(360px, 72vw);
max-height: 220px;
color: color-mix(in srgb, var(--fg), black 8%);
white-space: normal;
opacity: 1;
pointer-events: none;
background: #fff;
border-radius: 8px;
padding: 8px 10px;
font-size: 12px;
line-height: 1.35;
position: fixed;
overflow: auto;
box-shadow: 0 10px 24px #00000029;
}
.adminApprovalsTaskCountTooltipLine {
display: block;
}
.adminApprovalsInfoLineGhost {
visibility: hidden;
}
.adminApprovalsInfoLineAttachments {
align-items: center;
gap: 6px;
margin-top: 2px;
display: flex;
overflow: visible;
}
.adminApprovalsAttachmentStrip {
align-items: center;
gap: 3px;
min-width: 0;
display: inline-flex;
}
.adminApprovalsAttachmentCount {
font-size: var(--ops-font-meta, 12px);
color: color-mix(in srgb, var(--fg), black 8%);
flex: none;
min-width: 14px;
font-weight: 600;
}
.adminApprovalsAttachmentCountFallback {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 2%);
background: color-mix(in srgb, var(--bg), white 55%);
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
line-height: 1;
display: inline-flex;
}
.adminApprovalsAttachmentThumbLink {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
appearance: none;
cursor: pointer;
background: #fff;
border-radius: 3px;
flex: none;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
padding: 0;
display: inline-flex;
position: relative;
}
.adminApprovalsAttachmentThumbLink:hover {
border-color: color-mix(in srgb, var(--focus), transparent 25%);
}
.adminApprovalsAttachmentThumbLink.isPdfFallback {
background: none;
border-color: #0000;
border-radius: 0;
}
.adminApprovalsAttachmentThumbLink.isPdfFallback:hover {
border-color: #0000;
}
.adminApprovalsAttachmentThumb {
object-fit: cover;
border-radius: 2px;
width: 100%;
height: 100%;
display: block;
}
.adminApprovalsAttachmentThumbFrame {
width: 100%;
height: 100%;
display: block;
position: relative;
}
.adminApprovalsAttachmentThumbFrame.isDocumentPreview {
background: #fff;
}
.adminApprovalsAttachmentThumbDocumentPreview {
object-fit: cover;
object-position: top center;
background: #fff;
}
.adminApprovalsAttachmentThumbFallback {
background: linear-gradient(180deg, color-mix(in srgb, var(--bg), white 72%), color-mix(in srgb, var(--bg-2), white 18%));
color: color-mix(in srgb, var(--fg), var(--muted) 30%);
place-items: center;
display: grid;
position: relative;
}
.adminApprovalsAttachmentThumbFallback.isPDF {
color: #c7392f;
background: none;
}
.adminApprovalsAttachmentThumbFallback.isPDF .adminApprovalsAttachmentThumbBadge {
display: none;
}
.adminApprovalsAttachmentThumbFallback.isPDF .adminApprovalsAttachmentThumbFallbackIcon {
width: 18px;
height: 18px;
}
.adminApprovalsAttachmentThumbBadge {
background: color-mix(in srgb, var(--bg), white 74%);
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 11px;
height: 8px;
padding: 0 2px;
font-size: 6px;
font-weight: 700;
line-height: 1;
display: inline-flex;
position: absolute;
top: 1px;
left: 1px;
}
.adminApprovalsAttachmentThumbBadge.isDocumentPreview {
color: #fff;
background: #ca453b;
border-color: #9f241bc7;
}
.adminApprovalsAttachmentThumbFallbackIcon {
width: 11px;
height: 11px;
display: block;
}
.adminApprovalsAttachmentPreviewTrigger {
border-radius: 2px;
outline: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: inline-flex;
overflow: hidden;
}
.adminApprovalsAttachmentPreviewTooltip {
z-index: 120;
width: auto;
height: auto;
box-shadow: none;
pointer-events: none;
background: none;
border: 0;
padding: 0;
position: fixed;
overflow: visible;
}
.adminApprovalsAttachmentPreviewTooltip.isDocumentPreview {
width: auto;
height: auto;
padding: 0;
}
.adminApprovalsAttachmentPreviewTooltipLine {
width: max-content;
max-width: calc(100vw - 20px);
line-height: 0;
display: block;
}
.adminApprovalsAttachmentPreviewFrame {
max-width: calc(100vw - 20px);
box-shadow: 0 10px 28px color-mix(in srgb, var(--fg), transparent 84%);
border-radius: 8px;
display: inline-block;
position: relative;
overflow: hidden;
}
.adminApprovalsAttachmentPreviewFrame.isDocumentPreview {
max-width: calc(100vw - 20px);
display: inline-block;
}
.adminApprovalsAttachmentPreviewImage {
object-fit: contain;
border-radius: inherit;
background: none;
width: auto;
max-width: min(300px, 100vw - 20px);
height: auto;
max-height: min(220px, 100svh - 24px);
display: block;
}
.adminApprovalsAttachmentPreviewImage.isDocumentPreview {
border-radius: inherit;
max-width: min(336px, 100vw - 20px);
max-height: min(432px, 100svh - 24px);
box-shadow: none;
}
.adminApprovalsAttachmentHoverLoading {
background: linear-gradient(90deg,
color-mix(in srgb, var(--bg), var(--fg) 5%) 0%,
color-mix(in srgb, var(--bg), var(--fg) 11%) 50%,
color-mix(in srgb, var(--bg), var(--fg) 5%) 100%);
background-size: 300px 220px;
border-radius: 4px;
width: 100%;
height: 100%;
animation: 1.1s linear infinite adminApprovalsAttachmentShimmer;
display: block;
}
@keyframes adminApprovalsAttachmentShimmer {
0% {
background-position: -300px 0;
}
100% {
background-position: 300px 0;
}
}
.adminApprovalsAttachmentMore {
text-align: center;
min-width: 20px;
color: var(--muted);
flex: none;
font-size: 11px;
line-height: 1;
}
.adminApprovalsAttachmentLoadingDot {
background: color-mix(in srgb, var(--focus), var(--bg) 45%);
opacity: .7;
border-radius: 999px;
flex: none;
width: 6px;
height: 6px;
}
.adminApprovalsStateCell, .adminOperationsReviewStatusCell {
align-content: start;
justify-items: start;
gap: 4px;
min-width: 0;
display: grid;
}
.adminApprovalsStateCell .pill, .adminOperationsReviewStatusCell .pill {
white-space: nowrap;
min-height: 28px;
padding: 0 10px;
font-size: 12px;
line-height: 1.1;
}
.adminApprovalsStateTime, .adminOperationsReviewStatusTime {
white-space: nowrap;
text-overflow: ellipsis;
font-size: clamp(10px, .69vw, 11px);
line-height: 1.05;
overflow: hidden;
}
.adminOperationsReviewDocumentState {
max-width: 100%;
font-size: 11px;
line-height: 1.15;
}
.adminApprovalsRowFocused {
animation: 2.2s ease-out adminApprovalsRowFocusFade;
}
.adminApprovalsRowFocused:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 32%);
outline-offset: -2px;
}
.adminOperationsReviewRowFocused {
animation: 2.2s ease-out adminApprovalsRowFocusFade;
}
.adminOperationsReviewRowFocused:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 32%);
outline-offset: -2px;
}
@keyframes adminApprovalsRowFocusFade {
0% {
background: color-mix(in srgb, var(--focus), white 82%);
}
100% {
background: none;
}
}
.adminApprovalsActionLane {
grid-template-columns: 68px 42px 42px 32px;
justify-content: end;
align-items: center;
gap: 0 4px;
margin-left: auto;
display: grid;
}
.adminApprovalsActionLane .btn {
flex: none;
}
.adminApprovalsActionSlot {
justify-content: center;
align-items: flex-start;
min-height: 32px;
display: inline-flex;
}
.adminApprovalsActionSlotView {
justify-content: flex-start;
}
.adminApprovalsActionSlotMenu {
justify-content: center;
}
.adminApprovalsQuickActionViewBtn {
white-space: nowrap;
border-radius: 6px;
justify-content: center;
width: 68px;
min-width: 68px;
font-size: 12px;
font-weight: 700;
min-height: 32px !important;
padding: 0 8px !important;
}
.adminApprovalsQuickActionBtn {
border-radius: 6px;
width: 42px;
min-width: 42px;
min-height: 32px !important;
padding: 0 !important;
}
.adminApprovalsQuickActionTextBtn {
white-space: nowrap;
border-radius: 6px;
justify-content: center;
width: 100%;
min-width: 98px;
font-weight: 700;
min-height: 32px !important;
padding: 0 12px !important;
}
.adminApprovalsQuickActionIcon {
stroke: currentColor;
width: 16px;
height: 16px;
}
.adminApprovalsQuickActionRevokeBtn {
width: 30px !important;
min-width: 30px !important;
padding: 0 !important;
}
.adminApprovalsQuickActionPaidBtn {
letter-spacing: 0;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
width: 42px !important;
min-width: 42px !important;
min-height: 32px !important;
padding: 0 4px !important;
}
.adminApprovalsActionPlaceholder {
width: 42px;
height: 32px;
display: inline-block;
}
.adminApprovalsMenuPlaceholder {
width: 32px;
height: 32px;
display: inline-block;
}
.adminApprovalsActionSrOnly {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminApprovalsPager {
overflow-anchor: none;
padding-top: 8px;
}
.adminApprovalsLoadingOverlay {
pointer-events: none;
background: none;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
inset: 0;
}
.adminApprovalsLoadingText {
border: 1px solid color-mix(in srgb, var(--stroke), var(--bg) 12%);
background: color-mix(in srgb, var(--bg), var(--bg-2) 35%);
border-radius: 6px;
padding: 4px 10px;
}
.adminApprovalsPlaceholderRow {
pointer-events: none;
}
.adminApprovalsPlaceholderRow td {
border-bottom-color: #0000 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.adminApprovalsPlaceholderText {
visibility: hidden;
-webkit-user-select: none;
user-select: none;
}
.adminOperationsActionsCell {
text-align: right;
}
.adminOperationsActionsCell .adminDirectoryRowActions {
justify-content: flex-end;
}
.adminOperationsListPage .adminListTable .adminListRow:hover, .adminOperationsListPage .adminListTable .adminListRow:focus-within {
background: none;
}
.adminOperationsListPage .adminListTable .adminListRow:hover > td, .adminOperationsListPage .adminListTable .adminListRow:focus-within > td {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminOperationsListPage .adminOperationsActionsCell, .adminOperationsListPage .adminGeoColActions {
z-index: 2;
background: #fff;
position: sticky;
right: 0;
}
.adminOperationsListPage th.adminOperationsActionsCell, .adminOperationsListPage th.adminGeoColActions {
z-index: 3;
background: #f8fafc;
}
:is(.adminOperationsListPage .adminOperationsActionsCell:has(.adminUsersMenuFloating), .adminOperationsListPage .adminGeoColActions:has(.adminUsersMenuFloating)) {
z-index: 8;
}
.adminListCardBody .adminApprovalsTable tbody td.adminOperationsActionsCell {
vertical-align: middle;
}
.adminOperationsReviewActionsCell {
text-align: right;
width: 188px;
min-width: 188px;
}
.adminOperationsListPage .adminOperationsReviewActionsHeader, .adminOperationsListPage .adminOperationsReviewActionsCell {
z-index: 2;
background: #fff;
position: sticky;
right: 0;
}
.adminOperationsListPage .adminOperationsReviewActionsHeader {
z-index: 3;
background: #f8fafc;
}
.adminOperationsListPage .adminOperationsReviewActionsCell:has(.adminUsersMenuFloating) {
z-index: 8;
}
.adminOperationsReviewActionsCell .adminDirectoryRowActions.adminOperationsQuickActions {
flex-wrap: nowrap;
justify-content: flex-end;
gap: 8px;
}
.adminOperationsReviewActionsCell .adminUsersMenuTrigger {
border-radius: 8px;
width: 32px;
min-width: 32px;
min-height: 32px;
}
.adminOperationsReviewActionsCell .adminApprovalsQuickActionTextBtn {
flex: none;
width: auto;
min-width: 98px;
}
.adminOperationsReviewPaidBtn {
width: 56px;
min-width: 56px;
font-size: var(--ops-font-action, 12px);
white-space: nowrap;
border-radius: 8px;
flex: none;
justify-content: center;
font-weight: 700;
min-height: 32px !important;
padding: 0 8px !important;
}
.adminTicketsUserCell .adminUsersNameLine, .adminTicketsUserCell .adminUsersNameMeta .muted {
white-space: normal;
text-overflow: clip;
overflow: visible;
}
.adminOperationsTicketsTable {
table-layout: fixed;
min-width: 1080px;
}
.adminTicketsColDate {
width: 116px;
}
.adminTicketsColUser {
width: 188px;
}
.adminTicketsColStatus {
width: 162px;
}
.adminTicketsColType {
width: 112px;
}
.adminTicketsColSite {
width: 196px;
}
.adminTicketsColMetadata {
width: auto;
}
.adminTicketsColActions {
width: 116px;
}
.adminTicketsSiteCell, .adminTicketsSiteStack {
min-width: 0;
}
.adminTicketsMetadataCell, .adminTicketsSiteCell {
max-width: 0;
}
.adminTicketsMetadataStack {
align-content: start;
gap: 2px;
min-width: 0;
display: grid;
}
.adminTicketsMetadataHintLine {
min-width: 0;
}
.adminTicketsMetadataRouteLine {
align-items: baseline;
gap: .18em;
display: flex;
overflow: visible;
}
.adminOperationsTimesheetsTable .adminOperationsReviewActionsCell, .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader, .adminOperationsReportsTable .adminOperationsReviewActionsCell, .adminOperationsReportsTable .adminOperationsReviewActionsHeader, .adminOperationsTicketsTable .adminOperationsReviewActionsCell, .adminOperationsTicketsTable .adminOperationsReviewActionsHeader {
width: 116px;
min-width: 116px;
}
.adminOperationsTimesheetsTable .adminOperationsReviewActionsCell, .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader {
width: 96px;
min-width: 96px;
}
.adminOperationsTimesheetsTable .adminDirectoryRowActions.adminOperationsQuickActions, .adminOperationsReportsTable .adminDirectoryRowActions.adminOperationsQuickActions, .adminOperationsTicketsTable .adminDirectoryRowActions.adminOperationsQuickActions {
gap: 6px;
}
.adminOperationsTimesheetsTable .adminApprovalsQuickActionViewBtn, .adminOperationsReportsTable .adminApprovalsQuickActionViewBtn, .adminOperationsTicketsTable .adminApprovalsQuickActionViewBtn {
width: 60px;
min-width: 60px;
padding: 0 6px !important;
}
.adminOperationsTimesheetsTable .adminApprovalsQuickActionViewBtn {
width: 56px;
min-width: 56px;
}
.adminTicketsClampText {
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
@media (max-width: 1360px) {
.adminTimesheetsColUser {
width: 185px;
}
.adminTimesheetsColProgress {
width: 194px;
}
.adminTimesheetsColMissing {
width: 248px;
}
.adminTimesheetsColNonWorked {
width: 84px;
}
.adminTimesheetsColStatus, .adminTimesheetsColDocument {
width: 112px;
}
.adminTimesheetsColActions {
width: 96px;
}
.adminTicketsColUser {
width: 170px;
}
.adminTicketsColStatus {
width: 150px;
}
.adminTicketsColType {
width: 102px;
}
.adminTicketsColSite {
width: 176px;
}
.adminOperationsTimesheetsTable .adminOperationsReviewActionsCell, .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader, .adminOperationsReportsTable .adminOperationsReviewActionsCell, .adminOperationsReportsTable .adminOperationsReviewActionsHeader, .adminOperationsTicketsTable .adminOperationsReviewActionsCell, .adminOperationsTicketsTable .adminOperationsReviewActionsHeader {
width: 108px;
min-width: 108px;
}
.adminOperationsTimesheetsTable .adminOperationsReviewActionsCell, .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader {
width: 96px;
min-width: 96px;
}
.adminOperationsListPage .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader, .adminOperationsListPage .adminOperationsTimesheetsTable .adminOperationsReviewActionsCell {
box-shadow: none;
position: static;
}
.adminOperationsTimesheetsTable .adminApprovalsQuickActionViewBtn, .adminOperationsReportsTable .adminApprovalsQuickActionViewBtn, .adminOperationsTicketsTable .adminApprovalsQuickActionViewBtn {
width: 56px;
min-width: 56px;
font-size: 11px;
}
.adminDayOffColDate {
width: 160px;
}
.adminDayOffColUser {
width: 176px;
}
.adminDayOffColActions {
width: 184px;
}
.adminOperationsDayOffTable .adminOperationsReviewActionsCell, .adminOperationsDayOffTable .adminOperationsReviewActionsHeader {
width: 184px;
min-width: 184px;
}
}
@media (max-width: 1220px) {
.adminTimesheetsColUser {
width: 175px;
}
.adminTimesheetsColProgress {
width: 188px;
}
.adminTimesheetsColMissing {
width: 238px;
}
.adminTimesheetsColNonWorked {
width: 82px;
}
.adminTimesheetsColStatus, .adminTimesheetsColDocument {
width: 106px;
}
.adminTimesheetsColActions {
width: 92px;
}
.adminTicketsColDate {
width: 108px;
}
.adminTicketsColUser {
width: 156px;
}
.adminTicketsColStatus {
width: 138px;
}
.adminTicketsColType {
width: 92px;
}
.adminTicketsColSite {
width: 160px;
}
.adminOperationsTimesheetsTable .adminOperationsReviewActionsCell, .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader, .adminOperationsReportsTable .adminOperationsReviewActionsCell, .adminOperationsReportsTable .adminOperationsReviewActionsHeader, .adminOperationsTicketsTable .adminOperationsReviewActionsCell, .adminOperationsTicketsTable .adminOperationsReviewActionsHeader {
width: 102px;
min-width: 102px;
}
.adminOperationsTimesheetsTable .adminOperationsReviewActionsCell, .adminOperationsTimesheetsTable .adminOperationsReviewActionsHeader {
width: 92px;
min-width: 92px;
}
.adminOperationsTimesheetsTable .adminApprovalsQuickActionViewBtn, .adminOperationsReportsTable .adminApprovalsQuickActionViewBtn, .adminOperationsTicketsTable .adminApprovalsQuickActionViewBtn {
width: 52px;
min-width: 52px;
}
.adminDayOffColDate {
width: 150px;
}
.adminDayOffColUser {
width: 164px;
}
.adminDayOffColActions {
width: 170px;
}
.adminOperationsDayOffTable .adminOperationsReviewActionsCell, .adminOperationsDayOffTable .adminOperationsReviewActionsHeader {
width: 170px;
min-width: 170px;
}
}
.adminOperationsDayOffTable {
table-layout: fixed;
}
.adminDayOffColDate {
width: 170px;
}
.adminDayOffColUser {
width: 188px;
}
.adminDayOffColStatus {
width: auto;
}
.adminDayOffColActions {
width: 188px;
}
.adminOperationsDayOffTable .adminOperationsReviewActionsCell, .adminOperationsDayOffTable .adminOperationsReviewActionsHeader {
width: 188px;
min-width: 188px;
}
.adminOperationsGeoTable {
table-layout: fixed;
min-width: 980px;
}
.adminOperationsGeoPage {
gap: 12px;
}
.adminOperationsGeoResultsCard {
box-shadow: none;
background: none;
border: 0;
}
.adminOperationsGeoResultsBody {
gap: 12px;
padding: 0;
}
.adminOperationsGeoResultsBody > .adminEmptyText {
margin-top: 0;
}
.adminOperationsGeoResultsBody .adminOperationsGeoTable thead th {
color: color-mix(in srgb, var(--fg), black 8%);
font-size: var(--ops-font-table-header, 13px);
letter-spacing: .01em;
text-transform: none;
background: #f8fafc;
padding-top: 13px;
padding-bottom: 13px;
line-height: 1.2;
}
.adminGeoColDate {
width: 124px;
}
.adminGeoColWorkers {
width: 170px;
}
.adminGeoColWorked, .adminGeoColOffsite {
width: 118px;
}
.adminGeoColEvents {
width: 124px;
}
.adminGeoColSites {
width: auto;
min-width: 0;
}
.adminGeoColActions {
width: 188px;
}
.adminGeoSortHeaderBtn {
max-width: 100%;
font: inherit;
color: inherit;
cursor: pointer;
white-space: nowrap;
background: none;
border: 0;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
font-weight: 700;
display: inline-flex;
}
.adminGeoSortHeaderBtn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 30%);
outline-offset: 2px;
border-radius: 4px;
}
.adminGeoSortHeaderIcon {
border-left: 4px solid #0000;
border-right: 4px solid #0000;
border-top: 6px solid color-mix(in srgb, var(--fg), transparent 36%);
opacity: .62;
flex: none;
block-size: 0;
inline-size: 0;
transform: translateY(1px);
}
.adminGeoSortHeaderIcon.isActive {
border-top-color: color-mix(in srgb, var(--fg), transparent 8%);
opacity: 1;
}
.adminGeoSortHeaderIcon.isAsc {
transform: rotate(180deg)translateY(1px);
}
.adminGeoWorkersMain {
font-weight: 700;
display: block;
}
.adminGeoWorkersSub {
font-size: var(--ops-font-meta, 12px);
margin-top: 2px;
display: block;
}
.adminGeoWorkersSubAlert {
color: color-mix(in srgb, var(--danger), black 18%);
font-weight: 600;
}
.adminGeoMetricWarn {
color: color-mix(in srgb, var(--danger), black 18%);
font-weight: 700;
}
.adminGeoMetricSub {
font-size: var(--ops-font-meta, 12px);
margin-top: 2px;
font-weight: 600;
display: block;
}
.adminGeoSitesLine {
white-space: nowrap;
text-overflow: ellipsis;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
display: flex;
overflow: hidden;
}
.adminGeoSitesEmpty {
display: block;
}
.adminGeoSitesSep {
color: color-mix(in srgb, var(--muted), transparent 14%);
}
.adminGeoSiteCodeLink {
color: inherit;
border-bottom: 1px dotted #0000;
text-decoration: none;
}
.adminGeoSiteCodeLink:hover {
border-bottom-color: color-mix(in srgb, var(--fg), transparent 48%);
}
.adminGeoSiteCodeLink:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 30%);
outline-offset: 2px;
border-radius: 4px;
}
.adminGeoSiteOverflowBtn {
font: inherit;
font-size: var(--ops-font-primary, 13px);
color: color-mix(in srgb, var(--muted), black 18%);
cursor: pointer;
background: none;
border: 0;
margin: 0;
padding: 0;
line-height: 1;
}
.adminGeoSiteOverflowBtn:hover {
color: inherit;
}
.adminGeoSiteOverflowBtn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 30%);
outline-offset: 2px;
border-radius: 4px;
}
.adminGeoDetailRow td {
background: #fff;
}
.adminGeoDetailPanel {
gap: 12px;
padding: 8px 0 4px;
display: grid;
}
.adminGeoDetailSummaryGrid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
display: grid;
}
.adminGeoDetailSummaryStat {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: #fff;
border-radius: 8px;
gap: 2px;
padding: 8px 10px;
display: grid;
}
.adminGeoDetailSummaryValue {
font-size: 14px;
font-weight: 700;
line-height: 1.1;
}
.adminGeoDetailSummaryLabel {
font-size: var(--ops-font-micro, 11px);
text-transform: uppercase;
letter-spacing: .02em;
color: color-mix(in srgb, var(--muted), var(--fg) 14%);
line-height: 1.1;
}
.adminGeoDetailLayout {
grid-template-columns: 1fr;
gap: 10px;
display: grid;
}
.adminGeoPlaybackPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: #fff;
border-radius: 8px;
gap: 8px;
padding: 10px 12px;
display: grid;
}
.adminGeoPlaybackHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.adminGeoPlaybackTitle {
font-size: var(--ops-font-primary, 13px);
margin: 0;
font-weight: 700;
line-height: 1.2;
}
.adminGeoPlaybackMeta {
font-size: var(--ops-font-meta, 12px);
margin: 0;
}
.adminGeoPlaybackTransport {
align-items: center;
gap: 4px;
display: inline-flex;
}
.adminGeoPlaybackTransportBtn {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 2%);
background: color-mix(in srgb, var(--bg), white 70%);
width: 26px;
min-width: 26px;
height: 26px;
color: color-mix(in srgb, var(--fg), black 8%);
cursor: pointer;
border-radius: 6px;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.adminGeoPlaybackTransportBtn:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), transparent 28%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminGeoPlaybackTransportBtn:disabled {
opacity: .45;
cursor: not-allowed;
}
.adminGeoPlaybackTransportBtnMain {
border-color: color-mix(in srgb, var(--focus), transparent 25%);
background: color-mix(in srgb, var(--focus), white 91%);
border-radius: 7px;
width: 28px;
min-width: 28px;
height: 28px;
}
.adminGeoPlaybackSlider {
block-size: 20px;
inline-size: 100%;
accent-color: var(--focus);
}
.adminGeoPlaybackCurrentTime {
font-size: var(--ops-font-meta, 12px);
white-space: nowrap;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
line-height: 1;
}
.adminGeoPlaybackWindow {
font-size: var(--ops-font-micro, 11px);
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
display: grid;
}
.adminGeoPlaybackSnapshot {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.adminGeoPlaybackSnapshotChip {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 60%);
min-height: 22px;
font-size: var(--ops-font-meta, 12px);
cursor: pointer;
appearance: none;
color: inherit;
border-radius: 999px;
align-items: center;
gap: 4px;
padding: 2px 8px;
line-height: 1.2;
display: inline-flex;
}
.adminGeoPlaybackSnapshotChip strong {
font-weight: 700;
}
.adminGeoPlaybackSnapshotChipInactive {
opacity: .48;
border-style: dashed;
}
.adminGeoPlaybackSnapshotChipWarn {
border-color: color-mix(in srgb, var(--danger), transparent 52%);
background: color-mix(in srgb, var(--danger), white 93%);
color: color-mix(in srgb, var(--danger), black 18%);
}
.adminGeoPlaybackMapShell {
z-index: 0;
isolation: isolate;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 30%);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.adminGeoPlaybackWheelHint {
z-index: 530;
}
.adminGeoPlaybackMapCanvas {
min-block-size: 300px;
inline-size: 100%;
}
.adminGeoPlaybackMapCanvas .leaflet-container {
block-size: 300px;
inline-size: 100%;
}
.adminGeoPlaybackMapCanvas .leaflet-control-attribution {
font-size: 10px;
}
.adminGeoPlaybackMapCanvas .leaflet-attribution-flag {
display: none !important;
}
.adminGeoPlaybackMarkerIcon {
place-items: center;
background: none !important;
border: 0 !important;
display: grid !important;
}
.adminGeoPlaybackMarkerPin {
--cm-user-avatar-ring-width: 2px;
--cm-user-avatar-ring-color: var(--geo-pin, var(--focus));
box-shadow: 0 0 0 2px var(--geo-pin, var(--focus)),
0 1px 4px color-mix(in srgb, var(--fg), transparent 72%);
}
.adminGeoPlaybackPopup p {
margin: 0 0 4px;
font-size: 12px;
line-height: 1.25;
}
.adminGeoPlaybackPopup p:last-child {
margin-bottom: 0;
}
.adminGeoPlaybackPopupTitle {
font-weight: 700;
font-size: 13px !important;
}
.adminGeoPlaybackPopupUser {
color: var(--muted);
}
.adminGeoWorkersPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: #fff;
border-radius: 8px;
gap: 10px;
padding: 12px 14px;
display: grid;
}
.adminGeoWorkersPanelHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
display: flex;
}
.adminGeoWorkersPanelHeaderMain {
gap: 2px;
display: grid;
}
.adminGeoWorkersPanelTitle {
font-size: var(--ops-font-primary, 13px);
margin: 0;
font-weight: 700;
line-height: 1.2;
}
.adminGeoWorkersPanelHint {
font-size: var(--ops-font-meta, 12px);
margin: 0;
}
.adminGeoWorkersToggleBtn {
font-size: var(--ops-font-action, 12px);
border-radius: 8px;
font-weight: 700;
min-height: 28px !important;
padding: 0 10px !important;
}
.adminGeoWorkersTableWrap {
overflow: visible;
}
.adminGeoWorkersTable {
table-layout: fixed;
border-collapse: collapse;
inline-size: 100%;
font-size: var(--ops-font-primary, 13px);
background: #fff;
}
.adminGeoWorkersColUser {
width: 210px;
}
.adminGeoWorkersColStatus {
width: 116px;
}
.adminGeoWorkersColTime {
width: 122px;
}
.adminGeoWorkersColEvents {
width: 156px;
}
.adminGeoWorkersColSites {
width: 220px;
}
.adminGeoWorkersColAnomalies {
width: 164px;
}
.adminGeoWorkersTable thead th {
z-index: 1;
background: color-mix(in srgb, var(--bg-2), white 78%);
text-align: left;
font-size: var(--ops-font-micro, 11px);
text-transform: uppercase;
letter-spacing: .045em;
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
padding: 10px 12px;
position: sticky;
top: 0;
}
.adminGeoWorkersTable tbody td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
vertical-align: middle;
padding: 11px 12px;
}
.adminGeoWorkersTable tbody tr:last-child td {
border-bottom: 0;
}
.adminGeoWorkersTable tbody tr:hover td {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminGeoWorkersTable tbody tr.isSelected td, .adminGeoWorkersTable tbody tr.isSelected:hover td {
background: color-mix(in srgb, var(--focus), white 93%);
}
.adminGeoWorkersTable tbody tr.isSelected td:first-child {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--focus), transparent 8%);
}
.adminGeoWorkerRowWarn td {
border-bottom-color: color-mix(in srgb, var(--danger), transparent 84%);
background: #fff;
}
.adminGeoWorkerRowWarn:not(.isSelected) td:first-child {
box-shadow: inset 4px 0 0 color-mix(in srgb, var(--danger), transparent 30%);
}
.adminGeoWorkerIdentityButton {
width: 100%;
min-height: 44px;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
border-radius: 7px;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 9px;
margin: -5px 0;
padding: 5px 0;
display: grid;
}
.adminGeoWorkerIdentityAvatar {
--cm-user-avatar-ring-width: 2px;
}
.adminGeoWorkerNameStack {
gap: 2px;
min-width: 0;
display: grid;
}
.adminGeoWorkerNamePrimary {
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ops-font-primary, 13px);
font-weight: 700;
line-height: 1.2;
overflow: hidden;
}
.adminGeoWorkerNameSecondary {
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ops-font-meta, 12px);
line-height: 1.15;
overflow: hidden;
}
.adminGeoWorkerStatusCell .pill {
min-height: 28px;
font-size: var(--ops-font-chip, 12px);
padding: 0 10px;
}
.adminGeoWorkerCellMetric {
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-weight: 600;
}
.adminGeoWorkerCellTimeStack {
gap: 2px;
display: grid;
}
.adminGeoWorkerCellTimeMain {
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-weight: 700;
line-height: 1.2;
}
.adminGeoWorkerCellTimeSub {
font-size: var(--ops-font-micro, 11px);
color: var(--muted);
white-space: nowrap;
line-height: 1.15;
}
.adminGeoWorkerCellTimeSubWarn {
color: color-mix(in srgb, var(--danger), black 18%);
font-weight: 600;
}
.adminGeoWorkerCellEventsStack {
gap: 2px;
min-width: 0;
display: grid;
}
.adminGeoWorkerCellRange {
white-space: nowrap;
font-size: var(--ops-font-micro, 11px);
color: color-mix(in srgb, var(--muted), var(--fg) 10%);
}
.adminGeoWorkerHoverHint {
align-items: baseline;
max-width: 100%;
display: inline-flex;
}
.adminGeoWorkerCellSitesStack {
gap: 2px;
min-width: 0;
display: grid;
}
.adminGeoWorkerSitesLine {
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
display: flex;
}
.adminGeoWorkerSitesSep {
color: color-mix(in srgb, var(--muted), transparent 16%);
}
.adminGeoWorkerCellSitesPrimary {
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
overflow: hidden;
}
.adminGeoWorkerCellSitesSecondary {
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
font-size: 11px;
line-height: 1.15;
}
.adminGeoWorkerCellAnomaliesNone {
font-size: 11px;
line-height: 1.15;
}
.adminGeoWorkerCellAnomalies {
min-width: 0;
}
.adminGeoSignals {
flex-wrap: wrap;
gap: 4px;
display: inline-flex;
}
.adminGeoSignalChip {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
white-space: nowrap;
background: #fff;
border-radius: 999px;
align-items: center;
min-height: 20px;
padding: 1px 7px;
font-size: 11px;
line-height: 1.15;
display: inline-flex;
}
.adminGeoSignalChipWarn {
border-color: color-mix(in srgb, var(--danger), transparent 62%);
background: color-mix(in srgb, var(--danger), white 94%);
color: color-mix(in srgb, var(--danger), black 20%);
font-weight: 600;
}
.adminGeoSignalChipInfo {
border-color: color-mix(in srgb, var(--focus), transparent 72%);
background: color-mix(in srgb, var(--focus), white 95%);
color: color-mix(in srgb, var(--focus), black 20%);
}
.adminGeoSignalChipCaution {
border-color: color-mix(in srgb, var(--warning), transparent 54%);
background: color-mix(in srgb, var(--warning), white 94%);
color: color-mix(in srgb, var(--warning), black 34%);
font-weight: 600;
}
.adminGeoInlineEmpty {
margin: 4px 0;
}
@media (max-width: 1320px) {
.adminOperationsGeoTable {
min-width: 920px;
}
.adminGeoColWorkers {
width: 154px;
}
.adminGeoColWorked, .adminGeoColOffsite {
width: 104px;
}
.adminGeoColEvents {
width: 112px;
}
.adminGeoColActions {
width: 152px;
}
.adminGeoWorkersColUser {
width: 230px;
}
.adminGeoWorkersColStatus {
width: 100px;
}
.adminGeoWorkersColTime, .adminGeoWorkersColEvents {
width: 114px;
}
.adminGeoWorkersColSites {
width: 180px;
}
.adminGeoWorkersColAnomalies {
width: 150px;
}
}
@media (max-width: 900px) {
.adminGeoPlaybackCurrentTime {
font-size: 11px;
}
}
.adminGeoDetailPanel {
gap: 14px;
padding: 12px 0 6px;
}
.adminGeoDetailSummaryGrid {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
border-radius: 10px;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0;
overflow: hidden;
}
.adminGeoDetailSummaryStat {
border: 0;
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
border-radius: 0;
gap: 4px;
min-width: 0;
padding: 11px 13px;
}
.adminGeoDetailSummaryStat:first-child {
border-left: 0;
}
.adminGeoDetailSummaryStatWarn {
border-color: color-mix(in srgb, var(--danger), transparent 72%);
background: color-mix(in srgb, var(--danger), white 95%);
}
.adminGeoDetailSummaryValue {
font-variant-numeric: tabular-nums;
font-size: 16px;
}
.adminGeoDetailSummaryLabel {
letter-spacing: .055em;
font-size: 10px;
}
.adminGeoDetailLayout {
gap: 14px;
}
.adminGeoPlaybackPanel {
border-color: color-mix(in srgb, var(--stroke), #64748b 8%);
border-radius: 12px;
gap: 0;
padding: 0;
overflow: hidden;
box-shadow: 0 10px 26px #0f172a0e;
}
.adminGeoPlaybackHeader {
flex-wrap: nowrap;
min-height: 58px;
padding: 10px 14px;
}
.adminGeoPlaybackHeader > div:first-child {
gap: 3px;
min-width: 0;
display: grid;
}
.adminGeoPlaybackTitle {
font-size: 14px;
line-height: 1.2;
}
.adminGeoPlaybackMeta {
color: var(--muted);
font-size: 11px;
line-height: 1.25;
}
.adminGeoPlaybackFitBtn {
border-radius: 8px;
flex: none;
gap: 7px;
font-size: 12px;
font-weight: 700;
min-height: 44px !important;
padding-inline: 11px !important;
}
.adminGeoPlaybackFitBtn svg {
width: 16px;
height: 16px;
}
.adminGeoPlaybackToolbar {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
background: color-mix(in srgb, var(--bg-2), white 82%);
grid-template-columns: auto minmax(260px, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 14px 11px;
display: grid;
}
.adminGeoPlaybackTransport {
gap: 6px;
}
.adminGeoPlaybackTransportBtn, .adminGeoPlaybackTransportBtnMain {
border-radius: 8px;
width: 44px;
min-width: 44px;
height: 44px;
}
.adminGeoPlaybackTransportBtnMain {
color: #fff;
border-color: color-mix(in srgb, var(--focus), black 6%);
background: var(--focus);
}
.adminGeoPlaybackTransportBtnMain:hover:not(:disabled) {
color: #fff;
background: color-mix(in srgb, var(--focus), black 8%);
}
.adminGeoPlaybackTransportBtn svg {
width: 15px;
height: 15px;
}
.adminGeoPlaybackTimeline {
gap: 2px;
min-width: 0;
display: grid;
}
.adminGeoPlaybackTimelineMain {
grid-template-columns: minmax(120px, 1fr) 52px;
align-items: center;
gap: 10px;
min-width: 0;
display: grid;
}
.adminGeoPlaybackSlider {
min-width: 0;
block-size: 44px;
}
.adminGeoPlaybackCurrentTime {
min-width: 52px;
color: color-mix(in srgb, var(--focus), black 12%);
text-align: right;
font-size: 12px;
font-weight: 750;
}
.adminGeoPlaybackWindow {
grid-template-columns: auto 1fr auto;
gap: 10px;
font-size: 10px;
}
.adminGeoPlaybackWindow span:nth-child(2) {
text-align: center;
}
.adminGeoPlaybackSnapshot {
justify-content: flex-end;
gap: 5px;
max-width: 460px;
}
.adminGeoPlaybackSnapshotChip {
background: #fff;
border-radius: 8px;
min-height: 44px;
padding: 4px 10px;
font-size: 11px;
font-weight: 650;
}
.adminGeoPlaybackSnapshotChip:focus-visible, .adminGeoActivityRow:focus-visible, .adminGeoWorkerIdentityButton:focus-visible, .adminGeoPlaybackFitBtn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 24%);
outline-offset: 2px;
}
.adminGeoPlaybackStage {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: minmax(520px, .9fr) minmax(0, 1.1fr);
min-width: 0;
display: grid;
}
.adminGeoPlaybackMapShell {
background: #e6edf2;
border: 0;
border-radius: 0;
min-width: 0;
min-height: 508px;
}
.adminGeoPlaybackMapCanvas, .adminGeoPlaybackMapCanvas .leaflet-container {
block-size: 508px;
min-block-size: 508px;
}
.adminGeoPlaybackMapCanvas .leaflet-tile-pane {
filter: saturate(.72) contrast(.95);
}
.adminGeoPlaybackMapCanvas .leaflet-control-zoom a {
font-size: 22px;
width: 44px !important;
height: 44px !important;
line-height: 44px !important;
}
.adminGeoPlaybackMapShell[data-state="loading"] .adminGeoPlaybackMapCanvas, .adminGeoPlaybackMapShell[data-state="error"] .adminGeoPlaybackMapCanvas {
opacity: .7;
}
.adminGeoPlaybackMapState {
z-index: 800;
color: #52677b;
text-align: center;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
pointer-events: none;
background: #fffffff0;
border: 1px solid #ffffffe6;
border-radius: 9px;
justify-content: center;
align-items: center;
max-width: calc(100% - 32px);
min-height: 36px;
padding: 8px 12px;
font-size: 11px;
font-weight: 700;
line-height: 1.35;
display: inline-flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 7px 22px #0f172a24;
}
.adminGeoPlaybackMapState[data-kind="error"] {
color: #8f3e1a;
background: #fff7f2f5;
}
.adminGeoActivityTimeline {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
grid-template-rows: auto auto minmax(0, 1fr) auto;
min-width: 0;
max-height: 508px;
display: grid;
overflow: hidden;
}
.adminGeoActivityHeader {
background: color-mix(in srgb, var(--bg-2), white 82%);
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 12px;
display: flex;
}
.adminGeoActivityHeader h4, .adminGeoActivityHeader p {
margin: 0;
}
.adminGeoActivityHeader h4 {
color: var(--fg);
font-size: 12px;
font-weight: 750;
line-height: 1.2;
}
.adminGeoActivityHeader p {
color: var(--muted);
margin-top: 3px;
font-size: 10px;
line-height: 1.2;
}
.adminGeoActivityAxis, .adminGeoActivityRow {
grid-template-columns: minmax(160px, 195px) minmax(185px, 1fr) minmax(84px, 90px);
align-items: center;
column-gap: 10px;
display: grid;
}
.adminGeoActivityAxis {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
min-height: 28px;
color: color-mix(in srgb, var(--muted), var(--fg) 8%);
font-variant-numeric: tabular-nums;
background: #fff;
padding: 0 11px;
font-size: 9px;
}
.adminGeoActivityAxisTicks {
justify-content: space-between;
align-items: center;
min-width: 0;
display: flex;
}
.adminGeoActivityRows {
overscroll-behavior: contain;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden auto;
}
.adminGeoActivityRows li {
min-width: 0;
}
.adminGeoActivityRow {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
width: 100%;
min-height: 44px;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
background: #fff;
padding: 5px 11px;
}
.adminGeoActivityRow:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminGeoActivityRow.isSelected {
background: color-mix(in srgb, var(--focus), white 94%);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--focus), transparent 2%);
}
.adminGeoActivityRow.isMuted .adminGeoActivityIdentity, .adminGeoActivityRow.isMuted .adminGeoActivityState {
opacity: .52;
}
.adminGeoActivityRow.isMuted .adminGeoActivityTrack {
opacity: .72;
}
.adminGeoActivityIdentity {
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-width: 0;
display: grid;
}
.adminGeoActivityAvatar {
--cm-user-avatar-ring-width: 2px;
}
.adminGeoPlaybackWorkerColor0 {
--cm-user-avatar-ring-color: #2563eb;
}
.adminGeoPlaybackWorkerColor1 {
--cm-user-avatar-ring-color: #047857;
}
.adminGeoPlaybackWorkerColor2 {
--cm-user-avatar-ring-color: #b42318;
}
.adminGeoPlaybackWorkerColor3 {
--cm-user-avatar-ring-color: #b45309;
}
.adminGeoPlaybackWorkerColor4 {
--cm-user-avatar-ring-color: #6d28d9;
}
.adminGeoPlaybackWorkerColor5 {
--cm-user-avatar-ring-color: #0f766e;
}
.adminGeoPlaybackWorkerColor6 {
--cm-user-avatar-ring-color: #9a3412;
}
.adminGeoPlaybackWorkerColor7 {
--cm-user-avatar-ring-color: #a21caf;
}
.adminGeoPlaybackWorkerColor8 {
--cm-user-avatar-ring-color: #0369a1;
}
.adminGeoPlaybackWorkerColor9 {
--cm-user-avatar-ring-color: #4338ca;
}
.adminGeoActivityName {
gap: 1px;
min-width: 0;
display: grid;
}
.adminGeoActivityName strong, .adminGeoActivityName small {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminGeoActivityName strong {
font-size: 11px;
font-weight: 720;
line-height: 1.2;
}
.adminGeoActivityName small {
color: var(--muted);
font-size: 9px;
line-height: 1.15;
}
.adminGeoActivityTrack {
width: 100%;
height: 24px;
overflow: visible;
}
.adminGeoActivityTrackBase {
fill: color-mix(in srgb, var(--stroke), white 43%);
}
.adminGeoActivityWorkBand {
fill: color-mix(in srgb, var(--ok), #0f8a5f 18%);
}
.adminGeoActivityPauseBand {
fill: color-mix(in srgb, var(--warning), #f59e0b 12%);
}
.adminGeoActivityOpenPausePoint {
fill: color-mix(in srgb, var(--warning), #f59e0b 12%);
stroke: #fff;
stroke-width: 1.5px;
vector-effect: non-scaling-stroke;
}
.adminGeoActivityOffsiteSignal, .adminGeoActivityNoLocationSignal, .adminGeoActivityPlayhead {
vector-effect: non-scaling-stroke;
}
.adminGeoActivityOffsiteSignal {
stroke: color-mix(in srgb, var(--danger), #ef4444 12%);
stroke-width: 2.5px;
}
.adminGeoActivityNoLocationSignal {
stroke: #64748b;
stroke-width: 2.5px;
stroke-dasharray: 4 3;
}
.adminGeoActivityPlayhead {
stroke: color-mix(in srgb, var(--focus), white 2%);
stroke-width: 1.5px;
}
.adminGeoActivityState {
color: #66778a;
white-space: nowrap;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 750;
display: inline-flex;
}
.adminGeoActivityState:before {
content: "";
background: currentColor;
border-radius: 50%;
width: 6px;
height: 6px;
}
.adminGeoActivityState.isactive {
color: color-mix(in srgb, var(--ok), black 16%);
}
.adminGeoActivityState.ispaused {
color: color-mix(in srgb, var(--warning), black 28%);
}
.adminGeoActivityState.isnotStarted:before {
background: none;
border: 1px solid;
}
.adminGeoActivityLegend {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
min-height: 36px;
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
background: color-mix(in srgb, var(--bg-2), white 82%);
flex-wrap: wrap;
align-items: center;
gap: 7px 15px;
padding: 7px 11px;
font-size: 9px;
line-height: 1.15;
display: flex;
}
.adminGeoActivityLegend span {
align-items: center;
gap: 5px;
display: inline-flex;
}
.adminGeoActivityLegend i {
background: color-mix(in srgb, var(--stroke), white 43%);
border-radius: 3px;
width: 16px;
height: 7px;
display: inline-block;
}
.adminGeoActivityLegend i.isWork {
background: color-mix(in srgb, var(--ok), #0f8a5f 18%);
}
.adminGeoActivityLegend i.isPause {
background: color-mix(in srgb, var(--warning), #f59e0b 12%);
}
.adminGeoActivityLegend i.isOffsite {
background: color-mix(in srgb, var(--danger), #ef4444 12%);
border-radius: 0;
height: 3px;
}
.adminGeoActivityLegend i.isNoLocation {
background: repeating-linear-gradient(90deg, #64748b 0 3px, #0000 3px 5px);
border-radius: 0;
height: 3px;
}
.adminGeoPlaybackMarkerPin {
block-size: 28px;
inline-size: 28px;
box-shadow: 0 0 0 2px var(--geo-pin, var(--focus)), 0 2px 8px #0f172a3d;
transition: transform .13s, box-shadow .13s, opacity .13s;
}
.adminGeoPlaybackMarkerPinStale {
opacity: .82;
border-style: dashed;
}
.adminGeoPlaybackMarkerPinSelected {
box-shadow: 0 0 0 2px var(--geo-pin, var(--focus)), 0 0 0 5px color-mix(in srgb, var(--focus), transparent 45%), 0 4px 12px #0f172a47;
transform: scale(1.18);
}
.adminGeoWorkersPanel {
border-color: color-mix(in srgb, var(--stroke), #64748b 8%);
border-radius: 12px;
gap: 0;
padding: 0;
overflow: hidden;
box-shadow: 0 8px 22px #0f172a0b;
}
.adminGeoWorkersPanelHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), white 82%);
align-items: center;
min-height: 60px;
padding: 10px 14px;
}
.adminGeoWorkersPanelTitle {
font-size: 13px;
}
.adminGeoWorkersToggleBtn {
min-height: 44px !important;
}
.adminGeoWorkersTableWrap {
padding: 0;
}
.adminGeoWorkersTable thead th {
background: #fff;
}
@media (max-width: 1240px) {
.adminGeoPlaybackToolbar {
grid-template-columns: auto minmax(220px, 1fr);
}
.adminGeoPlaybackSnapshot {
grid-column: 1 / -1;
justify-content: flex-start;
max-width: none;
}
.adminGeoPlaybackStage {
grid-template-columns: 1fr;
}
.adminGeoPlaybackMapShell, .adminGeoPlaybackMapCanvas, .adminGeoPlaybackMapCanvas .leaflet-container {
block-size: 360px;
min-block-size: 360px;
}
.adminGeoActivityTimeline {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
max-height: 430px;
}
}
@media (max-width: 1320px) {
.adminGeoDetailPanel {
width: min(100%,
calc(100vw - var(--admin-redenim-current-sidebar-w) - var(--admin-shell-workspace-gutter) -
var(--admin-shell-workspace-gutter)));
position: sticky;
left: 0;
}
}
@media (max-width: 980px) {
.adminGeoDetailSummaryGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adminGeoDetailSummaryStat:nth-child(5) {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
}
.adminGeoDetailSummaryStat:nth-child(n+6) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
}
.adminGeoPlaybackMapShell, .adminGeoPlaybackMapCanvas, .adminGeoPlaybackMapCanvas .leaflet-container {
block-size: 340px;
min-block-size: 340px;
}
.adminGeoPlaybackFitBtn, .adminGeoWorkersToggleBtn, .adminGeoPlaybackTransportBtn, .adminGeoPlaybackTransportBtnMain, .adminGeoPlaybackSnapshotChip {
min-height: 44px !important;
}
.adminGeoPlaybackTransportBtn, .adminGeoPlaybackTransportBtnMain {
width: 44px;
min-width: 44px;
height: 44px;
}
.adminGeoPlaybackSnapshotChip {
padding-inline: 12px;
}
.adminGeoWorkersToggleBtn {
width: auto;
}
.adminGeoWorkersTableWrap {
overflow: visible;
}
.adminGeoWorkersTable {
background: color-mix(in srgb, var(--bg-2), white 78%);
min-width: 0;
padding: 10px;
display: block;
}
.adminGeoWorkersTable colgroup, .adminGeoWorkersTable thead {
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}
.adminGeoWorkersTable tbody {
gap: 9px;
display: grid;
}
.adminGeoWorkersTable tbody tr {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
border-radius: 9px;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-width: 0;
display: grid;
overflow: hidden;
}
.adminGeoWorkersTable tbody td {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
vertical-align: top;
gap: 5px;
min-width: 0;
padding: 9px 11px;
display: grid;
}
.adminGeoWorkersTable tbody td:before {
color: color-mix(in srgb, var(--muted), var(--fg) 14%);
letter-spacing: .045em;
text-transform: uppercase;
content: attr(data-label);
font-size: 9px;
font-weight: 750;
line-height: 1.1;
}
.adminGeoWorkersTable .adminGeoWorkerNameCell {
background: color-mix(in srgb, var(--bg-2), white 84%);
border-top: 0;
grid-column: 1 / -1;
}
.adminGeoWorkersTable .adminGeoWorkerNameCell:before {
display: none;
}
.adminGeoWorkersTable .adminGeoWorkerCellAnomalies {
grid-column: 1 / -1;
}
.adminGeoWorkersTable tbody tr:hover td {
background: inherit;
}
.adminGeoWorkersTable tbody tr.isSelected, .adminGeoWorkersTable tbody tr.isSelected:hover {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--focus), transparent 8%);
}
.adminGeoWorkersTable tbody tr.isSelected td, .adminGeoWorkersTable tbody tr.isSelected:hover td {
background: color-mix(in srgb, var(--focus), white 95%);
}
.adminGeoWorkersTable tbody tr.isSelected td:first-child {
box-shadow: none;
}
.adminGeoWorkerRowWarn:not(.isSelected) td:first-child {
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger), transparent 30%);
}
}
@media (max-width: 620px) {
.adminGeoDetailPanel {
width: min(100%, 100vw - 32px);
position: sticky;
left: 0;
}
.adminGeoDetailSummaryGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminGeoDetailSummaryStat, .adminGeoDetailSummaryStat:nth-child(n) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
}
.adminGeoDetailSummaryStat:nth-child(-n+2) {
border-top: 0;
}
.adminGeoDetailSummaryStat:nth-child(odd) {
border-left: 0;
}
.adminGeoPlaybackHeader, .adminGeoWorkersPanelHeader {
flex-direction: column;
align-items: flex-start;
}
.adminGeoPlaybackFitBtn, .adminGeoWorkersToggleBtn {
justify-content: center;
width: 100%;
}
.adminGeoPlaybackToolbar {
grid-template-columns: 1fr;
gap: 9px;
}
.adminGeoPlaybackTransport {
justify-content: center;
}
.adminGeoPlaybackTimelineMain {
grid-template-columns: minmax(0, 1fr) 48px;
}
.adminGeoPlaybackSnapshot {
flex-wrap: wrap;
grid-column: auto;
justify-content: flex-start;
padding: 2px 1px 4px;
}
.adminGeoPlaybackSnapshotChip {
flex: none;
}
.adminGeoPlaybackMapShell, .adminGeoPlaybackMapCanvas, .adminGeoPlaybackMapCanvas .leaflet-container {
block-size: 270px;
min-block-size: 270px;
}
.adminGeoActivityTimeline {
max-height: 520px;
}
.adminGeoActivityHeader {
min-height: 48px;
}
.adminGeoActivityAxis {
grid-template-columns: 1fr;
}
.adminGeoActivityAxis > span {
display: none;
}
.adminGeoActivityRow {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "identity state"
"track track";
row-gap: 6px;
padding: 7px 10px;
}
.adminGeoActivityIdentity {
grid-area: identity;
}
.adminGeoActivityTrack {
grid-area: track;
}
.adminGeoActivityState {
grid-area: state;
}
.adminGeoWorkersTable {
padding: 8px;
}
.adminGeoWorkersTable tbody tr {
grid-template-columns: 1fr;
}
.adminGeoWorkersTable .adminGeoWorkerNameCell, .adminGeoWorkersTable .adminGeoWorkerCellAnomalies {
grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.adminGeoPlaybackMarkerPin {
transition: none;
}
}
.adminOperationsDayOffDetailBody {
gap: 16px;
display: grid;
}
.adminOperationsEditorPage {
gap: 14px;
display: grid;
}
.adminOperationsEntityHeading {
gap: 3px;
min-width: 0;
display: grid;
}
.adminOperationsEntityHeading > .label {
color: color-mix(in srgb, var(--muted), var(--fg) 14%);
}
.adminOperationsReadOnlyPage {
gap: 14px;
display: grid;
}
.adminOperationsReadOnlyPage > .card, .adminOperationsReadOnlyPage > .timesheetDayEditorShell {
border-color: color-mix(in srgb, var(--stroke), transparent 4%);
box-shadow: none;
background: #fff;
overflow: hidden;
}
.adminOperationsApprovalDecisionCard {
border-color: color-mix(in srgb, var(--stroke), transparent 4%);
box-shadow: none;
background: #fff;
}
.adminOperationsApprovalDecisionBody {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
display: grid;
padding: 13px 16px !important;
}
.adminOperationsApprovalDecisionCopy {
gap: 4px;
min-width: 0;
display: grid;
}
.adminOperationsApprovalDecisionActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminOperationsApprovalDecisionActions .btn {
min-height: 44px;
}
.adminOperationsApprovalDecisionPrimary {
min-width: 92px;
}
.adminOperationsApprovalDecisionError {
color: var(--danger);
padding: 0 16px 13px;
font-size: 13px;
line-height: 1.35;
}
.adminOperationsDetailHeaderActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminOperationsDetailHeaderActions .btn {
min-height: 44px;
}
.adminOperationsDetailEditAction {
border-color: color-mix(in srgb, var(--focus), black 16%);
background: var(--focus);
color: #fff;
}
.adminOperationsDetailEditAction:hover {
border-color: color-mix(in srgb, var(--focus), black 16%);
background: color-mix(in srgb, var(--focus), black 10%);
color: #fff;
}
.adminOperationsDetailEditSecondaryAction {
border-color: color-mix(in srgb, var(--focus), transparent 28%);
color: color-mix(in srgb, var(--focus), black 12%);
background: #fff;
}
.adminOperationsDetailEditSecondaryAction:hover {
border-color: var(--focus);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 16%);
}
.adminOperationsDetailSubmitAction {
white-space: nowrap;
}
.adminOperationsEditorSectionBody {
gap: 12px;
display: grid;
}
.adminOperationsFlowStack {
gap: 0;
display: grid;
}
.adminOperationsUnifiedFlow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: calc(var(--radius) + 2px);
box-shadow: 0 12px 30px color-mix(in srgb, var(--fg), transparent 96%);
background: #fff;
overflow: hidden;
}
.adminOperationsUnifiedFlow > .card {
box-shadow: none;
background: none;
border: 0;
border-radius: 0;
margin: 0;
}
.adminOperationsUnifiedFlow > .card + .card {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
}
.adminOperationsUnifiedFlow > .card > .cardBody {
padding: 18px 20px;
}
.adminOperationsFlowSectionCard {
border-color: #0000;
}
.adminOperationsFlowSectionBody {
gap: 10px;
display: grid;
}
.adminOperationsFlowSectionTitleRow {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminOperationsFlowSectionHeading {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminOperationsFlowSectionNumber, .adminDocumentsSendStep {
background: color-mix(in srgb, var(--focus), white 92%);
width: fit-content;
min-width: 26px;
min-height: 20px;
color: color-mix(in srgb, var(--focus), black 12%);
font-family: var(--font-mono);
letter-spacing: .02em;
border: 0;
border-radius: 5px;
flex: none;
justify-content: center;
align-items: center;
padding: 2px 6px;
font-size: 11px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.adminOperationsFlowSectionTitle {
min-width: 0;
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.adminOperationsFlowSectionAside {
justify-content: flex-end;
min-width: 0;
display: flex;
}
.adminOperationsFlowMetaRow {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminOperationsFlowChoiceGrid, .adminFinanceChoiceGrid {
gap: 8px;
display: grid;
}
.adminOperationsFlowChoiceGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminFinanceChoiceGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminOperationsFlowChoiceButton, .adminFinanceChoiceButton {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: var(--bg);
min-height: 66px;
color: var(--fg);
text-align: left;
cursor: pointer;
border-radius: 8px;
gap: 3px;
padding: 10px;
display: grid;
}
.adminOperationsFlowChoiceButton:hover:not(:disabled), .adminOperationsFlowChoiceButton:focus-visible, .adminFinanceChoiceButton:hover:not(:disabled), .adminFinanceChoiceButton:focus-visible {
border-color: color-mix(in srgb, var(--focus), black 10%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 74%);
outline: none;
}
.adminOperationsFlowChoiceButton:disabled, .adminFinanceChoiceButton:disabled {
cursor: not-allowed;
}
.adminOperationsFlowChoiceButtonSelected, .adminFinanceChoiceButtonSelected {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminOperationsFlowChoiceTitle, .adminFinanceChoiceTitle {
font-weight: 700;
line-height: 1.15;
}
.adminOperationsFlowChoiceMeta, .adminFinanceChoiceMeta {
color: var(--muted);
font-size: 12px;
line-height: 1.3;
}
.adminOperationsFlowSegmentRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
display: grid;
}
.adminOperationsFlowSegmentButton {
justify-content: center;
}
.adminOperationsFlowSegmentButtonSelected {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminOperationsEditorHeaderBlock {
gap: 10px;
display: grid;
}
.adminOperationsEditorHeaderTop {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminOperationsEditorTimeline {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
display: grid;
}
.adminOperationsEditorReadOnlyBanner {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
width: fit-content;
max-width: 100%;
min-height: 20px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
border: 0;
place-self: start;
padding: 0 8px;
}
.adminOperationsEditorActionsBlock {
gap: 10px;
display: grid;
}
.adminOperationsReadOnlyTopBar {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
display: grid;
}
.adminOperationsReadOnlyTopStatus {
place-self: start end;
}
.adminOperationsReadOnlyPortalBadgeRow {
justify-items: start;
display: grid;
}
.reportDetailHeroCard, .reportReadOnlyHeroCard, .ticketsReadOnlyHeroCard {
border-color: color-mix(in srgb, var(--stroke), transparent 4%);
background: #fff;
}
.adminTicketCorrectionActionBar {
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.adminTicketCorrectionSubmitHint {
margin-right: auto;
font-size: 13px;
}
.portalDetailHeroBody {
gap: 16px;
display: grid;
padding: 20px !important;
}
.reportReadOnlyHeroBody, .ticketsReadOnlyHeroBody {
gap: 14px;
padding: 18px !important;
}
.portalDetailHeroTop {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
display: flex;
}
.portalDetailHeroTitleBlock {
gap: 10px;
min-width: 0;
display: grid;
}
.reportReadOnlyHeroTitleBlock, .ticketsReadOnlyHeroTitleBlock {
flex: auto;
max-width: min(100%, 720px);
}
.portalDetailKicker {
letter-spacing: .1em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted), var(--fg) 20%);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.portalDetailHeroTitleRow {
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
display: flex;
}
.portalDetailHeroCode {
color: color-mix(in srgb, var(--focus), black 10%);
font-size: 13px;
line-height: 1.1;
}
.portalDetailHeroTitle {
font-family: var(--font-condensed);
letter-spacing: .02em;
margin: 0;
font-size: clamp(26px, 2.4vw, 34px);
line-height: 1;
}
.portalDetailHeroAside {
justify-items: end;
gap: 10px;
display: grid;
}
.portalDetailStatusPill {
white-space: nowrap;
min-height: 38px;
padding-left: 14px;
padding-right: 14px;
}
.reportReadOnlyStatusPill {
min-height: 34px;
padding-left: 12px;
padding-right: 12px;
}
.adminOperationsCloseAction {
border-color: color-mix(in srgb, var(--danger), transparent 18%);
min-height: 44px;
color: color-mix(in srgb, var(--danger), black 8%);
background: #fff;
}
.adminOperationsCloseAction:hover {
border-color: var(--danger);
background: color-mix(in srgb, var(--danger), white 94%);
color: color-mix(in srgb, var(--danger), black 12%);
}
.adminOperationsDetailHeaderActionSeparator {
background: color-mix(in srgb, var(--stroke), transparent 12%);
flex: none;
width: 1px;
height: 24px;
margin-inline: 4px;
}
.adminOperationsClosureSummary {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 5px;
padding: 12px 0 0;
line-height: 1.4;
display: grid;
}
.adminOperationsCloseDialog {
max-width: calc(100vw - 36px);
max-height: calc(100dvh - 36px);
margin: auto;
padding: 0;
overflow: visible;
}
.adminOperationsCloseDialog::backdrop {
background: color-mix(in srgb, var(--fg), transparent 62%);
}
.adminOperationsCloseHistoryNote {
margin: 0;
}
.adminOperationsCloseDialogActions {
flex-wrap: wrap;
align-items: center;
gap: 10px;
display: flex;
}
.portalDetailFieldGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.reportReadOnlyFieldGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminOperationsDayOffFieldGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.portalDetailField {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 45%);
gap: 6px;
min-width: 0;
padding: 12px 13px;
display: grid;
}
.adminOperationsReadOnlyPage .portalDetailFieldGrid {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
gap: 0 24px;
}
.adminOperationsReadOnlyPage .portalDetailField {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
background: none;
border-radius: 0;
padding: 13px 0;
}
.reportReadOnlyFieldGrid .portalDetailField, .ticketsReadOnlyFieldGrid .portalDetailField {
background: none;
}
.reportReadOnlyFieldGrid .reportReadOnlyFieldDate {
order: 1;
}
.reportReadOnlyFieldGrid .reportReadOnlyFieldSubmitted {
order: 2;
}
.reportReadOnlyFieldGrid .reportReadOnlyFieldSite {
order: 3;
}
.reportReadOnlyFieldGrid .reportReadOnlyFieldCreator {
order: 4;
}
.reportReadOnlyFieldGrid .reportReadOnlyFieldCorrected {
order: 5;
}
.adminReportAttributionStack, .adminTicketAttributionStack {
gap: 3px;
min-width: 0;
display: grid;
}
.adminTicketOfficeAttribution {
border: 1px solid color-mix(in srgb, var(--warning), var(--border) 52%);
background: color-mix(in srgb, var(--warning), white 88%);
width: fit-content;
max-width: 100%;
color: color-mix(in srgb, var(--fg), var(--warning) 20%);
border-radius: 999px;
padding: 3px 8px;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.adminTicketOfficeReason, .adminReportCreateHint, .adminDayOffGrantHint {
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.adminDialogCard.adminReportCreateDialogCard, .adminDialogCard.adminDayOffGrantDialogCard {
width: min(560px, 100%);
}
.adminDialogCard.adminTicketCreateDialogCard {
width: min(800px, 100%);
}
.adminDialogBody.adminReportCreateDialogBody, .adminDialogBody.adminTicketCreateDialogBody, .adminDialogBody.adminDayOffGrantDialogBody {
gap: 20px;
padding: 24px;
}
.adminTicketCreateStep {
border-top: 1px solid var(--stroke);
gap: 12px;
min-width: 0;
padding-top: 12px;
display: grid;
}
dialog.adminDialogBackdrop[data-ticket-create] {
align-items: safe center;
overflow: hidden;
}
.adminDialogCard.adminTicketCreateDialogCard {
flex-direction: column;
max-height: 100%;
display: flex;
overflow: hidden;
}
.adminDialogBody.adminTicketCreateDialogBody {
flex-direction: column;
flex: auto;
gap: 12px;
min-height: 0;
padding: 20px;
display: flex;
}
.adminTicketCreateScroll {
overscroll-behavior: contain;
scrollbar-gutter: stable;
flex-direction: column;
flex: auto;
gap: 16px;
min-height: 0;
margin-right: -16px;
padding: 2px 20px 4px 2px;
display: flex;
overflow-y: auto;
}
.adminTicketCreateScroll > *, .adminTicketCreateDialogBody > .adminOperationsCreateHeader, .adminTicketCreateDialogBody > .adminOperationsCreateActions {
flex-shrink: 0;
}
.adminTicketCreateScroll .adminTicketCreateGrid {
gap: 12px;
}
.adminTicketCreateScroll .field {
margin-top: 0;
}
.adminTicketCreateDialogBody .adminOperationsFlowSectionTitle {
font-size: 16px;
}
.adminTicketCreateDialogBody .adminOperationsFlowChoiceButton {
min-height: 56px;
padding: 8px;
}
.adminTicketCreateDialogBody .ticketsNotes {
min-height: 72px;
}
.adminOperationsCreateHeader {
justify-content: space-between;
align-items: center;
gap: 16px;
min-width: 0;
display: flex;
}
.adminOperationsCreateHeader h2 {
min-width: 0;
margin: 0;
font-size: 20px;
line-height: 1.3;
}
.adminReportCreateHint, .adminDayOffGrantHint {
margin: 0;
line-height: 1.5;
}
.adminReportCreateGrid, .adminTicketCreateGrid, .adminDayOffGrantGrid {
align-items: start;
gap: 16px;
margin: 0;
}
.adminReportCreateDateField {
min-width: 0;
}
.adminOperationsCreateActions {
border-top: 1px solid var(--stroke);
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
padding-top: 16px;
display: flex;
}
.adminOperationsCreateActions .btn {
justify-content: center;
min-height: 44px;
}
.adminTicketCreateDialogBody textarea, .adminDayOffGrantDialogBody textarea {
font-family: var(--font-sans);
}
@media (max-width: 620px) {
.adminTicketCreateScroll {
margin-right: -12px;
padding-right: 16px;
}
.adminDialogBody.adminReportCreateDialogBody, .adminDialogBody.adminTicketCreateDialogBody, .adminDialogBody.adminDayOffGrantDialogBody {
gap: 16px;
padding: 16px;
}
.adminOperationsCreateActions .btn {
white-space: normal;
flex: 120px;
}
}
.adminDayOffGrantReasonInput {
resize: vertical;
min-height: 104px;
}
.adminDayOffGrantAllowance, .adminDayOffGrantWarning {
border-radius: var(--radius);
padding: 10px 12px;
font-size: 13px;
line-height: 1.4;
}
.adminDayOffGrantAllowance {
border: 1px solid color-mix(in srgb, var(--border), var(--fg) 4%);
background: color-mix(in srgb, var(--card), white 64%);
color: var(--fg);
}
.adminDayOffGrantAllowance.isWarning, .adminDayOffGrantWarning {
border: 1px solid color-mix(in srgb, var(--warning), var(--border) 42%);
background: color-mix(in srgb, var(--warning), white 88%);
color: color-mix(in srgb, var(--fg), var(--warning) 22%);
font-weight: 700;
}
.portalDetailFieldLabel {
letter-spacing: .08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted), var(--fg) 22%);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.portalDetailFieldValue {
min-width: 0;
color: color-mix(in srgb, var(--fg), black 10%);
overflow-wrap: anywhere;
font-size: 15px;
line-height: 1.35;
}
.portalDetailFieldValue.isMono {
font-family: var(--font-mono);
}
.portalDetailContentCard {
background: color-mix(in srgb, var(--bg), white 18%);
}
.reportReadOnlyContentCard, .reportReadOnlyContentCard .portalDetailListRow, .reportReadOnlyContentCard .portalDetailTextBlock, .ticketsReadOnlyContentCard, .ticketsReadOnlyContentCard .portalDetailListRow, .ticketsReadOnlyContentCard .portalDetailTextBlock, .ticketsReadOnlyContentCard .ticketsAttachmentPreviewBtn, .reportReadOnlyContentCard .portalDetailListRow, .reportReadOnlyContentCard .portalDetailTextBlock, .ticketsReadOnlyContentCard .portalDetailListRow, .ticketsReadOnlyContentCard .portalDetailTextBlock, .ticketsReadOnlyContentCard .ticketsAttachmentPreviewBtn {
background: #fff;
}
.portalDetailContentBody {
gap: 0;
display: grid;
padding: 0 !important;
}
.portalDetailSection {
gap: 12px;
padding: 18px 20px;
display: grid;
}
.portalDetailSection + .portalDetailSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.portalDetailSectionHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
display: flex;
}
.portalDetailList {
gap: 8px;
display: grid;
}
.adminOperationsReadOnlyPage .portalDetailList {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
gap: 0;
}
.portalDetailListRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 48%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
display: grid;
}
.adminOperationsReadOnlyPage .portalDetailListRow {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
background: none;
border-radius: 0;
padding: 12px 0;
}
.portalDetailListTitle {
min-width: 0;
font-weight: 700;
line-height: 1.3;
}
.adminReportAuditHistoryList {
gap: 10px;
}
.adminReportAuditHistoryRow {
align-items: flex-start;
}
.adminReportAuditHistoryMain {
gap: 5px;
min-width: 0;
display: grid;
}
.adminReportAuditHistoryActor {
font-size: 13px;
line-height: 1.25;
}
.adminReportAuditHistoryReason {
color: color-mix(in srgb, var(--fg), var(--muted) 24%);
gap: 2px;
margin: 0;
font-size: 13px;
line-height: 1.4;
display: grid;
}
.adminReportAuditHistoryReason span {
letter-spacing: .06em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.portalDetailListValue {
flex: none;
font-size: 15px;
line-height: 1.1;
}
.ticketQuantityValue {
grid-template-columns: 5.5ch 7ch;
justify-content: end;
align-items: baseline;
column-gap: .7ch;
display: inline-grid;
}
.ticketQuantityAmount {
text-align: right;
font-variant-numeric: tabular-nums;
min-width: 0;
}
.ticketQuantityUnit {
text-align: right;
white-space: nowrap;
min-width: 0;
}
.portalDetailTextBlock {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), white 48%);
white-space: pre-wrap;
margin: 0;
padding: 14px 16px;
line-height: 1.55;
}
.adminOperationsReadOnlyPage .portalDetailTextBlock {
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
.portalDetailEmpty {
margin: 0;
}
.reportDetailWorkerGroups {
gap: 16px;
min-width: 0;
display: grid;
}
.adminReportCorrectionUnavailable {
border-left: 3px solid color-mix(in srgb, var(--warning), black 4%);
background: color-mix(in srgb, var(--warning), white 93%);
min-width: 0;
color: color-mix(in srgb, var(--warning), black 36%);
gap: 4px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.4;
display: grid;
}
.adminReportCorrectionUnavailable strong {
color: color-mix(in srgb, var(--fg), var(--warning) 24%);
font-size: 14px;
}
.reportDetailWorkerGroup {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
min-width: 0;
display: grid;
}
.reportDetailWorkerHeader {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 0;
display: grid;
}
.reportDetailWorkerIdentity {
gap: 2px;
min-width: 0;
display: grid;
}
.reportDetailWorkerName {
overflow-wrap: anywhere;
min-width: 0;
margin: 0;
font-size: .92rem;
font-weight: 800;
line-height: 1.25;
}
.reportDetailWorkerGroup .reportDetailTaskRow, .reportDetailWorkerEmpty {
padding-left: 16px;
}
.reportDetailWorkerEmpty {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
padding-top: 12px;
padding-bottom: 12px;
}
.reportDetailGrandTotal {
margin-top: 2px;
}
.reportDetailTaskRow.isTotal {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
background: #fff;
}
.reportDetailTaskRow.isTotal .portalDetailListTitle, .reportDetailTaskRow.isTotal .portalDetailListValue {
color: color-mix(in srgb, var(--focus), black 18%);
}
.reportReadOnlyTaskTitle {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.reportReadOnlyTaskTitle.isProcessing {
color: var(--focus);
font-size: 14px;
font-weight: 600;
}
.reportReadOnlyTaskText, .reportReadOnlyTaskStatusText, .reportReadOnlyTaskReason {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.reportReadOnlyTaskReason {
color: var(--muted);
font-size: 12px;
font-weight: 500;
}
.reportReadOnlyTaskBadge {
border-radius: 999px;
flex: none;
align-items: center;
gap: 5px;
min-height: 24px;
padding: 2px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
display: inline-flex;
}
.reportReadOnlyTaskBadge svg {
fill: none;
stroke: currentColor;
stroke-width: 1.9px;
stroke-linecap: round;
stroke-linejoin: round;
width: 14px;
height: 14px;
}
.reportReadOnlyTaskBadge.isFailed {
color: #b42318;
background: #fef0ef;
border: 1px solid #f0443847;
}
.reportWorkerTaskDictationSpinner {
border: 2px solid color-mix(in srgb, currentColor, transparent 70%);
border-top-color: currentColor;
border-radius: 999px;
flex: none;
width: 12px;
height: 12px;
animation: .8s linear infinite reportWorkerTaskDictationSpin;
}
@keyframes reportWorkerTaskDictationSpin {
to {
transform: rotate(360deg);
}
}
.ticketsReadOnlyFieldGrid.isExpense, .ticketsReadOnlyFieldGrid.isMisc, .ticketsReadOnlyFieldGrid.isMaterial {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticketsReadOnlyFieldGrid.isExpense .ticketsReadOnlyFieldDate {
order: 1;
}
.ticketsReadOnlyFieldGrid.isExpense .ticketsReadOnlyFieldSubmitted {
order: 2;
}
.ticketsReadOnlyFieldGrid.isExpense .ticketsReadOnlyFieldCategory {
order: 3;
}
.ticketsReadOnlyFieldGrid.isExpense .ticketsReadOnlyFieldAmount {
order: 4;
}
.ticketsReadOnlyFieldGrid .ticketsReadOnlyFieldTarget {
order: 5;
grid-column: 1 / -1;
}
.ticketsReadOnlyCombinedField {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: start;
gap: 12px;
display: grid;
}
.ticketsReadOnlyCombinedFieldBlock {
gap: 6px;
min-width: 0;
display: grid;
}
.ticketsReadOnlyCombinedFieldDivider {
background: color-mix(in srgb, var(--stroke), transparent 10%);
align-self: stretch;
width: 1px;
}
.ticketsReadOnlyAttachmentGrid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.ticketsReportIdLink {
color: inherit;
text-decoration: none;
}
.ticketsReportIdLink:hover {
text-decoration: underline;
}
.adminOperationsDetailGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminOperationsDetailGridWide {
grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr);
}
.adminOperationsDetailField {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
border-radius: var(--radius);
background: #fff;
gap: 5px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminOperationsDetailFieldWide {
grid-column: 1 / -1;
}
.adminOperationsDetailFieldNote {
gap: 6px;
}
.adminOperationsDetailValue {
overflow-wrap: anywhere;
min-width: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.adminOperationsDetailNote {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
min-height: 76px;
color: var(--fg);
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #fff;
padding: 10px 12px;
line-height: 1.45;
}
.adminOperationsDetailNotePlain {
min-height: 76px;
color: var(--fg);
white-space: pre-wrap;
overflow-wrap: anywhere;
background: none;
border: 0;
padding: 0;
}
.adminOperationsReadOnlySectionTop {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminOperationsReadOnlyMetric {
border-color: color-mix(in srgb, var(--focus), transparent 56%);
background: color-mix(in srgb, var(--focus), white 94%);
min-height: 32px;
color: color-mix(in srgb, var(--focus), black 18%);
padding: 4px 10px;
}
.adminOperationsReadOnlyList {
gap: 8px;
display: grid;
}
.adminOperationsReadOnlyListRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
padding: 10px 12px;
display: grid;
}
.adminOperationsReadOnlyListPrimary, .adminOperationsReadOnlyListSecondary {
min-width: 0;
}
.adminOperationsReadOnlyListPrimary {
overflow-wrap: anywhere;
font-weight: 600;
}
.adminOperationsReadOnlyListSecondary {
color: var(--muted);
text-align: right;
}
.adminOperationsEditorGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminOperationsEditorGridSpan2 {
grid-column: span 2;
}
.adminOperationsEditorMetaLine, .adminOperationsEditorSectionTitle {
margin: 0;
}
.reportEditorContextBody {
gap: 10px;
display: grid;
}
.adminOperationsReadOnlyReportPage .reportEditorContextCard, .adminOperationsReadOnlyReportPage .reportEditorTasksCard, .adminOperationsReadOnlyReportPage .reportEditorTicketsCard {
border-color: color-mix(in srgb, var(--focus), transparent 74%);
background: color-mix(in srgb, var(--bg-2), white 42%);
}
.reportEditorContextHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.reportEditorTitleBlock {
gap: 8px;
min-width: 0;
display: grid;
}
.reportEditorContextSite {
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
display: inline-flex;
}
.reportEditorContextSiteCode {
color: color-mix(in srgb, var(--focus), black 8%);
}
.reportEditorContextIdentity {
gap: 2px;
min-width: 0;
display: grid;
}
.reportEditorContextIdentity .label {
margin: 0;
}
.reportEditorCreatedByMeta {
margin-top: 0;
}
.reportSectionTitle {
font-family: var(--font-condensed);
letter-spacing: .02em;
margin: 0;
font-size: 22px;
}
.reportWorkerContextBody {
gap: 12px;
}
.reportWorkerFieldGrid {
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
align-items: end;
gap: 10px;
display: grid;
}
.reportWorkerSiteField {
min-width: 0;
}
.reportEditorSectionBody, .reportWorkerTasksBody {
gap: 10px;
display: grid;
}
.reportWorkerTaskHeaderRow {
grid-template-columns: minmax(0, 1fr) 160px 44px;
align-items: end;
gap: 8px;
display: grid;
}
.reportWorkerTaskHeaderRow .label {
margin: 0;
}
.reportWorkerTaskList {
gap: 8px;
display: grid;
}
.reportWorkerTaskRow {
grid-template-columns: minmax(0, 1fr) 160px 44px;
align-items: end;
gap: 8px;
display: grid;
}
.reportWorkerTaskNameField, .reportWorkerTaskHoursField {
min-width: 0;
margin: 0;
}
.reportWorkerTaskHoursField {
grid-template-columns: 34px minmax(0, 1fr) 34px;
align-items: center;
gap: 6px;
display: grid;
}
.reportWorkerTaskHoursInput {
text-align: center;
}
.reportWorkerTaskStepBtn {
min-width: 34px;
min-height: 44px;
padding: 0;
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.reportWorkerTaskRow .input.isError {
border-color: color-mix(in srgb, var(--warn), transparent 25%);
}
.reportWorkerTaskRemoveBtn {
min-width: 44px;
min-height: 44px;
padding: 0;
}
.reportWorkerAddTaskBtn {
justify-self: start;
}
.reportWorkerTotalRow {
grid-template-columns: minmax(0, 1fr) 160px 44px;
align-items: end;
gap: 8px;
display: grid;
}
.reportWorkerTotalHoursCol {
justify-items: end;
gap: 2px;
display: grid;
}
.reportWorkerTotalValue {
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.adminApprovalsTicketTypeToken {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 40%);
letter-spacing: .01em;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 999px;
align-items: center;
min-width: 0;
max-width: 160px;
min-height: 20px;
padding: 0 8px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
display: inline-flex;
overflow: hidden;
}
.adminApprovalsTicketTypeToken.isExpense {
background: #faf5ee;
border-color: #c686258c;
}
.adminApprovalsTicketTypeToken.isMaterial {
border-color: color-mix(in srgb, var(--ok), transparent 50%);
background: color-mix(in srgb, var(--ok), white 93%);
}
.adminApprovalsTicketTypeToken.isMisc {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
background: color-mix(in srgb, var(--focus), white 93%);
}
.adminOperationsMaterialEditorRows {
gap: 10px;
display: grid;
}
.adminOperationsMaterialEditorRow {
grid-template-columns: minmax(0, 1.2fr) minmax(120px, 180px) minmax(120px, 160px) auto;
align-items: end;
gap: 10px;
display: grid;
}
.adminOperationsEditorHoursField {
max-width: 220px;
}
.adminOperationsTicketAttachmentGrid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
display: grid;
}
.adminOperationsTicketAttachmentItem {
color: inherit;
gap: 6px;
text-decoration: none;
display: grid;
}
.adminOperationsTicketAttachmentImage {
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg-2);
width: 100%;
}
.adminOperationsTicketAttachmentName {
word-break: break-word;
font-size: 12px;
line-height: 1.3;
}
.adminTicketEditorFormBody {
gap: 10px;
padding: 14px 16px;
display: grid;
}
.adminOperationsReadOnlyTicketPage .adminTicketEditorFormBody {
background: color-mix(in srgb, var(--bg-2), white 42%);
gap: 12px;
}
.adminTicketEditorMetaRow {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminTicketEditorMetaRowReadOnly {
align-items: start;
}
.adminTicketEditorStatusPillReadOnly {
align-self: start;
margin-left: auto;
}
.adminTicketEditorInfoGrid {
gap: 8px;
display: grid;
}
.adminTicketEditorInfoValue {
white-space: normal;
overflow-wrap: anywhere;
align-items: center;
gap: 6px;
width: fit-content;
max-width: 100%;
display: inline-flex;
}
.adminOperationsReadOnlyTicketPage .adminTicketEditorInfoValue {
background: #fff;
}
.ticketsFormBody .field {
gap: 6px;
margin-top: 8px;
}
.ticketsFormGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
display: grid;
}
.ticketsGridSpan2 {
grid-column: 1 / -1;
}
.ticketsTargetSection {
gap: 8px;
padding: 10px 0 2px;
display: grid;
}
.ticketsTargetHeader {
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.ticketsMaterialList {
gap: 6px;
margin-bottom: 6px;
display: grid;
}
.ticketsMaterialRow {
grid-template-columns: minmax(0, 1.35fr) 130px 110px auto;
gap: 6px;
display: grid;
}
.ticketsMiniBtn {
min-height: 40px;
font-size: var(--ops-font-action, 12px);
padding: 6px 10px;
}
.ticketsMaterialRemoveBtn {
justify-self: end;
width: 44px;
min-width: 44px;
min-height: 44px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.ticketsNotes {
resize: vertical;
min-height: 96px;
}
.portalInputHint {
font-size: var(--ops-font-primary, 13px);
color: var(--muted);
margin: 0;
}
.ticketsAttachmentInputHidden {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.ticketsAttachmentDropzone {
border: 1px dashed color-mix(in srgb, var(--stroke), var(--fg) 8%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), var(--bg) 26%);
align-items: center;
gap: 12px;
width: 100%;
min-height: 96px;
margin-top: 4px;
padding: 12px;
transition: background-color .14s, border-color .14s, box-shadow .14s;
display: grid;
}
.ticketsAttachmentDropzone:hover {
background: color-mix(in srgb, var(--focus), white 96%);
border-color: color-mix(in srgb, var(--focus), transparent 50%);
}
.ticketsAttachmentDropzone.isDragActive {
background: color-mix(in srgb, var(--focus), white 93%);
border-color: color-mix(in srgb, var(--focus), transparent 30%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 76%);
}
.ticketsAttachmentDropzone:focus-visible, .ticketsAttachmentInputHidden:focus-visible + .ticketsAttachmentDropzone {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 60%);
outline: none;
}
.ticketsAttachmentDropzone.isDisabled {
cursor: not-allowed;
opacity: .72;
}
.ticketsAttachmentDropzoneLead {
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.ticketsAttachmentDropzoneIcon {
width: 22px;
height: 22px;
color: color-mix(in srgb, var(--muted), var(--fg) 30%);
}
.ticketsAttachmentDropzoneIcon svg {
width: 100%;
height: 100%;
display: block;
}
.ticketsAttachmentDropzoneText {
font-size: var(--ops-font-primary, 13px);
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
font-weight: 600;
}
.ticketsAttachmentDropzoneTextBlock {
gap: 2px;
min-width: 0;
display: grid;
}
.ticketsAttachmentDropzoneSubtext {
font-size: var(--ops-font-meta, 12px);
color: color-mix(in srgb, var(--fg), var(--muted) 48%);
line-height: 1.3;
}
.ticketsAttachmentDropzoneActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.ticketsAttachmentDropzoneAction {
min-width: 132px;
min-height: 40px;
}
.ticketsAttachmentDropzoneActionSecondary {
background: #fff;
}
.ticketsAttachmentDropzoneActionPhone {
display: none;
}
.ticketsAttachmentGrid {
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 6px;
margin-top: 6px;
display: grid;
}
.ticketsAttachmentItem {
gap: 5px;
min-width: 0;
display: grid;
position: relative;
}
.ticketsAttachmentPreviewBtn {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 10%);
border-radius: calc(var(--radius) + 2px);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
cursor: pointer;
padding: 0;
line-height: 0;
transition: border-color .14s, box-shadow .14s, background-color .14s, transform .14s;
overflow: hidden;
}
.ticketsAttachmentPreviewBtn:hover, .ticketsAttachmentPreviewBtn:focus-visible {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 78%);
background: color-mix(in srgb, var(--focus), white 95%);
transform: translateY(-1px);
}
.ticketsAttachmentPreview {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.ticketsAttachmentPreviewSurface {
aspect-ratio: 4 / 3;
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
.ticketsAttachmentPreviewSurface.isDocumentPreview {
background: linear-gradient(#fcfcfc, #f0f2f4);
}
.ticketsAttachmentPreviewDocument {
object-fit: cover;
object-position: top center;
background: #fff;
}
.ticketsAttachmentPreviewFallback {
background: linear-gradient(180deg, color-mix(in srgb, var(--bg), white 82%), color-mix(in srgb, var(--bg-2), white 30%));
color: color-mix(in srgb, var(--fg), var(--muted) 26%);
place-items: center;
display: grid;
position: relative;
}
.ticketsAttachmentPreviewFallback.isPDF {
color: #c7392f;
background: linear-gradient(#fff6f5 0%, #ffe5e2 100%);
}
.ticketsAttachmentPreviewFallback.isPDF .ticketsAttachmentPreviewBadge {
display: none;
}
.ticketsAttachmentPreviewFallback.isPDF .ticketsAttachmentPreviewFallbackIcon {
width: 42px;
height: 42px;
}
.ticketsAttachmentPreviewBadge {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
background: color-mix(in srgb, var(--bg), white 80%);
letter-spacing: 0;
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 34px;
height: 20px;
padding: 0 8px;
font-size: 10px;
font-weight: 700;
line-height: 1;
display: inline-flex;
position: absolute;
top: 8px;
left: 8px;
}
.ticketsAttachmentPreviewBadge.isDocumentPreview {
color: #fff;
-webkit-backdrop-filter: blur(6px);
background: #c7392fc7;
border-color: #ffffff57;
min-width: 28px;
height: 16px;
padding: 0 6px;
font-size: 9px;
top: 6px;
left: auto;
right: 36px;
box-shadow: 0 1px 2px #00000024;
}
.ticketsAttachmentPreviewFallbackIcon {
width: 34px;
height: 34px;
display: block;
}
.ticketsAttachmentRemoveBtn {
border: 1px solid color-mix(in srgb, var(--danger), transparent 40%);
background: color-mix(in srgb, var(--danger), white 88%);
width: 28px;
height: 28px;
color: var(--danger);
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
position: absolute;
top: 8px;
right: 8px;
}
.ticketsAttachmentRemoveBtn svg {
width: 13px;
height: 13px;
}
.ticketsAttachmentMeta {
justify-content: space-between;
align-items: baseline;
gap: 6px;
min-width: 0;
display: flex;
}
.ticketsAttachmentFileName {
min-width: 0;
font-size: var(--ops-font-meta, 12px);
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25;
overflow: hidden;
}
.ticketsAttachmentSize {
font-size: var(--ops-font-micro, 11px);
color: color-mix(in srgb, var(--fg), var(--muted) 42%);
flex: none;
line-height: 1.2;
}
@media (min-width: 901px) {
.ticketsAttachmentDropzone {
text-align: left;
grid-template-columns: minmax(0, 1fr) auto;
}
.ticketsAttachmentDropzoneActions {
justify-content: flex-end;
}
}
.ticketsAttachedPill, .ticketsSavedPill {
width: fit-content;
}
.ticketsActionsPrimary {
justify-content: flex-end;
align-items: center;
gap: 10px;
display: flex;
}
.ticketsFormActionsBar .btn {
min-width: 170px;
}
.errorBox {
border: 1px solid color-mix(in srgb, var(--danger), transparent 42%);
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 16%);
border-radius: var(--radius);
padding: 10px 12px;
line-height: 1.4;
}
.adminOperationsApprovalsFilterForm {
display: block;
}
@media (max-width: 1360px) {
.adminApprovalsColItem {
width: 156px;
}
.adminApprovalsColUser {
width: 140px;
}
.adminApprovalsColState {
width: 150px;
}
.adminApprovalsColActionLane {
width: 184px;
}
.adminApprovalsResultsBody .adminApprovalsTable thead th {
font-size: var(--ops-font-table-header, 13px);
letter-spacing: .01em;
}
.adminApprovalsActionLane {
grid-template-columns: 60px 38px 38px 32px;
}
.adminApprovalsQuickActionViewBtn {
width: 60px;
min-width: 60px;
font-size: 11px;
}
.adminApprovalsQuickActionBtn, .adminApprovalsQuickActionPaidBtn {
width: 38px !important;
min-width: 38px !important;
}
.adminApprovalsActionPlaceholder {
width: 38px;
}
}
@media (max-width: 1220px) {
.adminApprovalsColItem {
width: 146px;
}
.adminApprovalsColUser {
width: 128px;
}
.adminApprovalsColState {
width: 138px;
}
.adminApprovalsColActionLane {
width: 170px;
}
.adminApprovalsActionLane {
grid-template-columns: 54px 34px 34px 32px;
column-gap: 3px;
}
.adminApprovalsQuickActionViewBtn {
width: 54px;
min-width: 54px;
padding: 0 6px !important;
}
.adminApprovalsQuickActionBtn, .adminApprovalsQuickActionPaidBtn {
width: 34px !important;
min-width: 34px !important;
}
.adminApprovalsQuickActionIcon {
width: 14px;
height: 14px;
}
.adminApprovalsActionPlaceholder {
width: 34px;
}
.adminApprovalsTable .adminUsersNameLine, .adminApprovalsReferenceLink, .adminApprovalsInfoLinePrimary {
font-size: 13px;
}
.adminApprovalsSecondaryLine, .adminApprovalsInfoLineSecondary, .adminApprovalsStateTime {
font-size: 11px;
}
}
.adminDirectoryFormGrid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
display: grid;
}
@media (max-width: 1200px) {
.adminOperationsReadOnlyPage .portalDetailFieldGrid, .adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid.isExpense, .adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid.isMaterial, .adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid.isMisc {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid .ticketsReadOnlyFieldTarget {
grid-column: 1 / -1;
}
}
@media (max-width: 900px) {
.adminSessionsSummaryGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminSessionsToolbarBody {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 820px) {
.adminSessionsTableWrap {
display: none;
}
.adminSessionsList {
max-height: max(520px, calc(100dvh - var(--admin-shell-header-height) - 320px));
padding-right: 2px;
display: grid;
overflow: auto;
}
.adminSessionsListItem {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
.adminSessionsMetaGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminSessionsMetaItemWide {
grid-column: 1 / -1;
}
.adminSessionsActionCell {
text-align: left;
grid-column: 2;
justify-content: flex-start;
}
}
@media (max-width: 520px) {
.adminSessionsToolbarMetaActions {
justify-content: space-between;
width: 100%;
}
.adminSessionsToolbarMetaActions .btn {
flex: none;
}
}
@media (max-width: 360px) {
.adminSessionsSummaryGrid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 900px) {
.adminOperationsApprovalDecisionBody {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.adminOperationsApprovalDecisionActions {
justify-content: stretch;
}
.adminOperationsApprovalDecisionActions .btn {
flex: 140px;
justify-content: center;
}
.adminOperationsDetailHeaderActions {
justify-content: stretch;
width: 100%;
}
.adminOperationsDetailHeaderActions .btn {
flex: 140px;
justify-content: center;
}
.adminOperationsDetailHeaderActionSeparator {
display: none;
}
.adminOperationsFlowChoiceGrid, .adminFinanceChoiceGrid, .adminOperationsFlowSegmentRow {
grid-template-columns: minmax(0, 1fr);
}
.adminOperationsFlowSegmentRow {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminOperationsFlowSectionAside {
justify-content: flex-start;
}
.adminOperationsEditorGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminOperationsEditorGridSpan2 {
grid-column: auto;
}
.adminOperationsDetailGrid, .adminOperationsDetailGridWide {
grid-template-columns: 1fr;
}
.portalDetailHeroBody, .reportReadOnlyHeroBody, .ticketsReadOnlyHeroBody {
padding: 16px !important;
}
.adminOperationsUnifiedFlow > .card > .cardBody {
padding: 16px;
}
.portalDetailFieldGrid, .adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid.isExpense, .adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid.isMaterial, .adminOperationsReadOnlyPage .ticketsReadOnlyFieldGrid.isMisc {
grid-template-columns: 1fr;
}
.ticketsReadOnlyCombinedField {
grid-template-columns: 1fr;
gap: 10px;
}
.ticketsReadOnlyCombinedFieldDivider {
width: 100%;
height: 1px;
}
.portalDetailSection {
padding: 16px;
}
.reportWorkerFieldGrid, .adminOperationsMaterialEditorRow {
grid-template-columns: minmax(0, 1fr);
}
.reportWorkerTaskHeaderRow {
grid-template-columns: minmax(0, 1fr) 96px 44px;
}
.reportWorkerTaskRow {
grid-template-columns: minmax(0, 1fr) 168px 44px;
align-items: center;
}
.reportWorkerTaskHoursField {
grid-template-columns: 44px minmax(0, 1fr) 44px;
gap: 4px;
}
.reportWorkerTaskStepBtn {
min-width: 44px;
}
.reportWorkerTotalRow {
grid-template-columns: minmax(0, 1fr) 168px 44px;
}
.reportWorkerTotalHoursCol {
text-align: right;
justify-items: end;
}
.reportEditorContextSiteCode {
font-size: 28px;
}
.adminApprovalsTicketTypeToken {
display: none;
}
.ticketsFormGrid {
grid-template-columns: 1fr;
}
.ticketsMaterialRow {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px;
align-items: end;
}
.ticketsAttachmentGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ticketsAttachmentPreview {
aspect-ratio: 1;
}
.ticketsAttachmentDropzone {
text-align: center;
border-width: 2px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
min-height: 96px;
padding: 12px;
display: flex;
}
.ticketsAttachmentDropzoneLead {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 100%;
}
.ticketsAttachmentDropzoneIcon {
width: 20px;
height: 20px;
}
.ticketsAttachmentDropzoneTextBlock {
text-align: center;
justify-items: center;
width: 100%;
}
.ticketsAttachmentDropzoneText {
font-size: 13px;
}
.ticketsAttachmentDropzoneSubtext {
font-size: 11px;
}
.ticketsAttachmentDropzoneActions {
gap: 8px;
width: 100%;
display: grid;
}
.ticketsAttachmentDropzoneAction {
width: 100%;
}
.ticketsAttachmentDropzoneActionPhone {
display: inline-flex;
}
.ticketsActionsPrimary {
width: 100%;
}
.ticketsFormActionsBar .btn {
width: 100%;
min-width: 0;
}
}
.adminHeaderBody {
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 12px;
display: flex;
}
.adminHeaderTitleWrap {
gap: 2px;
min-width: 0;
display: grid;
}
.adminPageTitle {
font-family: var(--font-condensed);
letter-spacing: .02em;
font-size: var(--page-title-size);
margin: 0;
line-height: 1.15;
}
.adminOperationsHeaderTitleRow {
align-items: center;
gap: 6px;
max-width: 100%;
display: inline-flex;
}
.adminOperationsHeaderPendingBadge {
min-width: 22px;
min-height: 22px;
font-family: var(--font-mono);
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0 7px;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
}
.adminOperationsHeaderPendingBadge.adminOperationsPendingBadge {
border-color: color-mix(in srgb, var(--danger), black 8%);
background: var(--danger);
color: #fff;
}
.adminRedenimSidebar .adminApprovalsCountUnknown {
border-color: var(--sidebar-border);
background: color-mix(in srgb, var(--sidebar-text), transparent 88%);
color: var(--sidebar-text);
}
.adminOperationsHeaderPendingBadge.adminOperationsPendingBadge.adminApprovalsCountUnknown {
border-color: color-mix(in srgb, var(--fg), transparent 78%);
background: color-mix(in srgb, var(--fg), transparent 90%);
color: var(--fg);
}
.adminCountPill {
justify-content: center;
min-width: 84px;
}
.adminCountValue {
color: var(--accent);
}
.adminDirectoryTitleCountPill {
background: var(--bg);
border-radius: 8px;
min-height: 26px;
padding: 3px 8px;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.adminUsersRoleWarningStrip {
border: 1px solid color-mix(in srgb, var(--warn), transparent 56%);
border-left: 3px solid color-mix(in srgb, var(--warn), black 6%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warn), white 94%);
min-height: 44px;
color: color-mix(in srgb, var(--fg), var(--warn) 24%);
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 10px 8px 12px;
display: flex;
}
.adminUsersRoleWarningText {
align-items: center;
gap: 8px;
min-width: 0;
font-size: 13px;
line-height: 1.35;
display: flex;
}
.adminUsersRoleWarningIcon, .adminUsersRoleWarningCount {
border: 1px solid color-mix(in srgb, var(--warn), transparent 50%);
background: color-mix(in srgb, var(--warn), white 86%);
color: color-mix(in srgb, var(--warn), black 24%);
flex: none;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminUsersRoleWarningIcon {
border-radius: 999px;
width: 18px;
height: 18px;
font-size: 11px;
font-weight: 800;
}
.adminUsersRoleWarningCount {
border-radius: 999px;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-size: 12px;
font-weight: 700;
}
.adminUsersRoleWarningAction {
border-color: color-mix(in srgb, var(--warn), transparent 42%);
min-height: 32px;
color: color-mix(in srgb, var(--warn), black 28%);
background: #fff;
padding: 5px 10px;
font-size: 13px;
}
.adminUsersRoleWarningAction:hover {
border-color: color-mix(in srgb, var(--warn), transparent 24%);
background: color-mix(in srgb, var(--warn), white 90%);
}
.adminUsersRoleWarningAction[aria-pressed="true"] {
background: color-mix(in srgb, var(--warn), white 84%);
}
.adminUsersListPage .adminListTableWrap {
overflow-x: auto;
}
.adminUsersListPage, .adminUsersListPage .card, .adminUsersListPage .cardBody {
min-width: 0;
}
.adminUsersListPage .adminListTable {
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 980px;
}
.adminUsersListPage .adminListTable thead th {
text-align: left;
letter-spacing: .01em;
color: color-mix(in srgb, var(--fg), black 8%);
border-bottom: 1px solid var(--stroke);
padding: 12px;
font-size: 16px;
font-weight: 700;
}
.adminUsersListPage .adminListTable thead th:last-child {
text-align: right;
}
.adminUsersListPage .adminListTable th:nth-child(3), .adminUsersListPage .adminListTable td:nth-child(3) {
width: 150px;
}
.adminUsersListPage .adminListTable th:nth-child(2), .adminUsersListPage .adminListTable td:nth-child(2) {
width: 34%;
}
.adminUsersListPage .adminListTable th:nth-child(4), .adminUsersListPage .adminListTable td:nth-child(4) {
width: 170px;
}
.adminUsersListPage .adminListTable th:nth-child(5), .adminUsersListPage .adminListTable td:nth-child(5) {
width: 138px;
}
.adminUsersListPage .adminListTable th:nth-child(6), .adminUsersListPage .adminListTable td:nth-child(6) {
width: 176px;
}
.adminUsersListPage .adminListTable th:nth-child(5) .adminGeoSortHeaderBtn, .adminUsersListPage .adminListTable th:nth-child(6) .adminGeoSortHeaderBtn {
white-space: nowrap;
}
.adminUsersActionsHeader {
width: 104px;
}
.adminOperationsReviewActionsHeader {
width: 188px;
}
.adminUsersListPage .adminListTable tbody td {
border-bottom: 1px solid var(--stroke);
vertical-align: middle;
padding: 14px 12px;
font-size: 14px;
line-height: 1.3;
}
.adminUsersListPage .adminListTable td:nth-child(5), .adminUsersListPage .adminListTable td:nth-child(6) {
font-size: 13px;
line-height: 1.25;
}
.adminUsersListPage .adminListRow {
transition: background-color .14s;
}
.adminUsersListPage .adminListRow:hover {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminUsersListPage .adminListRow:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 28%);
outline-offset: -2px;
}
.adminUsersNameCell {
align-items: center;
gap: 12px;
min-width: 240px;
display: flex;
}
.adminUsersNameMeta {
gap: 2px;
min-width: 0;
display: grid;
}
.adminUsersNameLine {
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
}
.adminUsersNameLineRow {
align-items: center;
gap: 6px;
min-width: 0;
display: flex;
}
.adminUsersNameCell .mono, .adminUsersNameCell .muted {
font-size: 13px;
line-height: 1.25;
}
.adminUsersNameMeta .muted {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminUsersStatusBadge {
border: 1px solid var(--stroke);
letter-spacing: .02em;
text-transform: uppercase;
border-radius: 999px;
flex-shrink: 0;
align-items: center;
width: fit-content;
min-height: 16px;
padding: 0 6px;
font-size: 10px;
font-weight: 600;
line-height: 1;
display: inline-flex;
}
.adminUsersStatusBadgeInactive {
color: color-mix(in srgb, var(--danger), black 10%);
background: color-mix(in srgb, var(--danger), white 90%);
border-color: color-mix(in srgb, var(--danger), transparent 36%);
}
.adminUsersStatusBadgeActive {
color: color-mix(in srgb, var(--fg), var(--muted) 30%);
background: color-mix(in srgb, var(--bg), var(--bg-2) 60%);
border-color: color-mix(in srgb, var(--stroke), black 2%);
}
.adminUsersStatusBadgePendingDeletion {
color: color-mix(in srgb, var(--warning), black 18%);
background: color-mix(in srgb, var(--warning), white 86%);
border-color: color-mix(in srgb, var(--warning), transparent 30%);
}
.adminUsersStatusBadgeDeleted {
color: color-mix(in srgb, var(--danger), black 14%);
background: color-mix(in srgb, var(--danger), white 88%);
border-color: color-mix(in srgb, var(--danger), transparent 34%);
}
.adminUsersStatusBadgeDemo {
color: color-mix(in srgb, var(--accent), black 18%);
background: color-mix(in srgb, var(--accent), white 88%);
border-color: color-mix(in srgb, var(--accent), transparent 34%);
}
.adminUsersRoleText, .adminUsersCategoryText {
color: color-mix(in srgb, var(--fg), black 2%);
font-size: 13px;
font-weight: 400;
line-height: 1.25;
}
.adminUsersCategoryText {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: inline-block;
overflow: hidden;
}
.adminUsersCategoryText.muted {
color: var(--muted);
}
.adminUsersRowActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
width: 100%;
display: inline-flex;
}
.adminListEditBtn {
border-color: color-mix(in srgb, var(--stroke), black 10%);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
border-radius: 8px;
min-height: 32px;
font-size: 13px;
font-weight: 600;
padding-left: 13px !important;
padding-right: 13px !important;
}
.adminListEditBtn:hover {
border-color: color-mix(in srgb, var(--focus), transparent 58%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminUsersMenuWrap {
position: relative;
}
.adminUsersMenuTrigger {
min-width: 44px;
min-height: 44px;
color: color-mix(in srgb, var(--fg), white 22%);
cursor: pointer;
background: none;
border: 0;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.adminUsersMenuTrigger:hover {
color: color-mix(in srgb, var(--fg), black 8%);
}
.adminUsersMenuTrigger:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus), transparent 30%);
border-radius: 6px;
outline: none;
}
.adminUsersKebabDots {
background: currentColor;
border-radius: 999px;
width: 4px;
height: 4px;
display: inline-block;
box-shadow: 0 -7px, 0 7px;
}
.adminUsersMenu {
border: 1px solid var(--stroke);
border-radius: var(--radius);
min-width: 220px;
box-shadow: var(--shadow-2);
background: var(--bg);
z-index: 40;
gap: 4px;
padding: 6px;
display: grid;
position: absolute;
top: calc(100% + 6px);
right: 0;
}
.adminUsersMenuFloating {
position: fixed;
top: 0;
left: 0;
right: auto;
}
.adminUsersMenuItem {
color: inherit;
text-align: left;
border-radius: var(--radius);
cursor: pointer;
background: none;
border: 0;
min-height: 44px;
padding: 8px 10px;
font-size: 14px;
}
.adminUsersMenuItem:hover {
background: color-mix(in srgb, var(--focus), white 92%);
}
.adminUsersMenuItem:focus-visible {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--focus), transparent 20%);
outline: none;
}
.adminUsersMenuItemDanger {
color: color-mix(in srgb, var(--danger), black 6%);
}
.adminUsersMenuItemDanger:hover {
background: color-mix(in srgb, var(--danger), white 90%);
}
.adminUsersMenuItemDisabled {
border-radius: var(--radius);
min-height: 44px;
color: var(--muted);
margin: 0;
padding: 8px 10px;
font-size: 14px;
}
.adminFormBody {
gap: 14px;
display: grid;
}
.adminFormBodyCompact {
align-content: start;
}
.adminUserFormSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 12px;
padding-top: 14px;
display: grid;
}
.adminUserFormSection:first-of-type {
border-top: 0;
padding-top: 0;
}
.adminUserFormSectionHead {
gap: 4px;
display: grid;
}
.adminUserEditProfileHead {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), var(--bg) 16%);
align-items: center;
gap: 12px;
padding: 10px;
display: flex;
}
.adminUserEditProfileAvatar {
flex: none;
}
.adminUserEditProfileMeta {
gap: 2px;
min-width: 0;
display: grid;
}
.adminUserEditProfileName {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.adminUserEditProfileUsername {
margin: 0;
font-size: 13px;
}
.adminUserEditProfilePills {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
margin-left: auto;
display: flex;
}
.adminUserEditProfileActions {
gap: 8px;
padding: 8px 10px 0;
display: grid;
}
.adminUserEditProfileActionsMeta {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminUserEditProfileActionsMeta .label, .adminUserEditProfileActionsMeta .muted {
margin: 0;
}
.adminUserEditProfileActionsButtons {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminUserAccessSummaryNote, .adminUserAccessSummaryText {
margin: 0;
}
.adminUserAccessPanelCard {
gap: 0;
}
.adminUserAccessSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
justify-content: space-between;
align-items: flex-start;
gap: 18px;
padding: 4px 4px 16px;
display: flex;
}
.adminUserAccessSectionTitle {
flex: auto;
gap: 5px;
min-width: 0;
display: grid;
}
.adminUserAccessSectionTitle h2, .adminUserAccessSectionTitle p {
margin: 0;
}
.adminUserAccessSectionTitle h2 {
font-size: 22px;
line-height: 1.15;
}
.adminUserAccessDetails {
gap: 0;
display: grid;
}
.adminUserAccessToggle {
width: 100%;
color: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 0;
list-style: none;
display: flex;
}
.adminUserAccessToggle::-webkit-details-marker {
display: none;
}
.adminUserAccessDetails > .adminUserAccessToggle {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding: 12px 4px 14px;
transition: border-color .12s;
}
.adminUserAccessToggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 14%);
outline-offset: 4px;
border-radius: var(--radius);
}
.adminUserAccessDetails:not([open]) > .adminUserAccessToggle:hover {
background: color-mix(in srgb, var(--focus), white 97%);
border-radius: calc(var(--radius) + 2px);
border-bottom-color: #0000;
}
.adminUserAccessToggleMain {
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.adminUserAccessToggleGlyph {
width: 20px;
height: 20px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
flex: none;
justify-content: center;
align-items: center;
margin-top: 1px;
transition: color .12s;
display: inline-flex;
}
.adminUserAccessToggle:hover .adminUserAccessToggleGlyph {
color: color-mix(in srgb, var(--focus), black 10%);
}
.adminUserAccessToggleGlyphSvg {
width: 18px;
height: 18px;
transition: transform .14s;
}
.adminUserAccessDetails[open] .adminUserAccessToggleGlyphSvg {
transform: rotate(90deg);
}
.adminUserAccessToggleText {
gap: 3px;
min-width: 0;
display: grid;
}
.adminUserAccessToggleText strong {
font-size: 17px;
line-height: 1.2;
}
.adminUserAccessMetric {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), white 22%);
min-height: 32px;
color: color-mix(in srgb, var(--fg), var(--muted) 16%);
white-space: nowrap;
border-radius: 999px;
flex: none;
align-items: center;
padding: 0 12px;
font-size: 13px;
font-weight: 600;
line-height: 1;
display: inline-flex;
}
.adminUserAccessMetric.isPrimary {
border-color: color-mix(in srgb, var(--focus), transparent 42%);
background: color-mix(in srgb, var(--focus), white 95%);
color: color-mix(in srgb, var(--focus), black 24%);
}
.adminUserAccessPanelBody {
gap: 16px;
padding: 18px 0 4px;
display: grid;
}
.adminUserDirectGrantSectionHead {
cursor: pointer;
}
.adminUserDirectGrantDisclosure .adminSectionDisclosureChevron {
transform: rotate(-90deg);
}
.adminUserDirectGrantDisclosure[open] .adminSectionDisclosureChevron {
transform: rotate(0);
}
.adminUserAccessReadonlyValue {
align-items: center;
min-height: 44px;
display: flex;
}
.adminUserAccessHero {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminUserAccessHeroCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
border-radius: calc(var(--radius) + 2px);
background: linear-gradient(180deg, color-mix(in srgb, white, var(--bg-2) 18%) 0%, color-mix(in srgb, var(--bg), white 12%) 100%);
gap: 8px;
padding: 14px 15px;
display: grid;
box-shadow: inset 0 1px #fff9;
}
.adminUserAccessHeroCard.isPrimary {
border-color: color-mix(in srgb, var(--focus), transparent 48%);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 96%) 0%, color-mix(in srgb, white, var(--bg) 6%) 100%);
}
.adminUserAccessHeroCard.isException {
border-color: color-mix(in srgb, var(--warn), transparent 44%);
background: linear-gradient(180deg, color-mix(in srgb, var(--warn), white 97%) 0%, color-mix(in srgb, white, var(--bg) 5%) 100%);
}
.adminUserAccessHeroCard.isClean {
border-color: color-mix(in srgb, var(--success), transparent 46%);
background: linear-gradient(180deg, color-mix(in srgb, var(--success), white 97%) 0%, color-mix(in srgb, white, var(--bg) 5%) 100%);
}
.adminUserAccessHeroHead {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminUserAccessTemplateIdentity {
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
display: flex;
}
.adminUserAccessTemplateIdentity strong {
font-size: 20px;
line-height: 1.1;
}
.adminUserAccessTemplateIdentity .mono {
color: var(--muted);
font-size: 13px;
}
.adminUserAccessCardText {
color: color-mix(in srgb, var(--fg), var(--muted) 28%);
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.adminUserAccessCapabilitiesBlock {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
border-radius: calc(var(--radius) + 2px);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2), white 26%) 0%, color-mix(in srgb, white, var(--bg) 8%) 100%);
gap: 14px;
padding: 15px;
display: grid;
}
.adminUserAccessCapabilitiesHeader {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminUserAccessCapabilitiesHeaderText {
gap: 4px;
display: grid;
}
.adminUserAccessCapabilitiesHeaderText .muted {
margin: 0;
}
.adminUserAccessCoverageSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) + 1px);
background: var(--bg);
align-items: stretch;
display: flex;
overflow: hidden;
}
.adminUserAccessCoverageStat {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
align-content: center;
min-width: 104px;
padding: 9px 12px;
display: grid;
}
.adminUserAccessCoverageStat:last-child {
border-right: 0;
}
.adminUserAccessCoverageStat strong {
font-size: 17px;
line-height: 1.1;
}
.adminUserAccessCoverageStat span {
color: var(--muted);
font-size: 11px;
font-weight: 650;
line-height: 1.25;
}
.adminUserAccessModuleLedger {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) + 1px);
background: var(--bg);
overflow: hidden;
}
.adminUserAccessModuleDetails {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminUserAccessModuleDetails:first-child {
border-top: 0;
}
.adminUserAccessModuleSummary {
cursor: pointer;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 50px;
padding: 9px 12px;
list-style: none;
display: grid;
}
.adminUserAccessModuleSummary::-webkit-details-marker {
display: none;
}
.adminUserAccessModuleSummary:hover {
background: color-mix(in srgb, var(--focus), white 97%);
}
.adminUserAccessModuleSummary:focus-visible {
outline: 2px solid var(--focus);
outline-offset: -2px;
}
.adminUserAccessModuleDetails[open] > .adminUserAccessModuleSummary {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), white 42%);
}
.adminUserAccessModuleSummary strong {
min-width: 0;
font-size: 14px;
line-height: 1.3;
}
.adminUserAccessModuleChevron {
width: 20px;
height: 20px;
color: var(--muted);
place-items: center;
display: grid;
}
.adminUserAccessModuleChevron svg {
width: 14px;
height: 14px;
transition: transform .14s;
}
.adminUserAccessModuleChevron path {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5px;
}
.adminUserAccessModuleDetails[open] .adminUserAccessModuleChevron svg {
transform: rotate(180deg);
}
.adminUserAccessModuleCount {
color: var(--muted);
white-space: nowrap;
font-size: 12px;
font-weight: 650;
}
.adminUserAccessCapabilityList {
background: color-mix(in srgb, var(--stroke), transparent 22%);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.adminUserAccessCapabilityItem {
background: var(--bg);
align-content: start;
gap: 3px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminUserAccessCapabilityItem:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.adminUserAccessCapabilityName {
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.adminUserAccessCapabilityDescription {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminUserAccessCapabilityKey {
overflow-wrap: anywhere;
color: color-mix(in srgb, var(--muted), white 6%);
font-size: 11px;
line-height: 1.35;
}
.adminUserAccessSummaryNote {
border-radius: calc(var(--radius) + 1px);
border: 1px solid color-mix(in srgb, var(--warn), transparent 54%);
background: color-mix(in srgb, var(--warn), white 97%);
padding: 10px 12px;
}
.adminUserDirectGrantSearch {
margin: 0;
}
.adminUserDirectGrantGrid {
gap: 12px;
display: grid;
}
.adminUserDirectGrantGroup {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-radius: calc(var(--radius) + 1px);
background: color-mix(in srgb, white, var(--bg-2) 12%);
gap: 10px;
padding: 12px 13px;
display: grid;
}
.adminUserDirectGrantList {
gap: 7px;
display: grid;
}
.adminUserDirectGrantRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
border-radius: var(--radius);
background: color-mix(in srgb, white, var(--bg-2) 8%);
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: flex-start;
gap: 10px;
min-height: 44px;
padding: 9px 10px;
display: grid;
}
.adminUserDirectGrantRow input {
margin-top: 3px;
}
.adminUserDirectGrantText {
gap: 2px;
min-width: 0;
display: grid;
}
.adminUserDirectGrantMatrix {
min-width: 0;
}
.adminUserDirectGrantMatrix .adminRolesPermissionsStats {
justify-content: flex-start;
}
.adminUserDirectGrantInheritedPill {
border: 1px solid color-mix(in srgb, var(--focus), transparent 56%);
background: color-mix(in srgb, var(--focus), white 96%);
min-height: 24px;
color: color-mix(in srgb, var(--focus), black 16%);
white-space: nowrap;
border-radius: 999px;
align-items: center;
padding: 0 8px;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
}
.adminUserAvatarActionBtn {
min-height: 38px;
padding: 7px 14px;
font-size: 14px;
}
.adminUsersAvatarInput {
display: none;
}
.adminUserAvatarError {
margin: 0;
}
.adminUserCategoryAssignmentsCard {
gap: 14px;
}
.adminUserCategoryAssignmentsHead {
padding-bottom: 14px;
}
.adminUserCategoryAssignmentEditor {
grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .7fr) minmax(150px, .7fr) auto;
align-items: end;
gap: 10px;
display: grid;
}
.adminUserCategoryAssignmentEditor .adminSettingsField {
margin: 0;
}
.adminUserCategoryAssignmentAdd {
white-space: nowrap;
min-height: 44px;
}
.adminUsersCategoryAssignmentEmpty {
margin: 0;
}
.adminUsersCategoryAssignmentTableWrap {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: #fff;
overflow-x: auto;
}
.adminUsersCategoryAssignmentTable {
border-collapse: collapse;
width: 100%;
min-width: 820px;
}
.adminUsersCategoryAssignmentTable th, .adminUsersCategoryAssignmentTable td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
text-align: left;
vertical-align: middle;
padding: 10px;
}
.adminUsersCategoryAssignmentTable th {
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0;
font-size: 11px;
font-weight: 800;
}
.adminUsersCategoryAssignmentTable tbody tr:last-child td {
border-bottom: 0;
}
.adminUsersCategoryAssignmentTable .input {
min-height: 40px;
}
.adminUsersCategoryAssignmentStatus {
justify-content: center;
min-width: 88px;
}
.adminUsersCategoryAssignmentStatus.is-current {
border-color: color-mix(in srgb, var(--success), white 58%);
background: color-mix(in srgb, var(--success), white 92%);
color: color-mix(in srgb, var(--success), #111 30%);
}
.adminUsersCategoryAssignmentStatus.is-future {
border-color: color-mix(in srgb, var(--focus), white 58%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), #111 18%);
}
.adminUsersCategoryAssignmentStatus.is-historical {
color: var(--muted);
}
.adminUserCategoryAssignmentSave {
white-space: nowrap;
min-height: 40px;
}
.adminFormStack {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
display: grid;
}
.adminUsersRolesField {
margin-top: 0;
}
.adminUsersRoleChoiceField {
gap: 8px;
display: grid;
}
.adminUsersRequiredMark {
color: color-mix(in srgb, var(--danger), var(--fg) 22%);
margin-left: 4px;
font-weight: 700;
}
.adminUsersSuggestionAction {
width: fit-content;
min-height: 34px;
margin-top: 6px;
padding: 6px 10px;
}
.adminUsersLifecycleActions {
justify-content: flex-end;
}
.adminSupplierPaymentAccountsSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
gap: 10px;
margin-top: 12px;
padding-top: 8px;
display: grid;
}
.adminSupplierPaymentAccountsHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 12px;
display: flex;
}
.adminSupplierPaymentAccountsTitleBlock {
gap: 0;
display: grid;
}
.adminSupplierPaymentAccountsTitle {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.adminSupplierPaymentAccountAddBtn {
min-height: 40px;
padding-inline: 18px;
font-size: 14px;
}
.adminSupplierPaymentAccountsList {
gap: 10px;
display: grid;
}
.adminSupplierPaymentAccountRow {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
background: color-mix(in srgb, var(--surface), var(--paper) 18%);
border-radius: var(--radius);
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 14px 18px;
padding: 16px 18px;
display: grid;
box-shadow: 0 1px #1014180a;
}
.adminSupplierPaymentAccountRow.isInactive {
opacity: .72;
}
.adminSupplierPaymentAccountMain {
gap: 6px;
min-width: 0;
display: grid;
}
.adminSupplierPaymentAccountTopline {
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
display: flex;
}
.adminSupplierPaymentAccountIban {
font-size: 17px;
line-height: 1.15;
}
.adminSupplierPaymentAccountBadge {
letter-spacing: .03em;
text-transform: uppercase;
align-self: center;
min-height: 0;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.adminSupplierPaymentAccountMeta {
color: var(--muted);
flex-wrap: wrap;
gap: 6px 12px;
font-size: 15px;
line-height: 1.3;
display: flex;
}
.adminSupplierPaymentAccountMetaPrimary {
color: var(--fg);
font-weight: 500;
}
.adminSupplierPaymentAccountMetaSecondary:before {
content: "·";
color: color-mix(in srgb, var(--muted), transparent 18%);
margin-right: 8px;
}
.adminSupplierPaymentAccountNotes {
max-width: 72ch;
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.adminSupplierPaymentAccountActions {
flex-wrap: wrap;
justify-content: flex-end;
place-self: start end;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminSupplierPaymentAccountActionBtn {
min-height: 36px;
box-shadow: none;
padding: 8px 14px;
font-size: 14px;
}
.adminSupplierPaymentAccountActions .btnDanger {
background: color-mix(in srgb, var(--danger), white 10%);
}
.adminSupplierPaymentAccountActions .btnAction {
background: color-mix(in srgb, var(--focus), white 12%);
}
.adminSupplierFinancePrefillCard {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: #fff;
gap: 14px;
padding: 16px 18px;
display: grid;
box-shadow: 0 1px #1014180a;
}
.adminSupplierFinancePrefillHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 12px;
display: flex;
}
.adminSupplierFinancePrefillTitleBlock {
gap: 4px;
display: grid;
}
.adminSupplierFinancePrefillTitle {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.adminSupplierFinancePrefillHint {
max-width: 72ch;
margin: 0;
}
.adminSupplierFinancePrefillList {
gap: 10px;
display: grid;
}
.adminSupplierFinancePrefillTableWrap {
border-radius: calc(var(--radius) + 2px);
}
.adminSupplierFinancePrefillTable {
min-width: 760px;
}
.adminSupplierFinancePrefillTable thead th {
background: color-mix(in srgb, var(--focus), white 88%);
color: color-mix(in srgb, var(--text), black 8%);
font-size: 14px;
}
.adminSupplierFinancePrefillTable th:first-child, .adminSupplierFinancePrefillTable td:first-child {
width: 20%;
}
.adminSupplierFinancePrefillTable th:nth-child(2), .adminSupplierFinancePrefillTable td:nth-child(2), .adminSupplierFinancePrefillTable th:nth-child(3), .adminSupplierFinancePrefillTable td:nth-child(3) {
width: 31%;
}
.adminSupplierFinancePrefillTable th:nth-child(4), .adminSupplierFinancePrefillTable td:nth-child(4) {
text-align: right;
width: 18%;
}
.adminSupplierFinancePrefillTable th:nth-child(3), .adminSupplierFinancePrefillTable td:nth-child(3) {
text-align: left;
}
.adminSupplierFinancePrefillActionCell {
white-space: nowrap;
}
@media (max-width: 820px) {
.adminSupplierPaymentAccountRow {
grid-template-columns: 1fr;
}
.adminSupplierPaymentAccountActions {
justify-content: flex-start;
justify-self: start;
}
.adminSupplierPaymentAccountAddBtn {
justify-content: center;
width: 100%;
}
}
.adminSupplierPaymentAccountDialogCard {
width: min(720px, 100%);
}
.adminSupplierPaymentAccountDialogBody {
gap: 14px;
}
.adminSupplierPaymentAccountEditor {
gap: 12px;
display: grid;
}
.adminSupplierPaymentAccountCheckbox {
align-items: center;
gap: 8px;
display: flex;
}
.adminVehicleHistorySection {
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
gap: 10px;
margin-top: 12px;
padding-top: 8px;
display: grid;
}
.adminVehicleHistoryHeader {
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 12px;
display: flex;
}
.adminVehicleHistoryTitleBlock {
gap: 0;
display: grid;
}
.adminVehicleHistoryTitle {
margin: 0;
font-size: 18px;
line-height: 1.2;
}
.adminVehicleHistoryAddBtn {
min-height: 40px;
padding-inline: 18px;
font-size: 14px;
}
.adminVehicleHistoryList {
gap: 10px;
display: grid;
}
.adminVehicleHistoryRow {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface), var(--paper) 18%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 14px 18px;
padding: 16px 18px;
display: grid;
box-shadow: 0 1px #1014180a;
}
.adminVehicleHistoryMain {
gap: 6px;
min-width: 0;
display: grid;
}
.adminVehicleHistoryTopline {
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
display: flex;
}
.adminVehicleHistoryPrimaryValue {
font-size: 17px;
line-height: 1.15;
}
.adminVehicleHistoryMetric {
color: var(--fg);
font-size: 15px;
line-height: 1.2;
}
.adminVehicleHistoryBadge {
letter-spacing: .03em;
text-transform: uppercase;
align-self: center;
min-height: 0;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.adminVehicleHistoryMeta {
color: var(--muted);
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
font-size: 15px;
line-height: 1.3;
display: flex;
}
.adminVehicleHistoryMetaPrimary {
color: var(--fg);
font-weight: 500;
}
.adminVehicleHistoryMetaSecondary {
color: var(--muted);
}
.adminVehicleHistoryActions {
flex-wrap: wrap;
justify-content: flex-end;
place-self: start end;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminVehicleHistoryActionBtn {
min-height: 36px;
box-shadow: none;
padding: 8px 14px;
font-size: 14px;
}
.adminVehicleHistoryActions .btnDanger {
background: color-mix(in srgb, var(--danger), white 10%);
}
.adminVehicleHistoryDialogCard {
width: min(720px, 100%);
}
.adminVehicleHistoryDialogBody {
gap: 14px;
}
.adminVehicleHistoryEditor {
gap: 12px;
display: grid;
}
@media (max-width: 820px) {
.adminVehicleHistoryRow {
grid-template-columns: 1fr;
}
.adminVehicleHistoryActions {
justify-content: flex-start;
justify-self: start;
}
.adminVehicleHistoryAddBtn {
justify-content: center;
width: 100%;
}
}
.adminPillFit {
width: fit-content;
}
.adminFinanceInboxPage .pill.adminPillFit, .adminFinanceRegistryBody .pill.adminPillFit, .adminFinanceReviewPage .pill.adminPillFit, .adminFinanceReviewExperience .pill.adminPillFit, .adminFinanceDiagnosticsPanel .pill.adminPillFit, .adminFinanceDiagnosticsStagePanel .pill.adminPillFit, .adminFinanceMailboxDatasetPage .pill.adminPillFit, .adminFinanceCostControlSection .pill.adminPillFit, .adminFinanceCostControlSummaryFrame .pill.adminPillFit, .adminFinanceCostControlDiscrepancyHead .pill {
white-space: nowrap;
border-radius: 8px;
min-height: 28px;
padding: 0 10px;
font-size: 12px;
line-height: 1.1;
}
.adminDialogBackdrop {
background: color-mix(in srgb, var(--fg), transparent 84%);
padding: max(20px, env(safe-area-inset-top, 0px))
max(20px, env(safe-area-inset-right, 0px))
max(20px, env(safe-area-inset-bottom, 0px))
max(20px, env(safe-area-inset-left, 0px));
overscroll-behavior: contain;
z-index: 2200;
place-items: safe center center;
display: grid;
position: fixed;
inset: 0;
overflow: auto;
}
dialog.adminDialogBackdrop {
width: auto;
max-width: none;
height: auto;
max-height: none;
color: inherit;
border: 0;
margin: 0;
}
dialog.adminDialogBackdrop::backdrop {
background: none;
}
.adminDialogCard {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
width: min(560px, 100%);
min-width: 0;
box-shadow: 0 16px 40px color-mix(in srgb, var(--fg), transparent 82%);
background: #fff;
border-radius: 12px;
}
.adminUnsavedChangesDialogBackdrop {
z-index: 2200;
background: color-mix(in srgb, var(--fg), transparent 62%);
place-items: center;
padding: 18px;
display: grid;
position: fixed;
inset: 0;
}
.adminUnsavedChangesDialogCard {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
width: min(440px, 100%);
box-shadow: 0 18px 48px color-mix(in srgb, var(--fg), transparent 78%);
}
.adminUnsavedChangesDialog {
max-width: calc(100vw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overscroll-behavior: contain;
margin: auto;
padding: 0;
overflow: auto;
}
.adminUnsavedChangesDialog::backdrop {
background: color-mix(in srgb, var(--fg), transparent 62%);
}
.adminUnsavedChangesDialogBody {
gap: 12px;
display: grid;
}
.adminUnsavedChangesDialogTitle {
margin: 0;
font-size: 20px;
line-height: 1.2;
}
.adminUnsavedChangesDialogMessage {
color: var(--muted);
margin: 0;
line-height: 1.45;
}
.adminUnsavedChangesDialogActions {
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
display: flex;
}
.adminTicketsExportDialogCard {
width: min(960px, 100%);
overflow: hidden;
}
.adminUsersResetDialogCard {
width: min(480px, 100%);
}
.adminUsersSupportDialogCard {
width: min(560px, 100%);
}
.adminUsersSupportTokenField {
gap: 8px;
}
.adminUsersSupportTokenShell {
min-width: 0;
display: grid;
position: relative;
}
.adminUsersSupportCopyButton {
border: 1px solid color-mix(in srgb, var(--stroke), var(--focus) 20%);
background: color-mix(in srgb, var(--bg), white 72%);
width: 44px;
height: 44px;
color: color-mix(in srgb, var(--fg), var(--muted) 26%);
box-shadow: 0 1px 2px color-mix(in srgb, var(--fg), transparent 92%);
cursor: pointer;
border-radius: 10px;
justify-content: center;
align-items: center;
padding: 0;
transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s;
display: inline-flex;
position: absolute;
top: 10px;
right: 10px;
}
.adminUsersSupportCopyButton:hover {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 34%);
background: color-mix(in srgb, var(--focus), white 93%);
color: var(--fg);
box-shadow: 0 2px 8px color-mix(in srgb, var(--focus), transparent 86%);
}
.adminUsersSupportCopyButton:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.adminUsersSupportToken {
resize: vertical;
overflow-wrap: anywhere;
min-height: 84px;
padding-right: 66px;
}
.adminUsersSupportActions .btnAction {
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminDialogBody {
gap: 12px;
display: grid;
}
.adminFinanceInboxDialogDocument {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-2), white 42%);
gap: 4px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminFinanceInboxDialogFilename, .adminFinanceInboxDialogMeta {
min-width: 0;
margin: 0;
}
.adminFinanceInboxDialogFilename {
overflow-wrap: anywhere;
word-break: break-word;
font-size: 13px;
line-height: 1.35;
}
.adminFinanceInboxDialogMeta {
font-size: 12px;
line-height: 1.3;
}
.adminTicketsExportDialogBody {
overscroll-behavior: contain;
gap: 16px;
max-height: calc(100dvh - 40px);
overflow-y: auto;
}
.adminTicketsExportDialogHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminTicketsExportDialogHeader > div {
min-width: 0;
}
.adminTicketsPaymentExportCloseBtn {
border-radius: 999px;
justify-content: center;
align-items: center;
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
font-size: 30px;
line-height: 1;
display: inline-flex;
}
.adminTicketsExportViewSelector {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
display: grid;
}
.adminTicketsExportViewButton {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
border-radius: var(--radius);
min-width: 0;
min-height: 72px;
color: var(--fg);
font: inherit;
text-align: left;
cursor: pointer;
background: #fff;
gap: 4px;
padding: 12px 14px;
transition: border-color .14s, background-color .14s;
display: grid;
}
.adminTicketsExportViewButton strong {
font-size: 14px;
line-height: 1.2;
}
.adminTicketsExportViewButton span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminTicketsExportViewButton:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 46%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminTicketsExportViewButton[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 18%);
background: color-mix(in srgb, var(--focus), white 92%);
}
.adminTicketsExportViewButton:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.adminTicketsExportViewButton:disabled {
cursor: not-allowed;
opacity: .72;
}
.adminTicketsExportPane {
gap: 14px;
min-width: 0;
display: grid;
}
.adminTicketsExportPaneHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
min-width: 0;
display: flex;
}
.adminTicketsExportPaneHeader > div {
gap: 2px;
min-width: 0;
display: grid;
}
.adminTicketsExportPaneHeader h3, .adminTicketsExportPaneHeader p {
margin: 0;
}
.adminTicketsExportPaneHeader h3 {
font-size: 15px;
line-height: 1.25;
}
.adminTicketsExportPaneHeader p {
font-size: 12px;
line-height: 1.4;
}
.adminTicketsExportPaneHeader .btn {
flex: none;
min-height: 44px;
}
.adminTicketsPaymentExportSummaryStrip {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
border-radius: var(--radius);
grid-template-columns: repeat(3, minmax(0, 1fr));
display: grid;
overflow: hidden;
}
.adminTicketsPaymentExportSummaryItem {
background: color-mix(in srgb, var(--bg-2), white 12%);
gap: 4px;
padding: 12px 18px;
display: grid;
}
.adminTicketsPaymentExportSummaryItem + .adminTicketsPaymentExportSummaryItem {
border-left: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
}
.adminTicketsPaymentExportSummaryItem strong {
font-size: 17px;
line-height: 1.1;
}
.adminTicketsPaymentExportControls {
grid-template-columns: repeat(2, minmax(0, 220px));
align-items: end;
gap: 12px;
min-width: 0;
display: grid;
}
.adminTicketsPaymentExportPreview {
min-width: 0;
min-height: 56px;
display: grid;
}
.adminTicketsPaymentExportFooter {
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding-top: 14px;
display: grid;
}
.adminTicketsPaymentExportActionHint {
max-width: 64ch;
margin: 0;
font-size: 12px;
line-height: 1.4;
}
.adminTicketsPaymentExportActionCluster {
flex-wrap: wrap;
justify-content: end;
gap: 12px;
display: flex;
}
.adminTicketsPaymentExportUsers {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
scrollbar-width: none;
-ms-overflow-style: none;
gap: 8px;
max-height: min(38vh, 420px);
padding: 4px 2px;
display: grid;
overflow: auto;
}
.adminTicketsPaymentExportUsers::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.adminTicketsPaymentExportWorkerDetails {
border-bottom: 0;
}
.adminTicketsPaymentExportWorkerSummary {
cursor: pointer;
border-radius: 12px;
justify-content: space-between;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 8px 10px;
list-style: none;
transition: background-color .14s;
display: flex;
}
.adminTicketsPaymentExportWorkerSummary::-webkit-details-marker {
display: none;
}
.adminTicketsPaymentExportWorkerSummary:hover {
background: color-mix(in srgb, var(--focus), white 95%);
}
.adminTicketsPaymentExportWorkerSummary:focus-visible {
background: color-mix(in srgb, var(--focus), white 94%);
outline: none;
}
.adminTicketsPaymentExportWorkerIdentity {
align-items: baseline;
gap: 8px;
min-width: 0;
display: flex;
}
.adminTicketsPaymentExportWorkerChevron {
width: 20px;
color: var(--muted);
justify-content: center;
align-items: center;
margin-top: 0;
font-size: 24px;
line-height: 1;
transition: transform .14s;
display: inline-flex;
transform: rotate(0);
}
.adminTicketsPaymentExportWorkerDetails[open] .adminTicketsPaymentExportWorkerChevron {
transform: rotate(90deg);
}
.adminTicketsPaymentExportWorkerText {
gap: 1px;
min-width: 0;
display: grid;
}
.adminTicketsPaymentExportWorkerText .mono {
font-size: 13px;
}
.adminTicketsPaymentExportWorkerTotals {
justify-items: end;
gap: 1px;
display: grid;
}
.adminTicketsPaymentExportWorkerTotals strong {
font-size: 17px;
line-height: 1.1;
}
.adminTicketsPaymentExportWorkerTotals .muted {
font-size: 13px;
}
.adminTicketsPaymentExportMonthList {
gap: 0;
padding: 2px 10px 10px 38px;
display: grid;
}
.adminTicketsPaymentExportMonthRow {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 20%);
grid-template-columns: minmax(0, 1fr) 120px 160px;
align-items: center;
gap: 8px;
padding: 10px 0;
display: grid;
}
.adminTicketsPaymentExportMonthRow > :nth-child(2), .adminTicketsPaymentExportMonthRow > :nth-child(3) {
justify-self: end;
}
.adminTicketsPaymentExportDownloadBtn, .adminTicketsPaymentExportMarkBtn {
min-width: 0;
min-height: 48px;
padding-left: 28px;
padding-right: 28px;
}
.adminTicketsPaymentExportMarkBtn:disabled {
background: color-mix(in srgb, var(--ok), white 70%);
border-color: color-mix(in srgb, var(--ok), var(--fg) 12%);
color: color-mix(in srgb, var(--fg), white 20%);
}
.adminUsersResetTitle {
flex-wrap: wrap;
align-items: baseline;
gap: .25ch;
display: flex;
}
.adminUsersResetTitleText {
font-weight: 600;
}
.adminUsersResetTitleName {
color: var(--focus);
font-weight: 800;
}
.adminUsersPasswordInputRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 8px;
display: grid;
}
.adminUsersPasswordInputRow .btn {
align-self: start;
}
.adminUsersResetCheckboxField {
gap: 4px;
}
.adminUsersResetPolicyList {
gap: 2px;
margin: 0;
padding-left: 18px;
font-size: 12px;
display: grid;
}
.adminUsersResetCheckboxHint {
margin-left: 29px;
}
.adminUsersResetResultRow {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
display: grid;
}
.adminUsersResetResultStatus {
align-items: center;
min-height: 36px;
display: flex;
}
.adminUsersResetResultMessage {
margin: 0;
}
.adminUsersResetResultActions {
justify-content: flex-end;
display: flex;
}
@media (max-width: 640px) {
.adminUsersResetResultRow {
grid-template-columns: minmax(0, 1fr);
}
.adminUsersResetResultActions {
justify-content: flex-start;
}
.adminTicketsExportViewSelector, .adminTicketsPaymentExportSummaryStrip, .adminTicketsPaymentExportControls, .adminTicketsPaymentExportFooter {
grid-template-columns: minmax(0, 1fr);
}
.adminTicketsExportPaneHeader {
flex-direction: column;
align-items: stretch;
}
.adminTicketsExportPaneHeader .btn {
width: 100%;
}
.adminTicketsPaymentExportSummaryItem + .adminTicketsPaymentExportSummaryItem {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 8%);
}
.adminTicketsPaymentExportActionCluster {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
justify-self: stretch;
width: 100%;
display: grid;
}
.adminTicketsPaymentExportActionCluster .btn {
width: 100%;
}
.adminTicketsPaymentExportWorkerSummary {
flex-direction: column;
align-items: flex-start;
}
.adminTicketsPaymentExportWorkerTotals {
justify-items: start;
padding-left: 28px;
}
.adminTicketsPaymentExportMonthList {
padding-left: 28px;
}
.adminTicketsPaymentExportMonthRow {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
}
.adminDeleteUserDialogList {
gap: 4px;
margin: 0;
padding-left: 18px;
display: grid;
}
.adminFilterBody {
gap: 10px;
display: grid;
}
.adminHistoryFilterTop {
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 10px;
display: flex;
}
.adminBackupsToolbarBody .adminFilterActions {
justify-content: flex-end;
}
.adminBackupsStatusPill {
border-color: color-mix(in srgb, var(--stroke), var(--fg) 18%);
}
.adminBackupsStatusPillsuccess {
background: color-mix(in srgb, var(--success), white 86%);
border-color: color-mix(in srgb, var(--success), transparent 25%);
}
.adminBackupsStatusPillpartial {
background: color-mix(in srgb, var(--warning), white 84%);
border-color: color-mix(in srgb, var(--warning), transparent 30%);
}
.adminBackupsStatusPillfailed, .adminBackupsStatusPillerror {
background: color-mix(in srgb, var(--danger), white 86%);
border-color: color-mix(in srgb, var(--danger), transparent 34%);
}
.adminGdprStatusPill {
border-color: color-mix(in srgb, var(--stroke), var(--fg) 16%);
}
.adminGdprStatusPillopen {
background: color-mix(in srgb, var(--focus), white 92%);
border-color: color-mix(in srgb, var(--focus), transparent 34%);
}
.adminGdprStatusPillin_progress {
background: color-mix(in srgb, var(--warning), white 86%);
border-color: color-mix(in srgb, var(--warning), transparent 34%);
}
.adminGdprStatusPillcompleted {
background: color-mix(in srgb, var(--success), white 87%);
border-color: color-mix(in srgb, var(--success), transparent 34%);
}
.adminGdprStatusPillrejected {
background: color-mix(in srgb, var(--danger), white 87%);
border-color: color-mix(in srgb, var(--danger), transparent 34%);
}
.adminGdprQueueSurface {
min-width: 0;
}
.adminGdprCreateCard, .adminGdprQueueSection {
width: 100%;
}
.adminGdprCreateGrid {
grid-template-columns: minmax(170px, .7fr) minmax(220px, 1fr) minmax(240px, 1.05fr) minmax(240px, 1.05fr);
}
.adminGdprCreateGrid > .field:nth-child(3), .adminGdprCreateGrid > .field:nth-child(4), .adminGdprCreateGrid > .field:nth-child(5) {
grid-column: span 2;
}
.adminGdprDateTimeField {
border: 0;
min-width: 0;
margin: 0;
padding: 0;
}
.adminGdprDateTimeInputs {
grid-template-columns: minmax(150px, 1fr) minmax(96px, .55fr);
gap: 8px;
min-width: 0;
display: grid;
}
.adminGdprDateTimeInputs .input {
width: 100%;
min-width: 0;
}
.adminGdprDateInput, .adminGdprTimeInput {
font-family: var(--font-sans);
letter-spacing: 0;
}
.adminGdprQueueSection {
gap: 12px;
display: grid;
}
.adminGdprQueueSection .adminListFilterStack, .adminGdprQueueSection .adminListFilterCard, .adminGdprQueueSection .adminListFilterFrame, .adminGdprQueueSection .adminListFilterShell, .adminGdprQueueSection .adminListFilterPinnedGrid {
width: 100%;
}
.adminGdprQueueSection .adminListFilterPinnedGrid.adminListFilterGridVariantQueue, .adminGdprQueueSection .adminListFilterPinnedGrid.adminListFilterGridVariantQueue.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(280px, 1fr) minmax(160px, .34fr);
}
.adminGdprQueueSection .adminListFilterActionButton {
width: 100%;
}
@media (max-width: 1200px) {
.adminFilterGrid.adminGdprCreateGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminFilterGrid.adminGdprCreateGrid > .field:nth-child(3) {
grid-column: 1 / -1;
}
.adminFilterGrid.adminGdprCreateGrid > .field:nth-child(4), .adminFilterGrid.adminGdprCreateGrid > .field:nth-child(5) {
grid-column: auto;
}
.adminGdprQueueSection .adminListFilterPinnedGrid.adminListFilterGridVariantQueue, .adminGdprQueueSection .adminListFilterPinnedGrid.adminListFilterGridVariantQueue.adminListFilterPinnedCount2:not(.isExpanded) {
grid-template-columns: minmax(0, 1fr) minmax(160px, .42fr);
}
}
@media (max-width: 760px) {
.adminFilterGrid.adminGdprCreateGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminFilterGrid.adminGdprCreateGrid > .field:nth-child(3) {
grid-column: auto;
}
.adminGdprDateTimeInputs {
grid-template-columns: minmax(0, 1fr) minmax(112px, .45fr);
}
}
@media (max-width: 520px) {
.adminGdprDateTimeInputs {
grid-template-columns: minmax(0, 1fr);
}
}
.adminGdprQueueHeader {
gap: 3px;
display: grid;
}
.adminGdprQueueHeader .adminSettingsChecklistTitle, .adminGdprQueueHeader .adminSettingsFieldHint {
margin: 0;
}
.adminGdprQueueTable {
min-width: 980px;
}
.adminGdprQueueTable th:nth-child(2), .adminGdprQueueTable td:nth-child(2) {
min-width: 240px;
}
.adminGdprQueueTable th:nth-child(6), .adminGdprQueueTable td:nth-child(6) {
min-width: 260px;
}
.adminGdprRequesterCell {
gap: 4px;
min-width: 0;
display: grid;
}
.adminGdprRequesterCell strong {
color: color-mix(in srgb, var(--fg), black 8%);
font-weight: 800;
}
.adminGdprRequestNote, .adminGdprResolutionNote {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.adminGdprRequestNote {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 34rem;
overflow: hidden;
}
.adminGdprActionsCell {
vertical-align: top !important;
}
.adminGdprRowActions {
justify-content: flex-end;
align-items: center;
gap: 6px;
}
.adminGdprRowAction {
white-space: nowrap;
border-radius: 8px;
min-height: 34px;
font-size: 12px;
font-weight: 800;
padding: 6px 10px !important;
}
.adminGdprResolutionNote {
text-align: right;
margin-top: 6px;
}
.adminGdprQueueState {
margin: 0;
padding: 18px;
}
.adminFilterForm {
gap: 10px;
display: grid;
}
.adminFilterGrid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
align-items: end;
gap: 10px;
display: grid;
}
.adminFilterActions {
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
display: flex;
}
.adminBulkActionBody {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
display: flex;
}
.adminListInlineBulkActionBody {
border-bottom: 1px solid var(--stroke);
margin-bottom: 12px;
padding-top: 4px;
padding-bottom: 16px;
}
.adminCountPill.adminBulkInlineCount {
border-color: color-mix(in srgb, var(--stroke), black 10%);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
min-width: 0;
min-height: 32px;
color: color-mix(in srgb, var(--fg), black 4%);
border-radius: 8px;
padding: 0 13px;
}
.adminBulkInlineCountValue {
color: color-mix(in srgb, var(--fg), black 4%);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.adminBulkInlineBtn {
min-height: 32px;
}
.adminBulkInlineBtnDanger {
color: color-mix(in srgb, var(--danger), black 10%);
background: color-mix(in srgb, var(--danger), white 94%);
border-color: color-mix(in srgb, var(--danger), transparent 40%);
}
.adminBulkInlineBtnDanger:hover:not(:disabled) {
color: color-mix(in srgb, var(--danger), black 16%);
background: color-mix(in srgb, var(--danger), white 91%);
border-color: color-mix(in srgb, var(--danger), transparent 28%);
}
.adminBulkActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminBulkInlineHint {
color: var(--muted);
flex: 1 0 100%;
margin: 0;
font-size: 12px;
line-height: 1.3;
}
.adminBulkCheckbox {
align-items: center;
margin-right: 2px;
display: inline-flex;
}
.adminPagination {
justify-content: center;
align-items: center;
gap: 6px;
width: 100%;
display: flex;
}
.adminPaginationNav {
justify-content: center;
align-items: center;
gap: 6px;
width: auto;
display: flex;
}
.adminPaginationNumbers {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.adminPaginationBtn {
isolation: isolate;
min-width: 44px;
height: 44px;
color: var(--fg);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
cursor: pointer;
background: none;
border: 0;
border-radius: 6px;
justify-content: center;
align-items: center;
padding: 0 10px;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: inline-flex;
position: relative;
}
.adminPaginationBtn:before {
content: "";
z-index: -1;
pointer-events: none;
border-radius: 6px;
transition: background-color .14s;
position: absolute;
inset: 5px;
}
.adminPaginationBtn:hover:not(:disabled):before {
background: color-mix(in srgb, var(--focus), white 95%);
}
.adminPaginationBtn:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
}
.adminPaginationBtn:disabled {
cursor: not-allowed;
color: var(--muted);
opacity: .45;
}
.adminPaginationArrow {
color: color-mix(in srgb, var(--fg), var(--muted) 35%);
}
.adminPaginationBtnCurrent, .adminPaginationBtnCurrent:disabled {
color: #fff;
font-weight: 600;
}
.adminPaginationBtnCurrent:before, .adminPaginationBtnCurrent:hover:not(:disabled):before {
background: color-mix(in srgb, var(--focus), black 14%);
}
.adminPaginationBtnCurrent:disabled {
opacity: .6;
}
.adminPaginationEllipsis {
min-width: 14px;
color: var(--muted);
justify-content: center;
align-items: center;
font-size: 14px;
line-height: 1;
display: inline-flex;
}
.pillStatusDraft {
border-color: var(--stroke);
color: var(--muted);
background: color-mix(in srgb, var(--bg-2), var(--bg) 18%);
}
.pillStatusAttached {
border-color: color-mix(in srgb, var(--accent), transparent 55%);
color: color-mix(in srgb, var(--accent), black 8%);
background: color-mix(in srgb, var(--accent), white 92%);
}
.pillStatusSubmitted, .pillStatusPending {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
color: var(--fg);
background: color-mix(in srgb, var(--focus), white 92%);
}
.pillStatusReviewing {
border-color: color-mix(in srgb, var(--warning), transparent 42%);
color: color-mix(in srgb, var(--warning), black 28%);
background: color-mix(in srgb, var(--warning), white 94%);
}
.pillStatusReviewed {
color: #6b32cc;
background: #f7f3fe;
border-color: #7c3aed7a;
}
.pillStatusApproved {
border-color: color-mix(in srgb, var(--ok), transparent 55%);
color: var(--fg);
background: color-mix(in srgb, var(--ok), white 94%);
}
.pillStatusRejected {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
color: var(--fg);
background: color-mix(in srgb, var(--danger), white 92%);
}
.pillStatusCancelled {
border-color: color-mix(in srgb, var(--muted), transparent 58%);
color: color-mix(in srgb, var(--fg), white 24%);
background: color-mix(in srgb, var(--muted), white 86%);
}
.pillStatusLocked {
border-color: color-mix(in srgb, var(--fg), transparent 75%);
color: color-mix(in srgb, var(--fg), white 30%);
background: color-mix(in srgb, var(--fg), white 88%);
}
.adminReportsFilterCardBody, .adminFiltersCardBody {
gap: 12px;
container: admin-filter-card / inline-size;
}
.adminReportsFilterForm, .adminFilterBarForm, .adminOperationsApprovalsFilterForm {
display: block;
}
.adminOperationsReviewFilterActionLabel {
visibility: hidden;
-webkit-user-select: none;
user-select: none;
display: block;
}
.adminOperationsFilterLabelShort, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldPerPage .adminOperationsFilterLabelLong, .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage .adminOperationsFilterLabelLong {
display: none;
}
.adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldPerPage .adminOperationsFilterLabelShort, .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage .adminOperationsFilterLabelShort {
display: inline;
}
.adminOperationsFilterLayouts, .adminFilterLayouts {
min-width: 0;
}
.adminOperationsFilterLayout, .adminFilterLayout, .adminOperationsFilterLayoutStacked, .adminFilterLayoutStacked {
min-width: 0;
display: none;
}
.adminOperationsFilterRow {
align-items: end;
gap: 12px;
min-width: 0;
display: grid;
}
.adminOperationsFilterRow + .adminOperationsFilterRow {
margin-top: 10px;
}
.adminOperationsFilterRow > .field, .adminOperationsFilterRow > .adminOperationsFilterEndCluster {
min-width: 0;
margin-top: 0;
}
.adminReportsFilterField {
margin-top: 0;
}
.adminOperationsFilterFieldSearch, .adminOperationsFilterFieldSite, .adminOperationsFilterFieldUser, .adminOperationsFilterFieldStatus, .adminOperationsFilterFieldType {
min-width: 0;
}
.adminOperationsFilterFieldStatus {
min-width: 11.5rem;
}
.adminOperationsFilterFieldType {
min-width: 10.5rem;
}
.adminOperationsFilterFieldFrom, .adminOperationsFilterFieldTo {
min-width: 156px;
}
.adminOperationsFilterFieldPerPage {
width: 150px;
min-width: 150px;
}
.adminOperationsFilterClearField {
width: 108px;
min-width: 108px;
}
.adminOperationsFilterEndCluster {
grid-template-columns: 150px 108px;
justify-content: end;
justify-self: end;
align-items: end;
gap: 10px;
width: min(100%, 268px);
min-width: 0;
max-width: 268px;
display: grid;
}
.adminOperationsFilterEndClusterWithExport {
grid-template-columns: 150px 108px 176px;
width: min(100%, 454px);
max-width: 454px;
}
.adminOperationsFilterEndCluster .field {
min-width: 0;
margin-top: 0;
}
.adminOperationsFilterRowRight {
justify-content: end;
}
.adminOperationsFilterRowRight .adminOperationsFilterEndCluster {
justify-self: end;
}
.adminOperationsFilterClearField .btn {
width: 100%;
min-width: 0;
padding-inline: 12px;
}
.adminOperationsFilterExportField {
width: 176px;
min-width: 176px;
}
.adminOperationsFilterExportField .btn {
width: 100%;
min-width: 0;
}
.adminOperationsFilterFieldExport {
width: 288px;
min-width: 288px;
}
.adminOperationsExportMonthControl {
grid-template-columns: minmax(0, 124px) minmax(0, 1fr);
align-items: center;
gap: 8px;
display: grid;
}
.adminOperationsExportMonthInput {
min-width: 0;
}
.adminOperationsExportBtn {
white-space: nowrap;
justify-content: center;
align-items: center;
gap: 7px;
width: 100%;
min-width: 0;
display: inline-flex;
}
.adminOperationsExportError {
margin-top: 6px;
font-size: .78rem;
line-height: 1.25;
display: block;
}
.adminOperationsTimesheetsHeaderSlot, .adminOperationsReportsHeaderSlot, .adminOperationsTicketsHeaderSlot, .adminOperationsDayOffHeaderSlot {
justify-content: flex-end;
align-items: center;
min-height: 44px;
display: flex;
}
:is(.adminHeaderBody:has(.adminOperationsTimesheetsHeaderSlot), .adminHeaderBody:has(.adminOperationsReportsHeaderSlot), .adminHeaderBody:has(.adminOperationsTicketsHeaderSlot), .adminHeaderBody:has(.adminOperationsDayOffHeaderSlot)) {
align-items: flex-start;
}
.adminOperationsReportsHeaderCreateButton, .adminOperationsTicketsHeaderCreateButton, .adminOperationsDayOffHeaderGrantButton {
min-width: 128px;
min-height: 44px;
padding-inline: 18px;
}
.adminOperationsReportsHeaderActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminOperationsTimesheetExportHeaderAction {
justify-content: flex-end;
min-width: 0;
display: inline-flex;
}
.adminOperationsTimesheetExportTrigger {
justify-content: center;
align-items: center;
gap: 8px;
min-width: 128px;
min-height: 44px;
padding-inline: 18px;
display: inline-flex;
}
.adminOperationsTimesheetExportDialogBackdrop {
z-index: 2200;
padding-top: max(72px, env(safe-area-inset-top, 0px) + 24px);
background: color-mix(in srgb, var(--fg), transparent 74%);
align-items: flex-start;
}
.adminOperationsTimesheetExportDialogCard {
width: min(430px, 100vw - 32px);
max-height: calc(100dvh - 48px);
overflow: visible;
}
.adminOperationsTimesheetExportDialogBody {
gap: 14px;
}
.adminOperationsTimesheetExportDialogHeader {
justify-content: space-between;
align-items: flex-start;
gap: 14px;
display: flex;
}
.adminOperationsTimesheetExportDialogTitle {
margin: 0;
font-size: 1.04rem;
line-height: 1.2;
}
.adminOperationsTimesheetExportDialogHint {
margin: 5px 0 0;
font-size: .84rem;
line-height: 1.35;
}
.adminOperationsTimesheetExportDialogClose {
width: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
font-size: 1.2rem;
line-height: 1;
}
.adminOperationsTimesheetExportDialogCard .adminOperationsFilterFieldExport {
width: 100%;
min-width: 0;
}
.adminOperationsTimesheetExportDialogCard .adminOperationsExportMonthControl {
grid-template-columns: minmax(0, 1fr) minmax(0, 132px);
}
.adminOperationsTimesheetExportProjectionField {
gap: 4px;
margin-top: 10px;
display: grid;
}
.adminOperationsTimesheetExportProjectionHint {
font-size: .78rem;
line-height: 1.3;
}
.adminOperationsTimesheetExportDialogCard .listboxMenu, .adminTimesheetDocumentDialogCard .listboxMenu {
z-index: 70;
}
.adminOperationsExportFloatingMenu {
z-index: 2300;
}
.adminOperationsTicketExportFilterGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
min-width: 0;
display: grid;
}
.adminOperationsTicketExportField {
min-width: 0;
}
.adminOperationsTicketExportActions {
justify-content: space-between;
align-items: center;
gap: 12px;
min-width: 0;
display: flex;
}
.adminOperationsTicketExportActions .btn, .adminOperationsTicketExportAction {
min-height: 44px;
}
.adminOperationsTicketExportAction {
justify-content: center;
align-items: center;
gap: 7px;
min-width: 188px;
display: inline-flex;
}
@media (max-width: 760px) {
.adminOperationsTimesheetsHeaderSlot, .adminOperationsReportsHeaderSlot, .adminOperationsTicketsHeaderSlot, .adminOperationsDayOffHeaderSlot {
justify-content: flex-start;
width: 100%;
}
.adminOperationsTimesheetExportHeaderAction, .adminOperationsTimesheetExportTrigger, .adminOperationsReportsHeaderActions, .adminOperationsReportsHeaderCreateButton, .adminOperationsTicketsHeaderCreateButton, .adminOperationsDayOffHeaderGrantButton {
width: 100%;
}
.adminOperationsReportsHeaderActions {
flex-direction: column;
align-items: stretch;
}
.adminOperationsTimesheetExportDialogBackdrop {
padding: 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px);
padding-top: max(16px, env(safe-area-inset-top, 0px) + 16px);
align-items: end;
}
.adminOperationsTimesheetExportDialogCard {
width: 100%;
max-height: min(640px, 100dvh - 32px);
}
.adminOperationsTimesheetExportDialogCard .adminOperationsExportMonthControl, .adminOperationsTicketExportFilterGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminOperationsTicketExportActions {
flex-direction: column;
align-items: stretch;
}
.adminOperationsTicketExportAction {
width: 100%;
}
}
@container admin-filter-card (max-width: 1200px) {
.adminOperationsFilterEndCluster {
grid-template-columns: 132px 104px;
width: min(100%, 246px);
min-width: 0;
max-width: 246px;
}
.adminOperationsFilterFieldPerPage {
width: 132px;
min-width: 132px;
}
.adminOperationsFilterClearField {
width: 104px;
min-width: 104px;
}
.adminOperationsFilterEndClusterWithExport {
grid-template-columns: 132px 104px 164px;
width: min(100%, 416px);
max-width: 416px;
}
.adminOperationsFilterExportField {
width: 164px;
min-width: 164px;
}
.adminOperationsFilterFieldExport {
width: 276px;
min-width: 276px;
}
.adminOperationsExportMonthControl {
grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
}
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutWide .adminOperationsFilterRow {
grid-template-columns: minmax(18rem, 1.55fr) minmax(14rem, 1.05fr) minmax(14rem, 1.05fr) fit-content(11rem) minmax(10rem, .85fr) minmax(10rem, .85fr) fit-content(10rem) max-content;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(16rem, 1.6fr) minmax(11.5rem, 1fr) minmax(12rem, 1.05fr) minmax(11.5rem, .9fr);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(9.75rem, 1fr) minmax(9.75rem, 1fr) minmax(10.5rem, .95fr) fit-content(268px);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(16rem, 2fr) minmax(10.5rem, 1fr);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(13rem, 1.15fr) minmax(12rem, .95fr) minmax(9.5rem, .9fr);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(8.5rem, 1fr) minmax(8.5rem, 1fr) fit-content(268px);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2), .adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(3), .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2), .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(3) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:last-child, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(0, 1fr) fit-content(208px);
gap: 8px;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster {
grid-template-columns: 104px 96px;
gap: 8px;
width: min(100%, 208px);
max-width: 208px;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage {
width: 104px;
min-width: 104px;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSearch, .adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSite, .adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldStatus, .adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldType, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSearch, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSite, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldStatus, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldType {
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutWide .adminOperationsFilterRow {
grid-template-columns: minmax(16rem, 1.45fr) minmax(10rem, 1fr) minmax(10rem, 1fr) 268px;
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(16rem, 1.6fr) minmax(11.5rem, .8fr);
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(9.75rem, 1fr) minmax(9.75rem, 1fr) fit-content(268px);
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(0, 1fr);
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster {
grid-template-columns: 104px 96px;
gap: 8px;
width: min(100%, 208px);
max-width: 208px;
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage {
width: 104px;
min-width: 104px;
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldStatus {
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(14rem, 1.1fr) minmax(14rem, 1.1fr) minmax(11.5rem, .85fr);
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(9.75rem, 1fr) minmax(9.75rem, 1fr) fit-content(268px);
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:first-child, .adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr);
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(11.5rem, 1fr) fit-content(268px);
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child, .adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(0, 1fr) fit-content(208px);
gap: 8px;
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster {
grid-template-columns: 104px 96px;
gap: 8px;
width: min(100%, 208px);
max-width: 208px;
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage {
width: 104px;
min-width: 104px;
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSite, .adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldStatus {
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(16rem, 1.6fr) minmax(11.5rem, 1fr) minmax(12rem, 1.05fr) minmax(11.5rem, .9fr);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(9.75rem, 1fr) minmax(9.75rem, 1fr) minmax(10.5rem, .95fr) fit-content(454px);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(16rem, 2fr) minmax(10.5rem, 1fr);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(13rem, 1.15fr) minmax(12rem, .95fr) minmax(9.5rem, .9fr);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutNarrow .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(8.5rem, 1fr) minmax(8.5rem, 1fr) fit-content(454px);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2), .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(3) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(0, 1fr) fit-content(370px);
gap: 8px;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster {
grid-template-columns: 104px 96px;
gap: 8px;
width: min(100%, 208px);
max-width: 208px;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterEndClusterWithExport {
grid-template-columns: 104px 96px 154px;
width: min(100%, 370px);
max-width: 370px;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage {
width: 104px;
min-width: 104px;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSearch, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSite, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldStatus, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldType {
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutWide .adminOperationsFilterRow, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutWide .adminOperationsFilterRow {
grid-template-columns: minmax(14rem, 1.3fr) minmax(11.5rem, .9fr) minmax(10rem, 1fr) minmax(10rem, 1fr) 268px;
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:first-child, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:first-child {
grid-template-columns: minmax(14rem, 1.2fr) minmax(14rem, 1.2fr);
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:last-child, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutMedium .adminOperationsFilterRow:last-child {
grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) fit-content(268px);
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child, .adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2), .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:first-child, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked .adminOperationsFilterRow:nth-child(2) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster {
grid-template-columns: 104px 96px;
gap: 8px;
width: min(100%, 208px);
max-width: 208px;
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldPerPage {
width: 104px;
min-width: 104px;
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldStatus, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldSite, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked .adminOperationsFilterFieldUser {
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutMedium, .adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutMedium, .adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutMedium, .adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutMedium, .adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutMedium, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutMedium {
display: block;
}
@container admin-filter-card (max-width: 900px) {
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutMedium {
display: none;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutNarrow {
display: block;
}
}
@container admin-filter-card (max-width: 620px) {
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutNarrow {
display: none;
}
.adminOperationsFilterLayoutsApprovals .adminOperationsFilterLayoutStacked {
display: block;
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutMedium {
display: none;
}
.adminOperationsFilterLayoutsTimesheets .adminOperationsFilterLayoutStacked {
display: block;
}
}
@container admin-filter-card (max-width: 980px) {
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutMedium {
display: none;
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutNarrow {
display: block;
}
}
@container admin-filter-card (max-width: 900px) {
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutMedium {
display: none;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutNarrow {
display: block;
}
}
@container admin-filter-card (max-width: 1040px) {
.adminOperationsFilterLayoutsTicketsWithExport .adminOperationsFilterLayoutMedium {
display: none;
}
.adminOperationsFilterLayoutsTicketsWithExport .adminOperationsFilterLayoutNarrow {
display: block;
}
}
@container admin-filter-card (max-width: 620px) {
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutNarrow {
display: none;
}
.adminOperationsFilterLayoutsReports .adminOperationsFilterLayoutStacked {
display: block;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutNarrow {
display: none;
}
.adminOperationsFilterLayoutsTickets .adminOperationsFilterLayoutStacked {
display: block;
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutMedium, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutMedium {
display: none;
}
.adminOperationsFilterLayoutsDayOff .adminOperationsFilterLayoutStacked, .adminOperationsFilterLayoutsGeo .adminOperationsFilterLayoutStacked {
display: block;
}
}
@container admin-filter-card (max-width: 860px) {
.adminOperationsFilterFieldFrom, .adminOperationsFilterFieldTo {
max-width: none;
}
}
@container admin-filter-card (max-width: 560px) {
.adminOperationsFilterLabelLong {
display: none;
}
.adminOperationsFilterLabelShort {
display: inline;
}
.adminOperationsFilterLayoutNarrow .adminOperationsFilterRow {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.adminOperationsFilterLayoutNarrow .adminOperationsFilterEndCluster {
justify-self: stretch;
width: 100%;
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldSearch, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldSite, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldUser, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldStatus, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldType, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldFrom, .adminOperationsFilterLayoutNarrow .adminOperationsFilterFieldTo {
min-width: 0;
max-width: none;
}
.adminOperationsFilterLayoutStacked .adminOperationsFilterRow {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.adminOperationsFilterLayoutStacked .adminOperationsFilterEndCluster {
justify-self: stretch;
width: 100%;
min-width: 0;
max-width: none;
}
}
.adminReportsFilterActions {
align-self: end;
width: 118px;
}
.adminReportsFilterActions .btn, .adminReportsFilterActions a.btn {
width: 100%;
}
.adminEmptyText {
margin: 0;
}
.adminTimesheetRevisionConflictError {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.adminInfoGrid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 6px;
display: grid;
}
.adminInfoPill {
justify-content: space-between;
}
.adminInfoValue {
font-size: 12px;
}
.adminRuntimeHealthPage {
gap: 18px;
}
.adminRuntimeHealthHeader {
grid-template-columns: minmax(0, 1fr) auto;
justify-content: space-between;
align-items: start;
gap: 16px;
width: 100%;
display: grid;
}
.adminRuntimeHealthHeaderActions {
white-space: nowrap;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 12px;
padding-top: 3px;
display: flex;
}
.adminRuntimeHealthLastUpdated {
white-space: nowrap;
font-size: 13px;
}
.adminRuntimeHealthSummaryPanels, .adminRuntimeHealthFeedback, .adminRuntimeHealthLedgerSection {
width: 100%;
}
.adminRuntimeHealthSummaryPanels {
gap: 16px;
display: grid;
}
@media (min-width: 1040px) {
.adminRuntimeHealthSummaryPanels {
grid-template-columns: minmax(0, .82fr) minmax(0, 1.06fr) minmax(0, .94fr);
}
}
.adminRuntimeHealthSummaryPanel {
background: var(--bg);
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
box-shadow: none;
align-content: start;
gap: 14px;
min-width: 0;
padding: 14px 16px;
display: grid;
}
.adminRuntimeHealthPanelHead h2, .adminRuntimeHealthSectionHead h2 {
color: var(--fg);
margin: 0;
font-size: 16px;
line-height: 1.2;
}
.adminRuntimeHealthPanelHead p, .adminRuntimeHealthSectionHead p {
color: var(--muted);
margin: 4px 0 0;
font-size: 13px;
line-height: 1.35;
}
.adminRuntimeHealthMetricGrid {
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 12px 18px;
display: grid;
}
.adminRuntimeHealthMetricGrid--jobs, .adminRuntimeHealthMetricGrid--services {
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.adminRuntimeHealthMetric {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 3px 10px;
min-width: 0;
display: grid;
}
.adminRuntimeHealthMetric:before {
content: "";
background: #64748b;
border-radius: 999px;
grid-row: 1 / span 2;
width: 2px;
height: 28px;
}
.adminRuntimeHealthMetric strong {
color: var(--fg);
font-size: 26px;
line-height: 1;
}
.adminRuntimeHealthMetric span {
color: var(--muted);
letter-spacing: 0;
font-size: 12px;
font-weight: 650;
line-height: 1.2;
}
.adminRuntimeHealthMetric.isHealthy:before {
background: #22c55e;
}
.adminRuntimeHealthMetric.isRunning:before {
background: #3b82f6;
}
.adminRuntimeHealthMetric.isStale:before {
background: #f59e0b;
}
.adminRuntimeHealthMetric.isFailed:before, .adminRuntimeHealthMetric.isDown:before {
background: #ef4444;
}
.adminRuntimeHealthFeedback, .adminRuntimeHealthLedgerSection {
gap: 10px;
min-width: 0;
display: grid;
}
.adminRuntimeHealthTableWrap {
background: var(--bg);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
overflow: auto hidden;
}
.adminRuntimeHealthTable {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.adminRuntimeHealthProcessTable {
min-width: 960px;
}
.adminRuntimeHealthJobsTable {
min-width: 1040px;
}
.adminRuntimeHealthServicesTable {
min-width: 780px;
}
.adminRuntimeHealthProcessTable th:first-child, .adminRuntimeHealthProcessTable td:first-child, .adminRuntimeHealthJobsTable th:first-child, .adminRuntimeHealthJobsTable td:first-child, .adminRuntimeHealthServicesTable th:first-child, .adminRuntimeHealthServicesTable td:first-child {
width: 80px;
}
.adminRuntimeHealthProcessTable th:nth-child(2), .adminRuntimeHealthProcessTable td:nth-child(2) {
width: 155px;
}
.adminRuntimeHealthJobsTable th:nth-child(2), .adminRuntimeHealthJobsTable td:nth-child(2) {
width: 215px;
}
.adminRuntimeHealthProcessTable th:nth-child(3), .adminRuntimeHealthProcessTable td:nth-child(3), .adminRuntimeHealthProcessTable th:nth-child(4), .adminRuntimeHealthProcessTable td:nth-child(4) {
width: 132px;
}
.adminRuntimeHealthProcessTable th:nth-child(5), .adminRuntimeHealthProcessTable td:nth-child(5) {
width: 170px;
}
.adminRuntimeHealthProcessTable th:nth-child(6), .adminRuntimeHealthProcessTable td:nth-child(6) {
width: 55px;
}
.adminRuntimeHealthProcessTable th:nth-child(7), .adminRuntimeHealthProcessTable td:nth-child(7) {
width: 135px;
}
.adminRuntimeHealthProcessTable th:nth-child(8), .adminRuntimeHealthProcessTable td:nth-child(8) {
text-align: right;
width: 50px;
}
.adminRuntimeHealthJobsTable th:nth-child(3), .adminRuntimeHealthJobsTable td:nth-child(3) {
width: 72px;
}
.adminRuntimeHealthJobsTable th:nth-child(4), .adminRuntimeHealthJobsTable td:nth-child(4), .adminRuntimeHealthJobsTable th:nth-child(5), .adminRuntimeHealthJobsTable td:nth-child(5), .adminRuntimeHealthJobsTable th:nth-child(6), .adminRuntimeHealthJobsTable td:nth-child(6) {
width: 124px;
}
.adminRuntimeHealthJobsTable th:nth-child(7), .adminRuntimeHealthJobsTable td:nth-child(7) {
width: 95px;
}
.adminRuntimeHealthJobsTable th:nth-child(8), .adminRuntimeHealthJobsTable td:nth-child(8) {
width: 225px;
}
.adminRuntimeHealthServicesTable th:nth-child(2), .adminRuntimeHealthServicesTable td:nth-child(2) {
width: 285px;
}
.adminRuntimeHealthServicesTable th:nth-child(3), .adminRuntimeHealthServicesTable td:nth-child(3) {
width: 130px;
}
.adminRuntimeHealthServicesTable th:nth-child(4), .adminRuntimeHealthServicesTable td:nth-child(4) {
width: auto;
}
.adminRuntimeHealthTable th {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
color: var(--muted);
letter-spacing: .04em;
text-align: left;
text-transform: uppercase;
padding: 10px;
font-size: 11px;
font-weight: 760;
}
.adminRuntimeHealthTable td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
color: color-mix(in srgb, var(--fg), var(--muted) 18%);
vertical-align: middle;
padding: 9px 10px;
font-size: 11px;
line-height: 1.35;
}
.adminRuntimeHealthTable td.mono {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminRuntimeHealthTable tbody tr:last-child td {
border-bottom: 0;
}
.adminRuntimeHealthTable tbody tr:hover {
background: color-mix(in srgb, var(--focus), transparent 96%);
}
.adminRuntimeHealthTitleRow {
gap: 2px;
min-width: 0;
display: grid;
}
.adminRuntimeHealthTitleRow strong {
color: var(--fg);
min-width: 0;
font-size: 13px;
line-height: 1.2;
}
.adminRuntimeHealthTitleRow span {
color: var(--muted);
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-size: 11px;
overflow: hidden;
}
.adminRuntimeHealthTruncate {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
}
.adminRuntimeHealthStatusBadge {
--runtime-status-bg: #f8fafc;
--runtime-status-border: #e2e8f0;
--runtime-status-color: #475569;
--runtime-status-dot: #64748b;
background: var(--runtime-status-bg);
border: 1px solid var(--runtime-status-border);
color: var(--runtime-status-color);
white-space: nowrap;
border-radius: 7px;
justify-content: center;
align-items: center;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
}
.adminRuntimeHealthStatusBadge--pill {
min-width: 68px;
min-height: 22px;
padding: 3px 8px;
}
.adminRuntimeHealthStatusBadge--dot {
background: none;
border-color: #0000;
justify-content: flex-start;
gap: 6px;
min-height: 20px;
padding: 0;
}
.adminRuntimeHealthStatusBadge--dot:before {
background: var(--runtime-status-dot);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--runtime-status-dot), transparent 84%);
content: "";
border-radius: 999px;
flex: none;
width: 6px;
height: 6px;
}
.adminRuntimeHealthStatusBadge.isHealthy {
--runtime-status-bg: #f0fdf4;
--runtime-status-border: #d9f7e2;
--runtime-status-color: #166534;
--runtime-status-dot: #16a34a;
}
.adminRuntimeHealthStatusBadge.isRunning {
--runtime-status-bg: #eff6ff;
--runtime-status-border: #dbeafe;
--runtime-status-color: #1d4ed8;
--runtime-status-dot: #2563eb;
}
.adminRuntimeHealthStatusBadge.isStale {
--runtime-status-bg: #fffbeb;
--runtime-status-border: #fdecc8;
--runtime-status-color: #92400e;
--runtime-status-dot: #f59e0b;
}
.adminRuntimeHealthStatusBadge.isFailed, .adminRuntimeHealthStatusBadge.isDown {
--runtime-status-bg: #fef2f2;
--runtime-status-border: #fee2e2;
--runtime-status-color: #b91c1c;
--runtime-status-dot: #dc2626;
}
.adminRuntimeHealthStatusBadge.isUnknown {
--runtime-status-bg: #f8fafc;
--runtime-status-border: #e2e8f0;
--runtime-status-color: #475569;
--runtime-status-dot: #64748b;
}
.adminRuntimeHealthNotes {
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminRuntimeHealthNotes > span {
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-width: 0;
max-width: 100%;
line-height: 1.35;
display: -webkit-box;
overflow: hidden;
}
.adminRuntimeHealthNotes > .adminRuntimeHealthLatency, .adminRuntimeHealthNotes > .adminRuntimeHealthQueueText {
border-radius: 999px;
flex: none;
align-items: center;
min-height: 20px;
padding: 3px 7px;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: inline-flex;
}
.adminRuntimeHealthLatency {
color: #475569;
background: #f8fafc;
}
.adminRuntimeHealthQueueText {
color: #92400e;
background: #fffbeb;
}
.adminRuntimeHealthActionButton {
background: color-mix(in srgb, var(--focus), transparent 94%);
border: 1px solid color-mix(in srgb, var(--focus), transparent 55%);
color: var(--focus);
white-space: nowrap;
min-height: 32px;
padding: 5px 10px;
font-size: 11px;
font-weight: 700;
}
.adminRuntimeHealthActionButton:hover:not(:disabled) {
background: color-mix(in srgb, var(--focus), transparent 90%);
border-color: color-mix(in srgb, var(--focus), transparent 38%);
}
.adminRuntimeHealthActionCell {
display: inline-flex;
}
.adminRuntimeHealthMobileAction {
display: none;
}
.adminRuntimeHealthErrorText {
color: var(--danger);
font-size: 12px;
}
.adminRuntimeHealthMobileList {
display: none;
}
@media (max-width: 900px) {
.adminRuntimeHealthHeader {
flex-direction: column;
align-items: stretch;
display: flex;
}
.adminRuntimeHealthHeaderActions {
justify-content: flex-start;
align-items: flex-start;
}
.adminRuntimeHealthLastUpdated {
white-space: normal;
}
.adminRuntimeHealthSummaryPanel {
padding: 14px;
}
.adminRuntimeHealthMetricGrid, .adminRuntimeHealthMetricGrid--jobs, .adminRuntimeHealthMetricGrid--services {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminRuntimeHealthTableWrap {
display: none;
}
.adminRuntimeHealthMobileList {
gap: 10px;
display: grid;
}
.adminRuntimeHealthMobileRow {
background: var(--bg);
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
gap: 12px;
padding: 12px;
display: grid;
}
.adminRuntimeHealthMobileRow > header {
align-items: flex-start;
gap: 10px;
min-width: 0;
display: flex;
}
.adminRuntimeHealthMobileRow > header > div {
flex: auto;
min-width: 0;
}
.adminRuntimeHealthMobileRow h3, .adminRuntimeHealthMobileRow p {
overflow-wrap: anywhere;
margin: 0;
}
.adminRuntimeHealthMobileRow h3 {
color: var(--fg);
font-size: 14px;
line-height: 1.2;
}
.adminRuntimeHealthMobileRow p {
color: var(--muted);
overflow-wrap: anywhere;
font-size: 12px;
}
.adminRuntimeHealthMobileValues {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
display: grid;
}
.adminRuntimeHealthMobileValue {
gap: 2px;
min-width: 0;
display: grid;
}
.adminRuntimeHealthMobileValue > span {
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
font-size: 11px;
font-weight: 760;
line-height: 1.2;
}
.adminRuntimeHealthMobileValue > strong {
color: var(--fg);
overflow-wrap: anywhere;
min-width: 0;
font-size: 12px;
font-weight: 650;
}
.adminRuntimeHealthMobileAction {
display: block;
}
.adminRuntimeHealthMobileAction .btn {
width: 100%;
}
.adminRuntimeHealthNotes .adminRuntimeHealthActionCell {
display: none;
}
}
@media (max-width: 520px) {
.adminRuntimeHealthMobileValues {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 860px) {
.notificationBellPanel {
width: auto;
height: calc(100dvh - 76px - env(safe-area-inset-bottom));
max-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
z-index: 80;
border-radius: 14px;
position: fixed;
inset: 64px 12px 12px;
}
.notificationBellPanel.notificationBellPanel_empty {
width: auto;
height: auto;
bottom: auto;
}
.notificationCenterPage .adminHeaderBody, .notificationSettingsPage .adminHeaderBody {
gap: 10px;
}
}
@media (min-width: 1180px) {
.adminRoleTemplateMetaGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminRoleTemplateMetaGrid .field:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 760px) {
.adminLoginMain {
place-items: stretch stretch;
width: 100%;
height: 100dvh;
min-height: 0;
padding: 0;
overflow: hidden;
}
.adminLoginShell {
width: 100%;
max-width: none;
height: 100%;
min-height: 0;
box-shadow: none;
border: 0;
border-radius: 0;
grid-template-rows: auto minmax(0, 1fr);
}
.adminLoginBrandPanel {
padding: max(10px, env(safe-area-inset-top))
max(18px, env(safe-area-inset-right))
10px
max(18px, env(safe-area-inset-left));
grid-template-columns: minmax(0, 1fr) auto;
align-content: center;
align-items: center;
gap: 14px;
}
.adminLoginBrandContent {
align-items: center;
gap: 11px;
min-width: 0;
display: flex;
}
.adminLoginBrandLogoFrame {
flex: none;
min-height: 44px;
margin: 0;
padding: 6px 9px;
}
.adminLoginBrandLogoCanvas {
height: 22px;
}
.adminLoginBrandName, .adminLoginSubtitle {
display: none;
}
.adminLoginTitle {
letter-spacing: -.02em;
min-width: 0;
max-width: none;
font-size: 20px;
line-height: 1.08;
}
.adminLoginAccessPanel {
min-height: 0;
padding: clamp(24px, 4dvh, 40px)
max(20px, env(safe-area-inset-right))
max(20px, env(safe-area-inset-bottom))
max(20px, env(safe-area-inset-left));
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
align-content: start;
justify-items: center;
overflow-y: auto;
}
.adminLoginAccessHeader, .adminLoginForm, .adminLoginMfaPanel {
justify-self: center;
width: min(100%, 520px);
}
.adminLoginAccessHeader {
gap: 16px;
}
.adminLoginAccessTitle {
font-size: 27px;
}
.adminLoginAccessHint {
margin-top: 6px;
font-size: 13px;
}
.adminLoginForm {
margin-top: 20px;
}
.adminLoginHelpRow {
margin-top: 6px;
}
.adminLoginSubmitRow {
margin-top: 10px;
}
.adminLoginUtilityLink, .adminLoginUtilityRoute {
min-height: 44px;
}
.adminLoginBuildVersion {
white-space: nowrap;
align-self: center;
margin: 0;
font-size: .6875rem;
}
.adminPageTitle {
font-size: var(--page-title-size-phone);
}
.adminHeaderBody {
align-items: flex-start;
}
.adminSettingsContent {
padding-left: 0;
}
.adminSettingsPageContentSplit {
min-width: 0;
}
.adminCountPill {
min-width: 68px;
}
.adminUsersRoleWarningStrip {
flex-direction: column;
align-items: flex-start;
}
.adminUsersRoleWarningAction {
justify-content: center;
width: 100%;
}
.adminUsersListPage .adminListTable {
min-width: 980px;
}
.adminUsersRowActions {
justify-content: flex-start;
}
.adminUserEditProfileHead {
flex-direction: column;
align-items: flex-start;
}
.adminUserEditProfilePills {
justify-content: flex-start;
margin-left: 0;
}
.adminUserAccessToggle, .adminUserAccessSectionHead {
flex-direction: column;
align-items: flex-start;
}
.adminUserAccessPanelBody {
padding-top: 14px;
}
.adminUserAccessHero {
grid-template-columns: 1fr;
}
.adminUserAccessCapabilitiesHeader {
flex-direction: column;
align-items: stretch;
}
.adminUserAccessCoverageSummary {
align-self: flex-start;
}
.adminUserAccessCapabilityList, .adminUserCategoryAssignmentEditor {
grid-template-columns: 1fr;
}
.adminUserDirectGrantRow {
grid-template-columns: 22px minmax(0, 1fr);
}
.adminUserDirectGrantRow .adminUserAccessMetric {
grid-column: 2;
justify-self: flex-start;
}
.adminUserEditProfileActionsButtons {
justify-content: flex-start;
}
.adminOperationsHeaderTitleRow {
flex-wrap: wrap;
}
.adminFilterGrid {
grid-template-columns: 1fr;
}
.adminFilterActions {
justify-content: flex-start;
}
.adminReportsFilterActions {
justify-content: flex-start;
width: 100%;
}
.adminCompanyCalendarPanelTopRow {
align-items: flex-start;
}
.adminCompanyCalendarPanelTopRowOpen {
grid-template-columns: 1fr;
}
.adminCompanyCalendarPanelTopActions {
width: 100%;
}
.adminCompanyCalendarActionLane {
justify-content: flex-start;
width: 100%;
max-width: none;
margin-left: 0;
}
.adminCompanyCalendarSelectedInput, .adminCompanyCalendarCloseBtn {
width: auto !important;
min-width: 0 !important;
}
.adminCompanyCalendarBulkActions {
justify-content: flex-start;
}
.adminCompanyCalendarEditorGrid {
grid-template-columns: 1fr;
}
.adminFilterActions .btn, .adminFilterActions a.btn {
min-width: 88px;
}
.adminPagination {
justify-content: center;
}
.adminPaginationNav {
flex-wrap: nowrap;
justify-content: center;
width: auto;
}
.adminPaginationCompactMobile .adminPaginationEllipsis, .adminPaginationCompactMobile .adminPaginationNumber:not(.isCurrent) {
display: none;
}
.adminPaginationCompactMobile .adminPaginationNumbers {
flex: none;
}
.adminPaginationCompactMobile .adminPaginationNumber.isCurrent {
pointer-events: none;
min-width: 44px;
}
}
@media (max-width: 420px) {
.adminLoginMain {
padding: 0;
}
.adminLoginBrandLogoCanvas {
height: 21px;
}
.adminLoginTitle {
font-size: 19px;
}
.adminLoginBrandPanel {
padding: max(8px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
8px
max(16px, env(safe-area-inset-left));
}
.adminLoginAccessPanel {
padding: clamp(22px, 4dvh, 34px)
max(18px, env(safe-area-inset-right))
max(18px, env(safe-area-inset-bottom))
max(18px, env(safe-area-inset-left));
}
}
@media (max-width: 760px) and (max-height: 650px) and (orientation: portrait) {
.adminLoginAccessPanel {
padding-top: 18px;
}
}
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
.adminLoginMain {
place-items: stretch stretch;
width: 100%;
height: 100dvh;
min-height: 0;
padding: 0;
overflow: hidden;
}
.adminLoginShell {
width: 100%;
max-width: none;
height: 100%;
min-height: 0;
box-shadow: none;
border: 0;
border-radius: 0;
grid-template-rows: minmax(0, 1fr);
grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
}
.adminLoginBrandPanel {
padding: max(18px, env(safe-area-inset-top))
24px
max(18px, env(safe-area-inset-bottom))
max(24px, env(safe-area-inset-left));
grid-template-columns: minmax(0, 1fr);
align-content: space-between;
align-items: start;
gap: 16px;
}
.adminLoginBrandContent {
align-content: start;
justify-items: start;
gap: 0;
display: grid;
}
.adminLoginBrandLogoFrame {
min-height: 44px;
margin: 0 0 18px;
}
.adminLoginBrandName {
margin-bottom: 7px;
font-size: 10px;
display: block;
}
.adminLoginTitle {
max-width: 11ch;
font-size: 27px;
}
.adminLoginSubtitle {
display: none;
}
.adminLoginBuildVersion {
align-self: end;
}
.adminLoginAccessPanel {
min-height: 0;
padding: max(18px, env(safe-area-inset-top))
max(28px, env(safe-area-inset-right))
max(18px, env(safe-area-inset-bottom))
28px;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
align-content: start;
justify-items: center;
overflow-y: auto;
}
.adminLoginAccessHeader, .adminLoginForm, .adminLoginMfaPanel {
justify-self: center;
width: min(100%, 520px);
}
}
.adminTimesheetMonthHeaderRow {
gap: 8px;
display: grid;
}
.adminTimesheetMonthHeadingRow {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminTimesheetMonthHeadingIdentityRow {
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
min-width: 0;
display: flex;
}
.adminTimesheetMonthIdentity {
align-items: baseline;
gap: 6px;
min-width: 0;
display: inline-flex;
}
.adminTimesheetMonthIdentity .adminUsersNameLine {
font-size: 16px;
line-height: 1.15;
}
.adminTimesheetMonthIdentity .muted {
font-size: 14px;
line-height: 1.15;
}
.adminTimesheetMonthHeading {
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
}
.adminTimesheetDocumentStatusBar {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 10px;
padding-top: 2px;
display: flex;
}
.adminTimesheetDocumentStatusText {
gap: 3px;
min-width: 0;
display: grid;
}
.adminTimesheetDocumentStatusText strong {
font-size: 13px;
line-height: 1.2;
}
.adminTimesheetDocumentActions {
justify-content: flex-end;
}
.adminTimesheetDocumentActions .btn {
align-items: center;
gap: 6px;
display: inline-flex;
}
.adminTimesheetDetailPage {
gap: 16px;
}
.adminTimesheetDetailHeader {
gap: 14px;
display: grid;
}
.adminTimesheetDetailWorkbenchBar {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
display: grid;
}
.adminTimesheetDetailControls {
flex-wrap: wrap;
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.adminTimesheetDetailTitle {
min-width: 0;
color: color-mix(in srgb, var(--fg), black 10%);
letter-spacing: 0;
margin: 0;
font-size: clamp(28px, 2.2vw, 36px);
font-weight: 800;
line-height: 1.05;
}
.adminTimesheetDetailMonthNav {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg);
align-items: stretch;
min-height: 44px;
display: inline-flex;
overflow: hidden;
}
.adminTimesheetDetailMonthNav .btn {
min-width: 44px;
min-height: 44px;
box-shadow: none;
border: 0;
border-radius: 0;
}
.adminTimesheetDetailMonthNav .btn + .adminTimesheetDetailMonthLabel, .adminTimesheetDetailMonthLabel + .btn {
border-left: 1px solid var(--stroke);
}
.adminTimesheetDetailMonthLabel {
min-width: 150px;
color: color-mix(in srgb, var(--fg), white 8%);
white-space: nowrap;
align-items: center;
gap: 8px;
padding: 0 16px;
font-weight: 800;
line-height: 1;
text-decoration: none;
display: inline-flex;
}
.adminTimesheetDetailMonthLabel:hover {
background: color-mix(in srgb, var(--bg-2), var(--focus) 5%);
}
.adminTimesheetDetailMonthLabel:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 18%);
outline-offset: -2px;
}
.adminTimesheetDetailWorkerSelect {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: var(--bg);
width: min(340px, 100%);
min-width: 250px;
min-height: 44px;
color: color-mix(in srgb, var(--muted), var(--fg) 16%);
align-items: center;
gap: 8px;
padding-left: 12px;
display: flex;
}
.adminTimesheetDetailWorkerSelect .listboxRoot {
flex: auto;
min-width: 0;
}
.adminTimesheetDetailWorkerSelect .listboxTrigger {
min-height: 42px;
box-shadow: none;
background: none;
border: 0;
padding-left: 0;
}
.adminTimesheetDetailWorkerSelect .listboxMenu {
min-width: 100%;
}
.adminTimesheetDetailActions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminTimesheetDetailActions .btn {
align-items: center;
gap: 7px;
min-height: 44px;
display: inline-flex;
}
.adminOperationsReadOnlyTimesheetPage > .adminTimesheetDetailCalendarShell {
border-color: color-mix(in srgb, var(--stroke), var(--focus) 10%);
background: #fff;
}
.adminTimesheetDetailCalendarBody {
gap: 14px;
}
.adminTimesheetDetailReadOnlyBanner {
justify-content: flex-start;
display: flex;
}
.adminTimesheetDetailReviewStrip {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg), var(--bg-2) 18%);
grid-template-columns: minmax(350px, 1.08fr) minmax(300px, 1fr) minmax(190px, .56fr);
align-items: stretch;
gap: 0;
display: grid;
overflow: hidden;
}
.adminTimesheetDetailProgressPanel, .adminTimesheetDetailAttentionPanel, .adminTimesheetDetailDocumentPanel {
align-content: start;
gap: 7px;
min-width: 0;
padding: 14px 16px;
display: grid;
}
.adminTimesheetDetailProgressPanel {
--timesheet-progress-tone: var(--timesheet-status-amber);
--timesheet-progress-text: var(--timesheet-status-amber-text);
}
.adminTimesheetDetailProgressPanel.isComplete {
--timesheet-progress-tone: var(--timesheet-status-green);
--timesheet-progress-text: var(--timesheet-status-green-text);
}
.adminTimesheetDetailProgressPanel.isEmpty {
--timesheet-progress-tone: var(--timesheet-status-red);
--timesheet-progress-text: var(--timesheet-status-red-text);
}
.adminTimesheetDetailProgressPanel, .adminTimesheetDetailAttentionPanel {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.adminTimesheetDetailAttentionPanel {
grid-template-rows: auto auto;
align-content: center;
gap: 9px;
}
.adminTimesheetDetailDocumentPanel {
grid-template-rows: auto minmax(0, 1fr) auto;
}
.adminTimesheetDetailDocumentPanel .adminTimesheetDetailDocumentStatus {
place-self: center start;
}
.adminTimesheetDetailDocumentLanguage, .adminTimesheetDetailDocumentLegacyLanguage {
overflow-wrap: anywhere;
min-width: 0;
}
.adminTimesheetDetailDocumentLanguage {
font-size: 12px;
font-weight: 650;
}
.adminTimesheetDetailDocumentLegacyLanguage {
font-size: 12px;
line-height: 1.35;
}
.adminTimesheetDetailProgressContent {
gap: 9px;
min-width: 0;
display: grid;
}
.adminTimesheetDetailTimeCoverage {
grid-template-columns: auto max-content auto minmax(60px, 1fr);
align-items: center;
gap: 7px 8px;
min-width: 0;
min-height: 34px;
display: grid;
}
.adminTimesheetDetailTimeCoveragePercent {
color: var(--timesheet-progress-tone);
letter-spacing: 0;
white-space: nowrap;
font-size: 30px;
font-weight: 840;
line-height: 1;
}
.adminTimesheetDetailTimeCoverageCopy {
border-left: 1px solid color-mix(in srgb, var(--stroke), white 18%);
gap: 3px;
min-width: 0;
padding-left: 10px;
display: grid;
}
.adminTimesheetDetailTimeCoverageCopy strong {
color: color-mix(in srgb, var(--fg), black 5%);
font-size: 14px;
font-weight: 820;
line-height: 1;
}
.adminTimesheetDetailTimeCoverageCopy .mono {
white-space: nowrap;
font-size: 12px;
line-height: 1.1;
}
.adminTimesheetDetailTimeCoverageDays {
white-space: nowrap;
font-size: 13px;
font-weight: 680;
line-height: 1;
}
.adminTimesheetDetailProgressTrack {
appearance: none;
background: var(--timesheet-status-track);
border: 0;
border-radius: 999px;
width: 100%;
height: 6px;
overflow: hidden;
}
.adminTimesheetDetailProgressTrack::-webkit-progress-bar {
border-radius: inherit;
background: var(--timesheet-status-track);
}
.adminTimesheetDetailProgressTrack::-webkit-progress-value {
border-radius: inherit;
background: var(--timesheet-progress-tone);
}
.adminTimesheetDetailProgressTrack::-moz-progress-bar {
border-radius: inherit;
background: var(--timesheet-progress-tone);
}
.adminTimesheetDetailReportCoverage {
border-top: 1px solid color-mix(in srgb, var(--stroke), white 26%);
grid-template-columns: auto auto auto max-content minmax(60px, 1fr);
align-items: center;
gap: 3px 8px;
min-width: 0;
padding-top: 9px;
display: grid;
}
.adminTimesheetDetailReportCoverageIcon {
color: var(--timesheet-status-amber);
justify-content: center;
align-items: center;
line-height: 1;
display: inline-flex;
}
.adminTimesheetDetailReportCoverageLabel {
color: color-mix(in srgb, var(--muted), black 4%);
text-transform: uppercase;
white-space: nowrap;
font-size: 10.5px;
font-weight: 790;
line-height: 1;
}
.adminTimesheetDetailReportCoveragePercent {
color: var(--timesheet-status-amber-text);
white-space: nowrap;
font-size: 11.5px;
font-weight: 850;
line-height: 1;
}
.adminTimesheetDetailReportCoverageTrack {
appearance: none;
background: var(--timesheet-status-track);
border: 0;
border-radius: 999px;
width: 100%;
min-width: 0;
height: 6px;
overflow: hidden;
}
.adminTimesheetDetailReportCoverageTrack::-webkit-progress-bar {
border-radius: inherit;
background: var(--timesheet-status-track);
}
.adminTimesheetDetailReportCoverageTrack::-webkit-progress-value {
border-radius: inherit;
background: var(--timesheet-status-amber);
}
.adminTimesheetDetailReportCoverageTrack::-moz-progress-bar {
border-radius: inherit;
background: var(--timesheet-status-amber);
}
.adminTimesheetDetailReportCoverage.isComplete .adminTimesheetDetailReportCoveragePercent {
color: var(--timesheet-status-green-text);
}
.adminTimesheetDetailReportCoverage.isComplete .adminTimesheetDetailReportCoverageTrack::-webkit-progress-value {
background: var(--timesheet-status-green);
}
.adminTimesheetDetailReportCoverage.isComplete .adminTimesheetDetailReportCoverageTrack::-moz-progress-bar {
background: var(--timesheet-status-green);
}
.adminTimesheetDetailReportCoverage.isMatched .adminTimesheetDetailReportCoveragePercent {
color: color-mix(in srgb, var(--timesheet-status-neutral), var(--fg) 12%);
}
.adminTimesheetDetailReportCoverage.isMatched .adminTimesheetDetailReportCoverageIcon {
color: color-mix(in srgb, var(--timesheet-status-neutral), var(--fg) 8%);
}
.adminTimesheetDetailReportCoverage.isMatched .adminTimesheetDetailReportCoverageTrack::-webkit-progress-value {
background: color-mix(in srgb, var(--timesheet-status-neutral), white 24%);
}
.adminTimesheetDetailReportCoverage.isMatched .adminTimesheetDetailReportCoverageTrack::-moz-progress-bar {
background: color-mix(in srgb, var(--timesheet-status-neutral), white 24%);
}
.adminTimesheetDetailReportCoverage.isExtra .adminTimesheetDetailReportCoveragePercent {
color: var(--timesheet-status-variance-text);
}
.adminTimesheetDetailReportCoverage.isExtra .adminTimesheetDetailReportCoverageIcon {
color: var(--timesheet-status-variance);
}
.adminTimesheetDetailReportCoverage.isExtra .adminTimesheetDetailReportCoverageTrack::-webkit-progress-value {
background: var(--timesheet-status-variance);
}
.adminTimesheetDetailReportCoverage.isExtra .adminTimesheetDetailReportCoverageTrack::-moz-progress-bar {
background: var(--timesheet-status-variance);
}
.adminTimesheetDetailReportCoverage.isEmpty .adminTimesheetDetailReportCoveragePercent {
color: var(--timesheet-status-amber-text);
}
.adminTimesheetDetailReportCoverage.isEmpty .adminTimesheetDetailReportCoverageTrack::-webkit-progress-value {
background: var(--timesheet-status-amber);
}
.adminTimesheetDetailReportCoverage.isEmpty .adminTimesheetDetailReportCoverageTrack::-moz-progress-bar {
background: var(--timesheet-status-amber);
}
.adminTimesheetDetailReportCoverage.isNoBaseline {
grid-template-columns: auto auto minmax(0, 1fr);
}
.adminTimesheetDetailReportCoverageHours, .adminTimesheetDetailReportCoverageExtra {
white-space: nowrap;
font-size: 11px;
font-weight: 690;
line-height: 1.12;
}
.adminTimesheetDetailReportCoverageHours {
min-width: 0;
}
.adminTimesheetDetailReportCoverageExtra {
color: var(--timesheet-status-variance-extra-text);
grid-column: 1 / -1;
font-weight: 820;
}
.adminTimesheetDetailAttentionLabel {
justify-self: start;
}
.adminTimesheetDetailAttentionIssueBar {
flex-wrap: wrap;
align-content: center;
align-items: center;
gap: 6px;
min-width: 0;
min-height: 30px;
padding: 1px 0;
display: flex;
overflow: visible;
}
.adminTimesheetDetailAttentionIssue {
box-sizing: border-box;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 22%);
background: color-mix(in srgb, var(--bg), var(--bg-2) 35%);
max-width: 100%;
min-height: 28px;
color: color-mix(in srgb, var(--fg), white 8%);
white-space: nowrap;
border-radius: 999px;
flex: 0 auto;
align-items: center;
gap: 6px;
padding: 0 8px;
font-size: 11.5px;
font-weight: 720;
line-height: 1.1;
display: inline-flex;
overflow: hidden;
}
.adminTimesheetDetailAttentionIssue + .adminTimesheetDetailAttentionIssue, .adminTimesheetDetailAttentionIssue + .adminTimesheetDetailShowIssuesButton {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
.adminTimesheetDetailAttentionIssue svg {
stroke-width: 2.2px;
flex: none;
width: 14px;
height: 14px;
}
.adminTimesheetDetailAttentionIssue > span {
text-overflow: ellipsis;
min-width: 0;
line-height: 1.1;
display: block;
overflow: hidden;
}
.adminTimesheetDetailAttentionIssue strong {
min-width: 18px;
height: 18px;
color: color-mix(in srgb, var(--fg), black 8%);
background: color-mix(in srgb, var(--stroke), white 58%);
border-radius: 999px;
flex: none;
place-items: center;
padding: 0 4px;
font-size: 11px;
font-weight: 820;
line-height: 1;
display: inline-grid;
}
.adminTimesheetDetailAttentionIssue.isDanger {
border-color: color-mix(in srgb, var(--timesheet-status-red-border), transparent 14%);
background: color-mix(in srgb, var(--timesheet-status-red-bg), white 36%);
color: var(--timesheet-status-red-text);
}
.adminTimesheetDetailAttentionIssue.isDanger svg {
color: var(--timesheet-status-red);
}
.adminTimesheetDetailAttentionIssue.isDanger strong {
color: var(--timesheet-status-red-text);
background: color-mix(in srgb, var(--timesheet-status-red-border), white 62%);
}
.adminTimesheetDetailAttentionIssue.isReport {
border-color: color-mix(in srgb, var(--timesheet-status-amber-border), transparent 18%);
background: color-mix(in srgb, var(--timesheet-status-amber-bg), white 46%);
color: var(--timesheet-status-amber-text);
}
.adminTimesheetDetailAttentionIssue.isReport svg {
color: var(--timesheet-status-amber);
}
.adminTimesheetDetailAttentionIssue.isReport strong {
color: var(--timesheet-status-amber-text);
background: color-mix(in srgb, var(--timesheet-status-amber-border), white 58%);
}
.adminTimesheetDetailAttentionIssue.isReview {
border-color: color-mix(in srgb, var(--timesheet-status-amber-border), transparent 18%);
background: color-mix(in srgb, var(--timesheet-status-amber-bg), white 46%);
color: var(--timesheet-status-amber-text);
}
.adminTimesheetDetailAttentionIssue.isReview svg {
color: var(--timesheet-status-amber-text);
}
.adminTimesheetDetailAttentionIssue.isReview strong {
color: var(--timesheet-status-amber-text);
background: color-mix(in srgb, var(--timesheet-status-amber-border), white 58%);
}
.adminTimesheetDetailAttentionIssue.isOk {
color: var(--timesheet-status-green-text);
border-color: var(--timesheet-status-green-border);
background: var(--timesheet-status-green-bg);
}
.adminTimesheetDetailShowIssuesButton {
min-height: 30px;
color: var(--timesheet-status-blue-text);
font: inherit;
white-space: nowrap;
cursor: pointer;
background: none;
border: 0;
flex: none;
align-items: center;
padding: 0 2px;
font-size: 12.5px;
font-weight: 780;
line-height: 1;
display: inline-flex;
}
.adminTimesheetDetailShowIssuesButton:hover {
color: color-mix(in srgb, var(--timesheet-status-blue-text), black 14%);
text-decoration: underline;
}
.adminTimesheetDetailShowIssuesButton:focus-visible {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 20%);
outline-offset: 2px;
border-radius: 6px;
}
.adminTimesheetDetailDocumentStatus {
min-width: 0;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
align-items: center;
gap: 9px;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
display: inline-flex;
}
.adminTimesheetDetailDocumentStatus.isSigned {
color: var(--timesheet-status-green-text);
}
@media (max-width: 1280px) {
.adminTimesheetDetailWorkbenchBar {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminTimesheetDetailActions {
justify-content: flex-start;
}
.adminTimesheetDetailReviewStrip {
grid-template-columns: minmax(0, 1fr) minmax(260px, .86fr);
}
.adminTimesheetDetailProgressPanel {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.adminTimesheetDetailAttentionPanel {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.adminTimesheetDetailDocumentPanel {
grid-column: 1 / -1;
padding-block: 12px;
}
}
@media (max-width: 1040px) {
.adminTimesheetDetailReviewStrip {
grid-template-columns: minmax(0, 1fr);
}
.adminTimesheetDetailProgressPanel, .adminTimesheetDetailAttentionPanel {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.adminTimesheetDetailDocumentPanel {
grid-column: auto;
}
}
@media (max-width: 760px) {
.adminTimesheetDetailTitle {
font-size: clamp(24px, 7vw, 30px);
}
.adminTimesheetDetailActions, .adminTimesheetDetailActions .btn {
width: 100%;
}
.adminTimesheetDetailActions .btn {
justify-content: center;
}
.adminTimesheetDetailActions .adminUsersMenuWrap {
margin-left: auto;
}
}
@media (max-width: 560px) {
.adminTimesheetDetailProgressContent {
gap: 10px;
}
.adminTimesheetDetailTimeCoverage {
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 10px;
}
.adminTimesheetDetailTimeCoverageDays, .adminTimesheetDetailTimeCoverage .adminTimesheetDetailProgressTrack {
grid-column: 1 / -1;
}
.adminTimesheetDetailReportCoverage {
grid-template-columns: auto auto auto minmax(0, 1fr);
}
.adminTimesheetDetailReportCoverageTrack {
grid-column: 1 / -1;
}
.adminTimesheetDetailReportCoverageHours {
justify-self: end;
}
}
.adminTimesheetDocumentDialogCard {
width: min(520px, 100%);
}
.adminTimesheetDocumentDialogBody {
gap: 16px;
display: grid;
}
.adminTimesheetDocumentDialogHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminTimesheetDocumentDialogContext {
margin: 4px 0 0;
}
.adminTimesheetDocumentLegacyLocaleNote {
border-inline-start: 2px solid color-mix(in srgb, var(--warning), transparent 28%);
overflow-wrap: anywhere;
margin: 6px 0 0;
padding-inline-start: 10px;
line-height: 1.4;
}
.adminTimesheetDocumentDialogCloseBtn {
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
}
.adminTimesheetDocumentDialogActions .btnAction {
justify-content: center;
align-items: center;
gap: 7px;
display: inline-flex;
}
.adminTimesheetDocumentComposition {
width: fit-content;
max-width: 100%;
color: var(--fg);
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminTimesheetOperationalAnnexField {
gap: 3px;
min-width: 0;
padding-block: 2px;
display: grid;
}
.adminTimesheetOperationalAnnexToggle {
min-height: 44px;
}
.adminTimesheetOperationalAnnexHint {
overflow-wrap: anywhere;
margin-inline-start: 0;
padding-inline-start: 29px;
line-height: 1.4;
display: block;
}
.adminTimesheetReissueReasonInput {
resize: vertical;
min-height: 112px;
line-height: 1.35;
}
.adminTimesheetAcceptanceDialogCard {
width: min(620px, 100%);
max-height: calc(100dvh - 32px);
overflow: auto;
}
.adminTimesheetAcceptanceDialogBody {
gap: 18px;
display: grid;
}
.adminTimesheetAcceptanceDialogHeader {
grid-template-columns: 40px minmax(0, 1fr) 44px;
align-items: start;
gap: 12px;
display: grid;
}
.adminTimesheetAcceptanceDialogIcon {
width: 40px;
height: 40px;
color: color-mix(in srgb, var(--warning), black 28%);
background: color-mix(in srgb, var(--warning), white 87%);
border-radius: 10px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminTimesheetAcceptanceDialogHeading {
min-width: 0;
}
.adminTimesheetAcceptanceDialogKicker {
color: color-mix(in srgb, var(--warning), black 34%);
letter-spacing: .06em;
text-transform: uppercase;
margin: 0 0 3px;
font-size: 11px;
font-weight: 760;
line-height: 1.2;
}
.adminTimesheetAcceptanceDialogHeading .adminSettingsChecklistTitle {
margin: 0;
font-size: 20px;
line-height: 1.2;
}
.adminTimesheetAcceptanceDialogContext {
margin: 5px 0 0;
font-size: 13px;
}
.adminTimesheetAcceptanceDialogClose {
width: 44px;
min-width: 44px;
height: 44px;
padding: 0;
}
.adminTimesheetAcceptanceDialogDescription {
color: var(--fg);
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.adminTimesheetAcceptanceDialogSummary {
border-block: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
display: grid;
}
.adminTimesheetAcceptanceDialogSummary > div {
justify-content: space-between;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 14px;
display: flex;
}
.adminTimesheetAcceptanceDialogSummary > div + div {
border-left: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
}
.adminTimesheetAcceptanceDialogSummary dt {
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.adminTimesheetAcceptanceDialogSummary dd {
color: color-mix(in srgb, var(--warning), black 34%);
font-variant-numeric: tabular-nums;
margin: 0;
font-size: 20px;
font-weight: 780;
line-height: 1;
}
.adminTimesheetAcceptanceDialogIssueList {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
display: grid;
}
.adminTimesheetAcceptanceDialogIssueList > section {
min-width: 0;
}
.adminTimesheetAcceptanceDialogIssueList h3 {
color: var(--muted);
letter-spacing: .045em;
text-transform: uppercase;
margin: 0 0 8px;
font-size: 11px;
font-weight: 720;
line-height: 1.2;
}
.adminTimesheetAcceptanceDialogDates {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.adminTimesheetAcceptanceDialogDate {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 5%);
background: var(--surface);
min-height: 28px;
color: var(--fg);
font-variant-numeric: tabular-nums;
white-space: nowrap;
border-radius: 8px;
align-items: center;
padding: 0 9px;
font-size: 12px;
font-weight: 650;
display: inline-flex;
}
.adminTimesheetAcceptanceDialogNotice {
border-left: 3px solid color-mix(in srgb, var(--warning), black 4%);
background: color-mix(in srgb, var(--warning), white 93%);
color: color-mix(in srgb, var(--warning), black 36%);
border-radius: 8px;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
padding: 12px 14px;
display: grid;
}
.adminTimesheetAcceptanceDialogNotice > svg {
margin-top: 1px;
}
.adminTimesheetAcceptanceDialogNotice > div {
gap: 2px;
min-width: 0;
display: grid;
}
.adminTimesheetAcceptanceDialogNotice strong, .adminTimesheetAcceptanceDialogNotice span {
font-size: 12px;
line-height: 1.4;
}
.adminTimesheetAcceptanceDialogActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminTimesheetAcceptanceDialogActions .btnAction {
justify-content: center;
align-items: center;
gap: 7px;
min-height: 44px;
display: inline-flex;
}
@media (max-width: 620px) {
.adminTimesheetAcceptanceDialogCard {
max-height: calc(100dvh - 24px);
}
.adminTimesheetAcceptanceDialogBody {
gap: 16px;
}
.adminTimesheetAcceptanceDialogSummary, .adminTimesheetAcceptanceDialogIssueList {
grid-template-columns: 1fr;
}
.adminTimesheetAcceptanceDialogSummary > div + div {
border-top: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 4%);
border-left: 0;
}
.adminTimesheetAcceptanceDialogActions {
grid-template-columns: 1fr;
display: grid;
}
.adminTimesheetAcceptanceDialogActions .btn {
width: 100%;
min-height: 44px;
}
.adminTimesheetAcceptanceDialogActions .btnAction {
grid-row: 1;
}
}
.adminTimesheetDayHeaderRow {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminTimesheetDayRoutePage {
gap: 18px;
display: grid;
}
.adminTimesheetDayPageHeader {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px 16px;
width: min(100%, 980px);
margin-inline: auto;
display: grid;
}
.adminTimesheetDayPageTitle {
min-width: 0;
color: color-mix(in srgb, var(--fg), black 10%);
letter-spacing: 0;
margin: 0;
font-size: clamp(24px, 2.3vw, 32px);
font-weight: 800;
line-height: 1.1;
}
.adminTimesheetDayEditorCard {
width: min(100%, 980px);
margin-inline: auto;
}
.adminTimesheetDayEditorMetaRow {
align-items: center;
padding-bottom: 2px;
}
.adminTimesheetDayEditorWorkerMeta {
flex-wrap: wrap;
align-items: baseline;
gap: 6px 10px;
min-width: 0;
display: inline-flex;
}
.dayEditorPageCard {
background: #fff;
}
.dayEditorPageCardAbsence {
width: min(100%, 980px);
margin-inline: auto;
}
.dayEditorCardBody {
gap: 12px;
display: grid;
}
.dayEditorMainColumnAbsence {
width: 100%;
margin-inline: 0;
}
.dayEditorMainColumn, .dayEditorTopMain {
min-width: 0;
}
.dayEditorMainColumnStack, .dayEditorTopMain, .dayEditorDayTypeField, .dayEditorWorkEntryControls, .dayEditorTimeclockReviewSection, .dayEditorTimeclockReviewList, .dayEditorTopSection {
gap: 10px;
display: grid;
}
.dayEditorModeSwitch {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
max-width: 372px;
display: grid;
}
.dayEditorModeBtn {
min-width: 0;
min-height: 44px;
}
.dayEditorModeBtn.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 50%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.dayEditorSectionTitle {
color: var(--fg);
font-weight: 800;
}
.dayEditorSectionTitleRow {
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
display: inline-flex;
}
.dayEditorHintText, .dayEditorRowError {
font-size: 12px;
}
.dayEditorAbsenceField {
border: 0;
gap: 8px;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
display: grid;
}
.dayEditorAbsenceOptionGrid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 8px;
display: grid;
}
.dayEditorAbsenceOption {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: var(--bg);
min-height: 48px;
color: var(--fg);
cursor: pointer;
border-radius: 8px;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 14px;
transition: background-color .15s, border-color .15s, box-shadow .15s;
display: flex;
position: relative;
}
.dayEditorAbsenceOption:hover {
border-color: color-mix(in srgb, var(--focus), transparent 55%);
background: color-mix(in srgb, var(--focus), white 97%);
}
.dayEditorAbsenceOption--absence {
--day-editor-family-fill: var(--calendar-absence-fill);
--day-editor-family-border: var(--calendar-absence-border);
--day-editor-family-text: var(--calendar-absence-text);
}
.dayEditorAbsenceOption--dayOff {
--day-editor-family-fill: var(--calendar-day-off-fill);
--day-editor-family-border: var(--calendar-day-off-border);
--day-editor-family-text: var(--calendar-day-off-text);
}
.dayEditorAbsenceOption--holiday {
--day-editor-family-fill: var(--calendar-holiday-fill);
--day-editor-family-border: var(--calendar-holiday-border);
--day-editor-family-text: var(--calendar-holiday-text);
}
.dayEditorAbsenceOption.isSelected {
border-color: var(--day-editor-family-border, color-mix(in srgb, var(--focus), transparent 28%));
background: var(--day-editor-family-fill, color-mix(in srgb, var(--focus), white 94%));
color: var(--day-editor-family-text, var(--fg));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--day-editor-family-border, var(--focus)), transparent 70%);
}
.dayEditorAbsenceOptionInput {
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
inset: 0;
}
.dayEditorAbsenceOptionInput:disabled {
cursor: not-allowed;
}
.dayEditorAbsenceOption:focus-within {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 35%);
outline-offset: 2px;
}
.dayEditorAbsenceOptionLabel {
min-width: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
}
.dayEditorAbsenceOptionCheck {
color: currentColor;
opacity: 0;
flex: none;
font-size: 14px;
font-weight: 900;
}
.dayEditorAbsenceOption.isSelected .dayEditorAbsenceOptionCheck {
opacity: 1;
}
.dayEditorAbsenceNotesField, .adminTimesheetAbsenceNotesRow {
max-width: none;
}
.dayEditorAbsenceNotes {
resize: vertical;
min-height: 92px;
}
.dayEditorTotalInfoRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), white 54%);
border-radius: var(--radius);
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 7px 10px;
display: flex;
}
.dayEditorTotalInfoLabel {
font-size: 13px;
}
.dayEditorTotalInfoValue {
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
}
.dayEditorSecondaryActionBtn {
color: #2156c8;
background: #e5ecfd;
border-color: #4c7fef;
width: 100%;
min-height: 44px;
font-weight: 800;
}
.dayEditorSecondaryActionBtn:hover {
background: #d8e3fb;
border-color: #2563eb;
}
.dayEditorTimeclockReviewHeader, .dayEditorTimeclockReviewRowPrimary {
justify-content: space-between;
align-items: flex-start;
gap: 10px;
display: flex;
}
.dayEditorTimeclockReviewMeta, .dayEditorTimeclockReviewRowSecondary, .dayEditorWorkEntryLead, .dayEditorTemplateHint {
font-size: 13px;
}
.dayEditorTimeclockReviewRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
background: color-mix(in srgb, var(--bg-2), white 58%);
border-radius: 10px;
gap: 6px;
padding: 10px 12px;
display: grid;
}
.dayEditorTimeclockReviewRowValue {
white-space: nowrap;
}
.dayEditorWorkHoursSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 10px;
margin-top: 4px;
padding-top: 16px;
display: grid;
}
.dayEditorWorkEntryHeader {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 10px;
display: grid;
}
.dayEditorWorkEntryLead {
margin: 4px 0 0;
line-height: 1.4;
}
.dayEditorTemplateField {
margin-top: 8px;
}
.dayEditorTemplateField .labelRow {
margin-bottom: 4px;
}
.dayEditorTemplateField .label {
color: var(--muted);
letter-spacing: .04em;
font-size: 12px;
font-weight: 700;
}
.dayEditorIntervalLabels, .dayEditorIntervalRow {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 10px;
display: grid;
}
.dayEditorIntervalLabels {
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: -4px;
font-size: 11px;
font-weight: 700;
}
.dayEditorIntervalRow {
align-items: start;
}
.dayEditorIntervalRemove {
width: 44px;
min-width: 44px;
min-height: 44px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.dayEditorAddInterval {
width: 100%;
min-height: 44px;
}
.dayEditorFooterActions {
align-items: center;
gap: 10px;
display: inline-flex;
}
@media (min-width: 761px) {
.dayEditorTopSection {
grid-template-columns: minmax(0, 1fr) minmax(228px, 280px);
align-items: start;
gap: 10px 16px;
}
.dayEditorTopSection.dayEditorTopSectionAbsence {
grid-template-columns: minmax(0, 1fr);
}
.dayEditorWorkEntryHeader {
grid-template-columns: minmax(0, 1fr) minmax(228px, 280px);
column-gap: 16px;
}
.dayEditorWorkEntryControls {
justify-self: end;
width: min(100%, 280px);
}
}
.adminTimesheetEditorTopRow {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
display: grid;
}
.adminTimesheetWorkToolbarLead {
align-content: center;
}
.adminTimesheetModeSwitch {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-width: 460px;
display: grid;
}
.adminTimesheetModeBtn {
min-height: 48px;
font-weight: 800;
}
.adminTimesheetModeBtn.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 45%);
background: color-mix(in srgb, var(--focus), white 92%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminTimesheetHintText {
max-width: 620px;
font-size: 13px;
}
.adminTimesheetEditorTopHelpers {
align-self: start;
gap: 8px;
display: grid;
}
.adminTimesheetTotalInfoRow {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), white 54%);
border-radius: var(--radius);
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 12px;
display: flex;
}
.adminTimesheetTotalInfoValues {
justify-items: end;
gap: 2px;
min-width: 0;
display: grid;
}
.adminTimesheetEnteredTotal {
font-size: 12px;
line-height: 1.15;
}
.adminTimesheetCopyYesterdayBtn {
width: 100%;
min-height: 44px;
}
.adminTimesheetNormalizationSection {
border: 1px solid color-mix(in srgb, var(--focus), transparent 72%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--focus), white 96%);
padding: 12px;
}
.adminTimesheetNormalizationSection.isDisabled {
border-color: color-mix(in srgb, var(--stroke), transparent 8%);
background: color-mix(in srgb, var(--bg-2), white 60%);
}
.adminTimesheetNormalizationHeader {
justify-content: space-between;
align-items: center;
gap: 14px;
display: flex;
}
.adminTimesheetNormalizationFlow {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 14px;
display: flex;
}
.adminTimesheetNormalizationSwitch {
cursor: pointer;
min-height: 44px;
color: var(--fg);
white-space: nowrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
display: inline-flex;
}
.adminTimesheetNormalizationSwitch input {
opacity: 0;
pointer-events: none;
position: absolute;
}
.adminTimesheetNormalizationSwitchTrack {
background: color-mix(in srgb, var(--stroke), white 32%);
border-radius: 999px;
align-items: center;
width: 42px;
height: 24px;
transition: background-color .15s, box-shadow .15s;
display: inline-flex;
position: relative;
}
.adminTimesheetNormalizationSwitchTrack span {
background: #fff;
border-radius: 999px;
width: 18px;
height: 18px;
margin-left: 3px;
transition: transform .15s;
box-shadow: 0 1px 3px #0f172a40;
}
.adminTimesheetNormalizationSwitch.isChecked .adminTimesheetNormalizationSwitchTrack {
background: #2563eb;
}
.adminTimesheetNormalizationSwitch.isChecked .adminTimesheetNormalizationSwitchTrack span {
transform: translateX(18px);
}
.adminTimesheetNormalizationSwitch:focus-within .adminTimesheetNormalizationSwitchTrack {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 70%);
}
.adminTimesheetNormalizationSwitch.isDisabled {
cursor: not-allowed;
color: var(--muted);
}
.adminTimesheetNormalizationSwitch.isDisabled .adminTimesheetNormalizationSwitchTrack {
opacity: .55;
}
.adminTimesheetNormalizationHint {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.4;
}
.adminTimesheetCorrectionEvidenceSection, .adminTimesheetLatestCorrectionSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding-top: 14px;
}
.adminTimesheetCorrectionEvidenceHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 8px;
display: flex;
}
.adminTimesheetCorrectionEvidenceList {
gap: 8px;
display: grid;
}
.adminTimesheetCorrectionEvidenceRow {
min-height: 48px;
}
.adminTimesheetCorrectionEvidenceTime {
font-size: 15px;
line-height: 1.2;
}
.adminTimesheetCorrectionEvidenceSite {
margin-top: 4px;
font-size: 13px;
}
.adminTimesheetIntervalRow {
margin-bottom: 10px;
}
.adminTimesheetIntervalRemoveBtn {
width: 44px;
min-width: 44px;
min-height: 44px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.adminTimesheetIntervalError {
color: color-mix(in srgb, var(--danger), black 10%);
grid-column: 1 / -1;
}
.adminTimesheetReasonField {
width: 100%;
max-width: none;
}
.adminTimesheetReasonInput {
width: 100%;
}
.adminTimesheetAddIntervalBtn {
width: 100%;
min-height: 44px;
}
.adminTimesheetReasonError {
color: color-mix(in srgb, var(--danger), black 12%);
margin-top: 6px;
}
.adminTimesheetEditorActions {
justify-content: flex-end;
align-items: center;
gap: 10px;
width: 100%;
display: inline-flex;
}
@media (min-width: 900px) {
.adminTimesheetAbsenceField .dayEditorAbsenceOptionGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.adminTimesheetDayRoutePage {
gap: 12px;
}
.adminTimesheetDayPageHeader {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
width: 100%;
}
.adminTimesheetDayPageHeader > .adminOperationsEntityHeading {
order: 2;
}
.adminTimesheetDayPageTitle {
font-size: clamp(20px, 6vw, 24px);
line-height: 1.14;
}
.adminTimesheetDayEditorCard {
width: 100%;
}
.dayEditorIntervalLabels {
display: none;
}
.dayEditorIntervalRow {
grid-template-columns: minmax(0, 1fr) auto;
}
.dayEditorIntervalRow .listbox:nth-child(2) {
grid-column: 1 / 2;
}
.dayEditorIntervalRemove {
grid-area: 1 / 2 / 3 / 3;
}
}
.adminTimesheetStatusChip {
align-self: flex-start;
width: fit-content;
min-width: 0;
}
.adminOperationsReadOnlyTimesheetPage .timesheetDayEditorShell {
border-color: color-mix(in srgb, var(--focus), transparent 72%);
}
.adminTimesheetLegendGroups {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, .6fr);
gap: 14px 22px;
margin-top: 10px;
display: grid;
}
.adminTimesheetLegendGroup {
align-content: start;
gap: 7px;
min-width: 0;
display: grid;
}
.adminTimesheetLegendGroupTitle {
color: color-mix(in srgb, var(--fg), white 28%);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
font-weight: 800;
line-height: 1.1;
}
.adminTimesheetLegend {
flex-wrap: wrap;
align-items: flex-start;
gap: 9px 16px;
display: flex;
}
.adminTimesheetLegendItem {
color: color-mix(in srgb, var(--fg), white 28%);
align-items: center;
gap: 8px;
font-size: 13px;
display: inline-flex;
}
.adminTimesheetLegendSwatch {
border: 1px solid var(--stroke);
background: var(--bg-2);
border-radius: 2px;
width: 12px;
height: 12px;
}
.adminTimesheetLegendSwatchWorked {
background: var(--calendar-worked-fill);
border-color: var(--calendar-worked-border);
}
.adminTimesheetLegendSwatchAttention {
background: var(--calendar-attention-fill);
border-color: var(--calendar-attention-border);
}
.adminTimesheetLegendSwatchAbsence {
background: var(--calendar-absence-base);
border-color: var(--calendar-absence-border);
}
.adminTimesheetLegendSwatchDayOff {
background: var(--calendar-day-off-base);
border-color: var(--calendar-day-off-border);
}
.adminTimesheetLegendSwatchMissing {
background: var(--calendar-missing-fill);
border-color: var(--calendar-missing-border);
}
.adminTimesheetLegendSwatchHoliday {
background: var(--calendar-holiday-base);
border-color: var(--calendar-holiday-border);
}
.adminTimesheetLegendSwatchWeekend {
background: var(--calendar-weekend-fill);
border-color: var(--calendar-weekend-border);
}
.adminTimesheetLegendSwatchReadOnly {
background: repeating-linear-gradient(135deg,
transparent 0,
transparent 4px,
var(--calendar-readonly-stripe) 4px,
var(--calendar-readonly-stripe) 5px),
var(--calendar-readonly-fill);
border-color: var(--calendar-readonly-border);
}
.adminTimesheetDayReviewBackdrop {
z-index: 70;
background: #0f172a47;
justify-content: flex-end;
display: flex;
position: fixed;
inset: 0;
}
.adminTimesheetDayReviewSheet {
border-top: 0;
border-bottom: 0;
border-right: 0;
border-radius: 0;
width: min(520px, 100vw);
min-height: 100vh;
max-height: 100vh;
overflow: auto;
}
.adminTimesheetDayReviewBody {
flex-direction: column;
gap: 16px;
display: flex;
}
.adminTimesheetDayReviewHeader {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminTimesheetDayReviewHeading {
margin: 3px 0 0;
font-size: 21px;
line-height: 1.2;
}
.adminTimesheetDayReviewHero {
border: 1px solid var(--stroke);
border-radius: var(--radius);
gap: 6px;
padding: 12px 14px;
display: grid;
}
.adminTimesheetDayReviewHero--worked {
background: var(--calendar-worked-fill);
border-color: var(--calendar-worked-border);
color: var(--calendar-worked-text);
}
.adminTimesheetDayReviewHero--attention {
background: var(--calendar-attention-fill);
border-color: var(--calendar-attention-border);
color: var(--calendar-attention-text);
}
.adminTimesheetDayReviewHero--missing, .adminTimesheetDayReviewHero--missingLocked {
background: var(--calendar-missing-fill);
border-color: var(--calendar-missing-border);
color: var(--calendar-missing-text);
}
.adminTimesheetDayReviewHero--holiday {
background: var(--calendar-holiday-fill);
border-color: var(--calendar-holiday-border);
color: var(--calendar-holiday-text);
}
.adminTimesheetDayReviewHero--dayOff {
background: var(--calendar-day-off-fill);
border-color: var(--calendar-day-off-border);
color: var(--calendar-day-off-text);
}
.adminTimesheetDayReviewHero--absence {
background: var(--calendar-absence-fill);
border-color: var(--calendar-absence-border);
color: var(--calendar-absence-text);
}
.adminTimesheetDayReviewHero--weekend, .adminTimesheetDayReviewHero--readonly, .adminTimesheetDayReviewHero--empty {
background: var(--calendar-weekend-fill);
border-color: var(--calendar-weekend-border);
color: var(--calendar-weekend-text);
}
.adminTimesheetDayReviewSection {
gap: 10px;
display: grid;
}
.adminTimesheetDayReviewSectionHeader {
justify-content: space-between;
align-items: baseline;
gap: 12px;
display: flex;
}
.adminTimesheetDayReviewSectionTitle {
font-weight: 700;
}
.adminTimesheetDayReviewRows {
border-top: 1px solid var(--stroke);
}
.adminTimesheetDayReviewRow {
border-bottom: 1px solid var(--stroke);
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 9px 0;
display: flex;
}
.adminTimesheetDayReviewReasonRow {
align-items: flex-start;
}
.adminTimesheetDayReviewReasonRow strong {
text-align: right;
overflow-wrap: anywhere;
white-space: normal;
max-width: min(520px, 62%);
}
.adminTimesheetDayReviewActions {
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
display: flex;
}
.adminTimesheetDayReviewActionBtn {
width: fit-content;
min-height: 44px;
}
.adminTimesheetDayReviewCards {
gap: 8px;
display: grid;
}
.adminTimesheetDayReviewInterval, .adminTimesheetDayReviewReport {
border: 1px solid var(--stroke);
border-radius: var(--radius);
background: #fff;
gap: 5px;
padding: 10px 12px;
display: grid;
}
.adminTimesheetDayReviewReport {
color: inherit;
text-decoration: none;
}
.adminTimesheetDayReviewIntervalTop, .adminTimesheetDayReviewReport {
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
}
.adminTimesheetDayReviewReport .mono {
grid-column: 1 / -1;
justify-self: end;
}
.adminTimesheetDayReviewIntervalTop {
justify-content: space-between;
gap: 10px;
display: flex;
}
.adminTimesheetDayReviewIntervalSite {
overflow-wrap: anywhere;
}
.adminTimesheetDayReviewReportNote {
border-radius: var(--radius);
color: #8a4f1d;
background: #fcf5ec;
border: 1px solid #d9a66b;
padding: 10px 12px;
font-weight: 700;
}
.adminTimesheetElectiveAllowanceWarning {
border: 1px solid color-mix(in srgb, var(--warning), transparent 42%);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warning), white 92%);
color: color-mix(in srgb, var(--warning), black 34%);
padding: 10px 12px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
}
.adminTimesheetDayReviewEmpty {
margin: 0;
}
.adminTimesheetReportCreateReadOnlyField {
color: var(--muted);
cursor: default;
-webkit-user-select: none;
user-select: none;
align-items: center;
display: flex;
}
.adminTimesheetReportCreatePage {
width: min(100%, 980px);
margin-inline: auto;
}
.adminTimesheetReportCreatePage .cardBody {
gap: 12px;
}
.adminTimesheetReportCreatePage .reportEditorContextCard, .adminTimesheetReportCreatePage .reportEditorTasksCard {
background: var(--surface);
}
.adminTimesheetReportCreateContextGrid {
grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
column-gap: 16px;
}
.adminTimesheetReportCreateContextGrid > .field {
min-width: 0;
}
.adminTimesheetReportCreateContextGrid .reportWorkerSiteField {
grid-column: 1 / -1;
}
.adminTimesheetReportCreateUserField {
min-width: 0;
color: var(--fg);
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
display: grid;
overflow: hidden;
}
.adminTimesheetReportCreateUserField .adminUsersNameLine {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminTimesheetReportCreateUserField .mono {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 160px;
overflow: hidden;
}
.adminTimesheetReportCreatePage .reportWorkerTaskHeaderRow, .adminTimesheetReportCreatePage .reportWorkerTaskRow {
grid-template-columns: minmax(0, 1fr) 172px 44px;
}
.adminTimesheetReportCreatePage .reportWorkerTaskHoursField {
grid-template-columns: 38px minmax(0, 1fr) 38px;
}
.adminTimesheetReportCreateSummary {
justify-items: end;
gap: 2px;
display: grid;
}
.adminTimesheetReportCreateSummaryLabel {
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
line-height: 1.1;
}
.adminTimesheetReportCreateSummaryValue {
font-size: 18px;
font-weight: 750;
line-height: 1.1;
}
.adminTimesheetRejectedResolution {
border-top: 1px solid color-mix(in srgb, var(--warning), transparent 55%);
gap: 12px;
padding-top: 16px;
display: grid;
}
.adminTimesheetRejectedResolution h3, .adminTimesheetRejectedResolution p {
margin: 0;
}
.adminTimesheetRejectedReportLinks {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminTimesheetRejectedResolutionChoices {
border: 0;
gap: 8px;
margin: 0;
padding: 0;
display: grid;
}
.adminTimesheetRejectedResolutionChoice {
border: 1px solid var(--stroke);
border-radius: var(--radius);
cursor: pointer;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
display: grid;
}
.adminTimesheetRejectedResolutionChoice:has(input:checked) {
border-color: color-mix(in srgb, var(--focus), var(--stroke) 25%);
background: color-mix(in srgb, var(--focus), white 94%);
}
.adminTimesheetRejectedResolutionChoice input {
width: 18px;
height: 18px;
margin: 2px 0 0;
}
.adminTimesheetRejectedResolutionChoice > span, .adminTimesheetRejectedResolutionFields {
gap: 4px;
display: grid;
}
.adminTimesheetReportCreateFooter {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 12px;
margin-top: 4px;
padding-top: 16px;
display: grid;
}
.adminTimesheetReportCreateActions {
grid-template-columns: minmax(112px, auto) minmax(164px, auto);
justify-content: end;
gap: 10px;
display: grid;
}
.adminTimesheetReportCreateActions .btn {
white-space: nowrap;
justify-content: center;
min-width: 0;
min-height: 44px;
}
@media (min-width: 900px) {
.adminTimesheetEditorTopRow {
grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
align-items: start;
}
}
@media (max-width: 720px) {
.adminTimesheetDayReviewBackdrop {
justify-content: stretch;
align-items: flex-end;
}
.adminTimesheetDayReviewSheet {
border-radius: var(--radius) var(--radius) 0 0;
border-left: 1px solid var(--stroke);
width: 100vw;
min-height: auto;
max-height: 85vh;
}
.adminTimesheetDayReviewSectionHeader {
align-items: flex-start;
}
.adminTimesheetReportCreateContextGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminTimesheetReportCreatePage .reportWorkerTaskHeaderRow, .adminTimesheetReportCreatePage .reportWorkerTaskRow {
grid-template-columns: minmax(0, 1fr) 168px 44px;
}
.adminTimesheetReportCreatePage .reportWorkerTaskHoursField {
grid-template-columns: 44px minmax(0, 1fr) 44px;
}
}
@media (max-width: 560px) {
.adminTimesheetReportCreatePage .reportWorkerTaskHeaderRow {
display: none;
}
.adminTimesheetReportCreatePage .reportWorkerTaskRow {
grid-template-columns: minmax(0, 1fr) 44px;
gap: 8px;
}
.adminTimesheetReportCreatePage .reportWorkerTaskNameField {
grid-column: 1 / -1;
}
.adminTimesheetReportCreatePage .reportWorkerTaskHoursField {
grid-column: 1;
}
.adminTimesheetReportCreatePage .reportWorkerTaskRemoveBtn {
grid-column: 2;
}
.adminTimesheetReportCreateActions {
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
justify-content: stretch;
}
.adminTimesheetReportCreateActions .btn {
width: 100%;
}
}
.adminDocumentsPage, .adminDocumentsDetailPage {
gap: 16px;
}
.adminDocumentsDetailPage > .appBackLink {
margin-left: -9px;
}
.adminDocumentsToolbar, .adminDocumentsComposerCard, .adminDocumentsListCard, .adminDocumentsPreviewCard, .adminDocumentsInfoCard, .adminDocumentsRecipientsCard, .adminDocumentsTimelineCard {
flex-direction: column;
gap: 16px;
display: flex;
}
.adminDocumentsVersionedPreview {
gap: 16px;
min-width: 0;
display: grid;
}
.adminDocumentsPreviewCopyBar {
border-bottom: 1px solid var(--stroke);
grid-template-columns: minmax(240px, 440px) max-content;
grid-template-areas: "field actions"
"description description";
align-items: end;
gap: 8px 12px;
padding-bottom: 14px;
display: grid;
}
.adminDocumentsPreviewCopyBar.isFullViewer {
grid-template-columns: minmax(240px, 440px);
grid-template-areas: "field"
"description";
}
.adminDocumentsPreviewCopyField {
grid-area: field;
gap: 6px;
min-width: 0;
display: grid;
}
.adminDocumentsPreviewCopyField .listboxRoot {
width: 100%;
min-width: 0;
}
.adminDocumentsPreviewCopyField .listboxTrigger {
background: #fff;
min-height: 44px;
}
.adminDocumentsPreviewCopyField .listboxOptionLabelWrap {
min-width: 0;
}
.adminDocumentsPreviewCopyField .listboxGroupLabel {
background: color-mix(in srgb, var(--bg-2), white 48%);
}
.adminDocumentsPreviewCopyField .listboxTrigger .listboxOptionLabelWrap > span:last-child {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminDocumentsPreviewCopyLabel {
color: var(--muted);
text-transform: uppercase;
font-size: 11px;
font-weight: 760;
line-height: 1.2;
}
.adminDocumentsPreviewCopyActions {
grid-area: actions;
gap: 8px;
display: flex;
}
.adminDocumentsPreviewCopyAction {
white-space: nowrap;
gap: 7px;
min-height: 44px;
padding-inline: 12px;
}
.adminDocumentsPreviewCopyAction svg {
flex: none;
}
.adminDocumentsPreviewCopyDescription {
grid-area: description;
min-width: 0;
margin: 0;
font-size: 12px;
line-height: 1.4;
}
@media (min-width: 1101px) {
.adminDocumentsPreviewReadingPane {
top: calc(var(--admin-shell-header-height) + 18px);
height: calc(100dvh - var(--admin-shell-header-height) - 36px);
max-height: calc(100dvh - var(--admin-shell-header-height) - 36px);
align-self: start;
min-height: 0;
display: flex;
position: sticky;
overflow: hidden;
}
.adminDocumentsPreviewReadingPane .adminDocumentsPreviewCard, .adminDocumentsPreviewReadingPane .adminDocumentsVersionedPreview {
flex: 1;
min-height: 0;
}
.adminDocumentsPreviewReadingPane .adminDocumentsVersionedPreview {
flex-direction: column;
display: flex;
}
}
.sr-only {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.adminDocumentsSendPage {
width: 100%;
max-width: none;
}
.adminDocumentsSendLayout {
grid-template-columns: minmax(0, 1fr) minmax(320px, 336px);
align-items: start;
gap: 16px;
display: grid;
}
.adminDocumentsSendFormCard, .adminDocumentsSendSummaryCard {
min-width: 0;
}
.adminDocumentsSendComposerCard {
padding: 16px;
}
.adminDocumentsSendIntro {
border-bottom: 1px solid var(--stroke);
justify-content: space-between;
gap: 16px;
padding-bottom: 14px;
display: flex;
}
.adminDocumentsSendIntro h2 {
margin: 2px 0 4px;
font-size: 18px;
}
.adminDocumentsSendIntro p {
max-width: 760px;
font-size: var(--ops-font-primary, 13px);
line-height: 1.35;
}
.adminDocumentsSendComposerCard .adminDocumentsComposerGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentsSendComposerCard .adminDocumentsComposerGrid > .field:first-child {
grid-column: 1 / -1;
}
.adminDocumentsComposer {
gap: 12px;
display: grid;
}
.adminDocumentsSendSection {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
box-shadow: none;
background: none;
gap: 14px;
padding: 17px 0 0;
display: grid;
}
.adminDocumentsSendSection:first-of-type {
border-top: 0;
padding-top: 0;
}
.adminDocumentsSendSectionHead {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
display: grid;
}
.adminDocumentsSendSectionHead h3 {
font-size: var(--ops-font-primary, 13px);
margin: 0 0 3px;
font-weight: 800;
line-height: 1.2;
}
.adminDocumentsSendSectionHead p {
font-size: var(--ops-font-primary, 13px);
margin: 0;
line-height: 1.35;
}
.adminDocumentsRequiredMark {
color: var(--danger);
margin-left: 4px;
}
.adminDocumentsRequiredActionNotice {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
background: color-mix(in srgb, var(--focus), white 96%);
color: color-mix(in srgb, var(--fg), var(--focus) 22%);
border-radius: 10px;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 9px;
padding: 10px 12px;
display: grid;
}
.adminDocumentsRequiredActionNotice > span {
background: color-mix(in srgb, var(--focus), white 84%);
width: 18px;
height: 18px;
color: color-mix(in srgb, var(--focus), black 14%);
border-radius: 999px;
place-items: center;
font-size: 12px;
font-weight: 800;
display: inline-grid;
}
.adminDocumentsRequiredActionNotice p {
margin: 0;
font-size: .86rem;
line-height: 1.35;
}
.adminDocumentsPolicyNotice strong {
color: var(--fg);
margin-bottom: 2px;
display: block;
}
.adminDocumentsRequiredActionNotice.isBlocked {
border-color: color-mix(in srgb, var(--danger), transparent 55%);
background: color-mix(in srgb, var(--danger), white 96%);
color: color-mix(in srgb, var(--fg), var(--danger) 22%);
}
.adminDocumentsRequiredActionNotice.isBlocked > span {
background: color-mix(in srgb, var(--danger), white 86%);
color: color-mix(in srgb, var(--danger), black 18%);
}
.adminDocumentsRequiredActionNotice.isWarning {
border-color: color-mix(in srgb, var(--warning), transparent 52%);
background: color-mix(in srgb, var(--warning), white 94%);
color: color-mix(in srgb, var(--fg), var(--warning) 24%);
}
.adminDocumentsRequiredActionNotice.isWarning > span {
background: color-mix(in srgb, var(--warning), white 82%);
color: color-mix(in srgb, var(--warning), black 24%);
}
.adminDocumentsPolicyNotice.isWarning {
border-color: color-mix(in srgb, var(--focus), transparent 54%);
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--fg), var(--focus) 16%);
}
.adminDocumentsPolicyNotice > svg {
color: color-mix(in srgb, var(--focus), black 8%);
margin-top: 1px;
}
.adminDocumentsPolicyNoticeContent {
min-width: 0;
}
.adminDocumentsSignatureOptions {
border-top: 1px solid color-mix(in srgb, var(--focus), transparent 72%);
margin-top: 12px;
display: grid;
}
.adminDocumentsSignatureOption {
min-height: 44px;
color: var(--fg);
cursor: pointer;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 10px 8px 10px 0;
display: grid;
}
.adminDocumentsSignatureOption + .adminDocumentsSignatureOption {
border-top: 1px solid color-mix(in srgb, var(--focus), transparent 82%);
}
.adminDocumentsSignatureOption input {
width: 18px;
height: 18px;
accent-color: var(--focus);
margin: 2px 0 0;
}
.adminDocumentsSignatureOption span {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentsSignatureOption b, .adminDocumentsSignatureOption small {
line-height: 1.35;
}
.adminDocumentsSignatureOption b {
font-size: .86rem;
}
.adminDocumentsSignatureOption small {
color: var(--muted);
font-size: .8rem;
}
.adminDocumentsSignatureOption:has(input:checked) b {
color: color-mix(in srgb, var(--focus), black 16%);
}
.adminDocumentsSignatureOption:has(input:focus-visible) {
outline: 2px solid color-mix(in srgb, var(--focus), transparent 24%);
outline-offset: -2px;
border-radius: 6px;
}
.adminDocumentsSignatureOption:has(input:disabled) {
cursor: not-allowed;
opacity: .58;
}
.adminDocumentsSendRecipientsGrid, .adminDocumentsRecipientControls {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
display: grid;
}
.adminDocumentsRecipientControls {
align-items: start;
}
.adminDocumentsRecipientsTitleRow {
flex-wrap: wrap;
align-items: center;
gap: 8px;
display: flex;
}
.adminDocumentsRecipientClear {
color: var(--focus);
cursor: pointer;
font: inherit;
white-space: nowrap;
background: none;
border: 0;
padding: 0;
font-weight: 700;
}
.adminDocumentsRecipientClear:disabled {
cursor: not-allowed;
opacity: .55;
}
.adminDocumentsRoleCoverage {
margin: 2px 0 0;
font-size: .86rem;
}
.adminDocumentsFinalRecipients {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: #fff;
border-radius: 12px;
gap: 12px;
padding: 0;
display: grid;
overflow: hidden;
}
.adminDocumentsFinalRecipients.hasRecipients {
border-color: color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
}
.adminDocumentsFinalRecipientsHeader {
justify-content: space-between;
align-items: start;
gap: 12px;
padding: 12px 14px 0;
display: flex;
}
.adminDocumentsFinalRecipientsHeader > div, .adminDocumentsFinalRecipientsEmpty {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentsFinalRecipientsCount {
background: color-mix(in srgb, var(--focus), white 88%);
min-width: 22px;
height: 22px;
color: color-mix(in srgb, var(--focus), black 12%);
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0 7px;
font-size: .76rem;
font-weight: 800;
display: inline-flex;
}
.adminDocumentsFinalRecipientsEmpty span:not(.adminDocumentsFinalRecipientsIcon) {
color: var(--muted);
font-size: .86rem;
}
.adminDocumentsFinalRecipientsEmpty {
border: 1px dashed color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 10px;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
min-height: 62px;
margin: 0 12px 12px;
padding: 10px;
display: grid;
}
.adminDocumentsFinalRecipientsEmpty > div {
gap: 3px;
min-width: 0;
display: grid;
}
.adminDocumentsFinalRecipientsIcon {
background: color-mix(in srgb, var(--focus), white 92%);
width: 34px;
height: 34px;
color: color-mix(in srgb, var(--focus), black 14%);
border-radius: 999px;
place-items: center;
font-weight: 800;
display: inline-grid;
}
.adminDocumentsSelectedWorkersTableWrap {
gap: 10px;
padding: 0 12px 12px;
display: grid;
overflow-x: auto;
}
.adminDocumentsSelectedWorkersTable {
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 600px;
}
.adminDocumentsSelectedWorkersTable th, .adminDocumentsSelectedWorkersTable td {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
text-align: left;
vertical-align: middle;
padding: 10px 12px;
}
.adminDocumentsSelectedWorkersTable th {
color: var(--muted);
letter-spacing: .05em;
text-transform: uppercase;
font-size: .73rem;
font-weight: 800;
}
.adminDocumentsSelectedWorkersTable tbody tr:last-child td {
border-bottom: 0;
}
.adminDocumentsSelectedWorkerIdentity {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 9px;
min-width: 0;
font-weight: 750;
display: inline-grid;
}
.adminDocumentsSelectedWorkerAvatar {
flex: none;
}
.adminDocumentsSelectedWorkerActionCell {
text-align: right;
width: 44px;
}
.adminDocumentsSelectedWorkerRemove {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
width: 28px;
height: 28px;
color: var(--muted);
cursor: pointer;
font: inherit;
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0;
font-size: 18px;
line-height: 1;
display: inline-flex;
}
.adminDocumentsSelectedWorkerRemove:hover, .adminDocumentsSelectedWorkerRemove:focus-visible {
border-color: color-mix(in srgb, var(--danger), transparent 45%);
color: var(--danger);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger), transparent 86%);
}
.adminDocumentsAddWorkerButton {
justify-self: start;
min-height: 38px;
}
.adminDocumentsSendSummaryCard {
position: sticky;
top: 14px;
}
.adminDocumentsSendSummaryBody {
align-content: start;
gap: 14px;
min-height: 607px;
padding: 16px;
display: grid;
}
.adminDocumentsSendSummaryHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 4px;
padding-bottom: 12px;
display: grid;
}
.adminDocumentsSendSummaryHead h2 {
margin: 0;
font-size: 1rem;
line-height: 1.2;
}
.adminDocumentsSendSummaryHead p {
margin: 0;
font-size: .86rem;
}
.adminDocumentsSendSummaryList {
gap: 0;
margin: 0;
display: grid;
}
.adminDocumentsSendSummaryList div {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 4px;
min-height: 58px;
padding: 10px 0;
display: grid;
}
.adminDocumentsSendSummaryList dt {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 800;
}
.adminDocumentsSendSummaryList dd {
min-width: 0;
color: var(--fg);
font-size: var(--ops-font-primary, 13px);
overflow-wrap: anywhere;
margin: 0;
line-height: 1.35;
}
.adminDocumentsSendSummaryNotice {
border: 1px solid color-mix(in srgb, var(--focus), transparent 58%);
background: color-mix(in srgb, var(--focus), white 95%);
min-height: 58px;
color: color-mix(in srgb, var(--focus), black 18%);
border-radius: 10px;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 9px;
padding: 10px;
display: grid;
}
.adminDocumentsSendSummaryNotice span {
background: color-mix(in srgb, var(--focus), white 84%);
width: 18px;
height: 18px;
font-size: var(--ops-font-meta, 12px);
border-radius: 999px;
place-items: center;
margin-top: 1px;
font-weight: 800;
display: inline-grid;
}
.adminDocumentsSendSummaryNotice svg {
margin-top: 1px;
}
.adminDocumentsSendSummaryNotice p {
color: color-mix(in srgb, var(--fg), var(--focus) 24%);
font-size: var(--ops-font-meta, 12px);
margin: 0;
line-height: 1.35;
}
.adminDocumentsSendEyebrow {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
letter-spacing: .08em;
text-transform: uppercase;
margin: 0;
font-weight: 700;
}
.adminDocumentsToolbar {
flex-direction: row;
justify-content: space-between;
align-items: start;
gap: 16px;
}
.adminDocumentsToolbarText {
min-width: 0;
}
.adminDocumentsToolbarActions, .adminDocumentsComposerActions, .adminDocumentsDetailHeroActions {
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
display: flex;
}
.adminDocumentsComposerActions.adminDocumentsSendReadiness {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
grid-template-columns: auto auto minmax(0, 1fr);
justify-content: start;
align-items: center;
gap: 7px 10px;
padding-top: 13px;
display: grid;
}
.adminDocumentsComposerActions .btn {
min-height: 44px;
}
.adminDocumentsHeaderActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminDocumentsActionBar {
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
display: flex;
}
.adminDocumentsSummary {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminDocumentsSummaryCompact {
gap: 6px;
}
.adminDocumentsComposerGrid {
grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, .9fr)) auto;
gap: 10px 12px;
display: grid;
}
.adminDocumentsComposerFieldWide {
grid-column: 1 / -1;
}
.adminDocumentsComposerNote {
resize: vertical;
min-height: 108px;
font-family: inherit;
line-height: 1.45;
}
.adminDocumentsFileDropzone {
border: 1px dashed color-mix(in srgb, var(--focus), transparent 34%);
border-radius: calc(var(--radius) + 4px);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 98%), color-mix(in srgb, white, var(--bg) 8%));
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 112px;
padding: 16px;
transition: border-color .14s, background-color .14s, box-shadow .14s, transform .14s;
display: grid;
}
.adminDocumentsFileDropzone:hover, .adminDocumentsFileDropzone.isDragging {
border-color: color-mix(in srgb, var(--focus), transparent 14%);
background: linear-gradient(180deg, color-mix(in srgb, var(--focus), white 95%), color-mix(in srgb, white, var(--bg) 4%));
transform: translateY(-1px);
box-shadow: 0 10px 24px #28489214;
}
.adminDocumentsFileDropzone.isDisabled {
opacity: .65;
transform: none;
}
.adminDocumentsFileDropzoneIcon {
border: 1px solid color-mix(in srgb, var(--focus), transparent 68%);
background: #fff;
border-radius: 12px;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
display: inline-flex;
}
.adminDocumentsFileDropzoneFileIcon {
width: 40px;
height: 40px;
}
.adminDocumentsFileDropzoneText {
gap: 5px;
min-width: 0;
display: grid;
}
.adminDocumentsFileConstraint {
color: color-mix(in srgb, var(--muted), var(--focus) 16%);
font-size: var(--ops-font-meta, 12px);
font-weight: 700;
}
.adminDocumentsFileMeta {
border: 1px dashed color-mix(in srgb, var(--focus), transparent 36%);
border-radius: calc(var(--radius) + 4px);
background: color-mix(in srgb, var(--focus), white 98%);
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 70px;
margin-top: 0;
padding: 12px 14px;
display: grid;
box-shadow: 0 1px #0f172a08;
}
.adminDocumentsFileMetaBadge {
border: 1px solid color-mix(in srgb, var(--stroke), var(--fg) 6%);
background: #fff;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
padding: 2px;
display: inline-flex;
}
.adminDocumentsFileMetaIcon {
width: 34px;
height: 34px;
display: block;
}
.adminDocumentsFileMetaText {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentsFileMetaText strong {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminDocumentsFileMetaActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
display: flex;
}
.adminDocumentsFileRemove {
border: 1px solid color-mix(in srgb, var(--danger), transparent 52%);
width: 36px;
height: 36px;
color: var(--danger);
cursor: pointer;
font: inherit;
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0;
font-size: 20px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.adminDocumentsFileRemove:hover {
background: color-mix(in srgb, var(--danger), white 94%);
}
.adminDocumentsFileRemove:disabled {
cursor: not-allowed;
opacity: .6;
}
.adminDocumentsInlineError {
color: var(--danger);
margin: 0;
}
.adminDocumentsSendReadyHint {
max-width: 420px;
color: color-mix(in srgb, var(--muted), var(--warn) 26%);
font-size: var(--ops-font-meta, 12px);
grid-column: 1 / -1;
font-weight: 650;
line-height: 1.35;
}
.adminDocumentsSendReadyHint.isReady {
color: var(--muted);
font-weight: 600;
}
.adminDocumentsComposerActions .btnAction:disabled {
border-color: color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), var(--fg) 5%);
color: color-mix(in srgb, var(--muted), white 18%);
box-shadow: none;
}
.adminDocumentsConfirmOverlay {
z-index: 1200;
padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
background: #0f172a5c;
place-items: center;
display: grid;
position: fixed;
inset: 0;
}
.adminDocumentsConfirmDialog {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: #fff;
border-radius: 14px;
gap: 14px;
width: min(520px, 100%);
padding: 18px;
display: grid;
box-shadow: 0 24px 80px #0f172a3d;
}
.adminDocumentsConfirmHeader {
align-items: flex-start;
gap: 11px;
display: flex;
}
.adminDocumentsConfirmHeader > svg {
color: var(--focus);
flex: none;
margin-top: 2px;
}
.adminDocumentsConfirmHeader h2 {
margin: 0;
font-size: 1.22rem;
}
.adminDocumentsConfirmHeader p {
color: var(--muted);
margin: 5px 0 0;
line-height: 1.45;
}
.adminDocumentsConfirmCheck {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
background: color-mix(in srgb, var(--focus), white 96%);
min-height: 44px;
color: var(--fg);
cursor: pointer;
border-radius: 10px;
align-items: center;
gap: 10px;
padding: 10px 12px;
font-size: .92rem;
font-weight: 750;
display: flex;
}
.adminDocumentsConfirmCheck input {
width: 18px;
height: 18px;
accent-color: var(--focus);
}
.adminDocumentsConfirmActions {
justify-content: flex-end;
gap: 10px;
display: flex;
}
.adminDocumentsConfirmActions .btn {
align-items: center;
gap: 7px;
min-height: 42px;
display: inline-flex;
}
.adminDocumentsCorrectionReissueDialog {
width: min(620px, 100%);
}
.adminDocumentsCorrectionReissueFields {
gap: 14px;
display: grid;
}
.adminDocumentsCorrectionReissueFields .field {
gap: 7px;
display: grid;
}
.adminDocumentsCorrectionFilePicker {
min-height: 88px;
padding: 12px;
}
.adminDocumentsCorrectionFilePicker .adminDocumentsFileDropzoneIcon {
width: 42px;
height: 42px;
}
.adminDocumentsCorrectionFilePicker .adminDocumentsFileDropzoneFileIcon {
width: 34px;
height: 34px;
}
.adminDocumentsCorrectionFilePicker > .btn {
white-space: nowrap;
}
.adminDocumentsCorrectionFileMeta {
min-height: 68px;
margin: 0;
}
.adminDocumentsCorrectionReissueFields textarea {
resize: vertical;
min-height: 112px;
}
.adminDocumentsCorrectionReissueAvailable {
gap: 14px;
display: grid;
}
.adminDocumentsCorrectionReissueAvailable p {
max-width: 58ch;
margin: 5px 0 0;
font-size: .88rem;
line-height: 1.42;
}
.adminDocumentsCorrectionReissueAvailable > .btn {
justify-self: start;
}
.adminDocumentsStatePanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg), white 45%);
border-radius: 12px;
align-content: center;
justify-items: start;
gap: 12px;
min-height: 180px;
padding: 20px;
display: grid;
}
.adminDocumentsListCard > .adminDocumentsStatePanel {
margin: 14px;
}
.adminDocumentsStatePanel.isError {
border-color: color-mix(in srgb, var(--danger), transparent 62%);
background: color-mix(in srgb, var(--danger), white 96%);
}
.adminDocumentsStateTitle {
color: var(--muted);
margin: 0;
font-weight: 700;
}
.adminDocumentsSkeletonList {
gap: 8px;
width: 100%;
display: grid;
}
.adminDocumentsSkeletonRow {
grid-template-columns: 34px minmax(0, 1fr) 92px;
align-items: center;
gap: 12px;
min-height: 54px;
display: grid;
}
.adminDocumentsSkeletonIcon, .adminDocumentsSkeletonText, .adminDocumentsSkeletonPill {
background: linear-gradient(90deg,
color-mix(in srgb, var(--stroke), white 42%) 0%,
color-mix(in srgb, var(--stroke), white 70%) 50%,
color-mix(in srgb, var(--stroke), white 42%) 100%);
background-size: 200% 100%;
border-radius: 999px;
animation: 1.15s ease-in-out infinite adminDocumentsSkeleton;
display: block;
}
.adminDocumentsSkeletonIcon {
border-radius: 8px;
width: 34px;
height: 34px;
}
.adminDocumentsSkeletonText {
height: 14px;
}
.adminDocumentsSkeletonPill {
height: 26px;
}
@keyframes adminDocumentsSkeleton {
from {
background-position: 100% 0;
}
to {
background-position: -100% 0;
}
}
.adminDocumentsListTableWrap {
overflow-anchor: none;
max-width: 100%;
overflow: auto hidden;
}
.adminDocumentsEmptyTableWrap {
overflow: hidden;
}
.adminDocumentsListTable {
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
width: 100%;
min-width: 860px;
}
.adminOperationsListPage .adminDocumentsListTable thead {
background: #f8fafc;
}
.adminOperationsListPage .adminDocumentsListTable thead th {
border-bottom: 1px solid var(--stroke);
color: color-mix(in srgb, var(--fg), black 8%);
font-size: var(--ops-font-table-header, 13px);
letter-spacing: .01em;
text-align: left;
background: none;
padding: 13px 16px;
font-weight: 700;
line-height: 1.2;
}
.adminOperationsListPage .adminDocumentsListTable thead th.adminDocumentsColActions {
text-align: right;
}
.adminOperationsListPage .adminDocumentsListTable tbody td {
border-bottom: 1px solid var(--stroke);
font-size: var(--ops-font-row, 13px);
vertical-align: middle;
padding: 16px;
line-height: 1.3;
}
.adminDocumentsListTable.isInbox {
min-width: 760px;
}
.adminDocumentsListTable.isAll th:first-child, .adminDocumentsListTable.isAll td:first-child, .adminDocumentsListTable.isInbox th:first-child, .adminDocumentsListTable.isInbox td:first-child {
width: 132px;
}
.adminDocumentsListTable.isAll th:nth-child(2), .adminDocumentsListTable.isAll td:nth-child(2), .adminDocumentsListTable.isInbox th:nth-child(2), .adminDocumentsListTable.isInbox td:nth-child(2) {
width: auto;
}
.adminDocumentsListTable.isAll th:nth-child(3), .adminDocumentsListTable.isAll td:nth-child(3) {
width: 18%;
}
.adminDocumentsListTable.isAll th:nth-child(4), .adminDocumentsListTable.isAll td:nth-child(4) {
width: 15%;
}
.adminDocumentsListTable.isAll th:nth-child(5), .adminDocumentsListTable.isAll td:nth-child(5) {
width: 14%;
}
.adminDocumentsListTable.isInbox th:nth-child(3), .adminDocumentsListTable.isInbox td:nth-child(3) {
width: 22%;
}
.adminDocumentsListTable.isInbox th:nth-child(4), .adminDocumentsListTable.isInbox td:nth-child(4) {
width: 16%;
}
.adminDocumentsListTable .adminDocumentsColActions {
width: 108px;
min-width: 108px;
}
.adminDocumentsListTable .adminDocumentsListRow.isInactive td {
background: color-mix(in srgb, var(--border), white 94%);
}
.adminDocumentsListTable .adminDocumentsListRow.isInactive .adminDocumentsListTitle {
color: color-mix(in srgb, var(--fg), white 20%);
}
.adminOperationsListPage .adminDocumentsListTable .adminDocumentsListRow:hover td, .adminOperationsListPage .adminDocumentsListTable .adminDocumentsListRow:focus-within td {
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminDocumentsListDate, .adminDocumentsListSource, .adminDocumentsListState, .adminDocumentsListRequiredAction {
min-width: 0;
font-size: var(--ops-font-primary, 13px);
vertical-align: middle;
line-height: 1.28;
overflow: hidden;
}
.adminDocumentsListDate > span:not(.sr-only) {
display: block;
}
.adminDocumentsListSource > .adminDocumentsSourceBadge, .adminDocumentsStatusStack > .adminDocumentStatusBadge, .adminDocumentsStatusStack > .adminDocumentHandlingBadge, .adminDocumentsListRequiredAction > .adminDocumentRequiredBadge {
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
.adminDocumentsListState {
overflow: visible;
}
.adminDocumentsStatusStack {
text-align: left;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
display: flex;
}
.adminDocumentsStatusStack > .adminDocumentStatusBadge, .adminDocumentsStatusStack > .adminDocumentHandlingBadge {
text-align: left;
justify-content: flex-start;
}
.adminDocumentsStatusStack > .adminDocumentStatusBadge {
text-overflow: clip;
white-space: normal;
overflow: visible;
}
.adminDocumentsListSource > .adminDocumentsSourceActor, .adminDocumentsListRequiredAction > .adminDocumentsProgressText {
margin-top: 4px;
display: block;
}
.adminDocumentsListDate, .adminDocumentsListSource, .adminDocumentsListState span:not(.adminDocumentStatusBadge):not(.adminDocumentHandlingBadge), .adminDocumentsListRequiredAction span:not(.adminDocumentRequiredBadge) {
color: var(--muted);
}
.adminDocumentsListDateLabel {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 700;
display: none;
}
.adminDocumentsListTile {
width: 40px;
min-width: 40px;
min-height: 40px;
box-shadow: none;
background: none;
border: 0;
border-radius: 0;
justify-content: center;
align-items: center;
padding: 0;
display: flex;
}
.adminDocumentsListTileIcon {
width: 38px;
height: 38px;
display: block;
}
.adminDocumentsListTileKind {
font-size: var(--ops-font-primary, 13px);
letter-spacing: 0;
font-weight: 700;
}
.adminDocumentsListMain, .adminDocumentsDetailHeroMain, .adminDocumentsDetailSide {
min-width: 0;
}
.adminDocumentsListMainCell {
vertical-align: middle;
min-width: 0;
}
.adminDocumentsDetailHeroMain {
align-content: center;
gap: 8px;
display: grid;
}
.adminDocumentsDetailHeroTop, .adminDocumentsDetailIdentity {
flex-wrap: wrap;
align-items: baseline;
min-width: 0;
display: flex;
}
.adminDocumentsDetailHeroTop {
gap: 8px;
}
.adminDocumentsDetailIdentity {
gap: 4px 8px;
}
.adminDocumentsDetailHero .adminDocumentsDetailIdentity {
align-items: center;
gap: 6px;
display: grid;
}
.adminDocumentsDetailHero .adminDocumentsDetailTitle {
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.08;
}
.adminDocumentsListMain {
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 12px;
display: grid;
}
.adminDocumentsListMobileMain {
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
gap: 10px;
width: 100%;
min-width: 0;
display: grid;
}
.adminDocumentsListTop {
justify-content: space-between;
align-items: start;
gap: 12px;
width: 100%;
display: flex;
}
.adminDocumentsListHeading {
flex-direction: column;
gap: 6px;
min-width: 0;
display: flex;
}
.adminDocumentsListTitle, .adminDocumentsDetailTitle {
min-width: 0;
max-width: 100%;
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.adminDocumentsDetailTitle {
overflow-wrap: anywhere;
word-break: normal;
}
.adminDocumentsListTitle {
font-size: var(--ops-font-primary, 13px);
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 800;
overflow: hidden;
}
.adminDocumentsListMeta, .adminDocumentsListBottom, .adminDocumentsDetailMeta, .adminDocumentsTimelineMeta {
color: var(--muted);
font-size: var(--ops-font-meta, 12px);
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
display: flex;
}
.adminDocumentsListMeta {
flex-wrap: nowrap;
max-width: 100%;
overflow: hidden;
}
.adminDocumentsListMetaType, .adminDocumentsListMetaSize {
flex: none;
}
.adminDocumentsListMetaFile {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminDocumentsSourceBadge {
background: color-mix(in srgb, var(--focus), white 95%);
color: color-mix(in srgb, var(--focus), black 18%);
gap: 5px;
}
.adminDocumentsSourceBadge svg {
flex: none;
}
.adminDocumentsSourceActor {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
color: color-mix(in srgb, var(--fg), white 22%);
font-weight: 650;
display: block;
overflow: hidden;
}
.adminDocumentsParticipantSummary {
align-items: center;
gap: 4px;
min-width: 0;
max-width: 100%;
position: relative;
}
.adminDocumentsSourceActor.adminDocumentsParticipantSummary, .adminDocumentsDetailParticipant.adminDocumentsParticipantSummary {
white-space: normal;
display: inline-flex;
overflow: visible;
}
.adminDocumentsSourceActor.adminDocumentsParticipantSummary {
display: flex;
}
.adminDocumentsParticipantRelationship {
color: inherit;
flex: none;
}
.adminDocumentsParticipantName {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminDocumentsParticipantDisclosure {
min-width: 0;
max-width: calc(100% + 8px);
min-height: 44px;
color: inherit;
font: inherit;
font-weight: inherit;
line-height: inherit;
text-align: left;
cursor: pointer;
background: none;
border: 0;
border-radius: 7px;
align-items: center;
gap: 4px;
margin: -10px -4px;
padding: 0 4px;
transition: background-color .14s, color .14s;
display: inline-flex;
}
.adminDocumentsParticipantDisclosure:hover, .adminDocumentsParticipantDisclosure[aria-expanded="true"] {
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 18%);
}
.adminDocumentsParticipantDisclosure:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
}
.adminDocumentsParticipantChevron {
flex: none;
width: 14px;
height: 14px;
transition: transform .14s;
}
.adminDocumentsParticipantDisclosure[aria-expanded="true"] .adminDocumentsParticipantChevron {
transform: rotate(180deg);
}
.adminDocumentsParticipantPopover {
z-index: 1400;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
color: var(--fg);
background: #fff;
border-radius: 10px;
overflow-y: auto;
box-shadow: 0 16px 38px #0f172a29;
}
.adminDocumentsParticipantPopoverTitle {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 11px 14px 9px;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
display: flex;
}
.adminDocumentsParticipantPopoverCount {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.adminDocumentsParticipantList {
margin: 0;
padding: 4px 14px;
list-style: none;
display: grid;
}
.adminDocumentsParticipantListItem {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 30%);
gap: 1px;
min-width: 0;
padding: 8px 0;
display: grid;
}
.adminDocumentsParticipantListItem:last-child {
border-bottom: 0;
}
.adminDocumentsParticipantListName, .adminDocumentsParticipantUsername {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.adminDocumentsParticipantListName {
font-size: 13px;
font-weight: 750;
line-height: 1.3;
}
.adminDocumentsParticipantUsername, .adminDocumentsParticipantMore {
color: var(--muted);
font-size: 11.5px;
line-height: 1.3;
}
.adminDocumentsParticipantMore {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding: 8px 14px 10px;
font-weight: 700;
}
.adminDocumentsListTable .adminOperationsReviewActionsCell .adminDirectoryRowActions.adminOperationsQuickActions {
gap: 6px;
}
.adminDocumentsListTable .adminDocumentsListAction {
width: 80px;
min-width: 80px;
}
.adminOperationsListPage .adminDocumentsListTable.isAll td.adminDocumentsListRequiredAction, .adminOperationsListPage .adminDocumentsListTable.isAll td.adminDocumentsListState {
vertical-align: top;
}
@media (max-width: 1360px) {
.adminDocumentsListTable.isAll th:nth-child(3), .adminDocumentsListTable.isAll td:nth-child(3) {
width: 16%;
}
.adminDocumentsListTable.isAll th:nth-child(4), .adminDocumentsListTable.isAll td:nth-child(4) {
width: 17%;
}
.adminDocumentsListTable.isAll th:nth-child(5), .adminDocumentsListTable.isAll td:nth-child(5) {
width: 18%;
}
.adminDocumentsListTable.isAll .adminDocumentsStatusStack > .adminDocumentStatusBadge {
white-space: nowrap;
}
}
@media (max-width: 640px) {
.adminDocumentsListTable.isAll {
min-width: 860px;
}
.adminDocumentsListTable.isInbox {
min-width: 760px;
}
}
.adminDocumentsListBadges {
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
display: flex;
}
.adminDocumentsProgressText {
color: color-mix(in srgb, var(--fg), white 18%);
font-weight: 600;
}
.adminDocumentHandlingBadge, .adminDocumentRequiredBadge {
color: var(--fg);
background: #fff;
}
.adminDocumentStatusBadge.pillStatusNew {
background: color-mix(in srgb, var(--focus), white 82%);
color: color-mix(in srgb, var(--focus), black 36%);
}
.adminDocumentStatusBadge.pillStatusViewed {
background: color-mix(in srgb, var(--muted), white 84%);
color: color-mix(in srgb, var(--muted), black 34%);
}
.adminDocumentStatusBadge.pillStatusSubmitted {
background: color-mix(in srgb, var(--focus), white 84%);
color: color-mix(in srgb, var(--focus), black 36%);
}
.adminDocumentStatusBadge.pillStatusPending {
background: color-mix(in srgb, var(--warn), white 84%);
color: color-mix(in srgb, var(--warn), black 42%);
}
.adminDocumentStatusBadge.isCompanyPending {
background: color-mix(in srgb, var(--warn), white 94%);
color: color-mix(in srgb, var(--warn), var(--fg) 55%);
}
.adminDocumentStatusBadge.pillStatusApproved {
background: color-mix(in srgb, var(--ok), white 84%);
color: color-mix(in srgb, var(--ok), black 38%);
}
.adminDocumentStatusBadge.pillStatusRejected {
background: color-mix(in srgb, var(--danger), white 86%);
color: color-mix(in srgb, var(--danger), black 38%);
}
.adminDocumentStatusBadge.pillStatusLocked {
background: color-mix(in srgb, var(--muted), white 82%);
color: color-mix(in srgb, var(--muted), black 42%);
}
.adminDocumentHandlingBadge.isNeedsHandling {
background: color-mix(in srgb, var(--warn), white 84%);
color: color-mix(in srgb, var(--warn), black 42%);
}
.adminDocumentHandlingBadge.isHandled {
background: color-mix(in srgb, var(--ok), white 84%);
color: color-mix(in srgb, var(--ok), black 38%);
}
.adminDocumentRequiredBadge.isReview, .adminDocumentRequiredBadge.isSign {
background: color-mix(in srgb, var(--focus), white 94%);
color: color-mix(in srgb, var(--focus), black 18%);
}
.adminDocumentsNoValue {
color: var(--muted);
font-weight: 700;
}
.adminDocumentsListAction {
text-decoration: none;
}
.adminDocumentsListAction.isReview {
border-color: color-mix(in srgb, var(--focus), transparent 52%);
color: color-mix(in srgb, var(--focus), black 18%);
background: color-mix(in srgb, var(--focus), white 96%);
}
.adminDocumentsDetailHero {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
display: grid;
}
.adminDocumentsDetailFileTile {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg), white 56%);
border-radius: 10px;
place-items: center;
width: 50px;
height: 50px;
display: grid;
}
.adminDocumentsDetailFileTile.isPdf {
border-color: color-mix(in srgb, var(--danger), transparent 70%);
}
.adminDocumentsDetailFileTile.isImage {
border-color: color-mix(in srgb, var(--focus), transparent 72%);
}
.adminDocumentsDetailFileIcon {
width: 42px;
height: 42px;
display: block;
}
.adminDocumentsDetailNote {
margin: 12px 0 0;
}
.adminDocumentsDetailSummaryStrip {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
color: color-mix(in srgb, var(--fg), white 18%);
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 10px;
padding: 10px 0 0;
font-size: 13px;
display: flex;
}
.adminDocumentsDetailHeroActions {
grid-auto-columns: max-content;
grid-auto-flow: column;
justify-content: flex-end;
align-items: center;
gap: 8px;
max-width: none;
display: grid;
}
.adminDocumentsDetailAction {
white-space: nowrap;
gap: 7px;
min-height: 44px;
padding-inline: 12px;
}
.adminDocumentsDetailActionIcon {
flex: none;
place-items: center;
width: 18px;
height: 18px;
display: inline-grid;
}
.adminDocumentsDetailActionIcon svg {
width: 18px;
height: 18px;
display: block;
}
.adminDocumentsDetailGrid {
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: 18px;
display: grid;
}
.adminDocumentsDetailSide {
flex-direction: column;
gap: 18px;
display: flex;
}
.adminDocumentsUnifiedRail {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
border-radius: calc(var(--radius) + 2px);
box-shadow: 0 12px 30px color-mix(in srgb, var(--fg), transparent 96%);
background: #fff;
gap: 0;
overflow: hidden;
}
.adminDocumentsUnifiedRail > .card {
box-shadow: none;
background: none;
border: 0;
border-radius: 0;
margin: 0;
}
.adminDocumentsUnifiedRail > .card + .card {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 4%);
}
.adminDocumentsUnifiedRail > .card > .cardBody {
padding: 18px;
}
.adminDocumentsHandlingCard, .adminDocumentsLifecycleCard, .adminDocumentsWorkflowCard {
gap: 18px;
display: grid;
}
.adminDocumentsHandlingHead, .adminDocumentsWorkflowHead {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.adminDocumentsWorkflowHead {
align-items: flex-start;
}
.adminDocumentsWorkflowChips {
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
display: inline-flex;
}
.adminDocumentsWorkflowSteps {
gap: 20px;
padding: 4px 0 2px;
display: grid;
}
.adminDocumentsWorkflowStep {
grid-template-columns: 30px minmax(0, 1fr);
align-items: start;
gap: 12px;
display: grid;
position: relative;
}
.adminDocumentsWorkflowStep:not(:last-child):after {
content: "";
z-index: 0;
background: color-mix(in srgb, var(--stroke), var(--focus) 18%);
border-radius: 999px;
width: 2px;
position: absolute;
top: 28px;
bottom: -20px;
left: 13px;
}
.adminDocumentsWorkflowStepDot {
z-index: 1;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
width: 26px;
height: 26px;
color: var(--muted);
background: #fff;
border-radius: 999px;
place-items: center;
margin-top: 1px;
font-size: 12px;
font-weight: 900;
line-height: 1;
display: inline-grid;
position: relative;
}
.adminDocumentsWorkflowStepDot svg {
stroke-width: 2.1px;
width: 14px;
height: 14px;
}
.adminDocumentsWorkflowStepDot[data-marker="check"] svg {
width: 13px;
height: 13px;
transform: translate(-.1px, -.2px);
}
.adminDocumentsWorkflowStep.is-complete .adminDocumentsWorkflowStepDot {
border-color: color-mix(in srgb, var(--ok), transparent 32%);
background: color-mix(in srgb, var(--ok), white 12%);
color: #fff;
}
.adminDocumentsWorkflowStep.is-current .adminDocumentsWorkflowStepDot {
border-color: color-mix(in srgb, var(--warn), transparent 36%);
background: color-mix(in srgb, var(--warn), white 91%);
color: color-mix(in srgb, var(--warn), black 18%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn), transparent 90%);
}
.adminDocumentsWorkflowStep.is-muted .adminDocumentsWorkflowStepDot {
border-color: color-mix(in srgb, var(--danger), transparent 58%);
background: color-mix(in srgb, var(--danger), white 92%);
color: color-mix(in srgb, var(--danger), black 16%);
}
.adminDocumentsWorkflowStep strong, .adminDocumentsWorkflowStep small {
min-width: 0;
display: block;
}
.adminDocumentsWorkflowStep strong {
color: var(--fg);
font-size: .94rem;
}
.adminDocumentsWorkflowStep small {
color: var(--muted);
margin-top: 2px;
font-size: .84rem;
line-height: 1.35;
}
.adminDocumentsWorkflowStepMeta {
font-weight: 700;
color: color-mix(in srgb, var(--fg), white 34%) !important;
}
.adminDocumentsHandlingText {
margin: 0;
}
.adminDocumentsHandlingButton {
width: 100%;
min-height: 44px;
}
.adminDocumentsRecipientActionSection {
gap: 10px;
display: grid;
}
.adminDocumentsLifecycleReason, .adminDocumentsLifecycleReasonField {
gap: 6px;
display: grid;
}
.adminDocumentsLifecycleReason span, .adminDocumentsLifecycleReasonField span {
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
}
.adminDocumentsLifecycleReason strong {
overflow-wrap: anywhere;
font-size: 14px;
line-height: 1.4;
}
.adminDocumentsCriticalDrawer {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: none;
margin-top: 2px;
}
.adminDocumentsCriticalDrawerSummary {
cursor: pointer;
background: none;
border-radius: 8px;
grid-template-columns: 34px minmax(0, 1fr) 44px;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 16px 0 0;
list-style: none;
display: grid;
}
.adminDocumentsCriticalDrawerSummary::-webkit-details-marker {
display: none;
}
.adminDocumentsCriticalDrawerSummary:focus-visible {
outline: none;
}
.adminDocumentsCriticalDrawerSummary:focus-visible .adminDocumentsCriticalDrawerDisclosure {
color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus), transparent 72%);
}
.adminDocumentsCriticalDrawerIcon {
background: color-mix(in srgb, var(--warn), white 91%);
width: 32px;
height: 32px;
color: color-mix(in srgb, var(--warn), black 18%);
border-radius: 8px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminDocumentsCriticalDrawerIcon svg {
width: 18px;
height: 18px;
}
.adminDocumentsCriticalDrawerText {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentsCriticalDrawerEyebrow {
color: color-mix(in srgb, var(--warn), black 24%);
letter-spacing: .04em;
text-transform: uppercase;
font-size: .69rem;
font-weight: 850;
line-height: 1.2;
}
.adminDocumentsCriticalDrawerText strong {
color: var(--fg);
font-size: .95rem;
line-height: 1.25;
}
.adminDocumentsCriticalDrawerText small {
max-width: 62ch;
color: var(--muted);
font-size: .82rem;
line-height: 1.35;
}
.adminDocumentsCriticalDrawerDisclosure {
width: 44px;
height: 44px;
min-height: 44px;
color: var(--muted);
border-radius: 8px;
place-items: center;
transition: background-color .14s, color .14s;
display: inline-grid;
}
.adminDocumentsCriticalDrawerSummary:hover .adminDocumentsCriticalDrawerDisclosure {
background: color-mix(in srgb, var(--warn), white 92%);
color: color-mix(in srgb, var(--warn), black 18%);
}
.adminDocumentsCriticalDrawerChevron {
width: 18px;
height: 18px;
transition: transform .16s;
}
.adminDocumentsCriticalDrawer[open] .adminDocumentsCriticalDrawerChevron {
transform: rotate(180deg);
}
.adminDocumentsCriticalDrawerBody {
gap: 16px;
padding: 16px 0 0 46px;
display: grid;
}
.adminDocumentsLifecycleReasonField .textarea {
resize: vertical;
min-height: 96px;
}
.adminDocumentsLifecycleReasonHelp {
color: var(--muted);
font-size: .78rem;
line-height: 1.35;
}
.adminDocumentsCriticalDrawerFooter {
justify-content: flex-end;
display: flex;
}
.adminDocumentsCriticalDrawerActions {
justify-content: flex-end;
align-items: center;
gap: 10px;
display: inline-flex;
}
.adminDocumentsCriticalCancelButton {
min-height: 44px;
color: color-mix(in srgb, var(--fg), white 22%);
background: none;
border-color: #0000;
font-weight: 750;
}
.adminDocumentsDangerButton {
white-space: nowrap;
gap: 8px;
min-width: 172px;
min-height: 44px;
font-weight: 800;
}
.adminDocumentsDangerButton svg {
stroke-width: 1.9px;
flex: none;
width: 16px;
height: 16px;
}
@media (max-width: 620px) {
.adminDocumentsCriticalDrawerSummary {
grid-template-columns: 34px minmax(0, 1fr) 44px;
align-items: start;
}
.adminDocumentsCriticalDrawerBody {
padding-left: 0;
}
.adminDocumentsCriticalDrawerFooter {
display: block;
}
.adminDocumentsCriticalDrawerActions {
grid-template-columns: minmax(0, 1fr);
width: 100%;
display: grid;
}
.adminDocumentsDangerButton {
min-width: 0;
}
}
.adminDocumentsHandlingNotice, .adminDocumentsHandlingError {
border-radius: 8px;
margin: 0;
padding: 8px 10px;
font-size: 13px;
font-weight: 700;
}
.adminDocumentsHandlingNotice {
border: 1px solid color-mix(in srgb, var(--ok), transparent 70%);
background: color-mix(in srgb, var(--ok), white 94%);
color: color-mix(in srgb, var(--ok), black 18%);
}
.adminDocumentsHandlingError {
border: 1px solid color-mix(in srgb, var(--danger), transparent 70%);
background: color-mix(in srgb, var(--danger), white 94%);
color: color-mix(in srgb, var(--danger), black 12%);
}
.adminDocumentsActionProgressHead {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.adminDocumentsActionProgressMetric {
gap: 2px;
display: grid;
}
.adminDocumentsActionProgressMetric strong {
font-size: 1rem;
line-height: 1.2;
}
.adminDocumentsActionProgressMetric span, .adminDocumentsActionProgressNote {
color: var(--muted);
font-size: .88rem;
line-height: 1.38;
}
.adminDocumentsActionProgressBar {
appearance: none;
background: color-mix(in srgb, var(--stroke), transparent 26%);
border: 0;
border-radius: 999px;
width: 100%;
height: 8px;
overflow: hidden;
}
.adminDocumentsActionProgressBar::-webkit-progress-bar {
background: color-mix(in srgb, var(--stroke), transparent 26%);
border-radius: 999px;
}
.adminDocumentsActionProgressBar::-webkit-progress-value {
background: color-mix(in srgb, var(--focus), transparent 10%);
border-radius: 999px;
}
.adminDocumentsActionProgressBar::-moz-progress-bar {
background: color-mix(in srgb, var(--focus), transparent 10%);
border-radius: 999px;
}
.adminDocumentsActionProgressLabels {
color: var(--muted);
justify-content: space-between;
gap: 10px;
font-size: .8rem;
line-height: 1.2;
display: flex;
}
.adminDocumentsActionProgressNote {
margin: 0;
}
.adminDocumentsActionEvidence {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 10px;
margin-top: 8px;
padding-top: 16px;
display: grid;
}
.adminDocumentsActionEvidence h4 {
color: var(--fg);
margin: 0;
font-size: .98rem;
font-weight: 850;
line-height: 1.2;
}
.adminDocumentsActionEvidenceLinks {
gap: 0;
display: grid;
}
.adminDocumentsActionEvidenceLink {
min-height: 46px;
color: var(--focus);
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: 24px minmax(0, 1fr) 20px;
align-items: center;
gap: 12px;
font-weight: 820;
line-height: 1.25;
text-decoration: none;
display: grid;
}
.adminDocumentsActionEvidenceLink:last-child {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminDocumentsActionEvidenceLink:hover span:nth-child(2) {
text-decoration: underline;
}
.adminDocumentsActionEvidenceFileIcon, .adminDocumentsActionEvidenceOpenIcon {
justify-content: center;
align-items: center;
display: inline-flex;
}
.adminDocumentsActionEvidenceFileIcon {
width: 22px;
height: 22px;
}
.adminDocumentsActionEvidenceFileIcon svg, .adminDocumentsActionEvidenceOpenIcon svg {
width: 100%;
height: 100%;
}
.adminDocumentsActionEvidenceLink.isPdf .adminDocumentsActionEvidenceFileIcon {
color: var(--danger);
}
.adminDocumentsActionEvidenceOpenIcon {
width: 18px;
height: 18px;
color: color-mix(in srgb, var(--fg), white 42%);
}
.adminDocumentsCompanyCountersign {
gap: 14px;
display: grid;
}
.adminDocumentsCompanyCountersignHead {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminDocumentsCompanyCountersignHead p {
max-width: 54ch;
margin: 5px 0 0;
font-size: .88rem;
line-height: 1.38;
}
.adminDocumentsCompanyCountersignPreviewRow {
grid-template-columns: 124px minmax(0, 1fr);
align-items: center;
gap: 12px;
display: grid;
}
.adminDocumentsCompanyCountersignPreview {
aspect-ratio: 7 / 4;
border: 1px solid color-mix(in srgb, var(--stroke), transparent 5%);
background: var(--surface);
min-width: 0;
color: var(--muted);
text-align: center;
border-radius: 10px;
justify-content: center;
align-items: center;
font-size: .82rem;
font-weight: 760;
display: flex;
overflow: hidden;
}
.adminDocumentsCompanyCountersignPreview img {
object-fit: contain;
width: 100%;
height: 100%;
padding: 8px;
display: block;
}
.adminDocumentsCompanyCountersignFacts, .adminDocumentsCompanyCountersignMeta {
gap: 5px;
min-width: 0;
display: grid;
}
.adminDocumentsCompanyCountersignFacts small, .adminDocumentsCompanyCountersignMeta small {
color: var(--muted);
overflow-wrap: anywhere;
font-size: .82rem;
line-height: 1.35;
}
.adminDocumentsCompanyCountersignSummary {
border-block: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 8px 14px;
margin: 0;
padding: 10px 0;
display: grid;
}
.adminDocumentsCompanyCountersignSummary > div {
gap: 3px;
min-width: 0;
padding: 2px 0;
display: grid;
}
.adminDocumentsCompanyCountersignSummary dt {
min-width: 0;
color: var(--muted);
overflow-wrap: anywhere;
font-size: .78rem;
font-weight: 720;
line-height: 1.25;
}
.adminDocumentsCompanyCountersignSummary dd {
color: var(--fg);
font-family: var(--font-mono);
order: -1;
margin: 0;
font-size: 1rem;
font-weight: 850;
line-height: 1;
}
.adminDocumentsCompanyCountersignRecipients {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 10px;
display: grid;
}
.adminDocumentsCompanyCountersignBatchAction {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 0;
display: flex;
}
.adminDocumentsCompanyCountersignBatchAction small {
max-width: 58ch;
color: var(--muted);
font-size: .78rem;
line-height: 1.4;
}
.adminDocumentsCompanyCountersignBatchButton {
flex: none;
}
.adminDocumentsCompanyCountersignRecipient {
gap: 10px;
min-width: 0;
padding-top: 12px;
display: grid;
}
.adminDocumentsCompanyCountersignRecipient + .adminDocumentsCompanyCountersignRecipient {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminDocumentsCompanyCountersignRecipientHead {
justify-content: space-between;
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.adminDocumentsCompanyCountersignRecipientHead strong {
overflow-wrap: anywhere;
min-width: 0;
}
.adminDocumentsCompanyCountersignButton {
width: 100%;
min-height: 44px;
}
.adminDocumentsCompanyCountersignQueueState {
background: color-mix(in srgb, var(--surface), var(--stroke) 7%);
color: var(--muted);
border-radius: 10px;
margin: 0;
padding: 11px 12px;
font-size: .88rem;
font-weight: 690;
line-height: 1.4;
}
.adminDocumentsCompanyCountersignQueueState.isComplete {
background: color-mix(in srgb, var(--ok), white 93%);
color: color-mix(in srgb, var(--ok), black 28%);
}
.adminDocumentsCorrectionRequests {
gap: 14px;
display: grid;
}
.adminDocumentsCorrectionRequestsHead {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.adminDocumentsCorrectionRequestsHead p {
max-width: 52ch;
margin: 5px 0 0;
font-size: .88rem;
line-height: 1.38;
}
.adminDocumentsCorrectionRequestOpen {
gap: 12px;
display: grid;
}
.adminDocumentsCorrectionRequestMeta {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
display: grid;
}
.adminDocumentsCorrectionRequestMeta div, .adminDocumentsCorrectionReasonBox, .adminDocumentsCorrectionResolutionField {
gap: 5px;
display: grid;
}
.adminDocumentsCorrectionRequestMeta dt, .adminDocumentsCorrectionReasonBox span, .adminDocumentsCorrectionResolutionField span {
color: color-mix(in srgb, var(--fg), white 42%);
letter-spacing: .07em;
text-transform: uppercase;
font-size: .72rem;
font-weight: 850;
line-height: 1.2;
}
.adminDocumentsCorrectionRequestMeta dd {
min-width: 0;
color: var(--fg);
overflow-wrap: anywhere;
margin: 0;
font-size: .86rem;
font-weight: 740;
line-height: 1.28;
}
.adminDocumentsCorrectionReasonBox {
border: 1px solid color-mix(in srgb, var(--warn), transparent 64%);
background: color-mix(in srgb, var(--warn), white 94%);
border-radius: 10px;
padding: 10px 12px;
}
.adminDocumentsCorrectionReasonBox p {
color: color-mix(in srgb, var(--fg), white 12%);
overflow-wrap: anywhere;
margin: 0;
font-size: .9rem;
font-weight: 650;
line-height: 1.42;
}
.adminDocumentsCorrectionActions {
justify-content: flex-end;
gap: 10px;
display: flex;
}
.adminDocumentsCorrectionActions .btn {
white-space: nowrap;
min-height: 44px;
}
.adminDocumentsCorrectionReissueTrigger {
gap: 8px;
padding-inline: 16px;
}
.adminDocumentsCorrectionReissueTrigger svg {
flex: 0 0 16px;
}
.adminDocumentsCorrectionReissueTrigger > span {
min-width: 0;
line-height: 1.2;
}
.adminDocumentsCorrectionHistory {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 8px;
padding-top: 12px;
display: grid;
}
.adminDocumentsCorrectionHistory h4 {
color: var(--fg);
margin: 0;
font-size: .92rem;
font-weight: 850;
line-height: 1.2;
}
.adminDocumentsCorrectionHistory ul {
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.adminDocumentsCorrectionHistory li {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 6px 10px;
min-width: 0;
display: grid;
}
.adminDocumentsCorrectionHistory li > span:not(.pill) {
color: var(--muted);
overflow-wrap: anywhere;
font-size: .82rem;
line-height: 1.3;
}
.adminDocumentsCorrectionHistoryNotes {
grid-column: 2;
gap: 7px;
margin: 0;
display: grid;
}
.adminDocumentsCorrectionHistoryNotes div {
gap: 2px;
display: grid;
}
.adminDocumentsCorrectionHistoryNotes dt {
color: color-mix(in srgb, var(--fg), white 42%);
letter-spacing: .07em;
text-transform: uppercase;
font-size: .7rem;
font-weight: 850;
line-height: 1.2;
}
.adminDocumentsCorrectionHistoryNotes dd {
color: color-mix(in srgb, var(--fg), white 12%);
overflow-wrap: anywhere;
margin: 0;
font-size: .84rem;
font-weight: 650;
line-height: 1.38;
}
@media (max-width: 620px) {
.adminDocumentsCompanyCountersignHead {
display: grid;
}
.adminDocumentsCompanyCountersignHead .pill {
justify-self: start;
}
.adminDocumentsCompanyCountersignPreviewRow {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentsCompanyCountersignPreview {
max-width: 240px;
}
.adminDocumentsCompanyCountersignSummary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentsCompanyCountersignSummary > div:nth-child(n+3) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding-top: 8px;
}
.adminDocumentsCompanyCountersignRecipientHead {
align-items: flex-start;
}
.adminDocumentsCompanyCountersignBatchAction {
flex-direction: column;
align-items: stretch;
}
.adminDocumentsCompanyCountersignBatchButton {
width: 100%;
}
.adminDocumentsCorrectionRequestsHead, .adminDocumentsCorrectionActions {
display: grid;
}
.adminDocumentsCorrectionActions {
justify-content: stretch;
}
.adminDocumentsCorrectionActions .btn {
width: 100%;
}
.adminDocumentsCorrectionRequestsHead .pill {
justify-self: start;
}
.adminDocumentsCorrectionRequestMeta {
grid-template-columns: minmax(0, 1fr);
}
}
.adminDocumentsCardHeader {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.adminDocumentsPreviewImage {
object-fit: contain;
border: 1px solid var(--stroke);
background: var(--bg);
border-radius: 10px;
width: 100%;
height: auto;
max-height: min(70vh, 720px);
display: block;
}
.adminDocumentsPreviewFallback {
border: 1px solid var(--stroke);
background: color-mix(in srgb, var(--bg), var(--fg) 2%);
border-radius: 10px;
justify-content: center;
align-items: center;
gap: 12px;
min-height: 240px;
padding: 20px;
display: flex;
}
.adminDocumentsPreviewFallbackTile {
border: 1px solid color-mix(in srgb, var(--danger), transparent 68%);
background: color-mix(in srgb, var(--danger), white 93%);
min-width: 72px;
min-height: 72px;
color: color-mix(in srgb, var(--danger), black 10%);
border-radius: 10px;
justify-content: center;
align-items: center;
padding: 12px;
font-size: 18px;
font-weight: 700;
display: inline-flex;
}
.adminDocumentsPreviewFallbackBody {
gap: 10px;
max-width: 44ch;
display: grid;
}
.adminDocumentsPreviewFallbackTitle {
margin: 0;
font-weight: 700;
}
.adminDocumentsPreviewFallbackMeta {
overflow-wrap: anywhere;
gap: 3px;
display: grid;
}
.adminDocumentsPreviewFallbackActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminDocumentsInfoGrid {
gap: 16px;
display: grid;
}
.adminDocumentsInfoSection {
gap: 8px;
display: grid;
}
.adminDocumentsInfoSection + .adminDocumentsInfoSection {
padding-top: 2px;
}
.adminDocumentsInfoSectionTitle {
color: color-mix(in srgb, var(--fg), white 38%);
letter-spacing: .08em;
text-transform: uppercase;
margin: 0;
font-size: .78rem;
font-weight: 850;
line-height: 1.2;
}
.adminDocumentsInfoRows {
gap: 0;
margin: 0;
display: grid;
}
.adminDocumentsInfoRow {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
grid-template-columns: minmax(112px, .55fr) minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 8px 0;
display: grid;
}
.adminDocumentsInfoRow:first-child {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentsInfoRow dt {
color: color-mix(in srgb, var(--fg), white 34%);
font-size: .82rem;
font-weight: 750;
line-height: 1.25;
}
.adminDocumentsInfoRow dd {
min-width: 0;
color: var(--fg);
overflow-wrap: anywhere;
margin: 0;
font-size: .9rem;
line-height: 1.28;
}
.adminDocumentsInfoSource {
flex-wrap: wrap;
align-items: center;
gap: 5px 7px;
display: flex;
}
.adminDocumentsInfoSource .adminDocumentsSourceActor {
max-width: 160px;
color: var(--muted);
flex: 72px;
font-size: 12.6px;
font-weight: 650;
line-height: 1.2;
}
.adminDocumentsRecipientsTableWrap {
overflow-x: auto;
}
.adminDocumentsRecipientsTable {
border-collapse: collapse;
width: 100%;
}
.adminDocumentsRecipientsTable th, .adminDocumentsRecipientsTable td {
border-bottom: 1px solid var(--stroke);
text-align: left;
vertical-align: middle;
padding: 10px 12px;
}
.adminDocumentsRecipientsTable th {
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 12px;
}
.adminDocumentsRecipientPerson {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 210px;
display: inline-grid;
}
.adminDocumentsRecipientAvatar {
box-shadow: 0 1px 2px color-mix(in srgb, var(--fg), transparent 91%);
}
.adminDocumentsRecipientText {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentsRecipientName {
color: var(--fg);
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 780;
line-height: 1.18;
overflow: hidden;
}
.adminDocumentsRecipientMeta {
color: var(--muted);
white-space: nowrap;
text-overflow: ellipsis;
font-size: .76rem;
line-height: 1.18;
overflow: hidden;
}
.adminDocumentsSignatureEvidenceCell {
gap: 6px;
min-width: 230px;
max-width: 320px;
display: grid;
}
.adminDocumentsSignatureAuditCell, .adminDocumentsSignatureEvidenceCompany {
gap: 7px;
min-width: 230px;
max-width: 340px;
display: grid;
}
.adminDocumentsSignatureEvidenceCompany {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
padding-top: 8px;
}
.adminDocumentsSignatureAuditCell > .signaturePackageIntegrity {
margin-top: 2px;
}
.adminDocumentsSignatureEvidenceMeta {
font-weight: 700;
}
.adminDocumentsSignatureEvidenceCell small, .adminDocumentsSignatureEvidenceCompany small, .adminDocumentsSignatureEvidenceMissing {
min-width: 0;
color: var(--muted);
overflow-wrap: anywhere;
font-size: .8rem;
line-height: 1.28;
}
.adminDocumentsSignatureEvidenceActions {
flex-wrap: wrap;
align-items: center;
gap: 0 12px;
display: flex;
}
.adminDocumentsSignatureEvidenceDownload {
width: fit-content;
min-height: 44px;
color: var(--focus);
align-items: center;
gap: 5px;
padding: 0 2px;
font-size: .8rem;
font-weight: 800;
line-height: 1.28;
text-decoration: none;
display: inline-flex;
}
.adminDocumentsSignatureEvidenceDownload:hover {
text-decoration: underline;
}
.adminDocumentsSignatureEvidenceDownloadIcon {
width: 16px;
height: 16px;
color: color-mix(in srgb, var(--focus), black 8%);
flex: none;
place-items: center;
display: inline-grid;
}
.adminDocumentsSignatureEvidenceDownloadIcon.isPdf {
color: color-mix(in srgb, var(--danger), black 8%);
}
.adminDocumentsSignatureEvidenceDownloadIcon svg {
width: 16px;
height: 16px;
display: block;
}
.adminDocumentsTimeline {
gap: 0;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.adminDocumentsTimelineItem {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: 18px minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
padding: 10px 0;
display: grid;
position: relative;
}
.adminDocumentsTimelineItem:first-child {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminDocumentsTimelineItem:not(:last-child):after {
content: "";
z-index: 0;
background: color-mix(in srgb, var(--focus), transparent 78%);
border-radius: 999px;
width: 2px;
position: absolute;
top: 26px;
bottom: -10px;
left: 5px;
}
.adminDocumentsTimelineMarker {
z-index: 1;
background: var(--focus);
width: 12px;
height: 12px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus), transparent 20%);
border: 2px solid #fff;
border-radius: 999px;
margin-top: 3px;
position: relative;
}
.adminDocumentsTimelineItem.is-complete .adminDocumentsTimelineMarker {
background: var(--ok);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok), transparent 20%);
}
.adminDocumentsTimelineItem.is-danger .adminDocumentsTimelineMarker {
background: var(--danger);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger), transparent 20%);
}
.adminDocumentsTimelineBody {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentsTimelineAction {
color: var(--fg);
font-weight: 760;
line-height: 1.2;
}
.adminDocumentsTimelineTime {
color: var(--muted);
white-space: nowrap;
font-size: .84rem;
line-height: 1.2;
}
@media (max-width: 1100px) {
.adminDocumentsDetailGrid, .adminDocumentsSendLayout {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentsSendSummaryCard {
position: static;
}
.adminDocumentsSendSummaryBody {
min-height: 0;
}
}
@media (max-width: 820px) {
.adminSettingsContent {
order: -1;
}
.adminDocumentsToolbar {
flex-direction: column;
}
.adminDocumentsDetailHero {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentsActionBar {
justify-content: flex-start;
}
.adminDocumentsComposerGrid, .adminDocumentsSendRecipientsGrid, .adminDocumentsRecipientControls {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentsSendSection {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: linear-gradient(180deg, #fff, color-mix(in srgb, white, var(--bg) 7%));
border-radius: 13px;
padding: 15px;
}
.adminDocumentsSendSection:first-of-type {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding-top: 15px;
}
.adminDocumentsFinalRecipientsHeader {
display: grid;
}
.adminDocumentsSelectedWorkersTable {
min-width: 520px;
}
.adminDocumentsFileDropzone {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentsFileDropzoneIcon {
display: none;
}
.adminDocumentsStatePanel {
min-height: 150px;
}
.adminDocumentsListTop {
flex-direction: row;
}
.adminDocumentsListMobileMain {
flex: auto;
min-width: 0;
}
.adminDocumentsListBadges {
flex: none;
justify-content: flex-start;
}
.adminDocumentsListMobileMeta {
gap: 3px;
display: grid;
}
.adminDocumentsListBottom .adminDocumentsListAction {
justify-self: start;
margin-left: auto;
}
.adminDocumentsListTitle {
box-sizing: border-box;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 44px;
padding-block: 6px;
display: -webkit-box;
}
.adminDocumentsDetailHeroActions {
grid-template-columns: 1fr;
grid-auto-flow: row;
justify-content: flex-start;
width: 100%;
max-width: none;
}
.adminDocumentsDetailAction {
justify-content: center;
}
.adminDocumentsPreviewFallback {
justify-content: flex-start;
min-height: 180px;
}
.adminDocumentsPreviewFallbackTile {
min-width: 54px;
min-height: 54px;
font-size: 16px;
}
.adminDocumentsInfoRow {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.adminDocumentsTimelineItem {
grid-template-columns: 18px minmax(0, 1fr);
}
.adminDocumentsTimelineTime {
white-space: normal;
grid-column: 2;
}
}
@media (max-width: 640px) {
.adminDocumentsPreviewCopyBar {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "field"
"description"
"actions";
}
.adminDocumentsPreviewCopyActions {
grid-template-columns: repeat(2, minmax(0, 1fr));
display: grid;
}
.adminDocumentsPreviewCopyAction {
justify-content: center;
}
}
@media (max-width: 520px) {
.adminDocumentsComposerActions.adminDocumentsSendReadiness {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentsComposerActions.adminDocumentsSendReadiness .btn {
justify-content: center;
width: 100%;
}
.adminDocumentsSendReadyHint {
grid-column: auto;
}
.adminDocumentsFileMeta {
grid-template-columns: auto minmax(0, 1fr);
}
.adminDocumentsConfirmDialog {
padding: 16px;
}
.adminDocumentsConfirmActions {
grid-template-columns: minmax(0, 1fr);
display: grid;
}
.adminDocumentsConfirmActions .btn {
justify-content: center;
width: 100%;
}
.adminDocumentsCorrectionFilePicker > .btn, .adminDocumentsCorrectionFileMeta .adminDocumentsFileMetaActions, .adminDocumentsCorrectionFileMeta .adminDocumentsFileMetaActions .btn {
width: 100%;
}
.adminDocumentsFileMetaActions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.adminDocumentsPreviewFallback {
align-items: flex-start;
}
}
.adminRolesPageSurface {
box-shadow: none;
background: none;
border: 0;
border-radius: 0;
gap: 14px;
padding: 0;
display: grid;
}
.adminRolesWorkspaceV2 {
gap: 14px;
}
.adminRolesRoleSelectorStrip {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: none;
border-radius: 0;
gap: 10px;
padding: 0 0 14px;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader {
align-items: center;
gap: 12px;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader .adminFinancePanelTitle {
margin: 1px 0 0;
font-size: 15px;
}
.adminRolesRoleSelectorStrip .adminRolesList {
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
min-height: 58px;
box-shadow: none;
background: #fff;
border-radius: 10px;
padding: 8px 11px;
}
.adminRolesRoleSelectorStrip .adminRolesListItem:hover {
border-color: color-mix(in srgb, var(--focus), transparent 55%);
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive {
border-color: color-mix(in srgb, var(--focus), transparent 12%);
background: color-mix(in srgb, var(--focus), white 97%);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--focus), transparent 8%);
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive:after {
width: 7px;
height: 7px;
top: 10px;
right: 10px;
}
.adminRolesRoleSelectorStrip .adminRolesListItemDesc {
display: none;
}
.adminRolesRoleSelectorStrip .adminRolesOverviewPills {
gap: 5px;
}
.adminRolesRoleSelectorStrip .adminAccessPillWrap .pill, .adminRolesRoleSelectorStrip .adminRolesOverviewPills .pill {
border-color: color-mix(in srgb, var(--stroke), transparent 16%);
background: color-mix(in srgb, var(--bg-2), white 60%);
min-height: 21px;
padding: 2px 7px;
font-size: 11px;
}
.adminRolesSelectedOverview {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: none;
border-radius: 0;
gap: 0;
padding: 15px 0 0;
}
.adminRolesSelectedHeader {
padding: 0 0 13px;
}
.adminRolesSelectedIntro {
gap: 4px;
max-width: 920px;
}
.adminRolesProtectedNotice {
border-color: color-mix(in srgb, var(--focus), transparent 78%);
background: color-mix(in srgb, var(--focus), white 97%);
border-radius: 8px;
margin-top: 8px;
padding: 7px 9px;
}
.adminRolesSelectedImpact {
gap: 0;
}
.adminRolesSelectedOverview .adminRolesImpactStats {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminRolesImpactStats button {
min-height: 54px;
box-shadow: none;
background: none;
border: 0;
border-radius: 0;
padding: 9px 13px;
}
.adminRolesImpactStats button:hover {
background: color-mix(in srgb, var(--focus), white 98%);
}
.adminRolesImpactStats span {
letter-spacing: .05em;
text-transform: uppercase;
font-size: 11px;
}
.adminRolesImpactStats strong {
font-size: 19px;
}
.adminRolesImpactWarnings {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--danger), transparent 78%);
background: none;
border-radius: 0;
grid-template-columns: max-content minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 9px 0;
display: grid;
}
.adminRolesImpactWarnings > strong {
color: color-mix(in srgb, var(--danger), black 18%);
padding-top: 1px;
font-size: 12px;
}
.adminRolesImpactWarnings ul {
flex-wrap: wrap;
gap: 5px 0;
display: flex;
}
.adminRolesImpactWarnings li {
border-left: 1px solid color-mix(in srgb, var(--danger), transparent 78%);
min-height: 21px;
color: color-mix(in srgb, var(--danger), black 14%);
padding: 0 12px;
font-size: 12px;
line-height: 1.35;
}
.adminRolesImpactWarnings li:first-child {
border-left: 0;
padding-left: 0;
}
.adminRolesSelectedDetails {
border-top: 0;
padding: 13px 0 14px;
}
.adminRolesToggle {
background: none;
border: 0;
border-radius: 0;
min-height: 40px;
padding: 7px 0;
}
.adminRolesPermissionsSection {
border-radius: 0;
gap: 11px;
border: 0 !important;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%) !important;
background: none !important;
padding: 15px 0 0 !important;
}
.adminRolesPermissionsSection > .adminSectionDisclosureToggle {
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
.adminRolesPermissionsSection > .adminSectionDisclosureToggle:hover {
background: none;
}
.adminRolesPermissionsSection > .adminSectionDisclosureBody {
gap: 11px;
padding: 0 !important;
}
.adminRolesPermissionsHead {
padding: 0 0 2px;
}
.adminRolesPermissionsStats {
gap: 6px;
}
.adminRolesPermissionsStats button {
background: #fff;
border-radius: 8px;
min-height: 30px;
padding: 5px 9px;
}
.adminRolesMatrixToolbar {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: none;
border-radius: 0;
gap: 10px;
padding: 0 0 11px;
}
.adminRolesQuickFilters, .adminRolesMatrixToolbarControls {
gap: 7px;
}
.adminRolesQuickFilters .adminRoleActionBtn {
border-radius: 8px;
min-height: 30px;
padding: 5px 9px;
}
.adminRolesMatrixToolbarControls > input.input {
flex-basis: 300px;
}
.adminRolesMatrixToolbarControls > .adminRolesMatrixSelect {
flex: 0 145px;
}
.adminRolesModuleGrid {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 6%);
background: #fff;
border-radius: 10px;
gap: 0;
overflow: hidden;
}
.adminRolesModuleDetails {
background: #fff;
border: 0;
border-radius: 0;
}
.adminRolesModuleDetails + .adminRolesModuleDetails {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
}
.adminRolesModuleSummary {
background: #fff;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 8px 12px;
display: grid;
}
.adminRolesModuleDetails[open] > .adminRolesModuleSummary {
background: color-mix(in srgb, var(--bg-2), white 42%);
}
.adminRolesModuleSummary .adminSectionDisclosureToggleMain, .adminRolesModuleSummary .adminSectionDisclosureToggleText, .adminRolesModuleTitleRow {
align-items: center;
}
.adminRolesModuleSummary .adminRolesModuleTitle {
color: var(--muted);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
}
.adminRolesModuleSummary .adminRolesModuleEyebrow {
color: var(--ink);
letter-spacing: 0;
text-transform: none;
font-size: 13px;
}
.adminRolesModuleSummary .adminSectionDisclosureSummary {
text-align: right;
white-space: nowrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
padding-left: 0;
font-size: 12px;
display: inline-flex;
}
.adminRolesModuleDetails .adminRolesModuleCard {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: none;
border-radius: 0;
gap: 0;
padding: 0;
}
.adminRolesMatrixTable {
font-size: 12px;
}
.adminRolesMatrixTable thead th {
background: color-mix(in srgb, var(--bg-2), white 32%);
}
.adminRolesDangerZone {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--danger), transparent 62%);
background: none;
border-radius: 0;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 11px 0 0;
display: grid;
}
.adminRolesDangerZone .btnDanger {
min-height: 38px;
}
@media (max-width: 900px) {
.adminRolesSelectedOverview .adminRolesImpactStats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminRolesImpactStats button:nth-child(odd) {
border-left: 0;
}
.adminRolesImpactStats button:nth-child(n+3) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
}
.adminRolesSelectedOverview .adminRolesMetaGrid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.adminRolesRoleSelectorStrip {
padding-bottom: 12px;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader {
align-items: stretch;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader .btn {
width: 100%;
}
.adminRolesRoleSelectorStrip .adminRolesList {
scrollbar-width: none;
scroll-snap-type: x proximity;
gap: 8px;
margin-inline: -2px;
padding: 0 2px 2px;
display: flex;
overflow-x: auto;
}
.adminRolesRoleSelectorStrip .adminRolesList::-webkit-scrollbar {
display: none;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
scroll-snap-align: start;
flex: 0 0 min(82vw, 300px);
}
.adminRolesImpactWarnings {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesImpactWarnings ul {
gap: 5px;
display: grid;
}
.adminRolesImpactWarnings li, .adminRolesImpactWarnings li:first-child {
border-left: 0;
padding: 0;
}
.adminRolesMatrixToolbarControls > input.input, .adminRolesMatrixToolbarControls > .adminRolesMatrixSelect, .adminRolesMatrixToolbarControls > .adminRoleActionBtn {
flex: 100%;
max-width: none;
}
.adminRolesModuleSummary {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesModuleSummary .adminSectionDisclosureSummary {
text-align: left;
white-space: normal;
justify-content: flex-start;
}
.adminRolesDangerZone {
grid-template-columns: minmax(0, 1fr);
}
}
.adminDocumentProcessingRuntimeSurface > .adminDocumentProcessingSurfaceBody {
padding: 0;
}
.adminDocumentProcessingRuntimeSurface .adminDocumentProcessingSection {
gap: 0;
}
.adminDocumentProcessingRuntimeSurface .adminDocumentProcessingSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding: 10px 12px;
}
.adminDocumentProcessingRuntimeSurface .adminDocumentProcessingRuntimeGrid {
border-top: 0;
}
.adminDocumentProcessingRuntimeSurface .adminDocumentProcessingDiagnostics {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
margin: 0;
padding: 0;
}
.adminDocumentProcessingRuntimeSurface .adminDocumentProcessingDiagnostics > .adminCompactDisclosureSummary {
min-height: 30px;
padding: 6px 12px;
}
.adminDocumentProcessingRuntimeSurface .adminDocumentProcessingDiagnostics > .adminCompactDisclosureSummary strong {
font-size: 12.5px;
}
.adminDocumentProcessingWorkbenchSurface {
background: none;
border: 0;
}
.adminDocumentProcessingWorkbenchSurface > .adminDocumentProcessingSurfaceBody {
padding: 0;
}
.adminDocumentProcessingWorkbenchSurface .adminDocumentProcessingSection {
gap: 10px;
}
.adminDocumentProcessingWorkbenchSurface .adminDocumentProcessingSection > .adminDocumentProcessingSectionHead {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-bottom: 0;
border-radius: 8px 8px 0 0;
align-items: center;
padding: 10px 12px;
}
.adminDocumentProcessingForm {
gap: 10px;
}
.adminDocumentProcessingGlobalSaveBar {
min-width: 0;
box-shadow: none;
background: none;
border: 0;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 0;
display: flex;
}
.adminDocumentProcessingGlobalSaveMeta {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingGlobalSaveMeta .adminSettingsFieldHint {
white-space: nowrap;
margin: 0;
font-size: 11.5px;
line-height: 1.25;
}
.adminDocumentProcessingPolicyDirty {
padding-bottom: 96px;
}
.adminDocumentProcessingPolicySaveDock {
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
z-index: 80;
border: 1px solid color-mix(in srgb, var(--focus), var(--stroke) 72%);
width: min(660px, 100vw - 36px);
min-width: 0;
box-shadow: 0 12px 32px color-mix(in srgb, var(--fg), transparent 84%);
background: #fff;
border-radius: 10px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px 18px;
padding: 10px 12px;
display: grid;
position: fixed;
}
.adminDocumentProcessingPolicySaveDockMeta {
gap: 3px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingPolicySaveDockMeta .adminSettingsFieldHint {
margin: 0;
font-size: 11.5px;
line-height: 1.3;
}
.adminDocumentProcessingPolicySaveDockActions {
justify-content: flex-end;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingPolicySaveDockActions .btn {
min-height: 44px;
padding-inline: 13px;
}
.adminDocumentProcessingDangerousPanel {
border: 1px solid color-mix(in srgb, var(--warn), var(--stroke) 58%);
background: color-mix(in srgb, var(--warn), #fff 93%);
border-radius: 8px;
grid-template-columns: minmax(280px, 1fr) minmax(320px, .72fr);
align-items: start;
gap: 10px 18px;
min-width: 0;
padding: 10px 12px;
display: grid;
}
.adminDocumentProcessingDangerousPanel.isCompact {
grid-column: 1 / -1;
margin-top: 2px;
}
.adminDocumentProcessingDangerousSummary {
gap: 6px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingDangerousSummary strong {
color: color-mix(in srgb, var(--warn), #111 52%);
}
.adminDocumentProcessingDangerousSummary .adminSettingsFieldHint {
margin: 0;
}
.adminDocumentProcessingDangerousSummary ul {
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.adminDocumentProcessingDangerousSummary li {
border-top: 1px solid color-mix(in srgb, var(--warn), transparent 72%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 8px;
min-width: 0;
padding-top: 4px;
font-size: 12px;
display: grid;
}
.adminDocumentProcessingDangerousSummary li span:first-child {
min-width: 0;
}
.adminDocumentProcessingDangerousSummary li .mono {
overflow-wrap: anywhere;
text-align: right;
}
.adminDocumentProcessingDangerousFields {
gap: 8px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingDangerousFields .field {
border: 0;
gap: 5px;
padding: 0;
}
.adminDocumentProcessingPolicyActionGrid, .adminDocumentProcessingProfileStackShell, .adminDocumentProcessingParserConfigSurface, .adminDocumentProcessingMailboxOps, .adminDocumentProcessingMailboxGrid, .adminDocumentProcessingPromptLayout {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.adminDocumentProcessingPolicyActionGrid {
border-top-left-radius: 0;
border-top-right-radius: 0;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.adminDocumentProcessingPolicyColumn {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.adminDocumentProcessingPolicyColumn > .adminDocumentProcessingFormSection {
gap: 7px;
min-width: 0;
padding: 11px 12px;
}
.adminDocumentProcessingPolicyColumn > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingPolicyColumn .adminSettingsChecklistTitle, .adminDocumentProcessingActionsPanel > .adminSettingsChecklistTitle, .adminDocumentProcessingStackCard .adminSettingsChecklistTitle, .adminDocumentProcessingMailboxGrid .adminSettingsChecklistTitle {
font-size: 13px;
line-height: 1.2;
}
.adminDocumentProcessingRuntimeControlSection .adminSettingsChecklistTitle {
max-width: 13rem;
}
.adminDocumentProcessingActionsPanel {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
padding: 11px 12px;
}
.adminDocumentProcessingActionList, .adminDocumentProcessingLedgerFields, .adminDocumentProcessingProfileGrid, .adminDocumentProcessingStackList {
border-color: color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingActionRow, .adminDocumentProcessingLedgerFields > .field {
padding-block: 6px;
}
.adminDocumentProcessingProfileStackShell {
gap: 0;
display: grid;
}
.adminDocumentProcessingProfileStackShell > .adminDocumentProcessingSectionHead, .adminDocumentProcessingParserConfigSurface > .adminDocumentProcessingSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding: 10px 12px;
}
.adminDocumentProcessingAiProfilesTitleRow {
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingProfileGrid {
border-top: 0;
border-bottom: 0;
}
.adminDocumentProcessingProfileSummary {
min-height: 44px;
padding: 7px 12px;
}
.adminDocumentProcessingParserConfigSurface {
gap: 0;
display: grid;
}
.adminDocumentProcessingSemanticPolicy {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
align-items: end;
gap: 16px;
padding: 11px 12px;
display: grid;
}
.adminDocumentProcessingSemanticPolicyCopy {
gap: 4px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingSemanticPolicy .field {
border: 0;
padding: 0;
}
.adminDocumentProcessingParserConfigGrid {
grid-template-columns: minmax(0, 1fr);
min-width: 0;
display: grid;
}
.adminDocumentProcessingParserConfigGrid .adminDocumentProcessingStackGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.adminDocumentProcessingParserConfigGrid .adminDocumentProcessingStackCard {
padding: 11px 12px;
}
.adminDocumentProcessingParserConfigGrid .adminDocumentProcessingStackCard + .adminDocumentProcessingStackCard {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingStackCard .adminDocumentProcessingStageHead {
margin-bottom: 7px;
}
.adminDocumentProcessingProfileRemoveButton {
border-color: color-mix(in srgb, var(--danger), transparent 56%);
color: color-mix(in srgb, var(--danger), var(--fg) 10%);
background: #fff;
}
.adminDocumentProcessingProfileRemoveButton:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--danger), transparent 34%);
background: color-mix(in srgb, var(--danger), #fff 94%);
}
.adminDocumentProcessingLimitsPanel {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
align-content: start;
gap: 8px;
min-width: 0;
padding: 11px 12px;
display: grid;
}
.adminDocumentProcessingLimitsHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), #fff 78%);
gap: 3px;
min-width: 0;
margin: -11px -12px 2px;
padding: 10px 12px;
display: grid;
}
.adminDocumentProcessingLimitsHead .adminSettingsChecklistTitle {
font-size: 13px;
line-height: 1.2;
}
.adminDocumentProcessingLimitsHead .adminSettingsFieldHint {
margin: 0;
}
.adminDocumentProcessingLimitsPanel .adminDocumentProcessingSupportGrid {
border-top: 0;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 8px 9px;
padding-top: 0;
}
.adminDocumentProcessingSupportCard .label {
text-overflow: clip;
white-space: normal;
margin-bottom: 4px;
line-height: 1.25;
display: block;
overflow: hidden;
}
.adminDocumentProcessingSupportSummary {
background: none;
border: 0;
gap: 5px;
margin-top: 5px;
padding: 0;
display: grid;
}
.adminDocumentProcessingUsageMetric {
border-left: 3px solid color-mix(in srgb, var(--focus), transparent 28%);
min-width: 0;
color: color-mix(in srgb, var(--fg), var(--focus) 14%);
grid-template-columns: minmax(96px, 1fr) auto auto;
align-items: center;
gap: 5px 8px;
padding-left: 9px;
display: grid;
}
.adminDocumentProcessingUsageLabel {
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
letter-spacing: .052em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
font-size: 10.5px;
font-weight: 800;
line-height: 1.15;
overflow: hidden;
}
.adminDocumentProcessingUsageCount {
color: var(--fg);
white-space: nowrap;
font-size: 12.5px;
font-weight: 800;
line-height: 1.1;
}
.adminDocumentProcessingUsageCount span {
color: var(--muted);
font-weight: 650;
}
.adminDocumentProcessingUsageMeta, .adminDocumentProcessingUsageReset {
color: var(--muted);
white-space: nowrap;
font-size: 10.7px;
font-weight: 650;
line-height: 1.15;
}
.adminDocumentProcessingUsageReset {
color: color-mix(in srgb, var(--focus), var(--fg) 22%);
grid-column: 2 / -1;
justify-self: end;
}
.adminDocumentProcessingMailboxOps {
gap: 0;
padding: 0;
display: grid;
}
.adminDocumentProcessingMailboxOps > .adminDocumentProcessingSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding: 10px 12px;
}
.adminDocumentProcessingMailboxOpsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
min-width: 0;
display: grid;
}
.adminDocumentProcessingMailboxOpsMain {
display: contents;
}
.adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow {
border-bottom: 0;
flex-direction: column;
align-items: stretch;
gap: 10px;
min-width: 0;
padding: 14px 12px;
display: flex;
}
.adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow + .adminDocumentProcessingActionRow {
border-top: 0;
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingMailboxOpsMain .adminDocumentProcessingActionRow .btn {
justify-self: stretch;
width: 100%;
min-height: 44px;
margin-top: auto;
}
.adminDocumentProcessingActionTitle {
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingActionImpact {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
background: color-mix(in srgb, var(--bg-2), #fff 58%);
min-height: 20px;
color: color-mix(in srgb, var(--muted), var(--fg) 26%);
border-radius: 999px;
align-items: center;
padding: 2px 6px;
font-size: 10.5px;
font-weight: 760;
line-height: 1.1;
display: inline-flex;
}
.adminDocumentProcessingActionImpact.isReadOnly {
border-color: color-mix(in srgb, var(--focus), transparent 62%);
background: color-mix(in srgb, var(--focus), #fff 93%);
color: color-mix(in srgb, var(--focus), #111 28%);
}
.adminDocumentProcessingActionImpact.isPersistent {
border-color: color-mix(in srgb, var(--warn), transparent 58%);
background: color-mix(in srgb, var(--warn), #fff 93%);
color: color-mix(in srgb, var(--warn), #111 50%);
}
.adminDocumentProcessingActionImpact.isExecution {
border-color: color-mix(in srgb, var(--accent), transparent 58%);
background: color-mix(in srgb, var(--accent), #fff 92%);
color: color-mix(in srgb, var(--accent), #111 52%);
}
.adminDocumentProcessingMailboxSyncPanel {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
flex-direction: column;
align-self: stretch;
min-width: 0;
padding: 14px 12px;
display: flex;
}
.adminDocumentProcessingMailboxSyncHead {
flex-direction: column;
flex: auto;
align-items: stretch;
gap: 10px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingMailboxSyncHead strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingMailboxSyncHead .btn {
white-space: nowrap;
width: 100%;
min-height: 44px;
margin-top: auto;
}
.adminDocumentProcessingMailboxStatusPanel {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), #fff 70%);
grid-column: 1 / -1;
gap: 8px;
min-width: 0;
padding: 10px 12px 12px;
display: grid;
}
.adminDocumentProcessingMailboxAdvanced {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), #fff 72%);
border-radius: 0;
grid-column: 1 / -1;
gap: 0;
min-width: 0;
}
.adminDocumentProcessingMailboxAdvancedSummary {
align-items: center;
min-height: 48px;
padding: 9px 12px;
}
.adminDocumentProcessingMailboxAdvancedSummary:focus-visible {
outline: 3px solid color-mix(in srgb, var(--focus), transparent 26%);
outline-offset: -3px;
border-radius: 6px;
}
.adminDocumentProcessingMailboxAdvancedSummary > span:first-child {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingMailboxAdvancedSummary strong {
font-size: 13px;
line-height: 1.25;
}
.adminDocumentProcessingMailboxAdvancedSummary .adminSettingsFieldHint {
margin: 0;
}
.adminDocumentProcessingMailboxAdvancedChevron {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
width: 24px;
height: 24px;
color: var(--muted);
background: #fff;
border-radius: 999px;
flex: none;
place-items: center;
font-size: 17px;
font-weight: 650;
line-height: 1;
display: inline-grid;
}
.adminDocumentProcessingMailboxAdvanced[open] .adminDocumentProcessingMailboxAdvancedChevron {
transform: rotate(45deg);
}
.adminDocumentProcessingMailboxAdvancedBody {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
gap: 0;
min-width: 0;
padding: 0 12px 12px;
display: grid;
}
.adminDocumentProcessingMailboxStatusHead {
justify-content: space-between;
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingMailboxStatusHead strong {
font-size: 13px;
line-height: 1.25;
display: block;
}
.adminDocumentProcessingMailboxStatusHead .btn {
white-space: nowrap;
min-height: 28px;
padding: 0 9px;
font-size: 11.5px;
}
.adminDocumentProcessingMailboxStatusGrid {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
background: #fff;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: visible;
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: minmax(0, 1fr);
align-content: start;
align-items: start;
gap: 4px;
min-height: 54px;
padding: 8px 9px;
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem .label {
text-overflow: clip;
white-space: normal;
min-width: 0;
line-height: 1.25;
overflow: visible;
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem strong, .adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem .adminDocumentProcessingTextBreak {
text-align: left;
overflow-wrap: anywhere;
white-space: normal;
justify-self: start;
min-width: 0;
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem:nth-child(n+2) {
border-top: 0;
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItemWide {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingRetentionGrid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
display: grid;
overflow: visible;
}
.adminDocumentProcessingRetentionGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingRetentionGrid .adminDocumentProcessingRuntimeItemWide {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 4px;
min-height: auto;
padding: 8px 0;
}
.adminDocumentProcessingRetentionGrid .adminDocumentProcessingRuntimeItem:nth-child(n+2) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
}
.adminDocumentProcessingRetentionGrid .adminDocumentProcessingRuntimeItem .label {
text-overflow: clip;
white-space: normal;
overflow: visible;
}
.adminDocumentProcessingRetentionValue {
text-align: left;
text-overflow: clip;
white-space: normal;
word-break: normal;
min-width: 0;
overflow: visible;
}
.adminDocumentProcessingRetentionLongValue {
text-align: left;
overflow-wrap: break-word;
min-width: 0;
}
.adminDocumentProcessingCatchUpPanel, .adminDocumentProcessingMailboxActivityPanel, .adminDocumentProcessingHistoricalPanel, .adminDocumentProcessingReconciliationPanel, .adminDocumentProcessingAcceptancePanel, .adminDocumentProcessingPostLaunchPanel, .adminDocumentProcessingIncidentPanel, .adminDocumentProcessingRetentionPanel {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 10px;
padding-top: 12px;
display: grid;
}
.adminDocumentProcessingCatchUpStatusGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingCatchUpStatusGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingCatchUpStatusGrid .adminDocumentProcessingRuntimeItemWide {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 4px;
min-height: auto;
padding: 8px 0;
}
.adminDocumentProcessingCatchUpStatusGrid .adminDocumentProcessingRuntimeItem .label {
text-overflow: clip;
white-space: normal;
min-width: 0;
line-height: 1.25;
overflow: visible;
}
.adminDocumentProcessingCatchUpStatusGrid .adminDocumentProcessingRuntimeItem strong, .adminDocumentProcessingCatchUpStatusGrid .adminDocumentProcessingRuntimeItem .adminDocumentProcessingTextBreak {
text-align: left;
overflow-wrap: anywhere;
white-space: normal;
justify-self: start;
min-width: 0;
}
.adminDocumentProcessingCatchUpNote {
max-width: 72ch;
}
.adminDocumentProcessingHistoricalPanel {
padding: 14px 12px;
}
.adminDocumentProcessingHistoricalGrid {
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
gap: 14px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingHistoricalControls, .adminDocumentProcessingHistoricalEvidence {
align-content: start;
gap: 12px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingHistoricalEvidence {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
padding-left: 14px;
}
.adminDocumentProcessingHistoricalControlGroup {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 10px;
min-width: 0;
padding-bottom: 12px;
display: grid;
}
.adminDocumentProcessingHistoricalFields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingHistoricalReason {
resize: vertical;
min-height: 74px;
}
.adminDocumentProcessingHistoricalActions {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.adminDocumentProcessingHistoricalActions .btn {
flex: 136px;
min-height: 34px;
}
.adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItemWide {
grid-column: 1 / -1;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
align-items: start;
gap: 8px;
min-height: auto;
padding: 7px 0;
}
.adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItem .label {
text-overflow: clip;
white-space: normal;
min-width: 0;
line-height: 1.25;
overflow: visible;
}
.adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItem strong, .adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItem .adminDocumentProcessingTextBreak {
text-align: left;
overflow-wrap: anywhere;
white-space: normal;
justify-self: start;
min-width: 0;
}
.adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItem:nth-child(n+2) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
}
.adminDocumentProcessingHistoricalNote {
max-width: 82ch;
}
.adminDocumentProcessingReviewReset {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 10px;
min-width: 0;
padding-top: 12px;
display: grid;
}
.adminDocumentProcessingReviewResetCounts {
border-block: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 12px;
display: grid;
}
.adminDocumentProcessingReviewResetCounts > span {
min-width: 0;
color: var(--muted);
justify-content: space-between;
gap: 10px;
padding: 8px 0;
font-size: .78rem;
display: flex;
}
.adminDocumentProcessingReviewResetCounts > span:nth-child(n+3) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminDocumentProcessingReviewResetCounts strong {
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.adminDocumentProcessingReconciliationActions {
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
display: flex;
}
.adminDocumentProcessingReconciliationActions .btn {
white-space: nowrap;
min-height: 30px;
padding: 0 10px;
}
.adminDocumentProcessingReconciliationStatusGrid .adminDocumentProcessingRuntimeItem {
grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
}
.adminDocumentProcessingReconciliationChecks, .adminDocumentProcessingReconciliationLinks, .adminDocumentProcessingReconciliationWarnings {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 8px;
padding-top: 10px;
display: grid;
}
.adminDocumentProcessingReconciliationChecks > strong, .adminDocumentProcessingReconciliationLinks > .adminDocumentProcessingMailboxStatusHead > strong, .adminDocumentProcessingReconciliationWarnings > strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingReconciliationCheck, .adminDocumentProcessingReconciliationLinkRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
align-items: start;
gap: 8px;
min-width: 0;
padding: 7px 0;
display: grid;
}
.adminDocumentProcessingReconciliationCheck {
grid-template-columns: auto minmax(0, 1fr);
}
.adminDocumentProcessingReconciliationCheck:first-of-type, .adminDocumentProcessingReconciliationLinkRow:first-of-type {
border-top: 0;
}
.adminDocumentProcessingReconciliationCheck strong {
font-size: 12px;
line-height: 1.25;
display: block;
}
.adminDocumentProcessingReconciliationCheck .adminSettingsFieldHint {
margin-top: 2px;
}
.adminDocumentProcessingReconciliationLinkRow {
grid-template-columns: auto minmax(126px, .65fr) minmax(68px, .35fr) minmax(0, 1fr);
font-size: 12px;
}
.adminDocumentProcessingReconciliationLinkRow a {
overflow-wrap: anywhere;
min-width: 0;
}
.adminDocumentProcessingReconciliationWarnings .adminSettingsFieldHint {
overflow-wrap: anywhere;
margin: 0;
}
.adminDocumentProcessingAcceptanceStatusGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingAcceptanceStatusGrid .adminDocumentProcessingRuntimeItemWide {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.adminDocumentProcessingAcceptanceStatusGrid .adminDocumentProcessingRuntimeItemWide {
grid-column: auto;
}
.adminDocumentProcessingAcceptanceLanes {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminDocumentProcessingAcceptanceLane {
align-content: start;
gap: 9px;
min-width: 0;
padding: 10px;
display: grid;
}
.adminDocumentProcessingAcceptanceLane + .adminDocumentProcessingAcceptanceLane {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingAcceptanceLaneHead {
justify-content: space-between;
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingAcceptanceLaneHead strong, .adminDocumentProcessingAcceptanceLinks strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingAcceptanceCounts {
grid-template-columns: minmax(0, 1fr);
gap: 0;
min-width: 0;
display: grid;
}
.adminDocumentProcessingAcceptanceCount {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
min-width: 0;
padding: 6px 0;
display: grid;
}
.adminDocumentProcessingAcceptanceCount:first-child {
border-top: 0;
}
.adminDocumentProcessingAcceptanceCount .label {
min-width: 0;
color: var(--muted);
text-transform: uppercase;
white-space: normal;
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
overflow: visible;
}
.adminDocumentProcessingAcceptanceCount strong {
text-align: right;
min-width: 2ch;
}
.adminDocumentProcessingAcceptanceGates, .adminDocumentProcessingAcceptanceLinks {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 8px;
padding-top: 10px;
display: grid;
}
.adminDocumentProcessingAcceptanceGate {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 8px;
min-width: 0;
padding: 7px 0;
display: grid;
}
.adminDocumentProcessingAcceptanceGate:first-child {
border-top: 0;
}
.adminDocumentProcessingAcceptanceGate strong {
font-size: 12px;
line-height: 1.25;
display: block;
}
.adminDocumentProcessingAcceptanceGate .adminSettingsFieldHint {
overflow-wrap: anywhere;
margin-top: 2px;
}
.adminDocumentProcessingAcceptanceLinks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingAcceptanceLinks > div {
align-content: start;
gap: 6px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingAcceptanceLink {
overflow-wrap: anywhere;
min-width: 0;
font-size: 12px;
line-height: 1.25;
}
.adminDocumentProcessingAcceptanceRedactions {
margin: 0;
}
.adminDocumentProcessingPostLaunchSignals .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingPostLaunchSignals .adminDocumentProcessingRuntimeItemWide {
grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
}
.adminDocumentProcessingPostLaunchGroups {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminDocumentProcessingPostLaunchGroup {
align-content: start;
gap: 7px;
min-width: 0;
padding: 9px 10px;
display: grid;
}
.adminDocumentProcessingPostLaunchGroup + .adminDocumentProcessingPostLaunchGroup {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingPostLaunchGroup > strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingPostLaunchTask {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 8px;
min-width: 0;
padding: 7px 0;
display: grid;
}
.adminDocumentProcessingPostLaunchTask:first-of-type {
border-top: 0;
}
.adminDocumentProcessingPostLaunchTask strong {
font-size: 12px;
line-height: 1.25;
display: block;
}
.adminDocumentProcessingPostLaunchTask .adminSettingsFieldHint {
margin-top: 2px;
}
.adminDocumentProcessingPostLaunchFooter {
gap: 9px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingPostLaunchFooter > div {
gap: 5px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingPostLaunchRoles {
flex-wrap: wrap;
gap: 6px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingPostLaunchReport {
margin: 0;
}
.adminDocumentProcessingIncidentSummary {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminDocumentProcessingIncidentSummary .adminDocumentProcessingRuntimeItem {
grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
min-height: auto;
padding: 8px 10px;
}
.adminDocumentProcessingIncidentSummary .adminDocumentProcessingRuntimeItem + .adminDocumentProcessingRuntimeItem {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingIncidentScenarios {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminDocumentProcessingIncidentScenario {
align-content: start;
gap: 8px;
min-width: 0;
padding: 10px;
display: grid;
}
.adminDocumentProcessingIncidentScenario:nth-child(2n) {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingIncidentScenario:nth-child(n+3) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingIncidentScenarioHead {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingIncidentScenarioHead strong {
overflow-wrap: anywhere;
min-width: 0;
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingIncidentEvidence, .adminDocumentProcessingIncidentDrills > div {
flex-wrap: wrap;
gap: 6px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingIncidentActions {
gap: 6px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingIncidentActions > div, .adminDocumentProcessingIncidentBoundaries > div {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingIncidentActions .adminSettingsFieldHint, .adminDocumentProcessingIncidentBoundaries .adminSettingsFieldHint {
overflow-wrap: anywhere;
margin: 0;
}
.adminDocumentProcessingIncidentDrills, .adminDocumentProcessingIncidentBoundaries {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 8px;
min-width: 0;
padding-top: 10px;
display: grid;
}
.adminDocumentProcessingIncidentDrills > strong, .adminDocumentProcessingIncidentBoundaries strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingIncidentBoundaries {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingMailboxAttentionList {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 7px;
padding-top: 10px;
display: grid;
}
.adminDocumentProcessingMailboxAttentionList > strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingMailboxAttentionItem {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: auto minmax(112px, .5fr) minmax(0, 1fr);
align-items: center;
gap: 8px;
min-width: 0;
min-height: 32px;
padding: 6px 0;
display: grid;
}
.adminDocumentProcessingCatchUpProfile {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 10px;
margin-top: 14px;
padding-top: 12px;
display: grid;
}
.adminDocumentProcessingCatchUpProfile > div:first-child strong {
font-size: 13px;
line-height: 1.25;
display: block;
}
.adminDocumentProcessingCatchUpProfileGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
display: grid;
}
.adminDocumentProcessingCatchUpProfileGrid > div {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 4px;
min-width: 0;
padding: 0 12px;
display: grid;
}
.adminDocumentProcessingCatchUpProfileGrid > div:first-child {
border-left: 0;
padding-left: 0;
}
.adminDocumentProcessingCatchUpProfileGrid strong {
overflow-wrap: anywhere;
font-size: 12.5px;
line-height: 1.3;
}
.adminDocumentProcessingProviderCompatibilityGrid {
grid-template-columns: minmax(132px, .7fr) minmax(132px, .8fr) minmax(160px, 1fr) minmax(132px, .8fr);
gap: 0;
display: grid;
}
.adminDocumentProcessingProviderCompatibilityGrid > div {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 4px;
min-width: 0;
padding: 0 12px;
display: grid;
}
.adminDocumentProcessingProviderCompatibilityGrid > div:first-child {
border-left: 0;
padding-left: 0;
}
.adminDocumentProcessingProviderCheckGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 14px;
display: grid;
}
.adminDocumentProcessingProviderCheck {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
align-items: center;
gap: 8px;
min-width: 0;
padding-top: 6px;
display: grid;
}
.adminDocumentProcessingProviderCheckEvidence {
overflow-wrap: anywhere;
min-width: 0;
font-size: 12px;
line-height: 1.3;
}
.adminMailboxOccurrencesPage {
gap: 12px;
display: grid;
}
.adminMailboxOccurrencesShell {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 8px;
grid-template-columns: minmax(300px, .28fr) minmax(0, 1fr);
min-width: 0;
display: grid;
overflow: hidden;
}
.adminMailboxOccurrencesFilters {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), #fff 78%);
align-content: start;
gap: 9px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminMailboxOccurrencesFilters .adminDocumentProcessingSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
padding-bottom: 7px;
}
.adminMailboxOccurrencesFilters .adminDocumentProcessingSectionHead h2 {
font-size: 14px;
line-height: 1.2;
}
.adminMailboxOccurrencesFilters .adminSettingsField {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 5px;
min-width: 0;
display: grid;
}
.adminMailboxOccurrencesFilters .adminSettingsField > span, .adminMailboxOccurrencesMeta dt {
color: var(--muted);
letter-spacing: .052em;
text-transform: uppercase;
font-size: 10.5px;
font-weight: 760;
line-height: 1.1;
}
.adminMailboxOccurrencesFilters input, .adminMailboxOccurrencesFilters select {
width: 100%;
min-height: 34px;
font-size: 13px;
}
.adminMailboxOccurrencesTwoFields {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
min-width: 0;
display: grid;
}
.adminMailboxOccurrencesActions {
gap: 8px;
padding-top: 4px;
display: grid;
}
.adminMailboxOccurrencesActions .btn {
justify-content: center;
width: 100%;
}
.adminMailboxOccurrencesMain {
align-content: start;
gap: 10px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminMailboxOccurrencesListHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
justify-content: space-between;
align-items: center;
gap: 12px;
min-width: 0;
padding-bottom: 10px;
display: flex;
}
.adminMailboxOccurrencesListHead h2 {
font-size: 16px;
line-height: 1.2;
}
.adminMailboxOccurrencesObservationTotal {
margin-top: 2px;
font-size: 11.5px;
display: block;
}
.adminMailboxOccurrencesGrid {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
border-radius: 8px;
grid-template-columns: minmax(360px, .48fr) minmax(360px, .52fr);
min-width: 0;
display: grid;
overflow: hidden;
}
.adminMailboxOccurrencesRows {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
align-content: start;
min-width: 0;
display: grid;
}
.adminMailboxOccurrenceRow {
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
min-width: 0;
min-height: 76px;
color: var(--fg);
text-align: left;
cursor: pointer;
background: #fff;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 5px 10px;
padding: 9px 10px;
display: grid;
}
.adminMailboxOccurrenceRow > .pill:first-child {
grid-area: 1 / 1;
}
.adminMailboxOccurrenceRow > strong.mono {
grid-area: 2 / 1;
align-self: center;
}
.adminMailboxOccurrenceRow > .adminMailboxOccurrenceSubject {
grid-area: 1 / 2;
font-weight: 700;
line-height: 1.25;
}
.adminMailboxOccurrenceRow > .muted {
grid-area: 2 / 2;
line-height: 1.2;
}
.adminMailboxOccurrenceRow > .pill:nth-child(5) {
grid-area: 3 / 1;
}
.adminMailboxOccurrenceRow > .mono:nth-child(6) {
color: var(--muted);
grid-area: 3 / 2;
font-size: 11.5px;
line-height: 1.2;
}
.adminMailboxOccurrenceRow:hover, .adminMailboxOccurrenceRow:focus-visible, .adminMailboxOccurrenceRow.isSelected {
background: color-mix(in srgb, var(--focus), #fff 96%);
}
.adminMailboxOccurrenceRow.isSelected {
box-shadow: inset 3px 0 0 var(--focus);
}
.adminMailboxOccurrenceSubject, .adminMailboxOccurrencesMeta dd, .adminMailboxOccurrenceAttachmentTop strong, .adminMailboxOccurrenceAttachmentMeta span {
overflow-wrap: anywhere;
min-width: 0;
}
.adminMailboxOccurrenceRow .pill, .adminMailboxOccurrencesPillRow .pill, .adminMailboxOccurrenceAttachmentTop .pill {
justify-self: start;
min-height: 22px;
padding: 0 7px;
font-size: 10.5px;
}
.adminMailboxOccurrencesDetail {
background: color-mix(in srgb, var(--bg-2), #fff 72%);
align-content: start;
gap: 12px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminMailboxOccurrencesDetailHead {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
min-width: 0;
display: grid;
}
.adminMailboxOccurrencesDetailHead h2 {
font-size: 16px;
line-height: 1.2;
}
.adminMailboxOccurrencesPillRow {
flex-wrap: wrap;
gap: 6px;
min-width: 0;
display: flex;
}
.adminMailboxOccurrencesMeta {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: #fff;
border-radius: 8px;
gap: 0;
display: grid;
overflow: hidden;
}
.adminMailboxOccurrencesMeta > div {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: minmax(104px, .34fr) minmax(0, 1fr);
gap: 10px;
min-width: 0;
padding: 7px 9px;
display: grid;
}
.adminMailboxOccurrencesMeta > div:last-child {
border-bottom: 0;
}
.adminMailboxOccurrencesMeta dt, .adminMailboxOccurrencesMeta dd {
margin: 0;
}
.adminMailboxResolutionPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
border-radius: 8px;
gap: 10px;
min-width: 0;
padding: 10px;
display: grid;
}
.adminMailboxResolutionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: auto minmax(0, 1fr);
gap: 9px;
min-width: 0;
padding-bottom: 8px;
display: grid;
}
.adminMailboxResolutionHead h3, .adminMailboxResolutionHistory h4 {
font-size: 13.5px;
line-height: 1.2;
}
.adminMailboxResolutionHead p {
color: var(--muted);
margin: 3px 0 0;
font-size: 12px;
line-height: 1.35;
}
.adminMailboxResolutionSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
background: color-mix(in srgb, var(--bg-2), #fff 82%);
border-radius: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: hidden;
}
.adminMailboxResolutionSummary > div {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
gap: 3px;
min-width: 0;
padding: 7px 8px;
display: grid;
}
.adminMailboxResolutionSummary > div:nth-child(odd) {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminMailboxResolutionSummary > div:nth-last-child(-n+2) {
border-bottom: 0;
}
.adminMailboxResolutionSummary dt, .adminMailboxResolutionSummary dd {
min-width: 0;
margin: 0;
}
.adminMailboxResolutionSummary dt, .adminMailboxResolutionPanel .adminSettingsField > span {
color: var(--muted);
letter-spacing: .052em;
text-transform: uppercase;
font-size: 10.5px;
font-weight: 760;
line-height: 1.1;
}
.adminMailboxResolutionPanel .adminSettingsField {
gap: 5px;
min-width: 0;
display: grid;
}
.adminMailboxHandoffControls {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-width: 0;
display: grid;
}
.adminMailboxResolutionPanel textarea, .adminMailboxResolutionPanel input, .adminMailboxResolutionPanel select {
width: 100%;
font-size: 13px;
}
.adminMailboxResolutionPanel textarea {
resize: vertical;
min-height: 82px;
}
.adminMailboxResolutionActions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
min-width: 0;
display: grid;
}
.adminMailboxResolutionTargets {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-radius: 8px;
gap: 0;
display: grid;
overflow: hidden;
}
.adminMailboxResolutionTargetsHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
background: color-mix(in srgb, var(--bg-2), #fff 82%);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
gap: 8px;
padding: 7px 8px;
display: grid;
}
.adminMailboxResolutionTargetsHead > span:first-child {
color: var(--fg);
font-size: 12px;
font-weight: 800;
}
.adminMailboxResolutionTargetsHead > span:last-child {
color: var(--muted);
font-size: 11.5px;
line-height: 1.35;
}
.adminMailboxResolutionTarget {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 42px;
padding: 7px 8px;
display: grid;
}
.adminMailboxResolutionTarget:last-child {
border-bottom: 0;
}
.adminMailboxResolutionTarget.isDisabled {
color: var(--muted);
background: color-mix(in srgb, var(--bg-2), #fff 72%);
}
.adminMailboxResolutionTarget > span {
gap: 2px;
min-width: 0;
display: grid;
}
.adminMailboxResolutionTarget strong, .adminMailboxResolutionTarget .mono {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.adminMailboxResolutionTarget strong {
font-size: 12.5px;
}
.adminMailboxResolutionTarget .mono {
color: var(--muted);
font-size: 11px;
}
.adminMailboxResolutionActions .btn {
justify-content: center;
width: 100%;
min-width: 0;
}
.adminMailboxResolutionHistory {
gap: 7px;
min-width: 0;
padding-top: 2px;
display: grid;
}
.adminMailboxResolutionHistoryRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
min-width: 0;
padding: 8px 0 0;
display: grid;
}
.adminMailboxResolutionHistoryRow > span {
color: var(--muted);
font-size: 12px;
}
.adminMailboxResolutionHistoryRow > p {
min-width: 0;
color: var(--fg);
overflow-wrap: anywhere;
grid-column: 1 / -1;
margin: 0;
font-size: 12.5px;
line-height: 1.35;
}
@media (max-width: 720px) {
.adminMailboxResolutionSummary, .adminMailboxResolutionActions, .adminMailboxHandoffControls, .adminMailboxResolutionTargetsHead {
grid-template-columns: 1fr;
}
.adminMailboxResolutionSummary > div:nth-child(odd) {
border-right: 0;
}
.adminMailboxResolutionSummary > div:nth-last-child(-n+2) {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 18%);
}
.adminMailboxResolutionSummary > div:last-child {
border-bottom: 0;
}
.adminMailboxResolutionTarget {
grid-template-columns: 22px minmax(0, 1fr);
}
.adminMailboxResolutionTarget .pill {
grid-column: 2;
justify-self: start;
}
}
.adminMailboxOccurrencesAttachments {
gap: 8px;
min-width: 0;
display: grid;
}
.adminMailboxOccurrencesAttachments h3 {
font-size: 14px;
line-height: 1.2;
}
.adminMailboxOccurrenceAttachment {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
border-radius: 8px;
gap: 7px;
min-width: 0;
padding: 9px;
display: grid;
}
.adminMailboxOccurrenceAttachmentTop {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-width: 0;
display: grid;
}
.adminMailboxOccurrenceAttachmentMeta, .adminMailboxOccurrenceLinks {
min-width: 0;
color: var(--muted);
flex-wrap: wrap;
gap: 6px 10px;
font-size: 12px;
line-height: 1.25;
display: flex;
}
.adminMailboxOccurrenceLinks a {
color: color-mix(in srgb, var(--focus), var(--fg) 14%);
align-items: center;
gap: 5px;
font-weight: 760;
text-decoration: none;
display: inline-flex;
}
.adminMailboxOccurrencesEmpty {
min-height: 118px;
color: var(--muted);
padding: 28px 14px;
font-size: 13px;
line-height: 1.4;
}
.adminMailboxOccurrencesPage .pill.isReady {
border-color: color-mix(in srgb, var(--ok), transparent 48%);
background: color-mix(in srgb, var(--ok), #fff 90%);
color: color-mix(in srgb, var(--ok), #111 30%);
}
.adminMailboxOccurrencesPage .pill.isWarning {
border-color: color-mix(in srgb, var(--warn), transparent 34%);
background: color-mix(in srgb, var(--warn), #fff 88%);
color: color-mix(in srgb, var(--warn), #111 34%);
}
.adminMailboxOccurrencesPage .pill.isNeutral {
background: color-mix(in srgb, var(--bg-2), var(--fg) 3%);
color: var(--muted);
}
.adminDocumentProcessingMailboxAttentionItem:first-of-type {
border-top: 0;
}
.adminDocumentProcessingMailboxDisposition {
gap: 0;
padding: 0;
display: grid;
}
.adminDocumentProcessingMailboxDisposition > .adminDocumentProcessingSectionHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
padding: 10px 12px;
}
.adminDocumentProcessingDispositionNotice {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), #fff 84%);
grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
align-items: start;
gap: 8px 18px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminDocumentProcessingDispositionNotice .adminSettingsFieldHint {
margin: 0;
}
.adminDocumentProcessingDispositionCapabilities {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
flex-wrap: wrap;
gap: 6px;
min-width: 0;
padding: 9px 12px;
display: flex;
}
.adminDocumentProcessingDispositionRules {
grid-template-columns: minmax(0, 1fr);
min-width: 0;
display: grid;
}
.adminDocumentProcessingDispositionRuleGroup {
min-width: 0;
display: grid;
}
.adminDocumentProcessingDispositionRuleGroup + .adminDocumentProcessingDispositionRuleGroup {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
}
.adminDocumentProcessingDispositionRuleGroupTitle {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), #fff 78%);
min-width: 0;
color: var(--muted);
letter-spacing: .055em;
text-transform: uppercase;
margin: 0;
padding: 8px 12px;
font-size: 11px;
font-weight: 760;
line-height: 1.2;
}
.adminDocumentProcessingDispositionRuleGrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
min-width: 0;
display: grid;
}
.adminDocumentProcessingDispositionRule {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
align-content: start;
gap: 8px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminDocumentProcessingDispositionRule:nth-child(4n) {
border-right: 0;
}
.adminDocumentProcessingDispositionRuleTitle {
gap: 3px;
min-width: 0;
min-height: 62px;
display: grid;
}
.adminDocumentProcessingDispositionRuleTitle strong {
font-size: 12.5px;
line-height: 1.25;
}
.adminDocumentProcessingDispositionRuleTitle .adminSettingsFieldHint {
margin: 0;
line-height: 1.35;
}
.adminDocumentProcessingDispositionRule .adminTemplateField {
min-width: 0;
margin: 0;
}
.adminDocumentProcessingDispositionRule .input {
min-height: 36px;
}
.adminDocumentProcessingDispositionRuleFooter {
min-width: 0;
padding-top: 2px;
}
.adminDocumentProcessingDispositionRuleFooter .adminSettingsFieldHint {
margin: 0;
}
.adminDocumentProcessingDispositionPreview {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
background: color-mix(in srgb, var(--bg-2), #fff 88%);
gap: 10px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminDocumentProcessingDispositionPreviewSummary {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
border-radius: 8px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingDispositionPreviewSummary > div {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
gap: 3px;
min-width: 0;
min-height: 56px;
padding: 9px 10px;
display: grid;
}
.adminDocumentProcessingDispositionPreviewSummary > div:last-child {
border-right: 0;
}
.adminDocumentProcessingDispositionPreviewSummary strong {
font-size: 18px;
line-height: 1.1;
}
.adminDocumentProcessingDispositionPreviewRows {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
border-radius: 8px;
gap: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingDispositionPreviewRow {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-template-columns: minmax(108px, .24fr) minmax(150px, .32fr) minmax(130px, .24fr) auto;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 38px;
padding: 7px 10px;
display: grid;
}
.adminDocumentProcessingDispositionPreviewRow:first-child {
border-top: 0;
}
.adminDocumentProcessingDispositionPartialPasses {
gap: 5px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingDispositionPartialPasses strong {
font-size: 12.5px;
}
.adminDocumentProcessingMailboxGrid {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
grid-template-columns: minmax(0, 1.34fr) minmax(360px, .66fr);
gap: 0;
margin-top: 0;
padding-top: 0;
}
.adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection {
align-content: start;
gap: 9px;
min-width: 0;
padding: 12px;
}
.adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingMailboxConnectionFields {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
gap: 8px 10px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingMailboxConnectionFields > .field {
min-width: 0;
margin: 0;
}
.adminDocumentProcessingMailboxFieldHost {
grid-column: span 8;
}
.adminDocumentProcessingMailboxFieldPort {
grid-column: span 4;
}
.adminDocumentProcessingMailboxFieldSecurity {
grid-column: 1 / -1;
}
.adminDocumentProcessingMailboxFieldUsername, .adminDocumentProcessingMailboxFieldFolder, .adminDocumentProcessingMailboxFieldPoll {
grid-column: span 4;
}
.adminDocumentProcessingMailboxFieldMaxMessages, .adminDocumentProcessingMailboxFieldMaxAttachments {
grid-column: span 6;
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldGroup {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 8px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
min-height: 38px;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldOption {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
align-items: center;
gap: 7px;
width: 100%;
min-height: 38px;
padding: 8px 9px;
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldOption:last-child {
border-right: 0;
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldOption.isChecked {
background: color-mix(in srgb, var(--focus), #fff 94%);
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldOption input[type="radio"] {
width: 16px;
height: 16px;
margin-top: 0;
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldLabel {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 1.18;
overflow: hidden;
}
.adminDocumentProcessingConnectionDiagnostics {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: color-mix(in srgb, var(--bg-2), #fff 76%);
border-radius: 0;
min-width: 0;
margin: 4px -12px -12px;
}
.adminDocumentProcessingConnectionDiagnosticsSummary {
align-items: center;
min-height: 50px;
padding: 9px 12px;
}
.adminDocumentProcessingConnectionDiagnosticsSummary > span:first-child {
gap: 2px;
min-width: 0;
display: grid;
}
.adminDocumentProcessingConnectionDiagnosticsSummary strong {
font-size: 13px;
line-height: 1.25;
}
.adminDocumentProcessingConnectionDiagnosticsSummary .adminSettingsFieldHint {
margin: 0;
}
.adminDocumentProcessingConnectionDiagnosticsMeta {
flex: none;
align-items: center;
gap: 8px;
display: inline-flex;
}
.adminDocumentProcessingConnectionDiagnostics[open] .adminDocumentProcessingMailboxAdvancedChevron {
transform: rotate(45deg);
}
.adminDocumentProcessingConnectionDiagnosticsBody {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
min-width: 0;
padding: 0 12px 12px;
display: grid;
}
.adminDocumentProcessingConnectionDiagnosticsBody > .adminDocumentProcessingCatchUpProfile:first-child {
border-top: 0;
margin-top: 0;
padding-top: 12px;
}
.adminDocumentProcessingMailboxSecretSection {
background: color-mix(in srgb, var(--bg-2), #fff 80%);
}
.adminDocumentProcessingMailboxSecretSection .adminTemplateFieldsGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingSecretBlock .adminTemplateFieldFull {
grid-column: 1 / -1;
}
.adminDocumentProcessingCredentialStatus {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 8px 0;
display: grid;
}
.adminDocumentProcessingSecretActions {
justify-content: flex-start;
gap: 8px;
}
.adminDocumentProcessingSecretActions .btn {
min-height: 44px;
}
.adminDocumentProcessingPromptCommandHead {
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
}
.adminDocumentProcessingPromptCommandHead > div:first-child {
flex: 520px;
min-width: 0;
}
.adminDocumentProcessingPromptTitleRow {
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingPromptSaveBar, .adminDocumentProcessingPromptSaveActions {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.adminDocumentProcessingPromptSaveBar {
flex: 0 auto;
margin-left: auto;
}
.adminDocumentProcessingPromptSavedState {
color: var(--muted);
white-space: nowrap;
font-size: 12px;
font-weight: 700;
}
.adminDocumentProcessingPromptSaveActions .btn {
min-height: 44px;
}
.adminDocumentProcessingPromptLayout {
border-top: 0;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
align-items: stretch;
gap: 0;
display: grid;
}
.adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummary {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-column: 1 / -1;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-content: start;
gap: 0;
min-width: 0;
padding: 0;
display: grid;
}
.adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummaryTop, .adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummaryMeta, .adminDocumentProcessingPromptWorkbench {
display: contents;
}
.adminDocumentProcessingPromptEditorCard, .adminDocumentProcessingPromptAside {
min-width: 0;
padding: 12px;
}
.adminDocumentProcessingPromptEditorCard {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-template-rows: minmax(0, 1fr);
align-content: start;
gap: 10px;
display: grid;
}
.adminDocumentProcessingPromptEditorCard .adminTemplateField {
align-self: start;
height: 100%;
}
.adminDocumentProcessingPromptAside {
border-left: 0;
align-content: stretch;
gap: 10px;
max-height: none;
display: grid;
overflow: visible;
}
.adminDocumentProcessingPromptFact {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 4px;
min-width: 0;
padding: 10px 12px;
}
.adminDocumentProcessingPromptCatalogSummaryMeta .adminDocumentProcessingPromptFact:last-child {
border-right: 0;
}
.adminDocumentProcessingPromptFactValue {
font-size: 12px;
line-height: 1.3;
}
.adminDocumentProcessingPromptPathStack {
gap: 2px;
min-width: 0;
max-width: 100%;
display: grid;
}
.adminDocumentProcessingPromptPathDir {
color: color-mix(in srgb, var(--muted), var(--fg) 22%);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10.8px;
line-height: 1.25;
overflow: hidden;
}
.adminDocumentProcessingPromptPathValue {
overflow-wrap: anywhere;
word-break: normal;
max-width: 100%;
font-size: 12px;
display: block;
}
.adminDocumentProcessingPromptChipSection {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
grid-column: span 2;
gap: 6px;
min-width: 0;
padding: 9px 12px 10px;
}
.adminDocumentProcessingPromptChipSection:last-child {
border-right: 0;
}
.adminDocumentProcessingPromptChipRow {
gap: 5px;
}
.adminDocumentProcessingPromptChip {
max-width: 100%;
min-height: 21px;
padding: 0 7px;
font-size: 10.5px;
}
.adminDocumentProcessingPromptLayout .adminValidationSummary, .adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogNotice {
border-radius: 0;
grid-column: 1 / -1;
margin: 0;
}
.adminDocumentProcessingPromptCatalogTextarea {
resize: vertical;
height: clamp(300px, 34vh, 430px);
min-height: 300px;
max-height: 430px;
font-size: 11.5px;
line-height: 1.45;
}
.adminDocumentProcessingPromptCatalogActions {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
padding-top: 10px;
}
.adminDocumentProcessingPromptPreviewPanel {
grid-template-rows: auto minmax(0, 1fr);
gap: 10px;
min-height: 100%;
display: grid;
}
.adminDocumentProcessingPromptPreviewHead {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
gap: 3px;
padding-bottom: 9px;
display: grid;
}
.adminDocumentProcessingPromptPreviewStack {
align-content: start;
gap: 9px;
max-height: clamp(300px, 34vh, 430px);
display: grid;
overflow: auto;
}
.adminDocumentProcessingPromptPreviewBlock {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
gap: 6px;
min-width: 0;
padding-bottom: 9px;
display: grid;
}
.adminDocumentProcessingPromptPreviewBlock:last-child {
border-bottom: 0;
}
.adminDocumentProcessingPromptPreviewBlockHead {
gap: 4px;
display: grid;
}
.adminDocumentProcessingPromptPreviewBlock .label {
text-overflow: clip;
white-space: normal;
margin: 0;
overflow: visible;
}
.adminDocumentProcessingPromptPreviewMeta {
color: var(--muted);
flex-wrap: wrap;
gap: 3px 14px;
margin: 0;
font-size: 10.5px;
line-height: 1.35;
display: flex;
}
.adminDocumentProcessingPromptPreviewMeta > div {
align-items: baseline;
gap: 4px;
min-width: 0;
display: inline-flex;
}
.adminDocumentProcessingPromptPreviewMeta dt, .adminDocumentProcessingPromptPreviewMeta dd {
margin: 0;
}
.adminDocumentProcessingPromptPreviewMeta dd {
color: color-mix(in srgb, var(--fg), var(--muted) 34%);
}
.adminDocumentProcessingPromptPreview {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), #fff 72%);
border-radius: 6px;
min-height: 72px;
max-height: 116px;
padding: 8px 9px;
font-size: 10.7px;
line-height: 1.4;
overflow: auto;
}
@media (max-width: 1180px) {
.adminDocumentProcessingPolicyActionGrid, .adminDocumentProcessingParserConfigGrid, .adminDocumentProcessingMailboxOpsGrid, .adminDocumentProcessingHistoricalGrid, .adminDocumentProcessingDispositionRules, .adminDocumentProcessingMailboxGrid, .adminDocumentProcessingPromptLayout, .adminMailboxOccurrencesShell, .adminMailboxOccurrencesGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingPromptCatalogSummaryTop, .adminDocumentProcessingPromptCatalogSummaryMeta {
display: contents;
}
.adminDocumentProcessingPromptCatalogSummaryTop .adminDocumentProcessingPromptFactPath, .adminDocumentProcessingPromptCatalogSummaryMeta .adminDocumentProcessingPromptFact:last-child {
border-right: 0;
}
.adminDocumentProcessingPromptCatalogSummaryMeta .adminDocumentProcessingPromptFact:first-child {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
}
.adminDocumentProcessingPromptChipSection {
border-right: 0;
grid-column: 1 / -1;
}
.adminDocumentProcessingPolicyColumn, .adminDocumentProcessingMailboxOpsMain, .adminDocumentProcessingDispositionNotice, .adminDocumentProcessingMailboxConnectionFields, .adminDocumentProcessingParserConfigGrid .adminDocumentProcessingStackGrid, .adminDocumentProcessingSemanticPolicy {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingMailboxFieldHost, .adminDocumentProcessingMailboxFieldPort, .adminDocumentProcessingMailboxFieldSecurity, .adminDocumentProcessingMailboxFieldUsername, .adminDocumentProcessingMailboxFieldFolder, .adminDocumentProcessingMailboxFieldPoll, .adminDocumentProcessingMailboxFieldMaxMessages, .adminDocumentProcessingMailboxFieldMaxAttachments {
grid-column: 1;
}
.adminDocumentProcessingPolicyColumn > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection, .adminDocumentProcessingActionsPanel, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow + .adminDocumentProcessingActionRow, .adminDocumentProcessingMailboxSyncPanel, .adminDocumentProcessingHistoricalEvidence, .adminDocumentProcessingDispositionRule, .adminMailboxOccurrencesFilters, .adminMailboxOccurrencesRows, .adminDocumentProcessingParserConfigGrid .adminDocumentProcessingStackCard + .adminDocumentProcessingStackCard, .adminDocumentProcessingLimitsPanel, .adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection, .adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummary, .adminDocumentProcessingPromptEditorCard, .adminDocumentProcessingPromptAside {
border-left: 0;
border-right: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminMailboxOccurrencesFilters, .adminMailboxOccurrencesRows {
border-left: 0;
border-right: 0;
}
.adminDocumentProcessingPolicyColumn > .adminDocumentProcessingFormSection:first-child, .adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummary {
border-top: 0;
}
.adminDocumentProcessingActionsPanel, .adminDocumentProcessingMailboxSyncPanel, .adminDocumentProcessingHistoricalEvidence, .adminDocumentProcessingLimitsPanel, .adminDocumentProcessingDispositionRule, .adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection + .adminDocumentProcessingFormSection, .adminDocumentProcessingPromptAside {
padding-top: 11px;
}
.adminDocumentProcessingHistoricalEvidence {
padding-left: 0;
}
.adminDocumentProcessingDispositionRule:nth-child(n) {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingDispositionRule:last-child {
border-bottom: 0;
}
}
@media (min-width: 761px) and (max-width: 1180px) {
.adminDocumentProcessingMailboxOpsGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow + .adminDocumentProcessingActionRow {
border-top: 0;
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
}
.adminDocumentProcessingMailboxSyncPanel {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
grid-column: 1 / -1;
}
.adminDocumentProcessingMailboxSyncHead {
grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr);
align-items: end;
display: grid;
}
.adminDocumentProcessingDispositionRuleGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingDispositionRule:nth-child(odd) {
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingDispositionRule:nth-child(2n) {
border-right: 0;
}
}
@media (max-width: 760px) {
.adminDocumentProcessingWorkbenchSurface .adminDocumentProcessingSection > .adminDocumentProcessingSectionHead, .adminDocumentProcessingGlobalSaveBar {
flex-direction: column;
align-items: stretch;
}
.adminDocumentProcessingGlobalSaveMeta {
justify-content: space-between;
width: 100%;
}
.adminDocumentProcessingDangerousPanel, .adminDocumentProcessingDangerousPanel.isCompact, .adminDocumentProcessingDangerousSummary li {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingDangerousSummary li .mono {
text-align: left;
}
.adminDocumentProcessingGlobalSaveMeta .adminSettingsFieldHint {
white-space: normal;
}
.adminDocumentProcessingPolicyDirty {
padding-bottom: 132px;
}
.adminDocumentProcessingPolicySaveDock {
right: max(10px, env(safe-area-inset-right));
bottom: max(10px, env(safe-area-inset-bottom));
left: max(10px, env(safe-area-inset-left));
grid-template-columns: minmax(0, 1fr);
gap: 8px;
width: auto;
padding: 9px 10px 10px;
}
.adminDocumentProcessingPolicySaveDockActions {
grid-template-columns: repeat(2, minmax(0, 1fr));
display: grid;
}
.adminDocumentProcessingPolicySaveDockActions .btn {
white-space: normal;
width: 100%;
}
.adminDocumentProcessingPromptCommandHead > div:first-child {
flex-basis: auto;
}
.adminDocumentProcessingPromptSaveBar {
justify-content: space-between;
width: 100%;
margin-left: 0;
}
.adminDocumentProcessingPromptSaveActions {
flex: auto;
justify-content: flex-end;
}
.adminDocumentProcessingPromptSaveActions .btn {
flex: 1 1 0;
}
.adminDocumentProcessingPolicyColumn > .adminDocumentProcessingFormSection, .adminDocumentProcessingActionsPanel, .adminDocumentProcessingMailboxOps > .adminDocumentProcessingSectionHead, .adminDocumentProcessingHistoricalPanel, .adminDocumentProcessingMailboxDisposition > .adminDocumentProcessingSectionHead, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow, .adminDocumentProcessingMailboxSyncPanel, .adminDocumentProcessingMailboxStatusPanel, .adminDocumentProcessingDispositionNotice, .adminDocumentProcessingDispositionRule, .adminDocumentProcessingDispositionPreview, .adminDocumentProcessingProfileStackShell > .adminDocumentProcessingSectionHead, .adminDocumentProcessingParserConfigSurface > .adminDocumentProcessingSectionHead, .adminDocumentProcessingSemanticPolicy, .adminDocumentProcessingParserConfigGrid .adminDocumentProcessingStackCard, .adminDocumentProcessingLimitsPanel, .adminDocumentProcessingMailboxGrid > .adminDocumentProcessingFormSection, .adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummary, .adminDocumentProcessingPromptEditorCard, .adminDocumentProcessingPromptAside {
padding: 10px;
}
.adminDocumentProcessingLimitsPanel .adminDocumentProcessingSupportGrid, .adminDocumentProcessingDispositionPreviewSummary, .adminDocumentProcessingMailboxStatusGrid, .adminDocumentProcessingAcceptanceLanes, .adminDocumentProcessingAcceptanceCounts, .adminDocumentProcessingAcceptanceLinks, .adminDocumentProcessingHistoricalFields, .adminDocumentProcessingReviewResetCounts, .adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingHistoricalStatusGrid .adminDocumentProcessingRuntimeItemWide, .adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldGroup, .adminDocumentProcessingMailboxGrid .adminTemplateFieldsGrid, .adminMailboxOccurrencesTwoFields, .adminMailboxOccurrencesMeta > div {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingMailboxStatusGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItemWide {
grid-column: 1 / -1;
}
.adminDocumentProcessingDispositionRuleGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingPromptLayout .adminDocumentProcessingPromptCatalogSummary {
grid-template-columns: minmax(0, 1fr);
padding: 0;
}
.adminDocumentProcessingPromptFact, .adminDocumentProcessingPromptCatalogSummaryTop .adminDocumentProcessingPromptFactPath, .adminDocumentProcessingPromptCatalogSummaryMeta .adminDocumentProcessingPromptFact:last-child {
border-right: 0;
}
.adminDocumentProcessingPromptFact + .adminDocumentProcessingPromptFact, .adminDocumentProcessingPromptCatalogSummaryMeta .adminDocumentProcessingPromptFact:first-child {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
}
.adminDocumentProcessingPromptChipSection {
grid-column: 1;
}
.adminDocumentProcessingProfileSummaryActions .btn, .adminDocumentProcessingStackRowActions .btn {
min-height: 44px;
}
.adminDocumentProcessingStackRow {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 8px;
}
.adminDocumentProcessingStackRowActions {
grid-template-columns: auto;
}
.adminDocumentProcessingStackRowActions .btn {
padding-inline: 8px;
font-size: 11.5px;
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldOption {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingMailboxFieldSecurity .adminChoiceFieldOption:last-child {
border-bottom: 0;
}
.adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > :first-child, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > .adminChoiceFieldGroup, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > .adminDocumentProcessingProbeFields, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > .field, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > p.adminSettingsFieldHint, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > .btn, .adminDocumentProcessingMailboxOpsMain > .adminDocumentProcessingActionRow > .adminDocumentProcessingProbeResult {
grid-column: 1;
}
.adminDocumentProcessingMailboxSyncHead {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingMailboxStatusHead, .adminMailboxOccurrencesListHead {
flex-direction: column;
align-items: stretch;
}
.adminDocumentProcessingReconciliationActions {
justify-content: stretch;
}
.adminDocumentProcessingReconciliationActions .btn {
flex: 140px;
}
.adminDocumentProcessingReconciliationCheck, .adminDocumentProcessingReconciliationLinkRow, .adminDocumentProcessingAcceptanceGate, .adminDocumentProcessingIncidentSummary, .adminDocumentProcessingIncidentScenarios, .adminDocumentProcessingIncidentBoundaries, .adminDocumentProcessingPostLaunchGroups, .adminDocumentProcessingPostLaunchTask {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingIncidentSummary .adminDocumentProcessingRuntimeItem + .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingIncidentScenario:nth-child(2n), .adminDocumentProcessingAcceptanceLane + .adminDocumentProcessingAcceptanceLane {
border-left: 0;
}
.adminDocumentProcessingIncidentSummary .adminDocumentProcessingRuntimeItem + .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingIncidentScenario:nth-child(n+2), .adminDocumentProcessingAcceptanceLane + .adminDocumentProcessingAcceptanceLane {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingPostLaunchGroup + .adminDocumentProcessingPostLaunchGroup {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingMailboxStatusHead .btn, .adminMailboxOccurrencesListHead .btn {
justify-content: center;
width: 100%;
}
.adminDocumentProcessingCatchUpProfileGrid, .adminDocumentProcessingProviderCompatibilityGrid, .adminDocumentProcessingProviderCheckGrid, .adminDocumentProcessingProviderCheck {
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingCatchUpProfileGrid > div, .adminDocumentProcessingProviderCompatibilityGrid > div {
border-left: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
padding: 8px 0;
}
.adminDocumentProcessingCatchUpProfileGrid > div:first-child, .adminDocumentProcessingProviderCompatibilityGrid > div:first-child {
border-top: 0;
padding-top: 0;
}
.adminMailboxOccurrenceRow {
grid-template-columns: minmax(0, 1fr);
gap: 5px;
}
.adminDocumentProcessingDispositionPreviewRow {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminDocumentProcessingDispositionPreviewSummary > div {
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingDispositionPreviewSummary > div:last-child {
border-bottom: 0;
}
.adminMailboxOccurrenceAttachmentTop {
grid-template-columns: auto minmax(0, 1fr);
}
.adminMailboxOccurrenceAttachmentTop .pill {
grid-column: 1 / -1;
}
.adminDocumentProcessingMailboxSyncHead .btn, .adminDocumentProcessingMailboxOpsMain .adminDocumentProcessingActionRow .btn {
justify-self: stretch;
width: 100%;
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem:nth-child(2n) {
border-right: 0;
grid-template-columns: minmax(0, 1fr);
}
.adminDocumentProcessingMailboxStatusGrid .adminDocumentProcessingRuntimeItem:nth-child(n+2) {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 14%);
}
.adminDocumentProcessingRetentionGrid .adminDocumentProcessingRuntimeItem, .adminDocumentProcessingRetentionGrid .adminDocumentProcessingRuntimeItemWide {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminDocumentProcessingRetentionValue, .adminDocumentProcessingRetentionLongValue {
text-align: left;
white-space: normal;
}
.adminDocumentProcessingMailboxAttentionItem {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.adminDocumentProcessingMailboxGrid .adminTemplateFieldFull {
grid-column: 1 / -1;
}
.adminDocumentProcessingPromptPreviewStack {
max-height: 260px;
}
.adminDocumentProcessingPromptCatalogTextarea {
height: 300px;
min-height: 260px;
}
.adminDocumentProcessingPromptPreviewStack .adminDocumentProcessingRuntimeItem {
grid-template-columns: minmax(0, 1fr);
}
}
.adminDocumentProcessingRouteNav {
border-block: 1px solid color-mix(in srgb, var(--stroke), transparent 10%);
background: #fff;
grid-template-columns: repeat(3, minmax(0, 1fr));
min-width: 0;
display: grid;
overflow: hidden;
}
.adminDocumentProcessingRouteNav a {
min-width: 0;
min-height: 44px;
color: color-mix(in srgb, var(--muted), var(--fg) 18%);
text-align: center;
border-bottom: 3px solid #0000;
justify-content: center;
align-items: center;
padding: 8px 12px;
font-size: 13px;
font-weight: 740;
line-height: 1.2;
text-decoration: none;
display: inline-flex;
}
.adminDocumentProcessingRouteNav a + a {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 16%);
}
.adminDocumentProcessingRouteNav a:hover {
background: color-mix(in srgb, var(--focus), #fff 97%);
color: var(--fg);
}
.adminDocumentProcessingRouteNav a:focus-visible {
z-index: 1;
outline: 3px solid color-mix(in srgb, var(--focus), transparent 62%);
outline-offset: -3px;
position: relative;
}
.adminDocumentProcessingRouteNav a.isCurrent {
border-bottom-color: var(--focus);
background: color-mix(in srgb, var(--focus), #fff 96%);
color: color-mix(in srgb, var(--focus), var(--fg) 20%);
}
.adminMailboxOccurrencesShell {
background: none;
border: 0;
border-radius: 0;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
overflow: visible;
}
.adminMailboxOccurrencesFilterPanel {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 8px;
min-width: 0;
overflow: hidden;
}
.adminMailboxOccurrencesFilterPanel > summary {
cursor: pointer;
grid-template-columns: minmax(0, 1fr) auto 16px;
align-items: center;
gap: 12px;
min-height: 46px;
padding: 8px 12px;
list-style: none;
display: grid;
}
.adminMailboxOccurrencesFilterPanel > summary::-webkit-details-marker {
display: none;
}
.adminMailboxOccurrencesFilterPanel > summary:after {
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
content: "";
width: 8px;
height: 8px;
transition: transform .15s;
transform: rotate(45deg)translate(-2px, -2px);
}
.adminMailboxOccurrencesFilterPanel[open] > summary:after {
transform: rotate(225deg)translate(-1px, -1px);
}
.adminMailboxOccurrencesFilterPanel > summary:hover {
background: color-mix(in srgb, var(--bg-2), #fff 72%);
}
.adminMailboxOccurrencesFilterPanel > summary:focus-visible {
outline: 3px solid color-mix(in srgb, var(--focus), transparent 62%);
outline-offset: -3px;
}
.adminMailboxOccurrencesFilterTitle, .adminMailboxOccurrencesFilterCount, .adminMailboxOccurrencesDetailLoading {
align-items: center;
display: inline-flex;
}
.adminMailboxOccurrencesFilterTitle {
gap: 8px;
min-width: 0;
}
.adminMailboxOccurrencesFilterCount {
color: var(--muted);
gap: 7px;
font-size: 12px;
line-height: 1.2;
}
.adminMailboxOccurrencesFilterCount strong {
background: color-mix(in srgb, var(--focus), #fff 91%);
min-width: 24px;
min-height: 24px;
color: color-mix(in srgb, var(--focus), var(--fg) 20%);
border-radius: 999px;
place-items: center;
padding-inline: 6px;
font-size: 12px;
display: inline-grid;
}
.adminMailboxOccurrencesFilters {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: color-mix(in srgb, var(--bg-2), #fff 82%);
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
padding: 12px;
}
.adminMailboxOccurrencesFilters .adminSettingsField, .adminMailboxOccurrencesFilters .adminSettingsCheckbox {
min-width: 0;
}
.adminMailboxOccurrencesFilters input:not([type="checkbox"]), .adminMailboxOccurrencesFilters select, .adminMailboxOccurrencesFilters button {
min-height: 44px;
}
.adminMailboxOccurrencesFilters input[type="checkbox"] {
width: 20px;
height: 20px;
min-height: 20px;
margin: 0;
}
.adminMailboxOccurrencesFilters .adminSettingsCheckbox {
align-items: center;
gap: 9px;
min-height: 44px;
padding-top: 18px;
display: flex;
}
.adminMailboxOccurrencesTwoFields {
grid-column: span 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.adminMailboxOccurrencesActions {
grid-column: 1 / -1;
justify-content: flex-end;
gap: 8px;
padding-top: 0;
display: flex;
}
.adminMailboxOccurrencesActions .btn {
width: auto;
min-width: 132px;
}
.adminMailboxOccurrencesMain {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 8px;
}
.adminMailboxOccurrencesGrid {
grid-template-columns: minmax(320px, .42fr) minmax(0, .58fr);
}
.adminMailboxOccurrenceRow {
grid-template-columns: minmax(106px, auto) minmax(0, 1fr);
gap: 8px 12px;
min-height: 90px;
padding: 10px 11px;
}
.adminMailboxOccurrenceRow.isLoading {
background: color-mix(in srgb, var(--focus), #fff 94%);
cursor: progress;
}
.adminMailboxOccurrenceRowMain, .adminMailboxOccurrenceRowTitle {
min-width: 0;
display: flex;
}
.adminMailboxOccurrenceRowMain {
flex-direction: column;
gap: 5px;
}
.adminMailboxOccurrenceRowTitle {
justify-content: space-between;
align-items: flex-start;
gap: 9px;
}
.adminMailboxOccurrenceRowTitle > .mono {
color: var(--muted);
flex: none;
font-size: 11.5px;
}
.adminMailboxOccurrenceRowMeta {
flex-wrap: wrap;
align-items: center;
gap: 5px 7px;
min-width: 0;
display: flex;
}
.adminMailboxOccurrenceRowMeta > .mono {
color: var(--muted);
font-size: 11.5px;
}
.adminMailboxOccurrencesDetailLoading {
border: 1px solid color-mix(in srgb, var(--focus), transparent 62%);
background: color-mix(in srgb, var(--focus), #fff 96%);
min-height: 36px;
color: color-mix(in srgb, var(--focus), var(--fg) 22%);
border-radius: 7px;
gap: 7px;
padding: 7px 9px;
font-size: 12px;
font-weight: 700;
}
.adminMailboxOccurrencesDetailLoading svg {
animation: .9s linear infinite adminFinanceProcessingSpin;
}
.adminMailboxResolutionPanel input:not([type="checkbox"]), .adminMailboxResolutionPanel select, .adminMailboxResolutionPanel button, .adminMailboxResolutionTarget {
min-height: 44px;
}
.adminMailboxResolutionError {
margin: 0;
}
.adminMailboxOccurrenceLinks a {
min-height: 44px;
padding: 6px 0;
}
.adminFinanceMailboxDatasetWorkflow {
margin: 0;
list-style: none;
}
.adminFinanceMailboxDatasetWorkflow .isComplete strong {
background: color-mix(in srgb, var(--focus), #fff 86%);
color: color-mix(in srgb, var(--focus), var(--fg) 18%);
}
.adminFinanceMailboxDatasetWorkflow .isComplete .adminFinanceMailboxDatasetWorkflowText > span {
color: var(--fg);
}
.adminFinanceMailboxDatasetPage .adminHeaderTitleWrap {
max-width: none;
}
.adminFinanceMailboxDatasetPage .btn, .adminFinanceMailboxDatasetPage input:not([type="checkbox"]), .adminFinanceMailboxDatasetPage select, .adminFinanceMailboxDatasetSenderResult, .adminFinanceMailboxDatasetPager .btn {
min-height: 44px;
}
.adminFinanceMailboxDatasetMessageList:focus-visible {
outline: 3px solid color-mix(in srgb, var(--focus), transparent 58%);
outline-offset: 2px;
}
.adminFinanceMailboxDatasetHistoryFiles a, .adminFinanceMailboxDatasetPlanRows a {
align-items: center;
min-height: 44px;
display: inline-flex;
}
@media (max-width: 1500px) and (min-width: 1101px) {
.adminFinanceMailboxDatasetControlGrid {
grid-template-columns: minmax(290px, .86fr) minmax(0, 1.14fr);
}
.adminFinanceMailboxDatasetPlanCard {
grid-column: 1 / -1;
}
}
@media (max-width: 1180px) {
.adminMailboxOccurrencesFilters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adminMailboxOccurrencesGrid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.adminDocumentProcessingRouteNav a {
padding-inline: 7px;
font-size: 12px;
}
.adminMailboxOccurrencesFilterPanel > summary {
gap: 8px;
padding-inline: 10px;
}
.adminMailboxOccurrencesFilterCount > span {
display: none;
}
.adminMailboxOccurrencesFilters {
grid-template-columns: minmax(0, 1fr);
padding: 10px;
}
.adminMailboxOccurrencesFilters .adminSettingsCheckbox {
padding-top: 0;
}
.adminMailboxOccurrencesTwoFields {
grid-column: 1;
grid-template-columns: minmax(0, 1fr);
}
.adminMailboxOccurrencesActions {
grid-template-columns: repeat(2, minmax(0, 1fr));
display: grid;
}
.adminMailboxOccurrencesActions .btn {
width: 100%;
min-width: 0;
}
.adminMailboxOccurrencesMain {
padding: 10px;
}
.adminMailboxOccurrenceRow {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
padding: 11px;
}
.adminMailboxOccurrenceRow > .adminMailboxOccurrenceReason, .adminMailboxOccurrenceRowMain {
grid-area: auto / 1;
}
.adminMailboxOccurrenceRowTitle {
grid-template-columns: minmax(0, 1fr) auto;
display: grid;
}
.adminFinanceMailboxDatasetMessageList {
overscroll-behavior: contain;
scrollbar-gutter: stable;
max-height: min(68vh, 620px);
overflow: auto;
}
.adminFinanceMailboxDatasetMessage {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 12px 0;
}
.adminFinanceMailboxDatasetMessageDate {
align-items: center;
gap: 8px;
display: flex;
}
.adminFinanceMailboxDatasetMessageDate span {
margin: 0;
}
}
@media (max-width: 430px) {
.adminFinanceMailboxDatasetFilterGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adminFinanceMailboxDatasetSenderSearch {
grid-column: 1 / -1;
}
.adminFinanceMailboxDatasetPicker select {
min-height: 44px;
}
}
.adminRolesRoleSelectorStrip {
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
gap: 10px 12px;
padding-bottom: 10px;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader {
display: contents;
}
.adminRolesRoleSelectorStrip .adminRolesRailHeader > div {
display: none;
}
.adminRolesRoleSelectorStrip .adminRoleActionBtn {
border-radius: 8px;
grid-area: 1 / 2;
align-self: stretch;
min-height: 54px;
padding-inline: 14px;
}
.adminRolesRoleSelectorStrip .adminRolesList {
grid-area: 1 / 1;
gap: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
border-color: color-mix(in srgb, var(--stroke), transparent 20%);
align-content: center;
gap: 3px;
min-height: 54px;
padding: 8px 10px;
display: grid;
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive {
background: color-mix(in srgb, var(--focus), white 96%);
box-shadow: none;
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive:after {
width: 6px;
height: 6px;
}
.adminRolesRoleSelectorStrip .adminRolesListItemHeader {
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
display: grid;
}
.adminRolesRoleIcon {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
width: 24px;
height: 24px;
color: color-mix(in srgb, var(--muted), var(--focus) 18%);
background: #fff;
border-radius: 7px;
place-items: center;
display: inline-grid;
}
.adminRolesListItem.isActive .adminRolesRoleIcon {
border-color: color-mix(in srgb, var(--focus), transparent 45%);
color: color-mix(in srgb, var(--focus), black 8%);
background: color-mix(in srgb, var(--focus), white 92%);
}
.adminRolesRoleSelectorStrip .adminRolesListItemTitleWrap {
gap: 1px;
}
.adminRolesRoleSelectorStrip .adminRolesListItemTitle {
font-size: 13px;
line-height: 1.15;
}
.adminRolesRoleSelectorStrip .mono {
font-size: 12px;
}
.adminRolesRoleSelectorStrip .adminRolesOverviewPills {
display: none;
}
.adminRolesProtectedPill {
border-color: color-mix(in srgb, var(--focus), transparent 60%);
background: color-mix(in srgb, var(--focus), white 92%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminRolesSelectedOverview {
padding-top: 13px;
}
.adminRolesSelectedIntro .adminRolesEditorEyebrow {
display: none;
}
.adminRolesEditorTitle {
flex-wrap: wrap;
align-items: center;
gap: 9px;
display: inline-flex;
}
.adminRolesProtectedNotice {
background: none;
border: 0;
width: 100%;
margin-top: 7px;
padding: 0;
}
.adminRolesProtectedNoticeIcon {
flex-basis: 22px;
width: 22px;
height: 22px;
}
.adminRolesProtectedNotice > span:last-child {
display: block;
}
.adminRolesProtectedNotice strong {
margin-right: 6px;
}
.adminRolesSelectedHeader {
padding-bottom: 12px;
}
.adminRolesSelectedOverview .adminRolesImpactStats {
background: none;
}
.adminRolesImpactStats button {
min-height: 50px;
padding: 8px 14px;
}
.adminRolesImpactStats span {
color: color-mix(in srgb, var(--muted), var(--fg) 12%);
font-size: 10px;
}
.adminRolesImpactStats strong {
font-size: 17px;
line-height: 1.05;
}
.adminRolesImpactWarnings {
align-items: center;
min-height: 36px;
padding: 7px 0;
}
.adminRolesImpactWarnings li {
align-items: center;
gap: 5px;
display: inline-flex;
}
.adminRolesSelectedDetails {
padding-top: 12px;
}
.adminRolesSelectedOverview .adminRolesMetaGrid .label {
margin-bottom: 5px;
}
.adminRolesPermissionsSection > .adminSectionDisclosureToggle .adminSectionDisclosureToggleGlyph {
display: none;
}
.adminRolesPermissionsSection > .adminSectionDisclosureToggle .adminSectionDisclosureToggleMain {
gap: 0;
}
.adminRolesPermissionsSection > .adminSectionDisclosureToggle .adminFinancePanelTitle {
font-size: 18px;
}
.adminRolesPermissionsStats button {
min-height: 28px;
font-size: 12px;
}
.adminRolesMatrixToolbar {
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 8px;
display: grid;
}
.adminRolesQuickFilters {
min-width: 0;
}
.adminRolesMatrixToolbarControls {
grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(112px, 132px)) auto;
justify-content: stretch;
display: grid;
}
.adminRolesQuickFilters .adminRoleActionBtn, .adminRolesMatrixToolbarControls .adminRoleActionBtn {
border-radius: 7px;
min-height: 32px;
font-size: 12px;
}
.adminRolesMatrixToolbarControls > input.input {
flex: auto;
width: 100%;
min-width: 0;
max-width: 420px;
min-height: 34px;
}
.adminRolesMatrixToolbarControls > .adminRolesMatrixSelect {
flex: auto;
width: 100%;
min-width: 0;
min-height: 34px;
}
.adminRolesMatrixToolbarControls > .adminRoleActionBtn {
white-space: nowrap;
}
.adminRolesModuleGrid {
border-radius: 8px;
}
.adminRolesModuleSummary {
min-height: 38px;
padding: 7px 12px;
}
.adminRolesModuleSummary .adminSectionDisclosureToggleGlyph {
width: 18px;
height: 18px;
}
.adminRolesModuleSummary .adminSectionDisclosureToggleMain {
gap: 7px;
}
.adminRolesModuleSummary .adminRolesModuleEyebrow {
font-size: 13px;
}
.adminRolesModuleSummary .adminRolesModuleTitle {
font-size: 12px;
}
.adminRolesModuleSummary .adminSectionDisclosureSummary .pill {
min-height: 20px;
padding: 2px 7px;
}
.adminRolesModuleDetails .adminRolesModuleCard {
border-top-color: color-mix(in srgb, var(--stroke), transparent 8%);
}
.adminRolesMatrixTable {
min-width: 760px;
font-size: 12px;
}
.adminRolesMatrixTable th, .adminRolesMatrixTable td {
padding: 8px 10px;
}
.adminRolesMatrixTable thead th {
letter-spacing: .06em;
padding-top: 7px;
padding-bottom: 7px;
}
.adminRolesMatrixTableSettings th:first-child, .adminRolesMatrixTableSettings td:first-child {
width: 34%;
}
.adminRolesMatrixTableSettings th:nth-child(2), .adminRolesMatrixTableSettings td:nth-child(2) {
text-align: left;
width: 34%;
}
.adminRolesMatrixTableSettings th:nth-child(3), .adminRolesMatrixTableSettings th:nth-child(4), .adminRolesMatrixTableSettings th:nth-child(5), .adminRolesMatrixTableSettings td:nth-child(3), .adminRolesMatrixTableSettings td:nth-child(4), .adminRolesMatrixTableSettings td:nth-child(5) {
text-align: center;
width: 7%;
}
.adminRolesMatrixTableSettings th:last-child, .adminRolesMatrixTableSettings td:last-child {
width: 11%;
}
.adminRolesMatrixTableCapabilities th:first-child {
width: 56%;
}
.adminRolesMatrixTableCapabilities th:not(:first-child), .adminRolesMatrixTableCapabilities td:not(:first-child) {
width: 14.5%;
}
.adminRolesMatrixDescriptionCell {
text-align: left;
}
.adminRolesMatrixDash {
color: color-mix(in srgb, var(--muted), white 6%);
font-weight: 700;
}
.adminRolesMatrixToggle {
width: 26px;
min-height: 26px;
margin: 0;
padding: 4px;
}
.adminRolesRiskText {
border-radius: 999px;
align-items: center;
min-height: 22px;
padding: 2px 7px;
font-size: 12px;
display: inline-flex;
}
.adminRolesRiskText-low {
color: color-mix(in srgb, var(--success), black 10%);
}
.adminRolesRiskText-medium {
color: color-mix(in srgb, var(--warning), black 22%);
}
.adminRolesRiskText-high {
color: color-mix(in srgb, var(--warning), black 34%);
}
.adminRolesRiskText-critical {
color: color-mix(in srgb, var(--danger), black 18%);
}
.adminRolesDangerZone {
min-height: 64px;
padding-top: 10px;
}
@media (max-width: 1120px) {
.adminRolesRoleSelectorStrip {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesRoleSelectorStrip .adminRoleActionBtn, .adminRolesRoleSelectorStrip .adminRolesList {
grid-column: 1;
}
.adminRolesRoleSelectorStrip .adminRoleActionBtn {
grid-row: 2;
justify-self: start;
}
.adminRolesMatrixToolbar {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesMatrixToolbarControls {
justify-content: flex-start;
}
}
@media (max-width: 760px) {
.adminRolesRoleSelectorStrip .adminRoleActionBtn {
grid-row: 2;
justify-self: start;
min-height: 38px;
padding-inline: 13px;
width: auto !important;
}
.adminRolesRoleSelectorStrip .adminRolesList {
grid-area: 1 / 1;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
flex-basis: min(78vw, 285px);
}
.adminRolesImpactStats button:nth-child(2n) {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
}
.adminRolesImpactStats button:nth-child(5) {
grid-column: 1 / -1;
}
.adminRolesSelectedOverview .adminRolesMetaGrid {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesMatrixToolbar {
gap: 8px;
}
.adminRolesQuickFilters {
scrollbar-width: none;
flex-wrap: nowrap;
padding-bottom: 2px;
overflow-x: auto;
}
.adminRolesQuickFilters::-webkit-scrollbar {
display: none;
}
}
.adminRolesRoleSelectorStrip {
gap: 12px;
padding-bottom: 14px;
}
.adminRolesRoleSelectorStrip .adminRolesListItem {
border-radius: 10px;
min-height: 58px;
padding: 10px 13px;
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive {
box-shadow: none;
}
.adminRolesRoleSelectorStrip .adminRolesListItem.isActive:after {
display: none;
}
.adminRolesRoleSelectorStrip .adminRoleActionBtn {
border: 1px dashed color-mix(in srgb, var(--stroke), black 8%);
min-height: 58px;
color: var(--fg);
box-shadow: none;
background: #fff;
}
.adminRolesRoleSelectorStrip .adminRoleActionBtn:hover, .adminRolesRoleSelectorStrip .adminRoleActionBtn:focus-visible {
border-color: color-mix(in srgb, var(--focus), transparent 28%);
background: color-mix(in srgb, var(--focus), white 97%);
color: color-mix(in srgb, var(--focus), black 12%);
}
.adminRolesSelectedOverview {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
background: #fff;
border-radius: 10px;
grid-template-columns: minmax(0, 1fr) minmax(520px, .92fr);
gap: 12px 18px;
padding: 13px 13px 12px;
display: grid;
}
.adminRolesSelectedHeader {
border-bottom: 0;
grid-column: 1;
grid-template-columns: 48px minmax(0, 1fr);
align-items: start;
gap: 13px;
padding-bottom: 0;
display: grid;
}
.adminRolesSelectedHeroIcon {
border: 1px solid color-mix(in srgb, var(--focus), transparent 58%);
background: color-mix(in srgb, var(--focus), white 94%);
width: 46px;
height: 46px;
color: color-mix(in srgb, var(--focus), black 8%);
border-radius: 999px;
place-items: center;
display: inline-grid;
}
.adminRolesSelectedHeroIcon svg {
width: 24px;
height: 24px;
}
.adminRolesSelectedIntro {
max-width: none;
}
.adminRolesSelectedIntro > .muted {
font-size: 13px;
}
.adminRolesProtectedNotice {
color: color-mix(in srgb, var(--muted), var(--fg) 10%);
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 12px;
line-height: 1.35;
display: flex;
}
.adminRolesProtectedNoticeIcon {
border-radius: 999px;
flex-basis: 24px;
width: 24px;
height: 24px;
}
.adminRolesSelectedImpact {
display: contents;
}
.adminRolesSelectedOverview .adminRolesImpactStats {
background: none;
border: 0;
grid-column: 2;
grid-template-columns: repeat(5, minmax(86px, 1fr));
align-self: start;
gap: 8px;
display: grid;
}
.adminRolesImpactStats button {
border: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
text-align: left;
background: #fff;
border-radius: 8px;
min-height: 50px;
padding: 8px 10px;
}
.adminRolesImpactStats button + button {
border-left: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
}
.adminRolesImpactStats span {
font-size: 9px;
line-height: 1.1;
}
.adminRolesImpactStats strong {
margin-top: 3px;
font-size: 17px;
}
.adminRolesImpactStats button:nth-child(4) strong {
color: color-mix(in srgb, var(--warning), black 34%);
}
.adminRolesImpactStats button:nth-child(5) strong {
color: color-mix(in srgb, var(--danger), black 12%);
}
.adminRolesImpactWarnings {
border: 1px solid color-mix(in srgb, var(--danger), transparent 78%);
background: color-mix(in srgb, var(--danger), white 97%);
border-radius: 8px;
grid-column: 1 / -1;
grid-template-columns: max-content minmax(0, 1fr);
min-height: 38px;
margin-top: 3px;
padding: 9px 12px;
}
.adminRolesImpactWarnings li {
padding-inline: 8px;
font-size: 11px;
}
.adminRolesSelectedDetails {
border-top: 0;
grid-column: 1 / -1;
padding: 0;
}
.adminRolesSelectedOverview .adminRolesMetaGrid {
grid-template-columns: minmax(0, 1fr) max-content;
gap: 10px 14px;
}
.adminRolesSelectedOverview .input {
min-height: 36px;
}
.adminRolesSelectedOverview .adminRolesFieldWide .adminSettingsTextarea {
min-height: 60px;
}
.adminRolesToggle {
min-height: 36px;
padding: 4px 0;
}
.adminRolesToggle span {
white-space: nowrap;
}
.adminRolesPermissionsSection {
margin-top: 2px;
padding-top: 13px !important;
}
.adminRolesPermissionsStats button {
min-height: 28px;
padding: 5px 10px;
}
.adminRolesQuickFilters .adminRoleActionBtn, .adminRolesMatrixToolbarControls .adminRoleActionBtn, .adminRolesMatrixToolbarControls > input.input, .adminRolesMatrixToolbarControls > .adminRolesMatrixSelect {
min-height: 32px;
}
.adminRolesMatrixToolbarControls {
grid-template-columns: minmax(250px, 390px) repeat(3, minmax(142px, 164px)) auto;
gap: 7px;
}
.adminRolesMatrixToolbarControls > input.input {
max-width: none;
font-size: 13px;
}
.adminRolesDangerZone {
border: 1px solid color-mix(in srgb, var(--danger), transparent 42%);
background: #fff;
border-radius: 8px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 0;
padding: 10px 12px;
}
.adminRolesDangerZone .btnDanger {
border-radius: 7px;
min-height: 38px;
padding-inline: 15px;
}
@media (max-width: 1220px) {
.adminRolesSelectedOverview {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesSelectedOverview .adminRolesImpactStats {
grid-column: 1;
}
}
@media (max-width: 760px) {
.adminRolesRoleSelectorStrip .adminRoleActionBtn {
border-style: solid;
min-height: 38px;
}
.adminRolesSelectedOverview {
padding: 12px;
}
.adminRolesSelectedHeader {
grid-template-columns: minmax(0, 1fr);
}
.adminRolesSelectedHeroIcon {
display: none;
}
.adminRolesSelectedOverview .adminRolesImpactStats {
border-top: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-left: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
.adminRolesImpactStats button {
border: 0;
border-right: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 8%);
border-radius: 0;
}
.adminRolesImpactStats button:nth-child(2n) {
border-left: 0;
}
.adminRolesImpactWarnings {
background: none;
border-width: 0 0 1px;
border-radius: 0;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
padding: 8px 0;
}
.adminRolesImpactWarnings ul {
gap: 5px;
display: grid;
}
.adminRolesImpactWarnings li, .adminRolesImpactWarnings li:first-child {
border-left: 0;
justify-content: flex-start;
padding: 0;
}
.adminRolesSelectedOverview .adminRolesMetaGrid, .adminRolesMatrixToolbarControls, .adminRolesDangerZone {
grid-template-columns: minmax(0, 1fr);
}
}
.adminPayslipsPage {
flex-direction: column;
gap: 18px;
display: flex;
container: adminPayslipsPage / inline-size;
}
.adminPayslipsSummaryStrip {
z-index: 90;
border: 1px solid var(--stroke);
background: var(--surface);
min-height: 0;
box-shadow: var(--shadow-sm);
border-radius: 10px;
align-items: center;
gap: 10px 18px;
padding: 12px 16px;
display: grid;
position: relative;
overflow: visible;
}
.adminPayslipsSummaryStrip.isMonthlyPeriod, .adminPayslipsSummaryStrip.isSpecialPeriod {
grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
grid-template-areas: "periodTabs monthPager summary actions";
column-gap: 12px;
padding-inline: 10px;
}
.adminPayslipsSummaryStrip.isMenuOpen {
isolation: isolate;
z-index: 10000;
}
.adminPayslipsSummaryStrip.isConnectorMissing {
grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
grid-template-areas: "periodTabs monthPager . actions"
"summary summary summary summary";
}
.adminPayslipsSummaryStrip.isConnectorMissing .adminPayslipsSummaryMain {
justify-self: stretch;
}
.adminPayslipsMonthPager, .adminPayslipsSummaryActions, .adminPayslipsRowActions {
align-items: center;
gap: 8px;
display: flex;
}
.adminPayslipsMonthPager {
grid-area: monthPager;
justify-self: start;
gap: 6px;
}
.adminPayslipsSummaryMain {
grid-area: summary;
justify-self: center;
align-items: center;
gap: 16px;
min-width: 0;
display: flex;
}
.adminPayslipsSummaryStrip.isMonthlyPeriod .adminPayslipsSummaryMain {
justify-self: end;
}
.adminPayslipsSummaryStrip.isSpecialPeriod .adminPayslipsSummaryMain {
place-self: center end;
}
.adminPayslipsSummaryStrip.isSpecialPeriod .adminPayslipsSummaryActions {
align-self: center;
gap: 10px;
}
.adminPayslipsSummaryStrip.isSpecialPeriod .adminPayslipsSummaryActions .btn {
font-size: var(--ops-font-action, 12px);
padding-inline: 8px;
}
.adminPayslipsPagerButton {
justify-content: center;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
}
.adminPayslipsMonthButton {
min-width: 144px;
max-width: 280px;
min-height: 44px;
color: var(--text);
cursor: default;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
justify-content: center;
gap: 7px;
}
.adminPayslipsSummaryStrip.isMonthlyPeriod .adminPayslipsMonthButton {
min-width: 136px;
}
.adminPayslipsSummaryStrip.isSpecialPeriod .adminPayslipsMonthButton {
min-width: 132px;
max-width: 184px;
}
.adminPayslipsPeriodControls {
grid-area: periodTabs;
justify-self: start;
align-items: center;
min-width: 0;
display: flex;
}
.adminPayslipsPeriodTypeGroup {
border: 1px solid color-mix(in srgb, var(--focus) 24%, var(--stroke));
background: color-mix(in srgb, var(--focus) 5%, #fff);
border-radius: 9px;
align-items: center;
gap: 4px;
min-height: 50px;
padding: 2px;
display: inline-flex;
}
.adminPayslipsPeriodTypeButton {
border: 1px solid color-mix(in srgb, var(--stroke) 84%, var(--focus) 16%);
min-height: 44px;
color: color-mix(in srgb, var(--text) 86%, var(--muted));
font: inherit;
font-size: var(--ops-font-action, 12px);
white-space: nowrap;
cursor: pointer;
background: #fff;
border-radius: 7px;
padding: 0 13px;
font-weight: 800;
transition: border-color .14s, background-color .14s, color .14s, box-shadow .14s;
}
.adminPayslipsPeriodTypeButton:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--focus) 44%, var(--stroke));
background: color-mix(in srgb, var(--focus) 8%, #fff);
color: color-mix(in srgb, var(--focus) 82%, var(--text));
}
.adminPayslipsPeriodTypeButton.isActive {
color: #fff;
border-color: var(--focus);
background: var(--focus);
box-shadow: 0 1px 7px color-mix(in srgb, var(--focus) 26%, transparent);
}
.adminPayslipsPeriodTypeButton.isActive:hover:not(:disabled), .adminPayslipsPeriodTypeButton.isActive:focus-visible {
color: #fff;
border-color: var(--focus);
background: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}
.adminPayslipsPeriodTypeButton:disabled {
cursor: default;
opacity: .65;
}
.adminPayslipsSummaryDivider {
background: var(--stroke);
width: 1px;
height: 46px;
}
.adminPayslipsConnectorInline {
align-items: center;
gap: 10px;
min-width: 212px;
display: flex;
}
.adminPayslipsConnectorDot {
background: var(--danger);
width: 9px;
height: 9px;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
border-radius: 999px;
}
.adminPayslipsConnectorInline.isReady .adminPayslipsConnectorDot {
background: var(--success);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
}
.adminPayslipsConnectorInline strong {
color: var(--text);
font-size: var(--ops-font-primary, 13px);
line-height: 1.15;
display: block;
}
.adminPayslipsConnectorInline span:not(.adminPayslipsConnectorDot) {
color: var(--muted);
font-size: var(--ops-font-meta, 12px);
margin-top: 3px;
display: block;
}
.adminPayslipsSummaryMetrics {
grid-template-columns: repeat(4, max-content);
align-items: center;
gap: 8px 10px;
display: grid;
}
.adminPayslipsSummaryMetrics div {
justify-items: start;
gap: 3px;
display: grid;
}
.adminPayslipsSummaryMetrics span {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
text-transform: uppercase;
font-weight: 800;
line-height: 1;
}
.adminPayslipsSummaryMetrics strong {
color: var(--text);
font-size: 14px;
line-height: 1;
}
.adminPayslipsSummaryActions {
z-index: 95;
grid-area: actions;
justify-content: flex-end;
place-self: start end;
min-width: 0;
margin-left: 0;
position: relative;
}
.adminPayslipsSummaryStrip.isMonthlyPeriod .adminPayslipsSummaryActions {
gap: 10px;
}
.adminPayslipsSummaryActions .btn {
min-height: 44px;
font-size: var(--ops-font-action, 12px);
white-space: nowrap;
align-items: center;
gap: 6px;
padding-inline: 10px;
display: inline-flex;
}
.adminPayslipsSummaryStrip.isMonthlyPeriod .adminPayslipsSummaryActions .btn {
font-size: var(--ops-font-action, 12px);
padding-inline: 8px;
}
.adminPayslipsMoreWrap {
z-index: 120;
position: relative;
}
.adminPayslipsMoreButton {
justify-content: center;
min-width: 82px;
}
.adminPayslipsMoreMenu {
z-index: 10001;
border: 1px solid var(--border);
background: var(--bg-2, #fff);
border-radius: 8px;
gap: 3px;
width: 310px;
max-width: min(310px, 100vw - 48px);
padding: 8px;
display: grid;
position: absolute;
top: calc(100% + 8px);
right: 0;
box-shadow: 0 16px 34px #11182729;
}
.adminPayslipsMoreMenu button, .adminPayslipsMoreLink {
min-height: 40px;
color: var(--text);
font: inherit;
font-size: var(--ops-font-primary, 13px);
text-align: left;
background: none;
border: 0;
border-radius: 7px;
align-items: flex-start;
gap: 10px;
padding: 9px 10px;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
display: flex;
}
.adminPayslipsMoreMenu svg {
flex: none;
margin-top: 1px;
}
.adminPayslipsMoreMenu button:not(:disabled), .adminPayslipsMoreLink {
cursor: pointer;
}
.adminPayslipsMoreMenu button:hover:not(:disabled), .adminPayslipsMoreLink:hover {
background: var(--surface-muted);
}
.adminPayslipsMoreMenu button:disabled {
color: var(--muted);
}
.adminPayslipsMessage {
font-size: var(--ops-font-primary, 13px);
border-radius: 8px;
margin: 0;
padding: 10px 12px;
}
.adminPayslipsMessage.isError {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--border));
}
.adminPayslipsFilterBar {
z-index: 40;
position: relative;
}
.adminPayslipsFilterBar .adminListFilterPinnedGrid.adminListFilterGridVariantDocuments, .adminPayslipsFilterBar .adminListFilterPinnedGrid.adminListFilterGridVariantDocuments:not(.isExpanded) {
grid-template-columns: minmax(280px, 1.18fr) minmax(152px, .52fr) minmax(152px, .52fr) minmax(190px, .84fr) max-content;
}
.adminPayslipsFilterReceipt {
grid-area: period;
}
.adminPayslipsFilterClear {
grid-area: action;
place-self: center end;
min-height: 44px;
padding: 0 8px;
}
.adminPayslipsTable {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 1336px;
}
.adminPayslipsColWorker {
width: 22%;
}
.adminPayslipsColMappedWorker {
width: auto;
}
.adminPayslipsColPeriod {
width: 13%;
}
.adminPayslipsColPdf {
width: 8%;
}
.adminPayslipsColStatus {
width: 9%;
}
.adminPayslipsColReceipt {
width: 13%;
}
.adminPayslipsColActions {
width: 292px;
}
.adminOperationsListPage .adminPayslipsActionsHeader, .adminOperationsListPage .adminPayslipsActionsCell {
width: 292px;
min-width: 292px;
max-width: 292px;
}
.adminOperationsListPage .adminPayslipsTable thead th {
text-align: left;
white-space: nowrap;
padding: 13px 12px;
}
.adminOperationsListPage .adminPayslipsTable thead th.adminPayslipsActionsHeader {
text-align: right;
padding-inline: 16px 18px;
}
.adminOperationsListPage .adminPayslipsTable tbody td.adminPayslipsActionsCell {
padding-inline: 12px;
}
.adminOperationsListPage .adminPayslipsTable tbody td {
border-bottom: 1px solid var(--stroke);
font-size: var(--ops-font-row, 13px);
text-align: left;
padding: 14px 12px;
line-height: 1.3;
}
.adminOperationsListPage .adminPayslipsTable tbody tr:last-child td {
border-bottom: 0;
}
.adminPayslipsTableWrap {
overflow-anchor: none;
max-width: 100%;
box-shadow: var(--shadow-sm);
overflow: auto hidden;
}
.adminPayslipsTableMeta {
border-bottom: 1px solid color-mix(in srgb, var(--stroke), transparent 12%);
background: #fff;
padding: 9px 14px;
}
.adminPayslipsTableMeta .adminListFilterMetaRow {
padding-top: 0;
}
.adminPayslipsTableMeta .adminListFilterResultCount {
padding-inline-start: 0;
font-weight: 700;
}
.adminPayslipsTableMeta .adminListFilterRowsField, .adminPayslipsTableMeta .adminListFilterRowsField .listboxTrigger {
min-height: 44px;
}
.adminPayslipsWorkerName, .adminPayslipsSubtle, .adminPayslipsMono, .adminPayslipsFile, .adminPayslipsReceipt, .adminPayslipsMappingSource, .adminPayslipsErrorText {
display: block;
}
.adminPayslipsWorkerName {
overflow-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
}
.adminPayslipsSubtle {
color: var(--muted);
font-size: var(--ops-font-meta, 12px);
margin-top: 3px;
}
.adminPayslipsMono {
font-family: var(--font-mono);
font-size: var(--ops-font-primary, 13px);
}
.adminPayslipsWorkerSelect {
width: min(100%, 360px);
min-width: 260px;
}
.adminPayslipsMappingEditRow {
align-items: center;
gap: 8px;
min-width: 300px;
display: flex;
}
.adminPayslipsMappingLine {
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
display: flex;
}
.adminPayslipsMappedWorker {
min-width: 0;
max-width: 100%;
color: var(--text);
font-size: var(--ops-font-primary, 13px);
overflow-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
overflow: hidden;
}
.adminPayslipsMappingBadge {
border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
min-height: 22px;
color: var(--muted);
background: var(--surface);
font-size: var(--ops-font-micro, 11px);
white-space: nowrap;
border-radius: 999px;
align-items: center;
padding: 0 7px;
font-weight: 800;
display: inline-flex;
}
.adminPayslipsMappingBadge.isAuto {
color: color-mix(in srgb, var(--success), black 12%);
border-color: color-mix(in srgb, var(--success) 26%, transparent);
background: color-mix(in srgb, var(--success) 9%, transparent);
}
.adminPayslipsMappingBadge.isInactive {
color: color-mix(in srgb, var(--warning), black 26%);
border-color: color-mix(in srgb, var(--warning) 34%, transparent);
background: color-mix(in srgb, var(--warning) 10%, transparent);
}
.adminPayslipsMappingSource {
color: var(--muted);
font-size: var(--ops-font-meta, 12px);
margin-top: 4px;
font-weight: 700;
}
.adminPayslipsMappingSource.isAuto {
color: var(--success);
}
.adminPayslipsMappingEditBtn {
width: 30px;
min-width: 30px;
height: 30px;
min-height: 30px;
color: var(--muted);
background: none;
border: 0;
justify-content: center;
padding: 0;
}
.adminPayslipsMappingCancelBtn {
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
color: var(--muted);
background: var(--surface);
justify-content: center;
padding: 0;
}
.adminPayslipsMappingCancelBtn:hover:not(:disabled) {
color: var(--text);
background: var(--surface-muted);
}
.adminPayslipsPeriodBadge {
width: fit-content;
min-height: 22px;
font-size: var(--ops-font-micro, 11px);
white-space: nowrap;
border-radius: 999px;
align-items: center;
padding: 0 8px;
font-weight: 850;
line-height: 1;
display: inline-flex;
}
.adminPayslipsPeriodBadge.isMonthly {
color: var(--muted);
background: var(--surface-muted);
}
.adminPayslipsPeriodBadge.isSpecial {
color: color-mix(in srgb, var(--warning), black 28%);
background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.adminPayslipsFile {
color: var(--text);
white-space: nowrap;
align-items: center;
gap: 6px;
display: inline-flex;
}
.adminPayslipsSourceRevision {
width: fit-content;
min-height: 21px;
font-size: var(--ops-font-micro, 11px);
white-space: nowrap;
border-radius: 999px;
align-items: center;
margin-top: 5px;
padding: 0 7px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.adminPayslipsSourceRevision.isChanged {
color: color-mix(in srgb, var(--warning), black 30%);
background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.adminPayslipsSourceRevision.isCurrent {
color: color-mix(in srgb, var(--success), black 10%);
background: color-mix(in srgb, var(--success) 10%, transparent);
}
.adminPayslipsSourceRevision.isFailed {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.adminPayslipsSourceRevision.isUnknown {
color: var(--muted);
background: var(--surface-muted);
}
.adminPayslipsStatus {
min-height: 24px;
font-size: var(--ops-font-meta, 12px);
border-radius: 999px;
align-items: center;
padding: 0 9px;
font-weight: 800;
display: inline-flex;
}
.adminPayslipsStatus.isSent, .adminPayslipsStatus.isReady {
color: var(--success);
background: color-mix(in srgb, var(--success) 10%, transparent);
}
.adminPayslipsStatus.isUnmatched {
color: var(--warning);
background: color-mix(in srgb, var(--warning) 13%, transparent);
}
.adminPayslipsStatus.isFailed {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.adminPayslipsStatus.isNeutral {
color: var(--muted);
background: var(--surface-muted);
}
.adminPayslipsErrorText {
color: var(--danger);
font-size: var(--ops-font-meta, 12px);
max-width: 220px;
margin-top: 4px;
}
.adminPayslipsReceipt {
width: fit-content;
min-height: 24px;
font-size: var(--ops-font-meta, 12px);
white-space: nowrap;
border: 1px solid #0000;
border-radius: 999px;
align-items: center;
padding: 0 9px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.adminPayslipsSignatureReceipt {
width: fit-content;
min-height: 22px;
font-size: var(--ops-font-micro, 11px);
white-space: nowrap;
border: 1px solid #0000;
border-radius: 999px;
align-items: center;
margin-top: 5px;
padding: 0 8px;
font-weight: 820;
line-height: 1;
display: inline-flex;
}
.adminPayslipsSignatureReceipt.isSigned {
color: color-mix(in srgb, var(--ok), black 12%);
border-color: color-mix(in srgb, var(--ok) 25%, transparent);
background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.adminPayslipsSignatureReceipt.isCorrection {
color: color-mix(in srgb, var(--warning), black 30%);
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
background: color-mix(in srgb, var(--warning) 13%, transparent);
}
.adminPayslipsSignatureReceipt.isPending {
color: color-mix(in srgb, var(--focus), black 12%);
border-color: color-mix(in srgb, var(--focus) 25%, transparent);
background: color-mix(in srgb, var(--focus) 9%, transparent);
}
.adminPayslipsSignatureReceipt.isNeutral {
color: var(--muted);
border-color: color-mix(in srgb, var(--stroke), transparent 32%);
background: var(--surface-muted);
}
.adminPayslipsCorrectionReadiness {
width: fit-content;
max-width: 190px;
font-size: var(--ops-font-micro, 11px);
margin-top: 5px;
font-weight: 700;
line-height: 1.3;
display: block;
}
.adminPayslipsCorrectionReadiness.isReady {
color: color-mix(in srgb, var(--success), black 12%);
}
.adminPayslipsCorrectionReadiness.isBlocked {
color: color-mix(in srgb, var(--warning), black 32%);
}
.adminPayslipsReissueDialog {
width: min(620px, 100%);
}
.adminPayslipsSendDialog {
width: min(560px, 100%);
}
.adminPayslipsSendSummary {
border-block: 1px solid var(--border);
margin: 0;
display: grid;
}
.adminPayslipsSendSummary > div {
grid-template-columns: 144px minmax(0, 1fr);
align-items: baseline;
column-gap: 16px;
padding: 12px 2px;
display: grid;
}
.adminPayslipsSendSummary > div + div {
border-top: 1px solid var(--border);
}
.adminPayslipsSendSummary dt {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
letter-spacing: .035em;
text-transform: uppercase;
font-weight: 800;
line-height: 1.35;
}
.adminPayslipsSendSummary dd {
gap: 2px;
min-width: 0;
margin: 0;
display: grid;
}
.adminPayslipsSendSummary dd strong {
line-height: 1.35;
}
.adminPayslipsSendSummary dd strong, .adminPayslipsSendSummary dd span {
overflow-wrap: anywhere;
}
.adminPayslipsSendSummary dd span {
color: var(--muted);
font-family: var(--font-mono);
font-size: var(--ops-font-meta, 12px);
}
.adminPayslipsReissueSummary {
border-block: 1px solid var(--border);
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
display: grid;
}
.adminPayslipsReissueSummary > div {
gap: 5px;
min-width: 0;
padding: 12px;
display: grid;
}
.adminPayslipsReissueSummary > div + div {
border-left: 1px solid var(--border);
}
.adminPayslipsReissueSummary dt {
color: var(--muted);
font-size: var(--ops-font-micro, 11px);
font-weight: 750;
}
.adminPayslipsReissueSummary dd {
color: var(--text);
font-family: var(--font-mono);
margin: 0;
font-size: 18px;
font-weight: 800;
}
.adminPayslipsReceipt.isOpened {
color: color-mix(in srgb, var(--focus), black 10%);
border-color: color-mix(in srgb, var(--focus) 28%, transparent);
background: color-mix(in srgb, var(--focus) 10%, transparent);
}
.adminPayslipsReceipt.isDelivered {
color: color-mix(in srgb, var(--ok), black 10%);
border-color: color-mix(in srgb, var(--ok) 26%, transparent);
background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.adminPayslipsReceipt.isNotOpened {
color: var(--muted);
border-color: color-mix(in srgb, var(--stroke), transparent 32%);
background: var(--surface-muted);
}
.adminPayslipsIconBtn {
flex: 0 0 44px;
justify-content: center;
align-items: center;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
display: inline-flex;
}
.adminPayslipsPager {
overflow-anchor: none;
border-top: 1px solid var(--border);
padding: 12px 14px;
}
.adminPayslipsEmptyCell {
color: var(--muted);
text-align: center;
padding: 30px 16px;
}
@container adminPayslipsPage (max-width: 1480px) {
.adminPayslipsSummaryStrip.isSpecialPeriod {
grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
grid-template-areas: "periodTabs monthPager summary actions";
column-gap: 12px;
}
.adminPayslipsSummaryStrip.isSpecialPeriod.isConnectorMissing {
grid-template-areas: "periodTabs monthPager . actions"
"summary summary summary summary";
}
}
@container adminPayslipsPage (max-width: 1180px) {
.adminPayslipsSummaryStrip.isMonthlyPeriod, .adminPayslipsSummaryStrip.isSpecialPeriod {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "periodTabs monthPager"
"summary summary"
"actions actions";
}
.adminPayslipsSummaryMain {
justify-self: stretch;
}
.adminPayslipsSummaryActions {
flex-wrap: wrap;
align-self: start;
width: 100%;
min-width: 0;
}
}
@container adminPayslipsPage (max-width: 760px) {
.adminPayslipsSummaryStrip.isMonthlyPeriod, .adminPayslipsSummaryStrip.isSpecialPeriod {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "periodTabs"
"monthPager"
"summary"
"actions";
align-items: stretch;
}
.adminPayslipsMonthPager, .adminPayslipsPeriodControls, .adminPayslipsSummaryActions {
width: 100%;
}
.adminPayslipsSummaryDivider {
width: 100%;
height: 1px;
}
.adminPayslipsSummaryMain {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.adminPayslipsPeriodControls {
flex-direction: column;
align-items: stretch;
}
.adminPayslipsPeriodTypeGroup {
width: 100%;
max-width: none;
}
.adminPayslipsPeriodTypeButton {
flex: 1 1 0;
}
.adminPayslipsConnectorInline, .adminPayslipsSummaryMetrics, .adminPayslipsSummaryActions {
margin-left: 0;
}
.adminPayslipsConnectorInline {
min-width: 0;
}
.adminPayslipsSummaryMetrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adminPayslipsReissueSummary {
grid-template-columns: minmax(0, 1fr);
}
.adminPayslipsSendSummary > div {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.adminPayslipsReissueSummary > div + div {
border-top: 1px solid var(--border);
border-left: 0;
}
.adminPayslipsSummaryActions {
flex-direction: column;
align-items: stretch;
}
.adminPayslipsSummaryActions .btn {
width: 100%;
}
.adminPayslipsMoreMenu {
width: 100%;
left: 0;
right: auto;
}
.adminPayslipsMappingLine, .adminPayslipsMappingEditRow {
flex-wrap: wrap;
align-items: flex-start;
min-width: 260px;
}
.adminPayslipsPager {
padding-inline: 10px;
}
}
[data-document-task-focus] {
scroll-margin-block: 96px;
}
[data-document-task-focus]:focus {
outline: 3px solid color-mix(in srgb, var(--focus), transparent 34%);
outline-offset: 3px;
}
@media (min-width: 1101px) {
.adminDocumentsPreviewReadingPane .sharedDocumentViewer {
flex: 1;
}
.adminDocumentsPreviewReadingPane .sharedDocumentViewer .documentViewerViewport {
flex: 1;
height: auto;
min-height: 0;
max-height: none;
}
}
@media (max-width: 980px) {
body[data-admin-mobile-chat-thread] {
scrollbar-gutter: auto;
overscroll-behavior: none;
width: 100%;
height: 100%;
overflow: hidden;
}
html:has(body[data-admin-mobile-chat-thread]) {
scrollbar-gutter: auto;
overscroll-behavior: none;
width: 100%;
height: 100%;
overflow: hidden;
}
body[data-admin-mobile-chat-thread] {
position: fixed;
inset: 0;
}
}
/*# sourceMappingURL=%5Broot-of-the-server%5D__0sc.q1m._.css.map*/