body {
    background: #FAF9F6
}

.template-usergroup-userprefs #formfield-form-widgets-groups { 
    display: none;
}

#portal-column-two {
    padding-top: 2.8rem
}

body #portal-footer-wrapper {
   background: #47a3b6;
   opacity: 0.5;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
}

body #portal-footer-wrapper a {
   color: #876102;
 }

.xxportaltype-project.template-edit #formfield-form-widgets-IBasic-title,
.portaltype-project.template-edit #formfield-form-widgets-project_url,
.portaltype-project.template-edit #form-widgets-IBasic-description,
.portaltype-project.template-edit #formfield-form-widgets-IBasic-description {
    display: none !important
}

.template-edit .editbutton {
    display: none
}

.template-import-from-excel #portal-column-two {
    display: none;
}

#formfield-form-widgets-csv_file {
    padding-top: 1rem;
    border-top: 1px solid silver;
}

#formfield-form-widgets-local_excel_file label {
    font-weight: bold;
}

.duset {
    opacity: 0.55;
}

.cancelbutton {
    background: #378DA4 !important
}

#contentview-user_data-personal-preferences {
    display: none;
}

body.plone-toolbar-top #edit-zone .personaltools-wrapper {
    margin-left: 0 !important;
}

#edit-bar {
    display: none;
}

.userrole-project-manager #edit-bar,
.userrole-dashboard-manager #edit-bar,
.userrole-manager #edit-bar {
    display: block;
}

.note-error,
div.color-0 {
    border: 2px solid red;
}

.note-error h4,
div.color-0 h4 {
    color: red;
}


.note-warning,
div.color-1 {
    border: 2px solid #BA8E23;
}

.note-warning h4,
div.color-1 h4 {
    color: #BA8E23;
}


.note-info,
div.color-2 {
    border: 2px solid green;
}


.note-info h4,
div.color-2 h4 {
    color: green;
}

div.color-3 {
    border: 2px solid blue;
}

div.color-3 h4 {
    color: blue;
}

div.color-4 {
    display: none;
    border: 2px solid gray;
}

div.color-4 h4 {
    display: none;
    color: gray;
}

#portal-column-content .nav-item {
    position: relative;
    padding-right: 2rem;
}

.faded {
    opacity: 0.5
}

.teal {
    background: teal;
}

#main-container a.topalert {
    opacity: 1;
    border: 0 none;
    background: teal;
    position: absolute;
    right: 5px;
    top: 1rem;
    z-index: 9;
}


.rounded-alert {
    border-radius: 50%;
    /* Makes the alert rounded */
    padding: 5px 10px;
    margin-left: 1rem;
}

#main-container a.alert-info,
#main-container a.alert,
#main-container a.alert-danger {
    color: #fff !important;
}

a.topalert,
.alert-danger {
    background-color: rgb(221, 35, 52);
    border-color: orange;
}

portal-column-content .nav-item a {
    opacity: 0.5;
    background-color: #DDD
}

portal-column-content .nav-item a.active {
    opacity: 1
}
#portal-logo {
    max-width: 250px;
}

#hero,
#above-content-wrapper,
.principal,
#portal-anontools,
#above-content-wrapper,
#mainnavigation-wrapper {
    display: none !important
}

portal-column-content ul {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif
}

portal-column-content ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Roboto", sans-serif
}

#main-container a {
    text-decoration: none;
    color: #05386B;
    transition: 0.4s;
    font-family: "Roboto", sans-serif
}

#main-container a:hover {
    text-decoration: none;
    color: #05386B
}


#main-container h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    color: #222;
}
 
#main-container p {
    margin: 0;
    padding: 0;
    color: #323232;
    font-family: "Roboto", sans-serif
}

.appWrapper {
    display: flex;
}

.flexing {
    display: flex;
    justify-content: space-between
}
.white-text {
    color: white !important;
}
.appWrapper .wrapper {
    flex: 1;
}

.pageHeading h2 {
    font-weight: 700;
    font-size: 28px;
    padding-top: 8px;
}

.card {
    border: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    border-radius: 14px
}

.card .card-body {
    padding: 20px;
}

/* .projectButton {
    margin-top: 20px
} */

.projectButton .nav-tabs {
    border: none;
    display: flex;
    column-gap: 15px;
    row-gap: 15px;
    flex-wrap: wrap
}

.loginbutton {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 15px;
    min-width: 150px;
    border: 1px solid;
}

.loginbutton:hover {
    background-color: white;
    box-shadow: 1px 1px 3px 3px #DDD
}


.projectButton .btn,
#main-container a.button {
    padding: 17px 30px;
    background-color: transparent;
    border: none;
    border-radius: 30px;
    font-weight: 500;
    font-size: 18px;
    min-width: 150px
}

.projectButton {
    opacity: 0.8
}

.projectButton .btn.active {
    opacity: 1;
    box-shadow: #111 6px 6px 10px;
}

#main-container a.button,
.projectButton .p1 {
    color: #fff;
    font-size: 1.25rem;
}

.projectButton .p2 {
    background-color: #EEF0FF
}

.projectButton .p3 {
    background-color: #FFF7ED
}

.projectButton .p4 {
    background-color: #E6FEF0
}

.projectButton .p5 {
    background-color: #FFEFEF
}

.projectButton .p6 {
    background-color: #EEF7FE
}

.projectButton .p7 {
    background-color: #F6E4FE
}

/* .projectPreview {
    margin-top: 30px
} */

.projectPreview .topInfo {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px
}

.projectPreview .topInfo h3 {
    font-weight: 600;
    font-size: 20px;
}

.projectPreview .userInfo {
    padding-top: 15px;
    display: flex;
    justify-content: end
}

.projectPreview .userInfo h4 {
    font-weight: 500;
    font-size: 17px;
    display: flex;
    align-items: center;
    column-gap: 7px
}

.projectPreview .userInfo svg {
    height: 20px
}

.projectPreview .card {
    margin-top: 20px
}

.projectPreview .card .card-body {
    padding: 0 30px 30px 30px
}

.projectPreview .card .card-body .top h3 {
    font-weight: 500;
    font-size: 18px;
}

.projectPreview .card .card-body .itemWrapper {
    margin-top: 8px
}

.card .card-body .itemWrapper .singleItem {
    border-radius: 10px;
    padding: 10px 15px;
    height: 100%;
}


.col-xl-3.col-lg-6.col-md-6.col-12 {
    margin-bottom: .45rem;
}


.projectPreview .card .card-body .itemWrapper .singleItem h4 {
    font-size: 14px;
    font-weight: 400;
    /* line-height: 20px */
}

.projectPreview .card .card-body .itemWrapper .singleItem h2 {
    margin-top: 0px;
    color: #FFBB3B;
    font-weight: 800;
    font-size: 32px
}

.projectPreview .card .card-body .itemWrapper .singleItem .detailsBtn {
    margin-top: 5px;
    display: flex;
    justify-content: end
}

.projectPreview .card .card-body .itemWrapper .singleItem .detailsBtn svg {
    margin-left: 4px;
    height: 17px
}

.projectPreview .card .card-body .itemWrapper .singleItem .detailsBtn a {
    color: #ffffffad;
    font-weight: 400;
    font-size: 14px
}

.projectPreview .card .card-body .itemWrapper .singleItem .detailsBtn a:hover {
    color: #fff
}

.projectPreview .card .card-body .itemWrapper .singleItem .detailsBtn a:hover svg {
    color: #fff
}

/* .projectPreview .card .card-body .bottomItemBox {
    margin-top: 30px
} */
#main-container a.button,
#main-container a.button click {
    opacity: 0.35
}

#main-container a.button.active {
    opacity: 1
}

.pat-toolbar,
#edit-bar,
#edit-zone {
    border-radius: 0 20px 20px 0;

}

.small {
    font-size: 1rem !important;
    font-weight: normal;
    color: #DDD
}


a#personaltools-menulink {
    background-color: black;
}

#edit-zone .personaltools-wrapper {
    border-top: 0 none;
}

/* Only the admin (Manager role) sees the left Plone toolbar; team members and
   Dashboard/Project Managers get a clean dashboard (their actions live in the
   user circle). */
body:not(.userrole-manager) div.toolbar-header,
body:not(.userrole-manager) ul.plone-toolbar-main,
body:not(.userrole-manager) #edit-zone,
body:not(.userrole-manager) nav.plone-toolbar {
    display: none !important;
}
body:not(.userrole-manager).plone-toolbar-left-default,
body:not(.userrole-manager).plone-toolbar-left-expanded {
    padding-left: 0 !important;
}


#filters {
    margin-bottom: 1em;
}

#filters label {
    margin-right: 1em;
    font-weight: bold;
}

#calendar {
    max-width: 900px;
    margin: 0 auto;
}



@media (min-width: 992px) and (max-width: 1199px) {

    .appWrapper .wrapper {
        padding: 20px 20px
    }

    .projectPreview .card .card-body .itemWrapper>.row {
        row-gap: 20px
    }

}

@media (max-width: 991px) {

    .appWrapper {
        flex-direction: column
    }

    .appWrapper .wrapper {
        margin-left: 0px;
        padding: 20px
    }

    .projectPreview .card .card-body .itemWrapper>.row {
        row-gap: 20px
    }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

    .appWrapper .wrapper {
        padding: 15px
    }

    .projectPreview .card .card-body {
        padding: 20px
    }

}

@media (max-width: 575px) {

    .appWrapper .wrapper {
        padding: 15px
    }

    .projectPreview .card .card-body {
        padding: 20px
    }

    #main-container .projectButton a.button,
    .projectButton .btn {
        padding: 10px 15px;
        font-size: 14px;
        min-width: 135px
    }

    .projectButton .nav-tabs {
        justify-content: center
    }

    .pageHeading h2 {
        font-size: 20px
    }

    .projectPreview .topInfo h3 {
        font-size: 16px;
    }

    .projectPreview .userInfo h4 {
        font-size: 14px;
        column-gap: 7px
    }
}


/* =========================================================================
   REFINED DASHBOARD THEME  (mockup 01-refined, wired to live markup)
   Pure-CSS skin: drives off classes the templates already emit
   (.singleItem.Urgent/.Soon/.Future/.More, .note-error/-warning/-info/-mention,
   .meeting) instead of positional .color-N. No template/JS changes required.
   Self-contained and easy to revert — delete this block to restore the
   previous look.
   ========================================================================= */

#main-container {
    --brand: #6e1f3d;
    --ink: #0c2d48;
    --line: #ececec;
    --t-urgent: #e0454f;
    --t-soon: #c9962a;
    --t-future: #1f9d55;
    --t-far: #5b63e6;
    --t-mention: #9aa0a6;
    --t-meet: #cfd4da;
}

/* ---- project tabs (pills) ---- */
#portal-column-content .projectButton .nav-tabs {
    column-gap: 12px;
    row-gap: 12px;
}

#main-container .projectButton a.button,
.projectButton .btn {
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 1rem;
    font-weight: 600;
    transition: .18s;
}

/* inactive pill = white card; overrides the inline project-colour background */
#main-container .projectButton a.button:not(.active),
.projectButton .btn:not(.active) {
    background: #fff !important;
    color: #555 !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    opacity: 1;
}

/* active pill keeps its inline project colour, gains a soft lift */
#main-container .projectButton a.button.active,
.projectButton .btn.active {
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
    opacity: 1;
}

/* ---- main card ---- */
#main-container .projectPreview .card.mainbox {
    border: 1px solid var(--line) !important;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(20, 30, 50, .07);
}

/* ---- user chip ---- */
#main-container .projectPreview .userInfo {
    padding-top: 8px;
    justify-content: flex-end;
}

#main-container .projectPreview .userInfo h3 {
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    color: #44506a;
    align-items: center;
    column-gap: 8px;
}

/* User icon: the generic person glyph, or an uploaded image, both shown
   as a round 36px badge (20% larger than before). */
#main-container .projectPreview .userInfo svg {
    height: 36px;
    width: 36px;
    padding: 6px;
    border-radius: 50%;
    color: var(--brand);
    background: #f1e6ea;
}

#main-container .projectPreview .userInfo .userMenu img {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* Affordance: the account menu is clickable. A soft maroon ring around the
   avatar plus a ▾ caret after the name signal "this opens a menu". Hover
   (anywhere on the chip) deepens the ring. Both the avatar and the caret
   open the menu (caret wired in dashboard.js). */
#main-container .projectPreview .userInfo .userMenu > summary img,
#main-container .projectPreview .userInfo .userMenu > summary svg {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(110, 31, 61, .38);
    transition: box-shadow .15s ease;
}
#main-container .projectPreview .userInfo h3:hover .userMenu > summary img,
#main-container .projectPreview .userInfo h3:hover .userMenu > summary svg {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand, #6e1f3d);
}
.userMenuCaret {
    color: var(--brand, #6e1f3d);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
.userMenuCaret:hover { text-decoration: none; opacity: .75; }

/* Dark mode: the card behind the avatar is dark, so swap the white gap +
   maroon ring for a single light-pink ring, and lighten the caret. */
body.docent-dark #main-container .projectPreview .userInfo .userMenu > summary img,
body.docent-dark #main-container .projectPreview .userInfo .userMenu > summary svg {
    box-shadow: 0 0 0 2px rgba(231, 169, 189, .55);
}
body.docent-dark #main-container .projectPreview .userInfo h3:hover .userMenu > summary img,
body.docent-dark #main-container .projectPreview .userInfo h3:hover .userMenu > summary svg {
    box-shadow: 0 0 0 2px #e7a9bd;
}
body.docent-dark .userMenuCaret { color: #c76a88; }

/* ---- section headers with trailing rule ---- */
#main-container .projectPreview .card .card-body .top {
    display: flex;
    align-items: center;
    column-gap: 12px;
    margin: 12px 0 8px;
}

#main-container .projectPreview .card .card-body .top h3 {
    font-size: 1.05rem;
    letter-spacing: .2px;
    white-space: nowrap;
}

#main-container .projectPreview .card .card-body .top h3 a {
    color: var(--ink);
}

#main-container .projectPreview .card .card-body .top::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ---- tiles ---- */
#main-container .card .card-body .itemWrapper .singleItem {
    position: relative;
    background: #fff !important;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 11px 14px 10px;
    overflow: hidden;
    transition: .18s;
    min-height: 84px;
}

#main-container .card .card-body .itemWrapper .singleItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--c, #ccc);
}

#main-container .card .card-body .itemWrapper .singleItem:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(20, 30, 50, .12);
}

#main-container .card .card-body .itemWrapper .singleItem h4 {
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
}

#main-container .card .card-body .itemWrapper .singleItem h2 {
    margin-top: .1rem;
    font-size: 1.75rem;
    font-weight: 800;
    color: #222;
}

/* non-zero counter takes the accent colour */
#main-container .card .card-body .itemWrapper .singleItem:not(.count-0) h2 {
    color: var(--c);
}

#main-container .card .singleItem.count-0 {
    opacity: .6 !important;
}

#main-container .singleItem .detailsBtn a,
#main-container .singleItem .detailsBtn a * {
    color: var(--c) !important;
    font-weight: 600;
}

/* ---- accent colour per status (semantic, not positional) ---- */
#main-container .singleItem.Urgent,
#main-container .singleItem.note-error {
    --c: var(--t-urgent);
}

#main-container .singleItem.Soon,
#main-container .singleItem.note-warning {
    --c: var(--t-soon);
}

#main-container .singleItem.Future,
#main-container .singleItem.note-info {
    --c: var(--t-future);
}

#main-container .singleItem.More {
    --c: var(--t-far);
}

#main-container .singleItem.note-mention {
    --c: var(--t-mention);
}

#main-container .singleItem.meeting {
    --c: var(--t-meet);
}

#main-container .singleItem.meeting h4 {
    color: #8a909a;
}
/* ---- moved out of app_view.pt / app_inject_view.pt inline <style> ---- */
.dashboardHeading {
    text-align: center;
    font-weight: 700;
    margin: 4px 0 8px;
}

.text-right {
    text-align: right;
    padding-top: 1rem;
}

.newproject {
    color: #b8860b;
}

#calendardiv {
    border: 2px solid;
    background: #fff;
    padding: 1rem 0.5rem;
    height: auto;
    opacity: 1;
}

/* Closed state: fully collapse the calendar so it reserves NO vertical
   space (was opacity:0, which kept the box's full height as blank space). */
#calendardiv.opacity0 {
    display: none;
}

/* alert/notification labels arrive lower-case from the API */
#main-container .card .card-body .itemWrapper .singleItem h4 {
    text-transform: capitalize;
}

.projectLoadError {
    padding: 1rem 1.25rem;
    color: #7a1f3d;
    background: #faf3f5;
    border: 1px solid #e7cdd6;
    border-radius: 10px;
}

/* "You may not be assigned to any projects yet" fallback. Give it an
   explicit colour so it stays legible; the bare div otherwise inherited a
   dark text colour that vanished against the dark card in dark mode. */
.noProjectsMsg {
    padding: 0.75rem 0.25rem;
    color: #44506a;
    line-height: 1.5;
}

/* =========================================================================
   UI TWEAKS (2026-06): logo, heading, pill bar, portlet headers, footer
   ========================================================================= */

/* Logo +15%, blended into the page background */
#portal-logo {
    max-width: 287px;          /* was 250px */
    height: auto;
    background: #FAF9F6;
}
#portal-header,
#portal-top-wrapper,
.portal-header {
    background: #FAF9F6;
}

/* "Docent Dashboard" title: larger + distinct display font */
#main-container .dashboardHeading {
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    font-size: 2rem;
    color: #6e1f3d;
    letter-spacing: 0.3px;
}

/* Pill bar ~10% shorter */
#main-container .projectButton .card .card-body {
    padding-top: 12px;
    padding-bottom: 12px;
}
#main-container .projectButton a.button,
.projectButton .btn {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Right-column portlet header bars ("redish boxes") ~5% shorter */
#portal-column-two .card-header,
#main-container .portlet .card-header {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* Footer: show only the "Powered by Plone" line (.colophon). Hide the
   copyright row, the site-actions row (Log in/out) and the empty doormat. */
#portal-footer-wrapper .copyright,
#portal-footer-wrapper .site-actions,
#portal-footer-wrapper .doormat {
    display: none !important;
}

/* Right-column static portlets (Docent Help, Personal Info):
   force a uniform 48px icon regardless of the inline width/height
   (TinyMCE tends to strip those on save). */
#portal-column-two .portletStaticText img {
    width: 48px !important;
    height: 48px !important;
    vertical-align: middle;
    margin-right: 10px;
}

/* User account dropdown (the circle next to the user's name) */
#main-container .userInfo .userMenu {
    position: relative;
    display: inline-block;
}
#main-container .userInfo .userMenu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
#main-container .userInfo .userMenu > summary::-webkit-details-marker {
    display: none;
}
#main-container .userInfo .userMenu > summary:focus {
    outline: none;
}
#main-container .userInfo .userMenuDropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(20, 30, 50, 0.18);
    padding: 6px 0;
    z-index: 100;
}
#main-container .userInfo .userMenuDropdown a {
    display: block;
    padding: 9px 18px;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
    color: #05386B;
}
#main-container .userInfo .userMenuDropdown a:hover {
    background: #f5f3ef;
    text-decoration: none;
}

/* Set Icon page */
.setUserIcon { max-width: 640px; }
.setUserIcon h1 { margin-bottom: .5rem; }
.setUserIcon .currentIcon {
    display: flex; align-items: center; gap: 10px; margin: 12px 0;
}
.setUserIcon .currentIcon img { border-radius: 50%; object-fit: cover; }
.setUserIcon .iconChoice { display: flex; gap: 24px; margin: 12px 0; }
.setUserIcon .iconChoice label { font-weight: 600; cursor: pointer; }
.setUserIcon fieldset {
    border: 1px solid #e3e3e3; border-radius: 10px; padding: 14px 16px; margin: 14px 0;
}
.setUserIcon legend { font-size: .95rem; font-weight: 600; padding: 0 6px; width: auto; }
.setUserIcon .presetGallery { display: flex; flex-wrap: wrap; gap: 14px; }
.setUserIcon .presetOption {
    display: inline-flex; cursor: pointer; border: 2px solid transparent;
    border-radius: 12px; padding: 6px;
}
.setUserIcon .presetOption:hover { border-color: #cdb4be; }
.setUserIcon .presetOption.selected { border-color: #6e1f3d; background: #faf3f5; }
.setUserIcon .presetOption input { display: none; }
.setUserIcon .presetOption img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
}
.setUserIcon .formControls { margin-top: 16px; }

/* =========================================================================
   Pill-inside-card layout (mockup v2)
   ========================================================================= */

/* the single white card that wraps the pills + the injected panel */
#main-container .mainCard {
    background: #fff;
    border: 1px solid var(--line, #ececec);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(20, 30, 50, .06);
    padding: 16px 26px 18px;
}

/* Logged out (mainCard-anon, set by app_view.pt): no empty card frame
   around the "Please Log in first" button, in light or dark mode. */
#main-container .mainCard.mainCard-anon,
body.docent-dark #main-container .mainCard.mainCard-anon {
    background: transparent;
    border: 0 none;
    box-shadow: none;
    padding: 0;
}

/* pills now sit at the top of the card (no separate box) */
#main-container .mainCard .cardtop {
    opacity: 1;
    margin-bottom: 4px;
}
#main-container .mainCard .cardtop .nav-tabs {
    margin: 0;
    padding: 0;
}

/* flatten the injected inner card — the outer .mainCard provides the frame */
#main-container .mainCard .projectPreview .card.mainbox {
    border: 0 none !important;
    box-shadow: none !important;
    border-radius: 0;
    margin-top: 0;
}
#main-container .mainCard .projectPreview .card {
    margin-top: 0;
}
#main-container .mainCard .projectPreview .card .card-body {
    padding: 6px 0 0;
}

/* bottom-right footnote: project + dashboard timestamps and refresh */
#main-container .cardfoot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--line, #ececec);
    font-size: .82rem;
    color: #8a909a;
}
#main-container .cardfoot b { font-weight: 600; color: #5a6472; }
#main-container .cardfoot .sep { color: #c9ced6; }
#main-container .cardfoot .refreshLink { color: var(--brand, #6e1f3d); font-weight: 600; }

/* align the right portlet column's top with the main card's top
   (offset ≈ the "Docent Dashboard" heading height; fine-tune if needed) */
#portal-column-two { padding-top: 4.2rem; }

/* Email-preview "send test" box */
.testEmailBox {
    background: #faf8f4;
    border: 1px solid #e7cdd6;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.testEmailBox form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testEmailBox input[type="email"] { padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; }

/* Injected "send test" box on the email settings control panel */
.emailTestBox {
    margin: 8px 0 18px;
    padding: 12px 14px;
    background: #faf8f4;
    border: 1px solid #e7cdd6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.emailTestBox input[type="email"] {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.emailTestBox .emailTestMsg { color: #6e1f3d; font-weight: 600; }

/* Put the user name/icon on the same line as the pills (top-right of the
   card) instead of its own row, and reclaim the freed white space. */
#main-container .mainCard { position: relative; }
#main-container .mainCard .projectPreview .userInfo {
    position: absolute;
    top: 18px;
    right: 26px;
    margin: 0;
    padding-top: 0;
    z-index: 5;
}
#main-container .mainCard .projectPreview .card .card-body { padding-top: 0; }
#main-container .mainCard .projectPreview .card .card-body .topItemBox > .top {
    margin-top: 4px;
}

/* The injected Bootstrap .card is position:relative, which would anchor the
   absolutely-positioned user/icon to it (below the pills). Neutralise it so
   the user/icon anchors to .mainCard and lands on the pills' row. */
#main-container .mainCard .projectPreview .card.mainbox { position: static; }

/* =========================================================================
   Laptop-fit (2026-06): keep the whole dashboard — logo → 3 rows → calendar
   button — on a single laptop screen.
   ========================================================================= */

/* The calendar toggle button and the update-status footer share one row.
   calendar.js relocates the per-project .cardfoot here on pat-inject-success,
   so the timestamps stay visible without costing height inside the card. */
#main-container .calWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin: 8px 18px 0;
}
/* update status, once relocated next to the button: no border/top-margin,
   pushed to the right edge of the row. */
#main-container .calWrap > .cardfoot {
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
}
/* the calendar panel itself wraps to its own full-width line below the row */
#main-container .calWrap > #calendardiv {
    flex-basis: 100%;
}

/* =========================================================================
   User circle in the OUTER template (app_view.pt): always visible after
   login, anchored top-right of the card, independent of any project panel.
   ========================================================================= */
#main-container .mainCard > .userInfo {
    position: absolute;
    top: 18px;
    right: 26px;
    margin: 0;
    z-index: 6;
    display: flex;
    justify-content: flex-end;
}
#main-container .mainCard > .userInfo h3 {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #44506a;
}
#main-container .mainCard > .userInfo svg {
    height: 36px;
    width: 36px;
    padding: 6px;
    border-radius: 50%;
    color: var(--brand);
    background: #f1e6ea;
}
#main-container .mainCard > .userInfo .userMenu img {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* =========================================================================
   DARK MODE (dashboard only)
   Activated by the 'docent-dark' class that dashboard.js adds to <body>
   ONLY on the dashboard page, so editing screens and control panels stay
   light. Toggled from the user-circle menu; choice stored in localStorage.
   Self-contained and easy to revert — delete this block plus the toggle.
   ========================================================================= */
/* Layered palette: page (darkest) -> frame -> tiles, for depth. */
body.docent-dark { background: #0f1115; }

body.docent-dark #main-container {
    --ink: #eef1f5;
    --line: #2c313c;
    /* brighter status accents so the colour-coding still reads on dark */
    --t-urgent: #ff5b66;
    --t-soon: #e8b23a;
    --t-future: #2bbf6b;
    --t-far: #7c83ff;
    --t-mention: #b6bcc4;
    --t-meet: #8aa0b8;
}

/* (2) page title — lift it off the dark with a soft warm white */
body.docent-dark #main-container .dashboardHeading { color: #f2e3e9; }

/* "no projects assigned" fallback text — legible against the dark card */
body.docent-dark #main-container .noProjectsMsg { color: #cdd4df; }

/* the wrapping card that holds the pills + the panel (the frame) */
body.docent-dark #main-container .mainCard {
    background: #1a1d24;
    border-color: #2c313c;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

/* (1) inner panel cards are transparent so the dark frame shows through —
   removes the bright white slab behind the tiles */
body.docent-dark #main-container .projectPreview .card,
body.docent-dark #main-container .projectPreview .card.mainbox,
body.docent-dark #main-container .projectPreview .card .card-body {
    background: transparent !important;
    box-shadow: none !important;
}

/* (4) section headers + name next to the circle */
body.docent-dark #main-container .projectPreview .card .card-body .top h3,
body.docent-dark #main-container .projectPreview .card .card-body .top h3 a {
    color: #eef1f5;
}
body.docent-dark #main-container .projectPreview .userInfo h3 { color: #d4dae3; }

/* (6) count tiles — one step lighter than the frame, for depth */
body.docent-dark #main-container .card .card-body .itemWrapper .singleItem {
    background: #232831 !important;
    border-color: #333a46;
}
/* (4) tile labels */
body.docent-dark #main-container .card .card-body .itemWrapper .singleItem h4 { color: #b6bdc9; }
/* (3) zero counts stay legible (non-zero keeps its brightened accent colour) */
body.docent-dark #main-container .card .card-body .itemWrapper .singleItem.count-0 h2 { color: #cfd6e0; }
body.docent-dark #main-container .card .singleItem.count-0 { opacity: .72 !important; }

/* inactive pills become dark chips (active pills keep their project colour) */
body.docent-dark #main-container .projectButton a.button:not(.active),
body.docent-dark .projectButton .btn:not(.active) {
    background: #232831 !important;
    color: #d4dae3 !important;
    border-color: #3a414e !important;
}

/* footnote row: timestamps + refresh */
body.docent-dark #main-container .cardfoot { color: #9aa3b2; }
body.docent-dark #main-container .cardfoot b { color: #cdd4df; }
body.docent-dark #main-container .cardfoot .sep { color: #4a525f; }

/* (5) right-column portlets (news + the static Help / Testers portlets).
   The card backgrounds were darkened; here we make every header, body and
   link readable. News headers keep their inline project colour. */
body.docent-dark #portal-column-two .card,
body.docent-dark #portal-column-two .portlet,
body.docent-dark #portal-column-two .portletWrapper,
body.docent-dark .info_portlet .card {
    background: #1a1d24;
    border-color: #2c313c;
}
/* headers — lighten the text (static portlets have no coloured bar) */
body.docent-dark #portal-column-two .card-header,
body.docent-dark #portal-column-two .portletHeader,
body.docent-dark #portal-column-two .portletHeader a {
    color: #f1f3f7 !important;
    border-bottom-color: #2c313c;
}
/* body + footer text */
body.docent-dark #portal-column-two .card-body,
body.docent-dark #portal-column-two .card-body p,
body.docent-dark #portal-column-two .card-footer,
body.docent-dark #portal-column-two .portletContent,
body.docent-dark #portal-column-two .portletItem {
    color: #d2d8e2 !important;
}
/* links: news item titles, footer "All News", static-text links */
body.docent-dark #portal-column-two .card-body h5 a,
body.docent-dark #portal-column-two .card-body a,
body.docent-dark #portal-column-two .card-footer a,
body.docent-dark #portal-column-two .portletContent a {
    color: #bcd2ff !important;
}

/* logo: swap to the light-coloured wordmark so it sits cleanly on the dark
   page — no plate needed. The header strip blends into the page. */
body.docent-dark #portal-header,
body.docent-dark #portal-top-wrapper,
body.docent-dark .portal-header { background: transparent !important; }
/* dashboard.js swaps the logo's src to docent-logo-dark.svg in dark mode;
   here we just drop the light-mode plate so it sits bare on the dark page. */
body.docent-dark #portal-logo,
body.docent-dark #portal-logo img {
    background: none !important;
    padding: 0;
    border-radius: 0;
    max-width: 287px;
    height: auto;
}

/* the account dropdown itself */
body.docent-dark .userMenuDropdown {
    background: #232831;
    border-color: #3a414e;
}
body.docent-dark .userMenuDropdown a { color: #eef1f5; }
body.docent-dark .userMenuDropdown a:hover { background: #2c313b; }

/* Right-column portlet icons (Docent Help, Docent Testers): one consistent
   size matching the "?" icon, and strip any border/box/background so a
   manually-added icon doesn't show an ugly square. (A box baked into an
   image file itself can't be removed here — use a transparent icon.) */
#portal-column-two .portletStaticText img,
#portal-column-two .card-body p img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ===== Calendar filter bar (project + meeting-type multi-selects) ===== */
.calFilters { display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
              padding:8px 4px 16px; }
.calFilters .filtercol { display:flex; flex-direction:column; gap:5px; }
.calFilters .filtercol > label { font-size:.8rem; font-weight:700;
                                 color:var(--brand,#6e1f3d); letter-spacing:.2px; }
.calFilters-spacer { flex:1; min-width:12px; }

.calDropdown { position:relative; width:185px; border:1px solid #cfd4dc;
               border-radius:10px; background:#fff; }
.calDropdown .dd-toggle { display:flex; justify-content:space-between;
                          align-items:center; padding:9px 12px; cursor:pointer;
                          font-size:.92rem; color:#1f2733; }
.calDropdown .dd-toggle .caret { color:#6b7280; }
.calDropdown .dd-list { position:absolute; z-index:60; top:calc(100% + 4px);
                        left:0; right:0; background:#fff; border:1px solid #cfd4dc;
                        border-radius:10px; box-shadow:0 8px 20px rgba(20,30,50,.14);
                        max-height:240px; overflow:auto; }
.calDropdown .dd-list[hidden] { display:none; }
.calDropdown .dd-item { display:flex; align-items:center; gap:9px; padding:8px 12px;
                        font-size:.9rem; cursor:pointer; margin:0; }
.calDropdown .dd-item:hover { background:#f6f8fa; }
.calDropdown .dd-item.all { font-weight:700; border-bottom:1px solid #eee;
                            background:#fbfcfd; }
.calDropdown .dd-item input { width:16px; height:16px; accent-color:var(--brand,#6e1f3d); }

.btn-outlook { align-self:flex-end; display:inline-flex; align-items:center; gap:8px;
               padding:10px 16px; background:var(--brand,#6e1f3d); color:#fff;
               border:none; border-radius:10px; font-size:.92rem; font-weight:600;
               cursor:pointer; box-shadow:0 6px 16px rgba(110,31,61,.22); }
.btn-outlook:hover { filter:brightness(1.08); }
.btn-outlook svg { width:18px; height:18px; }

/* dark mode */
body.docent-dark .calDropdown { background:#232831; border-color:#3a414e; }
body.docent-dark .calDropdown .dd-toggle { color:#e8eaed; }
body.docent-dark .calDropdown .dd-toggle .caret { color:#aab2c0; }
body.docent-dark .calDropdown .dd-list { background:#232831; border-color:#3a414e; }
body.docent-dark .calDropdown .dd-item { color:#e8eaed; }
body.docent-dark .calDropdown .dd-item:hover { background:#2c313b; }
body.docent-dark .calDropdown .dd-item.all { background:#1f242c; border-bottom-color:#333a46; }

/* ===== Dark mode: FullCalendar grid (so the calendar matches the theme) ===== */
/* the calendar panel itself is a hardcoded white box — darken it */
body.docent-dark #calendardiv { background:#16181d !important; border-color:#333a46; }
body.docent-dark .fc { color:#e8eaed; }
body.docent-dark .fc td, body.docent-dark .fc th,
body.docent-dark .fc .fc-scrollgrid { background-color:transparent !important; }
body.docent-dark .fc .fc-toolbar-title { color:#eef1f5; }
body.docent-dark .fc-theme-standard .fc-scrollgrid,
body.docent-dark .fc-theme-standard td,
body.docent-dark .fc-theme-standard th { border-color:#333a46; }
body.docent-dark .fc .fc-col-header-cell-cushion,
body.docent-dark .fc .fc-daygrid-day-number { color:#cdd4df; }
body.docent-dark .fc .fc-daygrid-day { background:transparent; }
body.docent-dark .fc .fc-day-today { background:#1f2630 !important; }
body.docent-dark .fc .fc-day-other .fc-daygrid-day-number { color:#5a6472; }
body.docent-dark .fc .fc-list,
body.docent-dark .fc .fc-list-day-cushion { background:#1a1d24; }
/* toolbar buttons */
body.docent-dark .fc .fc-button-primary { background:#2c313b; border-color:#3a414e; color:#e8eaed; }
body.docent-dark .fc .fc-button-primary:hover { background:#363c48; border-color:#454c5a; }
body.docent-dark .fc .fc-button-primary:not(:disabled).fc-button-active,
body.docent-dark .fc .fc-button-primary:not(:disabled):active { background:var(--brand,#6e1f3d); border-color:var(--brand,#6e1f3d); }
body.docent-dark .fc .fc-button-primary:disabled { background:#22262e; border-color:#2c313b; color:#7b8290; }

/* Calendar text: match the main content box (light colour + Roboto). The
   global "#main-container a" colour (#05386B) was overriding FullCalendar's
   day numbers and headers (they're links), making them dark-on-dark. */
#main-container .fc,
#main-container .fc table { font-family: "Roboto", sans-serif; }
body.docent-dark #main-container .fc,
body.docent-dark #main-container .fc a,
body.docent-dark #main-container .fc .fc-col-header-cell-cushion,
body.docent-dark #main-container .fc .fc-daygrid-day-number,
body.docent-dark #main-container .fc .fc-daygrid-day-top,
body.docent-dark #main-container .fc .fc-toolbar-title {
    color: #e8eaed !important;
}

/* ↻ Refresh relocated to the top-right. Positioned absolutely inside
   .mainCard; calendar.js sets its top to line up with the "Your Tasks"
   heading after each project loads. The default `top` tucks the Help "?"
   just under the user chip (which ends ~54px down) for users with no
   project assigned, where no panel injects and calendar.js never sets
   `top` — same right edge as the chip so they line up. */
.refreshSlot { position: absolute; top: 60px; right: 26px; text-align: right; z-index: 5;
               display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* Just the ↻ glyph now (no "Refresh" word), sized to match the 26px "?" icon. */
.refreshSlot .refreshLink { color: var(--brand, #6e1f3d); font-weight: 400;
                            font-size: 26px; line-height: 1; text-decoration: none;
                            display: inline-flex; align-items: center; }
.refreshSlot .refreshLink:hover { text-decoration: none; opacity: .75; }
body.docent-dark #main-container .refreshSlot .refreshLink,
body.docent-dark #main-container .cardfoot .refreshLink { color: #eef1f5 !important; }

/* Help "?" icon, sized a touch larger than the Refresh link and sitting
   alongside it in the top-right. Inherits currentColor so it tracks the
   brand colour in light mode and goes light in dark mode. */
.refreshSlot .helpLink { display: inline-flex; align-items: center;
                         color: var(--brand, #6e1f3d); line-height: 0; }
.refreshSlot .helpLink svg { width: 26px; height: 26px; display: block; }
.refreshSlot .helpLink:hover { opacity: .8; }
body.docent-dark #main-container .refreshSlot .helpLink { color: #eef1f5 !important; }

/* Visit + pencil links below each pill */
.pillLinks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 3px 0 0;
    font-size: .75rem;
}
.pillLinks a { text-decoration: none; font-weight: 600; }
.pillLinks a:hover { text-decoration: underline; }
.pillVisit { color: var(--brand, #6e1f3d); display: inline-flex; align-items: center; gap: 3px; }
.pillEdit  { color: var(--brand, #6e1f3d); font-size: .95rem; }

body.docent-dark #main-container .pillVisit,
body.docent-dark #main-container .pillEdit { color: #eef1f5 !important; }

/* "Test connection" control on the Project connector form */
.testConnBox { margin: 10px 0 14px; }
.testConnRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testConnMsg { font-weight: 600; font-size: .88rem; }
.testConnMsg.ok { color: #1f9d55; }
.testConnMsg.err { color: #d0021b; }

/* Login button is dark-on-dark for an anonymous visit while dark mode is on
   (kept from a previous logged-in session). Make it clearly visible. */
body.docent-dark .loginbutton {
    background: var(--brand, #6e1f3d) !important;
    color: #fff !important;
    border-color: var(--brand, #6e1f3d) !important;
}
body.docent-dark .loginbutton:hover { filter: brightness(1.12); }
body.docent-dark .loginbutton svg,
body.docent-dark .loginbutton .icon {
    color: #fff !important;
    fill: #fff !important;
}