/* ==========================================================================
   SurveyJS "Sharp" theme alignment
   Maps Pico CSS variables to match the SurveyJS theme used in surveys,
   so the admin UI and survey UI feel visually cohesive.
   ========================================================================== */

/* ---------- Light mode ---------- */
:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] {
    /* Typography — match SurveyJS Open Sans */
    --pico-font-family: "Open Sans", sans-serif;
    --pico-font-size: 16px;
    --pico-line-height: 1.5;
    --pico-font-weight: 400;

    /* Primary — SurveyJS #336699 */
    --pico-primary: #336699;
    --pico-primary-background: #336699;
    --pico-primary-hover: rgba(46, 92, 138, 1);
    --pico-primary-hover-background: rgba(46, 92, 138, 1);
    --pico-primary-focus: rgba(51, 102, 153, 0.25);
    --pico-primary-inverse: #fff;

    /* Surfaces & backgrounds — SurveyJS light palette */
    --pico-background-color: rgba(255, 255, 255, 1);
    --pico-card-background-color: rgba(255, 255, 255, 1);
    --pico-card-sectioning-background-color: rgba(238, 238, 238, 1);

    /* Text — SurveyJS forecolor */
    --pico-color: rgba(0, 0, 0, 0.91);
    --pico-muted-color: rgba(0, 0, 0, 0.6);
    --pico-muted-border-color: rgba(0, 0, 0, 0.16);

    /* Borders & radius — SurveyJS sharp 4px */
    --pico-border-radius: 4px;
    --pico-border-color: rgba(0, 0, 0, 0.25);

    /* Form elements — tighter to match SurveyJS inputs */
    --pico-form-element-border-color: rgba(0, 0, 0, 0.25);
    --pico-form-element-focus-color: var(--pico-primary-focus);
    --pico-form-element-active-border-color: var(--pico-primary);

    /* Semantic colors — from SurveyJS special-* tokens */
    --pico-ins-color: rgba(25, 179, 148, 1);
    --pico-del-color: rgba(229, 10, 62, 1);

    /* Shadows — SurveyJS shadow-small / shadow-medium */
    --pico-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
    --pico-card-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);

    /* Table — disable stripes, use hover */
    --pico-table-row-stripped-background-color: transparent;
    --pico-table-hover-background-color: rgba(0, 0, 0, 0.03);
}

/* ---------- Dark mode (system preference OR manual toggle) ---------- */
@media (prefers-color-scheme: dark) {
    :host(:not([data-theme=light])), :root:not([data-theme=light]) {
        /* Typography */
        --pico-font-family: "Open Sans", sans-serif;

        /* Primary — lighter blue for dark backgrounds */
        --pico-primary: #2e89b6;
        --pico-primary-background: #2e89b6;
        --pico-primary-hover: #3d9dc9;
        --pico-primary-hover-background: #3d9dc9;
        --pico-primary-focus: rgba(46, 137, 182, 0.25);
        --pico-primary-inverse: #fff;

        /* Surfaces — aligned to SurveyJS dark palette */
        --pico-background-color: rgb(19, 23, 31);
        --pico-card-background-color: rgb(19, 23, 31);
        --pico-card-sectioning-background-color: rgba(26, 26, 26, 1);

        /* Text */
        --pico-color: rgba(255, 255, 255, 0.78);
        --pico-muted-color: rgba(255, 255, 255, 0.5);
        --pico-muted-border-color: rgba(255, 255, 255, 0.08);

        /* Borders */
        --pico-border-radius: 4px;
        --pico-border-color: rgba(255, 255, 255, 0.12);
        --pico-muted-border-color: rgba(255, 255, 255, 0.10);

        /* Form elements */
        --pico-form-element-border-color: rgba(255, 255, 255, 0.22);
        --pico-form-element-focus-color: var(--pico-primary-focus);
        --pico-form-element-active-border-color: var(--pico-primary);

        /* Semantic colors — SurveyJS dark special-* */
        --pico-ins-color: rgba(36, 197, 164, 1);
        --pico-del-color: rgba(254, 76, 108, 1);

        /* Shadows */
        --pico-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.28);
        --pico-card-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.25), 0px 2px 6px 0px rgba(0, 0, 0, 0.2);

        /* Table — disable stripes, use hover */
        --pico-table-row-stripped-background-color: transparent;
        --pico-table-hover-background-color: rgba(255, 255, 255, 0.04);
    }
}

/* Brand bar — keep white text in dark mode, remove button chrome */
/* Brand bar, dark. Guarded so an explicit Light setting beats a dark OS; the
   [data-theme=dark] copy below is what makes an explicit Dark setting beat a
   light OS. Previously only the media query existed, so the brand bar went
   white-on-white for anyone choosing Light on a dark machine. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) #brand-bar,
    :root:not([data-theme=light]) #brand-bar a,
    :root:not([data-theme=light]) #brand-bar span {
        color: #fff;
    }
    :root:not([data-theme=light]) #brand-bar button,
    :root:not([data-theme=light]) #brand-bar .nav-avatar {
        background: none;
        border: none;
        box-shadow: none;
        color: #fff;
    }
    :root:not([data-theme=light]) #brand-bar button:hover,
    :root:not([data-theme=light]) #brand-bar button:focus {
        background: none;
        border: none;
        box-shadow: none;
    }
    :root:not([data-theme=light]) .notification-dot {
        border-color: rgb(19, 23, 31);
    }
}

[data-theme=dark] {
    #brand-bar,
    #brand-bar a,
    #brand-bar span {
        color: #fff;
    }
    #brand-bar button,
    #brand-bar .nav-avatar {
        background: none;
        border: none;
        box-shadow: none;
        color: #fff;
    }
    #brand-bar button:hover,
    #brand-bar button:focus {
        background: none;
        border: none;
        box-shadow: none;
    }
    .notification-dot {
        border-color: rgb(19, 23, 31);
    }
}

/* Sidebar layout — main nav fills, bottom nav sticks */
.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sidebar-main-nav {
    flex: 1;
    padding-top: 1em;
    min-width: 0;
}
.sidebar-bottom-nav {
    padding-bottom: 1em;
    border-top: 1px solid var(--pico-muted-border-color);
    padding-top: 0.5em;
}
.sidebar-main-nav a,
.sidebar-bottom-nav a {
    display: flex;
    align-items: center;
}

/* Brand bar — customer/site labels */
.brand-bar-site {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.brand-bar-customer {
    font-size: 0.6em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
}
.brand-bar-customer:empty {
    display: none;
}
.brand-bar-site-name {
    font-size: 0.95em;
    color: #fff;
}

/* Help & Resources dialog */
.help-resources-dialog {
    max-width: 600px;
}
.help-contact-table {
    margin-bottom: 0;
}
.help-contact-table td {
    border-bottom: none !important;
    padding: 0.35rem 0.75rem !important;
}

/* Site switcher — customer label above site name */
.site-customer-label {
    display: block;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pico-muted-color);
    margin-bottom: 1px;
}

/* Logo dark/light mode swap */
.logo-dark { display: none; }
.logo-light { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .logo-dark { display: inline; }
    :root:not([data-theme=light]) .logo-light { display: none; }
}
[data-theme=dark] .logo-dark { display: inline; }
[data-theme=dark] .logo-light { display: none; }
[data-theme=light] .logo-dark { display: none; }
[data-theme=light] .logo-light { display: inline; }

/* Sidebar nav icons */
.nav-icon {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    vertical-align: -3px;
    flex-shrink: 0;
}

/* ---------- Component refinements (Tabler density + SurveyJS colors) ---------- */

/* Buttons — sharper, denser */
.pico button:not(.secondary, .outline, .contrast),
.pico [type="submit"] {
    border-radius: 4px;
}

/* Headings — match SurveyJS font weight */
.pico h1, .pico h2, .pico h3, .pico h4, .pico h5, .pico h6 {
    font-weight: 700;
}

/* Cards — thin border, no heavy shadow (Tabler style) */
.pico article {
    border: 1px solid var(--pico-muted-border-color);
    box-shadow: none;
    border-radius: 4px;
}
/* Keep article headers/footers matching the card background, not grey */
.pico article > header,
.pico article > footer {
    background-color: var(--pico-card-background-color) !important;
}

/* Inline glossary link buttons within surveys */
button.link {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--pico-primary) !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    font: inherit !important;
    text-decoration: underline;
    cursor: pointer;
    display: inline;
    width: auto !important;
}
button.link:hover {
    color: var(--pico-primary-hover) !important;
}

/* Tables — Tabler density: uppercase muted headers, thin row borders, no stripes */
.pico table {
    border-collapse: collapse;
}
.pico table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pico-muted-color);
    padding: 0.5rem 0.75rem;
    background: none;
    border-bottom: 1px solid var(--pico-muted-border-color);
    border-top: none;
}
.pico table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    border-top: none;
    vertical-align: middle;
}
.pico table tr:last-child td {
    border-bottom: none;
}
/* Override Pico's striped table — Tabler uses hover instead */
.pico table.striped tbody tr:nth-child(odd) td,
.pico table.striped tbody tr:nth-child(odd) th {
    background-color: transparent;
}
.pico table tbody tr:hover td,
.pico table tbody tr:hover th {
    background-color: var(--pico-table-hover-background-color);
}

#sidebar {
    width: 230px;
    min-width: 230px;
    padding: 0 var(--pico-spacing);
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: var(--pico-background-color);
    border-right: 1px solid var(--pico-muted-border-color);
    flex-shrink: 0;
    overflow: visible;
    transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease;
}
#sidebar.transitioning {
    overflow: hidden;
}
/* Collapsed sidebar — icons only */
#sidebar.sidebar-collapsed {
    width: 56px;
    min-width: 56px;
    padding: 0;
}
#sidebar.sidebar-collapsed .sidebar-logo-full {
    display: none;
}
#sidebar.sidebar-collapsed .sidebar-nav-label {
    display: none;
}
#sidebar.sidebar-collapsed .nav-icon {
    margin-right: 0;
}
#sidebar.sidebar-collapsed .sidebar-main-nav ul,
#sidebar.sidebar-collapsed .sidebar-bottom-nav ul {
    padding-left: 0;
}
#sidebar.sidebar-collapsed .sidebar-main-nav li,
#sidebar.sidebar-collapsed .sidebar-bottom-nav li {
    padding: 0 !important;
}
#sidebar.sidebar-collapsed .sidebar-main-nav a,
#sidebar.sidebar-collapsed .sidebar-bottom-nav a {
    margin: 0 !important;
    padding: 0.5rem !important;
    justify-content: center;
    display: flex;
}
#sidebar.sidebar-collapsed .sidebar-main-nav,
#sidebar.sidebar-collapsed .sidebar-bottom-nav {
    overflow: hidden;
}

/* Small logo — hidden by default, shown when collapsed */
.sidebar-logo-sm {
    display: none;
}
#sidebar.sidebar-collapsed .sidebar-logo-sm {
    display: block;
}
#brand-bar {
    background-color: #336699;
    padding: 0.5em 1em;
    height: 75px;
    border-bottom: 5px solid #2e89b6;
}
#logo {
    height: 100%;  
}
#content {
    padding:0 var(--pico-spacing);
    display: flex;
    flex-direction: column;
}
.text-center {text-align:center;}
[hidden] { display: none;}
.grid{grid-template-columns: repeat(3, 1fr);}
.item-two-thirds{grid-column: 2 / 4;}
.text-color-success{color:var(--pico-color-green-500) !important;}
.text-color-danger{color:var(--pico-color-red-500) !important;}
.badge{
    background-color: var(--pico-color-slate-100) !important;
    border: 1px solid var(--pico-color-slate-200) !important;
    color: var(--pico-color-slate-600) !important;
    border-radius: 1rem !important;
    padding: 3.375px 9.28125px !important;
}
.badge-success{
    color:var(--pico-color-green-500) !important;
    border:1px solid oklch(0.92 0.04 145.01) !important;
    background-color: oklch(0.96 0.02 145.01) !important;
    border-radius: 1rem !important;
    padding: 3.375px 9.28125px !important;
}
.badge-warning{
    color:oklch(0.4 0.16 85) !important;
    border:1px solid oklch(0.92 0.04 85) !important;
    background-color: oklch(0.96 0.02 85) !important;
    border-radius: 1rem !important;
    padding: 3.375px 9.28125px !important;
}
.badge-info{
    color:oklch(0.4 0.16 250) !important;
    border:1px solid oklch(0.92 0.04 250) !important;
    background-color: oklch(0.96 0.02 250) !important;
    border-radius: 1rem !important;
    padding: 3.375px 9.28125px !important;
}
.badge-danger{
    color:var(--pico-color-red-500) !important;
    border:1px solid oklch(0.92 0.04 29.23) !important;
    background-color: oklch(0.96 0.02 29.23) !important;
    border-radius: 1rem !important;
    padding: 3.375px 9.28125px !important;
}
.danger-button{
    color:var(--pico-color-red-500) !important;
    border:1px solid oklch(0.92 0.04 29.23) !important;
    background-color: oklch(0.96 0.02 29.23) !important;
    width: unset !important;
}
.callout-warning {
    --callout-accent: oklch(0.55 0.14 85);
    border: 1px solid oklch(0.92 0.04 84.9338) !important;
    border-radius: 4px !important;
    background-color: oklch(0.96 0.02 84.9338) !important;
    color: var(--callout-accent);
    padding: 1em;
}
.callout-warning button.secondary,
.callout-warning button.outline {
    color: var(--callout-accent) !important;
    border-color: var(--callout-accent) !important;
    background-color: transparent !important;
}
.callout-warning button.secondary:not(.outline) {
    background-color: color-mix(in srgb, var(--callout-accent) 12%, transparent) !important;
}
.callout-warning button.secondary:hover,
.callout-warning button.outline:hover {
    background-color: color-mix(in srgb, var(--callout-accent) 20%, transparent) !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .callout-warning {
        --callout-accent: rgba(255, 200, 120, 1);
        border-color: rgba(255, 152, 20, 0.3) !important;
        background-color: rgba(255, 152, 20, 0.1) !important;
    }
    :root:not([data-theme=light]) .callout-danger {
        border-color: rgba(254, 76, 108, 0.3) !important;
        background-color: rgba(254, 76, 108, 0.1) !important;
        color: rgba(254, 150, 170, 1);
    }
}
.callout-danger {
    border: 1px solid oklch(0.92 0.04 29.23) !important;
    border-radius: 3.375px !important;
    background-color: oklch(0.96 0.02 29.23) !important;
    padding: 1em;
}
.text-end{text-align: end !important;}
.tool-bar{margin-bottom: 0 !important;}
.container {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--pico-spacing);
    padding-left: var(--pico-spacing);
    padding-top: 0 ;
}
/* :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=false]:not(select) {
    background-image: unset;
}
:where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid] {
    padding-right: var(--pico-form-element-spacing-horizontal);
    padding-left: var(--pico-form-element-spacing-horizontal);
    padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
    padding-inline-end: var(--pico-form-element-spacing-horizontal)!important;
} */
.link {
    padding: 0;
    font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
    font-weight: var(--sjs-font-questiontitle-weight, 600);
    color: var(--pico-primary);
    /* Was `white`, which showed as a white block on every dark-theme page that
       uses this class (glossary buttons, plan add-entry links). Transparent
       lets the surface behind it show through in both themes. */
    background: none;
    border: none;
    text-decoration: underline;
}
:is(button,[type=submit],[type=button],[role=button]).secondary, [type=file]::file-selector-button, [type=reset]
{
    --pico-background-color: none !important;
    --pico-border-color: var(--pico-secondary-background) !important;
    --pico-color: var(--pico-secondary-background) !important;
    cursor: pointer !important;
}
nav > button, nav > div > button, td > button, td > input, td > select {
    padding-top: calc(var(--pico-form-element-spacing-vertical) / 2) !important;
    padding-bottom: calc(var(--pico-form-element-spacing-vertical) / 2) !important;
    margin-bottom: 0 !important;
} 
.slideout {
    display: flex;
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    padding: 0;
    border: 0;
    -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
    background-color: var(--pico-modal-overlay-background-color);
    color: var(--pico-color);
}
.slideout:not([open]), .slideout[open=false] {
    display: none;
}
.slideout>article {
    width: 100%;
    max-height: calc(100vh - var(--pico-spacing) * 2);
    margin: var(--pico-spacing);
    overflow: auto;
}
.slideout article {
    margin-bottom: var(--pico-block-spacing-vertical);
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
}
.slideout article>header {
    margin-top: calc(var(--pico-block-spacing-vertical) * -1);
    margin-bottom: var(--pico-block-spacing-vertical);
    border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
    border-top-right-radius: var(--pico-border-radius);
    border-top-left-radius: var(--pico-border-radius);
}
.slideout article>footer, .slideout article>header {
    margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
    margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
    padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
    background-color: var(--pico-card-sectioning-background-color);
}
.slideout dialog>article .close, .slideout dialog>article :is(a,button)[rel=prev]
{
    display: block;
    width: 1rem;
    height: 1rem;
    margin-top: calc(var(--pico-spacing) * -1);
    margin-bottom: var(--pico-spacing);
    margin-left: auto;
    border: none;
    background-image: var(--pico-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: .5;
    transition: opacity var(--pico-transition);
}
.slideout dialog>article>header .close, .slideout dialog>article>header :is(a,button)[rel=prev], .slideout-contents > header > button, .slideout-close-button {
    margin: 0;
    margin-left: var(--pico-spacing);
    padding: 0;
    float: right;
    display: block;
    width: 1rem;
    height: 1rem;
    margin-bottom: var(--pico-spacing);
    margin-left: auto;
    border: none;
    background-image: var(--pico-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: .5;
    transition: opacity var(--pico-transition);
}
.slideout {
    justify-content: end !important;
}
.slideout article {
    height: 100vh !important;
    margin: 0 !important;
    max-height: unset !important;
    border-radius: 0 !important;
    width: 50% !important;
}
[type=search] {
    --pico-border-radius: var(--pico-border-radius) !important; 
}
.item-two-thirds {
    /* min-height: 60vh; */
}
.html2pdf__container canvas, .html2pdf__container #charts article {
    max-width: 7.5in !important;
}
.html2pdf__container {
    background-color: white !important;
}
.html2pdf__container article {
    padding-bottom: 1em !important;
}
.html2pdf__container button {
    display: none !important;
}
.html2pdf__container .sd-element--with-frame.sd-element--compact {
    border: none !important;
}
.sd-element--with-frame {
    box-shadow: none !important;
}
.ql-picker-item, .ql-picker-label{
    border: unset !important;
    border-radius: unset !important;
    outline: unset !important;
    background-color: unset !important;
    box-shadow: unset !important;
    color: unset !important;
    font-weight: unset !important;
    font-size: unset !important;
    line-height: unset !important;
    text-align: unset !important;
    text-decoration: unset !important;
    transition: unset !important;
}
.ql-toolbar.ql-snow button {
    width: auto !important;
    height: 24px !important;
    padding: 3px 5px !important;
    margin: 1px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.content-editor .ql-editor {
    min-height: 150px;
    height: auto;
}

/* Quill ships its own typography -- 'Helvetica Neue'/Helvetica/Arial at 13px --
   so every editor sat in a different typeface and a smaller size than the page
   around it. That is most obvious in the improvement plan, where the slide-out
   editor opens directly beside the text it is editing, but it applies to every
   Quill on the site: announcements, email templates, glossary and timeline.
   Inheriting means the editor tracks whatever the theme is doing rather than
   pinning a second font stack that has to be kept in sync. */
.ql-container {
    font-family: inherit;
    font-size: inherit;
}
.ql-editor {
    line-height: inherit;
}

/* Quill dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .ql-toolbar.ql-snow { border-color: var(--pico-border-color); }
    :root:not([data-theme=light]) .ql-container.ql-snow { border-color: var(--pico-border-color); }
    :root:not([data-theme=light]) .ql-toolbar .ql-stroke { stroke: var(--pico-color) !important; }
    :root:not([data-theme=light]) .ql-toolbar .ql-fill { fill: var(--pico-color) !important; }
    :root:not([data-theme=light]) .ql-toolbar .ql-picker-label { color: var(--pico-color) !important; }
    :root:not([data-theme=light]) .ql-toolbar .ql-picker-label .ql-stroke { stroke: var(--pico-color) !important; }
    :root:not([data-theme=light]) .ql-editor { color: var(--pico-color); }
    :root:not([data-theme=light]) .ql-editor.ql-blank::before { color: var(--pico-muted-color); }
    :root:not([data-theme=light]) .ql-snow .ql-picker-options { background-color: var(--pico-card-background-color); border-color: var(--pico-border-color); }
    :root:not([data-theme=light]) .ql-snow .ql-picker-item { color: var(--pico-color); }
}
[data-theme=dark] .ql-toolbar.ql-snow { border-color: var(--pico-border-color); }
[data-theme=dark] .ql-container.ql-snow { border-color: var(--pico-border-color); }
[data-theme=dark] .ql-toolbar .ql-stroke { stroke: var(--pico-color) !important; }
[data-theme=dark] .ql-toolbar .ql-fill { fill: var(--pico-color) !important; }
[data-theme=dark] .ql-toolbar .ql-picker-label { color: var(--pico-color) !important; }
[data-theme=dark] .ql-toolbar .ql-picker-label .ql-stroke { stroke: var(--pico-color) !important; }
[data-theme=dark] .ql-editor { color: var(--pico-color); }
[data-theme=dark] .ql-editor.ql-blank::before { color: var(--pico-muted-color); }
[data-theme=dark] .ql-snow .ql-picker-options { background-color: var(--pico-card-background-color); border-color: var(--pico-border-color); }
[data-theme=dark] .ql-snow .ql-picker-item { color: var(--pico-color); }
[role="tabs"] {
  display: flex;
}

[role="tabs"] section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

[role="tabs"] div, [role="tabs"] article {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: none;
}

[role="tabs"] [type="radio"]:checked + div, [role="tabs"] [type="radio"]:checked + article {
  display: block;
}

nav[role="tab-control"] label.active {
  color: var(--pico-primary);
  text-decoration: underline;
  cursor: pointer;
}
nav[role="tab-control"] label {
  color: var(--pico-primary);
  cursor: pointer;
}

[role="tabs"] li::after, #show-new > article > form > nav > ul > li:after {
    content: "" !important;
}
.muted-text {
    color: var(--pico-secondary) !important;
}
.button {
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
    text-underline-offset: var(--pico-text-underline-offset);
    overflow-wrap: break-word;
    tab-size: 4;
    box-sizing: border-box;
    background-repeat: no-repeat;
    margin: 0;
    overflow: visible;
    font-family: inherit;
    text-transform: none;
    -webkit-appearance: button;
    --pico-background-color: var(--pico-primary-background);
    --pico-border-color: var(--pico-primary-border);
    --pico-color: var(--pico-primary-inverse);
    --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border: var(--pico-border-width) solid var(--pico-border-color);
    border-radius: var(--pico-border-radius);
    outline: 0;
    background-color: var(--pico-background-color);
    box-shadow: var(--pico-box-shadow);
    color: var(--pico-color);
    font-weight: var(--pico-font-weight);
    font-size: 1rem;
    line-height: var(--pico-line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition);
}
.button:hover {
    transition: background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition);
    --pico-background-color: var(--pico-primary-hover-background);
    --pico-border-color: var(--pico-primary-hover-border);
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    --pico-color: var(--pico-primary-inverse);
    color: var(--pico-primary-inverse) !important;
}
#sidebar .dropdown > summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 205px;
  padding-right: 2rem;
}

#sidebar .dropdown > ul {
    position: absolute;
    z-index: 100;
    min-width: 300px;
    background: white;
}

#sidebar .dropdown > summary:after {
    margin-right: -1em;
    margin-top: -1.5em;
}

.pico details summary[role=button]:not(.outline)::after {
    filter: unset;
}

/* ── Timeline ─────────────────────────────────────────────── */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d4e3 transparent;
}
.timeline::-webkit-scrollbar { width: 4px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb { background: #c8d4e3; border-radius: 2px; }
.timeline-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 0.75em;
    align-items: center;
    padding: 0.75em 0;
    cursor: pointer;
}
.timeline-item:last-child {
    border-bottom: none;
}
.timeline-item:hover .timeline-event {
    color: var(--pico-primary);
    text-decoration: underline;
}
.tl-date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #eef2f7;
    border: 1px solid #c8d4e3;
    border-radius: 6px;
    padding: 4px 6px;
    text-align: center;
    line-height: 1.15;
    flex-shrink: 0;
}
.tl-weekday {
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #336699;
}
.tl-day {
    font-size: 1.4em;
    font-weight: 700;
    color: #1a3a5c;
    line-height: 1;
}
.tl-month {
    font-size: 0.6em;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.timeline-event {
    font-size: 0.875em;
    font-weight: 600;
    color: var(--pico-color);
}

/* ── Announcements ────────────────────────────────────────── */
.announcements {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d4e3 transparent;
}
.announcements::-webkit-scrollbar { width: 4px; }
.announcements::-webkit-scrollbar-track { background: transparent; }
.announcements::-webkit-scrollbar-thumb { background: #c8d4e3; border-radius: 2px; }
.announcement {
    padding: 0.55em 0.75em;
    border-radius: 4px;
    border-left: 4px solid;
    cursor: pointer;
}
.announcement:hover {
    filter: brightness(0.96);
}
.announcement-warning {
    border-left-color: #be3a34;
    background-color: #fdf3f2;
}
.announcement-info {
    border-left-color: #50cd89;
    background-color: #f2fbf6;
}
.announcement-tag {
    display: block;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #be3a34;
    margin-bottom: 2px;
}
.announcement-title {
    font-weight: 600;
    font-size: 0.875em;
}
.announcement-body {
    font-size: 0.825em;
    margin-top: 2px;
    color: var(--pico-secondary);
}

/* ── RSS Feed ─────────────────────────────────────────────── */
.rss-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d4e3 transparent;
}
.rss-feed::-webkit-scrollbar { width: 4px; }
.rss-feed::-webkit-scrollbar-track { background: transparent; }
.rss-feed::-webkit-scrollbar-thumb { background: #c8d4e3; border-radius: 2px; }
.rss-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.65em;
    padding: 0.55em 0.75em;
    border-bottom: 1px solid var(--pico-muted-border-color);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: border-left-color 0.15s, background-color 0.15s;
}
.rss-item:last-child { border-bottom: none; }
.rss-item:hover {
    background-color: #f0f4f9;
    border-left-color: #336699;
}
.rss-item-img {
    width: 70px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
}
.rss-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rss-item-meta {
    font-size: 0.68em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}
.rss-item-title {
    font-weight: 600;
    font-size: 0.875em;
    color: var(--pico-color);
    line-height: 1.3;
}
.rss-item:hover .rss-item-title {
    color: var(--pico-primary);
    text-decoration: underline;
}
.rss-item-excerpt {
    font-size: 0.8em;
    color: var(--pico-secondary);
    line-height: 1.4;
}

/* ── Brand bar icons & user menu ─────────────────────────── */
.brand-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0.4rem;
    border-radius: 50%;
    text-decoration: none;
}
.brand-bar-icon:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #e54040;
    border-radius: 50%;
    border: 2px solid #336699;
}
.brand-bar-user-btn {
    display: inline-flex;
    align-items: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0 !important;
    cursor: pointer;
    border-radius: 4px;
}
.brand-bar-user-btn:hover {
    background: rgba(255,255,255,0.15) !important;
}
.user-menu-table {
    margin-bottom: 0;
}
.user-menu-table td {
    padding: 0 !important;
}
.user-menu-table td a {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border-radius: 4px;
}
.user-menu-table td a:hover {
    background-color: var(--pico-card-sectioning-background-color);
}

/* ── Nav Avatar ──────────────────────────────────────────── */
.nav-avatar-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
    color: white;
}
svg.nav-avatar {
    background: rgba(255,255,255,0.2);
    padding: 4px;
}
.nav-avatar-name {
    font-size: 0.85rem;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
    .nav-avatar-name { display: none; }
}

/* ── Settings Avatar ─────────────────────────────────────── */
.settings-avatar-preview {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pico-color-slate-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.settings-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
svg.settings-avatar-placeholder {
    width: 56px;
    height: 56px;
    color: var(--pico-muted-color);
}

/* ==========================================================================
   Dark mode overrides for components with hardcoded light-mode colors
   ========================================================================== */
@media (prefers-color-scheme: dark) {

    /* ── Badges ──────────────────────────────────────────────── */
    :root:not([data-theme=light]) .badge {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    :root:not([data-theme=light]) .badge-success {
        color: rgba(36, 197, 164, 1) !important;
        border-color: rgba(36, 197, 164, 0.3) !important;
        background-color: rgba(36, 197, 164, 0.1) !important;
    }
    :root:not([data-theme=light]) .badge-warning {
        color: rgba(255, 200, 120, 1) !important;
        border-color: rgba(255, 152, 20, 0.3) !important;
        background-color: rgba(255, 152, 20, 0.1) !important;
    }
    :root:not([data-theme=light]) .badge-info {
        color: rgba(91, 151, 242, 1) !important;
        border-color: rgba(91, 151, 242, 0.3) !important;
        background-color: rgba(91, 151, 242, 0.1) !important;
    }
    :root:not([data-theme=light]) .badge-danger {
        color: rgba(254, 76, 108, 1) !important;
        border-color: rgba(254, 76, 108, 0.3) !important;
        background-color: rgba(254, 76, 108, 0.1) !important;
    }

    /* ── RSS Feed ─────────────────────────────────────────────── */
    :root:not([data-theme=light]) .rss-feed {
        scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    }
    :root:not([data-theme=light]) .rss-feed::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
    }
    :root:not([data-theme=light]) .rss-item:hover {
        background-color: rgba(255, 255, 255, 0.04);
        border-left-color: var(--pico-primary);
    }
    :root:not([data-theme=light]) .rss-item-meta {
        color: var(--pico-primary);
    }

    /* ── Announcements ───────────────────────────────────────── */
    :root:not([data-theme=light]) .announcement-warning {
        border-left-color: rgba(254, 76, 108, 0.7);
        background-color: rgba(254, 76, 108, 0.08);
    }
    :root:not([data-theme=light]) .announcement-info {
        border-left-color: rgba(36, 197, 164, 0.7);
        background-color: rgba(36, 197, 164, 0.08);
    }
    :root:not([data-theme=light]) .announcement:hover {
        filter: brightness(1.15);
    }
    :root:not([data-theme=light]) .announcement-tag {
        color: rgba(254, 120, 140, 1);
    }

    /* ── Timeline ─────────────────────────────────────────────── */
    :root:not([data-theme=light]) .timeline-item {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    :root:not([data-theme=light]) .tl-date-box {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
    }
    :root:not([data-theme=light]) .tl-weekday {
        color: var(--pico-primary);
    }
    :root:not([data-theme=light]) .tl-day {
        color: rgba(255, 255, 255, 0.85);
    }
    :root:not([data-theme=light]) .tl-month {
        color: rgba(255, 255, 255, 0.5);
    }

    /* ── Settings Avatar ─────────────────────────────────────── */
    :root:not([data-theme=light]) .settings-avatar-preview {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ==========================================================================
   Manual dark mode via data-theme="dark" attribute
   Duplicates all dark-mode overrides so the manual toggle works even when
   the system preference is light.
   ========================================================================== */
[data-theme=dark] {
    --pico-font-family: "Open Sans", sans-serif;
    --pico-font-size: 16px;
    --pico-line-height: 1.5;
    --pico-font-weight: 400;
    --pico-primary: #2e89b6;
    --pico-primary-background: #2e89b6;
    --pico-primary-hover: #3d9dc9;
    --pico-primary-hover-background: #3d9dc9;
    --pico-primary-focus: rgba(46, 137, 182, 0.25);
    --pico-primary-inverse: #fff;
    --pico-background-color: rgb(19, 23, 31);
    --pico-card-background-color: rgb(19, 23, 31);
    --pico-card-sectioning-background-color: rgba(26, 26, 26, 1);
    --pico-color: rgba(255, 255, 255, 0.78);
    --pico-muted-color: rgba(255, 255, 255, 0.5);
    --pico-muted-border-color: rgba(255, 255, 255, 0.10);
    --pico-border-radius: 4px;
    --pico-border-color: rgba(255, 255, 255, 0.12);
    --pico-form-element-border-color: rgba(255, 255, 255, 0.22);
    --pico-form-element-focus-color: var(--pico-primary-focus);
    --pico-form-element-active-border-color: var(--pico-primary);
    --pico-ins-color: rgba(36, 197, 164, 1);
    --pico-del-color: rgba(254, 76, 108, 1);
    --pico-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.28);
    --pico-card-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.25), 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    --pico-table-row-stripped-background-color: transparent;
    --pico-table-hover-background-color: rgba(255, 255, 255, 0.04);
}
/* Brand bar */
[data-theme=dark] #brand-bar { color: #fff; }
[data-theme=dark] #brand-bar a,
[data-theme=dark] #brand-bar span { color: #fff; }
[data-theme=dark] #brand-bar button,
[data-theme=dark] #brand-bar .nav-avatar { background: none; border: none; box-shadow: none; color: #fff; }
[data-theme=dark] #brand-bar button:hover,
[data-theme=dark] #brand-bar button:focus { background: none; border: none; box-shadow: none; }
[data-theme=dark] .notification-dot { border-color: rgb(19, 23, 31); }
/* Callouts */
[data-theme=dark] .callout-warning { --callout-accent: rgba(255, 200, 120, 1); border-color: rgba(255, 152, 20, 0.3) !important; background-color: rgba(255, 152, 20, 0.1) !important; }
[data-theme=dark] .callout-danger { border-color: rgba(254, 76, 108, 0.3) !important; background-color: rgba(254, 76, 108, 0.1) !important; color: rgba(254, 150, 170, 1); }
/* Badges */
[data-theme=dark] .badge { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.6) !important; }
[data-theme=dark] .badge-success { color: rgba(36, 197, 164, 1) !important; border-color: rgba(36, 197, 164, 0.3) !important; background-color: rgba(36, 197, 164, 0.1) !important; }
[data-theme=dark] .badge-warning { color: rgba(255, 200, 120, 1) !important; border-color: rgba(255, 152, 20, 0.3) !important; background-color: rgba(255, 152, 20, 0.1) !important; }
[data-theme=dark] .badge-info { color: rgba(91, 151, 242, 1) !important; border-color: rgba(91, 151, 242, 0.3) !important; background-color: rgba(91, 151, 242, 0.1) !important; }
[data-theme=dark] .badge-danger { color: rgba(254, 76, 108, 1) !important; border-color: rgba(254, 76, 108, 0.3) !important; background-color: rgba(254, 76, 108, 0.1) !important; }
/* RSS */
[data-theme=dark] .rss-feed { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
[data-theme=dark] .rss-item:hover { background-color: rgba(255, 255, 255, 0.04); border-left-color: var(--pico-primary); }
[data-theme=dark] .rss-item-meta { color: var(--pico-primary); }
/* Announcements */
[data-theme=dark] .announcement-warning { border-left-color: rgba(254, 76, 108, 0.7); background-color: rgba(254, 76, 108, 0.08); }
[data-theme=dark] .announcement-info { border-left-color: rgba(36, 197, 164, 0.7); background-color: rgba(36, 197, 164, 0.08); }
[data-theme=dark] .announcement:hover { filter: brightness(1.15); }
[data-theme=dark] .announcement-tag { color: rgba(254, 120, 140, 1); }
/* Timeline */
[data-theme=dark] .timeline-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme=dark] .tl-date-box { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
[data-theme=dark] .tl-weekday { color: var(--pico-primary); }
[data-theme=dark] .tl-day { color: rgba(255, 255, 255, 0.85); }
[data-theme=dark] .tl-month { color: rgba(255, 255, 255, 0.5); }
/* Settings Avatar */
[data-theme=dark] .settings-avatar-preview { background: rgba(255, 255, 255, 0.08); }
#user-menu-dialog a {
    color: var(--pico-primary) !important;
}

/* ── Number Calendar widget ───────────────────────────────────────────────────
   Styles for the `calendar` custom question type, whose markup is supplied by
   calendarWidget in scripts/client/survey-utilities.js.

   These lived as an inline <style> block copied into response.html and
   response-anon.html; survey-builder.html never got a copy, so the calendar
   rendered unstyled in the builder preview, and the two copies had drifted.
   All three layouts render inside index.html, which links this file.

   Class names are `pbs-calendar-*` because the originals (.month, .days,
   .weekdays) are generic enough to collide once they live in a global sheet.

   THEMING: everything here is driven by SurveyJS's own --sjs-* design tokens
   rather than fixed colours, because the widget renders inside a survey whose
   theme is applied at runtime (surveyApplyTheme in client.js on the response
   pages, the creator's own theme in the builder preview). Tracking the tokens
   is what makes the calendar match the surrounding questions, and it means dark
   mode needs no separate rules here — the tokens already carry it. The literal
   values in each var() are only the no-theme fallback.

   The day inputs additionally carry SurveyJS's real `sd-input` class, so they
   pick up its background, colour, radius, shadow and focus behaviour for free;
   the rules below only tighten the density that class assumes, since 31 of them
   sit in a seven-column grid rather than one per row. */

.pbs-calendar {
    width: 100% !important;
    text-align: center !important;
    font-family: var(--sjs-font-family, inherit);
    color: var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91));
}

.pbs-calendar ul {
    list-style-type: none !important;
    border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: calc(var(--sjs-base-unit, 8px) * 0.75);
}

/* Weekday header row (Sun-Sat) */
.pbs-calendar-weekdays {
    margin: 0 !important;
    padding: var(--sjs-base-unit, 8px) !important;
    background-color: var(--sjs-general-backcolor-dim, #ddd) !important;
    border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px))
                   var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px)) 0 0;
}

/* Uppercase + tracking belongs to the weekday labels only. It used to apply to
   every li, which stretched the day numbers apart as well. */
.pbs-calendar-weekdays li {
    display: inline-block !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: calc(var(--sjs-font-size, 16px) * 0.75);
    font-weight: 600;
    color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
}

/* Day cells (1-31) */
.pbs-calendar-days {
    padding: var(--sjs-base-unit, 8px) !important;
    background: var(--sjs-general-backcolor-dim-light, #eee) !important;
    margin: 0 !important;
    border-radius: 0 0 var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px))
                       var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
}

.pbs-calendar-days li {
    list-style-type: none !important;
    display: inline-block !important;
    text-align: center !important;
    margin-bottom: calc(var(--sjs-base-unit, 8px) * 0.5) !important;
    font-size: calc(var(--sjs-font-size, 16px) * 0.75);
    color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
}

/* Density overrides on top of sd-input: the shared class assumes a full-width
   editor, which is far too tall and wide for a grid cell. */
.pbs-calendar-days .pbs-calendar-input {
    padding: calc(var(--sjs-base-unit, 8px) * 0.5) calc(var(--sjs-base-unit, 8px) * 0.25);
    font-size: var(--sjs-font-size, 16px);
    line-height: 1.2;
    text-align: center;
    margin-top: calc(var(--sjs-base-unit, 8px) * 0.25);
    /* Firefox and WebKit both reserve room for spinners the cells cannot spare. */
    -moz-appearance: textfield;
}

.pbs-calendar-days .pbs-calendar-input::-webkit-outer-spin-button,
.pbs-calendar-days .pbs-calendar-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pbs-calendar-title {
    font-size: var(--sjs-font-size, 16px);
    font-weight: 600;
    color: var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91));
}