/* Colour variables */

/* CSS custom-property form of the palette above (the .workupXxx classes remain the source of these
   hex values - added additively here for components that need to reference colours in CSS, e.g. the
   Home dashboard redesign). Existing rules are untouched; nothing below is referenced anywhere yet
   except the new Home dashboard block at the end of this file. */
:root {
  /* Panel/section heading size - shared by h4, .section-heading and the home page panels */
  --section-heading-size: 17px;

  --plum-950: #42033D;
  --plum-900: #761970;
  --plum-800: #901889;
  --plum-700: #B01BA9;
  --plum-600: #D425D0;
  --plum-500: #F045EF;

  --violet-800: #783071;
  --violet-700: #973A90;
  --violet-600: #B247AC;
  --violet-300: #ECBBEB;
  --violet-200: #F5D9F5;
  --violet-100: #F9ECFB;
  --violet-50:  #FDF6FD;

  --teal-800: #105F58;
  --teal-700: #0E776E;
  --teal-600: #0C9588;
  --teal-500: #13B9A6;
  --teal-100: #CCFBF1;
  --teal-50:  #F0FDFA;

  --carrot-700: #A93914;
  --carrot-500: #E6751A;
  --carrot-400: #ED932A;
  --carrot-100: #FBE8CA;
  --carrot-50:  #FEF7EC;

  --pink-700: #C20E2F;
  --pink-600: #E5193A;
  --pink-500: #F83B51;
  --pink-100: #FFE3E4;
  --pink-50:  #FFF1F1;

  --sky-700: #1B6883;
  --sky-500: #1B9FBF;
  --sky-100: #D4F4F9;
  --sky-50:  #EEFBFD;

  --grey-900: #3D3D3D;
  --grey-600: #5D5D5D;
  --grey-300: #B0B0B0;
  --grey-200: #E7E7E7;
  --grey-100: #EFEFEF;
  --grey-50:  #F6F6F6;
  --white:    #FFFFFF;

  --border-soft: rgba(66,3,61,0.06);
  --border:      rgba(66,3,61,0.10);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 7px;
}



/******************
  Text Colours
*******************/
.workupPlum { color: #42033D; }
.workupPink { color: #973A90; }
.workupYellow { color: #FFCA05; }
.workupPalePink { color: #FFCFD2; }
.workupOrange { color: #ED942B; }
.workupPaleBlue { color: #7ED6EA; }
.workupTeal { color: #2CD5BF; }
.workupAqua { color: #9DF7E5; }
.workupDark { color: #111111; }
.workupLight { color: #F5F5F5; }
.workupViolet { color: #973A90; }
.workupCarrott { color: #ED942B; }
.workupYellow { color: #FFCA05; }
.workupRed { color: #F83B51; }
.workupGrey { color: #888888; }
.workupBlack { color: #3d3d3d; }
.textDark { color: #3d3d3d; }
.textSecondary { color: #5d5d5d; }

.workupPink700 { color: #C20E2F; }
.workupPink600 { color: #E5193A; }
.workupPink500 { color: #f83b51; }
.workupPink400 { color: #FE6E7A; }
.workupPink300 { color: #FFA2A8; }
.workupPink200 { color: #FFCFD2; }
.workupPink100 { color: #FFE3E4; }
.workupPink50  { color: #FFF1F1; }

.workupTeal300 { color: #5DEBD4; }
.workupTeal800 { color: #105F58; }
.workupTeal500 { color: #13B9A6; }
.workupTeal900 { color: #134E4A; }
.workupTeal700 { color: #0E776E; }
.workupTeal600 { color: #0C9588; }
.workupTeal400 { color: #2CD5BF; }
.workupTeal200 { color: #9DF7E5; }
.workupTeal100 { color: #CCFBF1; }
.workupTeal50 { color: #F0FDFA; }

.workupViolet950 { color: #40123B; }
.workupViolet900 { color: #632C5D; }
.workupViolet800 { color: #783071; }
.workupViolet700 { color: #973A90; }
.workupViolet600 { color: #B247AC; }
.workupViolet500 { color: #CE67CA; }
.workupViolet400 { color: #E092DD; }
.workupViolet300 { color: #ECBBEB; }
.workupViolet200 { color: #F5D9F5; }
.workupViolet100 { color: #F9ECFB; }
.workupViolet50  { color: #FDF6FD; }

.workupCarrot700 { color: #A93914; }
.workupCarrot600 { color: #CC5513; }
.workupCarrot500 { color: #E6751A; }
.workupCarrot400 { color: #ED932A; }
.workupCarrot300 { color: #F1B258; }
.workupCarrot200 { color: #F6D091; }
.workupCarrot100 { color: #FBE8CA; }
.workupCarrot50  { color: #FEF7EC; }

.workupSkyBlue300 { color: #73D6EA; }
.workupSkyBlue500 { color: #1B9FBF; }
.workupSkyBlue950 { color: #0E2E3E; }
.workupSkyBlue900 { color: #1E475B; }
.workupSkyBlue800 { color: #1F556B; }
.workupSkyBlue700 { color: #1B6883; }
.workupSkyBlue600 { color: #1980A1; }
.workupSkyBlue500 { color: #1B9FBF; }
.workupSkyBlue400 { color: #36BCDA; }
.workupSkyBlue300 { color: #73D6EA; }
.workupSkyBlue200 { color: #AEE8F3; }
.workupSkyBlue100 { color: #D4F4F9; }
.workupSkyBlue50  { color: #EEFBFD; }

.workupPlum950 {color: #42033D; }
.workupPlum900 {color: #761970; }
.workupPlum800 {color: #901889; }
.workupPlum700 {color: #B01BA9; }
.workupPlum600 {color: #D425D0; }
.workupPlum500 {color: #F045EF; }
.workupPlum400 {color: #FA78FA; }
.workupPlum300 {color: #FBABFC; }
.workupPlum200 {color: #FBD0FE; }
.workupPlum100 {color: #FDE8FF; }
.workupPlum50  {color: #FEF4FF; }

.workupGrey800 { color: #454545; }

.workupGrey200 { color: #d1d1d1; }

/* Bullet Colours */
.bulletYellow {
    background-color: #FFCA05;
    color: #ffffff;
}
.bulletOrange {
    background-color: #ED942B;
    color: #ffffff;
}
.bulletTeal600 {
    background-color: #0C9588;
    color: #ffffff;
}
.bulletCarrot600 {
    background-color: #CC5513;
    color: #ffffff;
}
.bulletPaleBlue {
    background-color: #7ED6EA;
    color: #ffffff;
}
.bulletSkyBlue600 {
    background-color: #1980A1;
    color: #ffffff;
}

/* Background Colours */
.workupPlumBack { background-color: #42033D; }
.workupPinkBack { background-color: #973A90; }
.workupYellowBack { background-color: #FFCA05; }
.workupPalePinkBack { background-color: #FFCFD2; }
.workupOrangeBack { background-color: #ED942B; }
.workupPaleBlueBack { background-color: #7ED6EA; }
.workupAquaBack { background-color: #9DF7E5; }
.workupDarkBack { background-color: #111111; }
.workupLightBack { background-color: #F5F5F5; }
.workupLightBlueBack { background-color: #EFF4FA; /* very pale blue for dashboard etc */ }
.backgroundTeal400 { background-color: #2CD5BF; }
.backgroundGrey100 { background-color: #E7E7E7; }

/* Project Task Colours */
.todoColour { color: #A93914; }
.todoBarColour { background-color: #A93914 !important; } /* Carrot 700 */
.todoBackColour { background-color: #FEF7EC; }/* Carrot 700 ? */
.inProgressColour { color: #0C9588; }/* Carrot 50 */
.inProgressBarColour {  background-color: #0c9588 !important; }/* Teal 600 */
.inProgressBackColour { background-color: #f0fdfa; }
.onHoldColour { color: #973a90; }
.onHoldBarColour { background-color: #973a90 !important; }
.onHoldBackColour { background-color: #fdf6fd; }
.completeColour { color: #1e475b; }
.completeBarColour { background-color: #1e475b !important; }
.completeBackColour { background-color: #eefbfd; }

/* Font styles */

.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f24 { font-size: 24px; }
.f28 { font-size: 28px; }
.f32 { font-size: 32px; }

.op5 { opacity: 0.5; }
.op7 { opacity: 0.7; }

.f300 { font-weight: 300; }
.f400 { font-weight: 400; }
.f500 { font-weight: 500; }
.f600 { font-weight: 600; }
.f700 { font-weight: 700; }
.f800 { font-weight: 800; }
.f900 { font-weight: 900; }



/* Button Colours, are these used anywhere? */
.btnYellow {
    background-color: #FFCA05;
    color: #111;
}
.btnYellow:hover {
    background-color: #FFE143;
    color: #111;
}
.btnOrange {
    background-color: #ED932A;
    color: white;
}
.btnOrange:hover {
    background-color: #E6751A;
    color: #ffffff;
}
.btnLightBlue {
    background-color: #7ED6EA;
    color: white;
}
.btnLightBlue:hover {
    background-color: #1980A1;
    color: #ffffff;
}

/* Heading styles and colours */
h1, h2, h3, h4, h5 {
    color: #42033D; /* plum */
}

/* Panel/section headings look the same whatever the tag, so the tag can follow the page outline
   (e.g. <h2 class="widgetHeader section-heading"> under an <h1> page title) */
.section-heading { font-size: var(--section-heading-size); font-weight: 600; }
.subheading {
    padding: 4px;
}

/* Button and link Styles */
.btn-outline-primary {
    color: #973A90;
    border-color: #973A90;
    border-radius: 8px;
    height: 36px;
}
.btn-outline-secondary {
    color: #973A90;
    border-color: #973A90;
    border-radius: 8px;
    height: 36px;
}
.btn-outline-primary:hover {
    color: #CE67CA;
    border-color: #CE67CA;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
    background-color: #CE67CA;
    border-color: #CE67CA;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(151, 58, 144, 0.25);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-small {
    padding: 2px 8px;
    height: 28px;
}
a, .btn-link {
    color: #973A90;
}
a:hover {
    color: #42033D;
    text-decoration: underline;
}
.btn-primary {
    color: #fff;
    border-color: #973A90;
    background-color: #973A90;
    border-radius: 8px;
    height: 36px;
}
.btn-primary:hover {
    color: #fff;
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-primary:focus, .btn-primary.focus {
    background-color: #CE67CA;
    border-color: #CE67CA;
    box-shadow: 0 0 0 0.2rem rgba(151, 58, 144, 0.25);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #fbabfc;
    background-color: transparent;
}
.btn-link:hover {
    color: #42033D;
    text-decoration: underline;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #42033D;
    border-color: #42033D;
}
.bigButton {
    border-radius: 70px;
/*    padding: 12px 20px 12px 20px;
*/    width: 45%;
}
.medButton {
    border-radius: 70px;
    padding: 6px 12px 6px 12px;
    width: 45%;
}
.buttonPrimary {
    background-color: #fff;
    border: 1px solid #973a90;
    border-radius: 8px;
    color: #973a90;
    height: 36px;
}

.buttonPrimary:hover {
    background-color: #FDF6FD; /* #34495E; */ /*#334486;*/
    border: 1px solid #973A90;
    color: #973a90;
}

/* Pills, lozenges */
.plumLozenge {
    border: 1px solid #973a90;
    border-radius: 50px;
    height: 36px;
    padding: 8px 16px 8px 16px;
    color: #5d5d5d;
    background-color: #fdf6fd;
    margin-left: 8px;
}
.whiteLozenge {
    border: 1px solid #e7e7e7;
    border-radius: 50px;
    height: 36px;
    padding: 8px 16px 8px 16px;
    color: #973a90;
    background-color: #fff;
    margin-left: 8px;
}
.nav-pills .nav-link {
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 20px;
    color: #5d5d5d;
    height: 36px;
}
.nav-pills .nav-item {
    padding: 4px;
}
.nav-pills .nav-link:hover {
    background-color: #FDF6FD; /* #34495E; */ /*#334486;*/
    border: 1px solid #973A90;
    color: #973a90;
    border-radius: 20px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    /* color: #fff; */
    background-color: #FDF6FD; /* #34495E; */ /*#334486;*/
    border: 1px solid #973A90;
    color: #973a90;
    border-radius: 20px;
}


/* Modal dialog styles */
/*.modal-header {
    background-color: #42033D;*/ /* plum */
/*}*/
.modal-title {
    color: #3d3d3d;
}
.modal-header {
    padding: 0.5rem;
    color: #3d3d3d;
    background: #ffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: 0px;
    /*padding: 16px;*/
}
.modal-content {
    border-radius: 16px;
    padding: 6px 12px;
}
.modal-footer {
    border: 0px;
    padding: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    justify-content: space-around;
}
.close {
    color: #3d3d3d;
    opacity: 0.50;
}
.close:hover {
    opacity: 1;
}

/* Navigation Menus */
#myNavbar .nav-item a:hover {
    text-decoration: none;
    font-weight: bold;
    /*color: #39C5E6;*/ /*#acd433; green*/ /*#ffd800 yellow */
}
#myNavbar .dropdown-menu {
    background-color: #42033D;
}
#myNavbar .dropdown-item:hover {
    text-decoration: none;
    font-weight: bold;
    background-color: #42033D;
    color: #ffffff;
}
#myNavbar a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
}

/* Page Containers */
.container-fluid {
    background-color: #ffffff;
    border-top-left-radius: 10px;
}
.contentWrapper {
    background-color: #EFF4FA;
}
.pageContainer {
    background-color: #fff;
    border-top-left-radius: 10px;
    height: calc(100% - 94px);
}
.headerContainer {
    padding-left: 15px;
    padding-right: 15px;
    height: 94px;
}
.contentContainer {
    background-color: #EFF4FA;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 2px solid #d1d1d1;
}

/* Table Styles */
th, td {
    padding: 6px;
}


/* Miscellaneous styles */
.boldHeader {
    font-family: "antique-olive", sans-serif;
    font-weight: 700
}
/* Login/Signup etc */
.boxStyle {
    border: 4px solid #973A90; /* Plum */
    background-color: #EFF4FA; /* very pale blue */
}
.nameHighlight {
    color: #973A90;
    font-size: 1.1rem;
}
.ibox-content small {
    color: #42033D;
}



/* Syncfusion style overrides */
.e-schedule-event-tooltip {
    background-color: #973A90;
}
.e-tooltip-wrap.e-popup {
    background-color: #973A90;
    border: 1px solid #973A90;
    border-bottom-right-radius: 6px;
}
.e-tooltip-wrap .e-tip-content {
    color: #fff;
    background-color: #973A90;
}
.e-grid .e-gridheader .e-headercelldiv {
    color: #42033D;
}
.e-chip-list.e-selection .e-chip.e-active.e-outline {
    background-color: #42033D;
    border-color: #42033D;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: #973A90;
    color: #fff;
}
.e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment {
    height: 52px;
}

/* Chips when disabled, selected(active) and others */
.e-chip-list.e-selection .e-chip.e-active.e-outline.e-disabled {
    background-color: #973A90;
    border-color: #42033d;
    color: #fff;
}
.e-chip-list.e-chip.e-outline.e-disabled, .e-chip-list .e-chip.e-outline.e-disabled {
    background: #fff;
    border-color: #fff;
    color: #fff;
}
.e-schedule .e-agenda-view .e-appointment {
    border-left: 3px solid #973A90;
}
.e-schedule .e-agenda-view .e-day-date-header.e-current-day {
    color: #973A90;
}
table td .weekend {
    background-color: #f5d9f5 !important;
}
.e-schedule .e-timeline-view .e-date-header-wrap table td.e-current-day, .e-schedule .e-timeline-month-view .e-date-header-wrap table td.e-current-day {
    color: #973a90;
}
.e-pager .e-currentitem /* Grid Pager*/
{
    border-bottom: 2px solid #42033D;
}
.e-pager .e-numericitem {
    color: #42033D;
}
.e-dlg-header-content {
    background-color: #34495E;
    color: #fff;
}
.e-dlg-header {
    color: #fff;
}
.e-dialog {
    border: 0px;
    border-radius: 6px;
}
.e-icon-dlg-close {
    color: #fff;
    opacity: 1;
}
.e-schedule .e-schedule-toolbar .e-active-view .e-tbar-btn-text, .e-schedule .e-schedule-toolbar .e-active-view .e-icons {
    color: #973a90;
}
.e-schedule .e-schedule-toolbar .e-tbar-btn:hover, .e-schedule .e-schedule-toolbar .e-tbar-btn:focus {
    background-color: #973a90;
    border-color: #973a90;
    color: #fff;
}

/* Multi select chips */
.e-chip-list.e-chip.e-outline.e-active, .e-chip-list .e-chip.e-outline.e-active {
    background-color: #42033D;
    border-color: #42033D;
}
.e-input-group, .e-input-group.e-control-wrapper {
    border-radius: 8px;
}
.e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
    background-color: #973a90;
    color: #fff;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #973a90;
    border-color: #973a90;
    color: #fff;
}
.e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: #973a90;
    border-color: #973a90;
    color: #fff;
}
.e-checkbox-wrapper:hover .e-frame:not(.e-check), .e-checkbox-wrapper:hover .e-frame:not(.e-stop)::before, .e-css.e-checkbox-wrapper:hover .e-frame:not(.e-check), .e-css.e-checkbox-wrapper:hover .e-frame:not(.e-stop)::before {
    content: "\e718";/* "\e774"; these are syncfusion icon codes and vary per library these are different in BS4 and 5. Appears on the checkbox list hover */ 
}

.e-grid .e-row {
    height: 44px;
}

/* Adjust header row height as well (optional) */
.e-grid .e-columnheader .e-headercell {
    height: 44px;
}


/* Kanban card*/
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
    margin-bottom: 12px;
    min-height: 50px;
}
.e-kanban .e-card-footer-css {
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 16px;
    width: 16px;
    margin-right: 8px;
}
.kanbanCard {
    font-family: 'Sora', sans-serif;
}
.kanbanIcon {
    margin-right: 4px;
    font-size: 0.8rem;
}
.kanbanDescription { margin-top: 6px; }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card {
    border-radius: 8px;
}
.fluent-dark .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label,
.bootstrap-dark .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label,
.highcontrast .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label {
    background: #4b5563;
    color: #fff;
}
/* Sets Kanban column background colour but not the header */
.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
    background-color: #f2f4f6;
    border-bottom-left-radius: 0px 0px 8px 8px;
}
/* Kanban header elements */
.e-kanban .e-kanban-table .e-header-cells {
    background-color: #f2f4f6;
    border-radius: 8px 8px 0px 0px;
}


/* Form and Input Styles */
.control-label {
    font-weight: 700;
}
.form-control {
    padding-left: 4px;
}
.form-group {
    padding: 4px 4px 4px 8px;
    margin-bottom: 4px;
}
.form-group label {
    color: #111111; /* grey 950 #973A90; */
    margin-bottom:4px;
}
.form-inline label {
    color: #111111; /* grey 950 #973A90; */
}
.formBox .form-group label {
    color: #111111; /* grey 950 #973A90; */
    font-weight: 600;
}
.formBox .form-inline label {
    color: #111111; /* grey 950 #973A90; */
    font-weight: 600;
    margin-bottom:6px;
}
.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on {
    background-color: #973A90;
    color: #fff;
}
.e-switch-wrapper.e-focus .e-switch-inner.e-switch-active, .e-switch-wrapper:focus .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper.e-focus .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper:focus .e-switch-inner.e-switch-active {
    background-color: #FFCFD2;
    border-color: #FFCFD2;
    outline: none;
}
.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #FFCFD2;
    border-color: #FFCFD2;
}
/* number input when has focus */
.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: ##973A90;
    /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);*/
}
.form-control:disabled, .form-control[readonly] {
    background-color: #fff; /*  #F0FDFA; */
    border: 0px;
    opacity: 1;
    padding-left: 0px;
}
.form-control:focus {
    border-color: #973A90;
    box-shadow: 0 0 0 0.2rem rgba(151, 58, 144, 0.25);
}
.largeInput {
    height: 40px;
    border-radius: 8px;
    background: var(--Workup-Product-Grey-grey-50, #F6F6F6);
    border: 0px;
}
.form-control {
    border-radius: 8px; 
}
select:disabled { /* Hides drop down for a disabled select element */
    -moz-appearance: none;
    -webkit-appearance: none;
}
.inputDate {
    border-color: #CED4DA;
    border-radius: 0.25rem;
}
.toolbarSelect {  /* rounded select drop-down for toolbars */
    background-color: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    width: 120px;
    padding: 6px;
    height: 36px;
    margin-right: 8px;
}
.formRow {
    margin-left:0px; margin-right:0px;
}
input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    height: calc(1.2em + 0.5rem + 2px);
}
/* Avatar styles */
.workupAvatar {
    font-size: 18px;
    height: 44px;
    width: 44px; 
    background-color: #973A90;
    color:#ffffff;
    border-radius: 50%;
}
.workupAvatar24 {
    font-size: 14px;
    height: 24px;
    width: 32px; 
    background-color: #973A90;
    color:#ffffff;
    border-radius: 50%;
}
.workupAvatar32 {
    font-size: 16px;
    height: 32px;
    width: 32px; 
    background-color: #973A90;
    color:#ffffff;
    border-radius: 50%;
}
.e-avatar.e-avatar-xlarge {
    font-size: 18px;
    height: 44px;
    width: 44px;
    background-color: #973A90;
    color: #ffffff;
}
.initials {
    font-size: 18px;
    height: 44px;
    background-color: #973A90;
}

/* Are these still used?? */
.scheduleCard i {
    font-size: 0.8rem;
    color: #FFFFFF;
    padding-right: 6px;
}
.statsRow {
    background-color: #FEF4FF;
    border-radius: 8px;
    margin: 4px;
    padding-top: 4px;
}
.loginBanner {
    display: flex;
    height: 700px;
    padding: 96px 40px 630px 40px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #31132F 41%, #ED942B 100%);
}
.custom-select { /* for multiselect boxes */
    border-radius: 8px;
}
.availSummary {
    font-size: 14px;
    text-align: center;
    padding-top: 12px;
}




/* Various panels, boxes and box styles */
.rounded4 { border-radius: 4px; }
.rounded8 { border-radius: 8px; }
.rounded10 { border-radius: 10px; }
.rounded12 { border-radius: 12px; }
.rounded50 { border-radius: 50%; }

.billingBox {
    margin: 10px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--Workup-Product-Grey-grey-200, #D1D1D1);
    background: var(--Workup-Product-Grey-white, #FFF);
    /* Shadows/01 */
    /*box-shadow: 0px 4px 8px -4px rgba(17, 17, 17, 0.25), 0px -2px 1px 0px rgba(17, 17, 17, 0.04) inset;*/
}
.detailsBox {
    padding: 8px;
    margin-bottom: 6px;
}
.usersBox {
    border-radius: 8px;
    border: 1px solid var(--Workup-Product-Sky-Blue-sky-blue-200, #AEE8F3);
    background: var(--Workup-Product-Sky-Blue-sky-blue-50, #EEFBFD);
}
.selectOptionBox {
    /*width: 90%;*/
    border-radius: 8px;
    border: 1px solid #d1d1d1;
    margin: auto;
    padding: 8px;
    margin-bottom: 12px;
}
.formBox { /* container for fields on a form */
    border-radius:10px; 
    padding:8px; 
    border: 1px solid #d1d1d1;
    margin: 4px 4px 8px 4px;
}


/* Image styles */
.roundedImageStrip {
    border-radius: 20px;
    height: 40px;
    margin-right: -10px;
}
.roundedImageStrip32 {
    border-radius: 50%;
    height: 32px;
    margin-right: -10px;
}
.roundedImage {
    border-radius: 20px;
    height: 40px;
}
.roundedImage32 {
    border-radius: 50%;
    height: 32px;
}
.roundedImage40 {
    border-radius: 50%;
    height: 40px;
}
.roundedImage60 {
    border-radius: 50%;
    height: 60px;
}
.roundedImage80 {
    border-radius: 50%;
    height: 80px;
}
.roundThumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 4px;
}

/* Progress Bars */
.progressBarLeft {
    height: 12px;
    border-radius: 20px 0px 0px 20px;
    background: #13B9A6
}
.progressBarRight {
    height: 12px;
    border-radius: 0px 20px 20px 0px;
    background: #e7e7e7;
}
.progressBarComplete {
    height: 12px;
    border-radius: 20px 20px 20px 20px;
    background: #13B9A6;
    width: 100%;
}
.progressBarEmpty {
    height: 12px;
    border-radius: 20px 20px 20px 20px;
    background: #e7e7e7;
    width: 100%;
}
.roundedVerticalBar {
    display: flex;
    height: 40px;
    background-color: #f6f6f6;
    width: 30px;
    margin: 4px;
    border-radius: 4px 4px 0px 0px;
}
.coloredVerticalBar {
    align-self: flex-end;
    width: 30px;
    height: 50%;
    background-color: #ee742b;
    border-radius: 4px 4px 0px 0px;
}
.roundedVerticalBarWide {
    display: flex;
    height: 40px;
    background-color: #f6f6f6;
    width: 50px;
    margin: 4px;
    border-radius: 4px 4px 0px 0px;
}
.coloredVerticalBarWide {
    align-self: flex-end;
    width: 50px;
    height: 50%;
    background-color: #ee742b;
    border-radius: 4px 4px 0px 0px;
}
.roundedHorizontalBar {
    display: flex;
    height: 12px;
    background-color: #f6f6f6;
    width: 100%;
    margin: 4px;
    border-radius: 20px 20px 20px 20px;
}
.coloredHorizontalBar {
    align-self: flex-start;
    width: 30px;
    height: 12px;
    background-color: #ee742b;
    border-radius: 20px 0px 0px 20px;
}


/* Icon styles */
.selectCircle {
    border-radius: 30px;
    background-color: #0C9588;
    color: #fff;
    width: 28px;
    height: 28px;
    font-size: 14px;
    display: flex !important;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 0px;
    /*         flex: 0 0 22px;
 */
}
.plainCircle {
    border-radius: 30px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--Workup-Product-Grey-grey-600, #5D5D5D);
    color: var(--Workup-Product-Grey-grey-50, #F6F6F6);
    font-size: 12px;
    display: flex !important;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /*         flex: 0 0 22px;
 */
}
.yellowCircle {
    border-radius: 50%;
    background-color: #FFF9C2;
    padding: 4px;
    height: 30px;
    width: 30px;
    text-align: center;
}
.pinkCircle {
    border-radius: 50%;
    background-color: #ffcfd2;
    color: #42033d;
    font-size: 13px;
    padding: 4px;
    padding-top: 8px;
    height: 32px;
    width: 32px;
    text-align: center;
}

/* Dialog styles */
.plainDialog {
    border-radius: 16px;
    min-height: 550px;
    background-color: #fff;
}
.dialogBodyHeading {
    text-align: center;
    /* margin: 10px; */
    padding: 4px 8px 4px 8px;
}
.dialogHeader {
    text-align: right;
    padding: 6px 6px 4px 4px;
}
.dialogFooter {
    text-align: center;
    margin-bottom: 10px;
    padding: 8px;
    border-top: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 60px;
}
.modal-body {
    padding: 4px 4px 4px 4px;
}
.dialogBodyHeading h3 {
    margin-bottom:2px;
    font-size: 18px;
    font-weight: 500;
    color:  #3d3d3d;
}
.dialogBodyHeading p {
    font-size: 14px;
    color: #888888;
    margin: 2px 60px;
}

/* Tabs */
.nav-tabs {
    background-color: #fff;
    border-bottom: 0px;
    margin: 0px;
}
.nav-tabs .nav-link {
    color: #5d5d5d;
    font-weight: 400;
}
.tab-childdata #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: 0px #fff;
    border-bottom: 6px solid #13B9A6; /* Teal 500 */
    background-color: #fff;
    color: #111111;
    font-weight: 600;
    border-radius: 0px;
}
.nav-item {
    padding-bottom: 0px;
    margin-right: 8px;
}
.tab-pane {
    padding-top:6px;
}
.nav-item-small {
    margin-right: 0px;
    padding: 4px 4px 4px 4px;
}
/* Counter style tiles for top of various pages/grids/wigets */
.displayTile {
    border-radius: 8px;
    width: 200px;
    height: 65px;
    margin: 0px 10px 0px 0px;
}
.plumTile {
    border: 1px solid #901889; /* plum 800 */
    background-color: #fef4ff; /* plum 50*/
}
.pinkTile {
    border: 1px solid #c20e2f; /* pink 700*/
    background-color: #fff1f1; /* pink 50 */
}
.tealTile {
    border: 1px solid #105f58; /* teal 800 */
    background-color: #f0fdfa; /* teal 50*/
}
.carrotTile {
    border: 1px solid #a93914; /* carrot 700 */
    background-color: #fef7ec; /* carrot 50 */
}
.blueTile {
    border: 1px solid #1f556b; /* sky blue 800 */
    background-color: #eefbfd; /* sky blue 50 */
}
.violetTile {
    border: 1px solid #b247ac; /* violet 600 */
    background-color: #f5d9f5; /* violet 200 */
}
.tileIconLeft {
    display: flex;
    width: 35%;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.tileCounter {
    font-weight: 700;
    font-size: 18px;
    color: #454545;
    padding: 6px 0px;
}
.tileLabel {
    font-weight: 400;
    font-size: 13px;
    color: #454545;
}
.tileRightPanel {
    display: flex;
    flex-direction: column;
/*    justify-content: center;
*/    padding: 4px;
}

/* Dashboard Widget Styles */
.widgetBox50 {
    /*         width: 50%;
             padding: 8px;*/
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    background-color: #fff;
}
.widgetBox100 {
    /*         width: 100%;
 */ padding: 8px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    background-color: #fff;
}
.widgetContent {
    padding: 8px;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden
}
.widgetHeader {
    padding: 8px 8px 0px 8px;
}

.card-view .item {
    width: 100%;
}

.cardView {
    border-radius: 10px;
    border: 1px solid #d1d1d1;
    background-color: white;
    overflow: hidden;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
    padding: 10px 10px 0px 10px;
}

.cardView-body {
    background-color: white;
}

.skill-level {
    display: flex;
    gap: 4px;
    align-items: center;
}

.skill-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.skill-square::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}


.progressSpacer {
        width: 20px;
        margin: 0px 5px;
        height: 16px;
        border-bottom: 4px solid #9DF7E5;
    }

    .solidTealCircle {
        border-radius: 30px;
        background-color: #13B9A6;
        color: #fff;
        width: 28px;
        height: 28px;
        font-size: 14px;
        display: flex !important;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 0px;
        /*         flex: 0 0 22px;
     */
    }
    .borderTealCircle {
        border-radius: 30px;
        width: 28px;
        height: 28px;
        border: 1px solid #13B9A6;
        color: #111111;
        font-size: 12px;
        display: flex !important;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        /*         flex: 0 0 22px;
     */
    }

    .form-check-label {
        padding-left: 26px !important;
        padding-top: 4px !important;
    }

/* Hierarchy styles */
.tree {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    min-width: max-content;
}

.treeScrollWrapper {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 1rem;
    padding: 20px;
}

.hierachyNode {
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
    position: relative;
    transition: background 0.3s;
    text-align: center;
    line-height: 1.4;
    height: 150px;
    width: 210px;
    box-sizing: border-box;
    border-width: 3px;
}

    .hierachyNode.expandable {
        cursor: pointer;
    }


    .hierachyNode:hover {
        background-color: #e9e9e9;
    }

.node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

    .node-wrapper:not(.collapsed) .hierachyNode.expandable::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 2px;
        height: 22px;
        background-color: #ccc;
        transform: translateX(-50%);
    }

    .node-wrapper.collapsed .hierachyNode.expandable::after {
        display: none;
    }

.horizontal-connector {
    position: absolute;
    height: 2px;
    background-color: #ccc;
    margin-top: 19px;
    margin-bottom: 20px;
    top: 150px;
}

.extra-space {
    position: relative;
    height: 2px;
    background-color: #fff;
    margin-top: 19px;
    margin-bottom: 20px;
}

.children {
    display: flex;
    gap: 20px;
    justify-content: center;
    position: relative;
}

    .children::before {
        content: none;
    }

    .children > div {
        position: relative;
    }

        .children > div::before {
            content: '';
            position: absolute;
            top: -22px;
            left: 50%;
            height: 22px;
            border-left: 2px solid #ccc;
            transform: translateX(-50%);
        }

.collapsed .children {
    display: none;
}

.collapsed .horizontal-connector {
    display: none;
}

.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.3rem;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-color: #757373;
}

.initials-icon {
    background-color: transparent;
    color: #3b3939;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    line-height: 40px;
    font-family: sans-serif;
    user-select: none;
    display: block;
    margin: 0 auto;
}

.subtasklist {
    margin-left: 0px;
    padding-left: 4px;
}

.listelement {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
}
/* Chat bot styles */
.chatMessages h3 {
    font-size:16px;
}

/*Comment section css*/
.comments-container {
    max-width: 100%;
    height: 100%;
/*    height: 70vh;
*/    display: flex;
    flex-direction: column;
    background: white;
}

.header-card {
    background: white;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.header-title {
    color: #6b1b6f;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.comment-count {
    color: #666;
    font-size: 0.9rem;
}

.comments-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #f8f8f8;
}

.comments-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.comments-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.comments-scroll-container::-webkit-scrollbar-thumb {
    background: #6b1b6f;
    border-radius: 10px;
}

.comments-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #561558;
}

.comment-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #e8e8e8;
    transition: all 0.2s ease;
}

.comment-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: #d0d0d0;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.avatar-small {
    width: 36px;
    height: 36px;
}

.comment-username {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.2;
    display: block;
    white-space: nowrap;
}

.user-handle {
    color: #666;
    font-size: 0.75rem;
}

.comment-timestamp {
    color: #999;
    font-size: 0.75rem;
    display: block;
    white-space: nowrap;
}

.comment-text {
    color: #333;
    line-height: 1.4;
    font-size: 0.9rem;
    display: inline;
}

.comment-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.comment-content-wrapper {
    flex: 1;
    min-width: 0;
}

.comment-line {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.user-info-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.like-btn {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #666;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    font-size: 0.75rem;
    white-space: nowrap;
}

.like-btn:hover {
    background: #f5f5f5;
    border-color: #6b1b6f;
}

.like-btn.liked {
    background: #fce7f3;
    color: #c2185b;
    border-color: #c2185b;
}

.like-btn i {
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.like-btn.liked i {
    animation: heartbeat 0.3s ease;
}

.reply-btn {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #666;
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.6rem;
    transition: all 0.2s ease;
    border-radius: 4px;
    white-space: nowrap;
}

.reply-btn:hover {
    background: #f5f5f5;
    border-color: #6b1b6f;
    color: #6b1b6f;
}

.more-btn {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.more-btn:hover {
    color: #666;
}

.reply-indicator {
    background: #f0e6f6;
    border-left: 3px solid #6b1b6f;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: space-between;
}

.reply-indicator.show {
    display: flex;
}

.reply-indicator-text {
    font-size: 0.85rem;
    color: #6b1b6f;
}

.reply-indicator-text strong {
    font-weight: 600;
}

.cancel-reply-btn {
    background: transparent;
    border: none;
    color: #6b1b6f;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.cancel-reply-btn:hover {
    color: #561558;
}

.comment-input-card {
    background: white;
    padding: 1rem 1.5rem;
    border-top: 2px solid #e0e0e0;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.emoji-btn {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.4rem;
    transition: color 0.2s ease;
    font-size: 1.1rem;
}

.emoji-btn:hover {
    color: #6b1b6f;
}

.text-muted {
    color: #999;
}

.d-flex {
    display: flex;
}

.btnlike {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.CommentThumbnail {
    display: flex;
    margin-bottom: 15px;
    object-fit: cover;
    border: 2px;
}

/* Entire comment input bar in one line */
.comment-input-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*margin-bottom: -16px;*/
}

.comment-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Profile image box */
.CommentThumbnail {
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
}

.CommentThumbnail img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

/* Textarea container */
.textArea {
    position: relative;
    flex: 1;
}

/* Textarea styling */
.comment-textarea {
    width: 100%;
    resize: none;
    padding-right: 50px;
    height: 45px !important; /* single-line height */
}

/* Post button inside the textarea */
.post-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #42033d; /* matches your theme */
    color: white;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

    .post-btn i {
        margin: 0;
    }

/* Remove internal scrolling */
/*.comments-scroll-container {
    overflow: visible !important;
    max-height: none !important;
}*/

/* Ensure the tab section scrolls normally */
/*.container-comments {
    overflow: visible !important;
}*/

/*Comment section end*/
/* Filter styles */
.filterButton {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 6px;
    margin: 4px;
    width: 100%;
}

.filterButton:hover {
    background-color: #b247ac;
    color: #fff;
    cursor: pointer;
}
.alignWithDel {
    padding: 13px 0px 0px 0px;
}

.icon-spacing {
    margin-right: 4px;
}

.grid-avatar-list {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow:hidden;
}

.grid-avatar {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ddd;
}

.grid-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid-initial-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 14px;
    padding-top: 4px;
    padding-left: 4px;
    background-color: #973A90;
    color: #ffffff;
}

/* Grid Toolbar styling */
/*.e-grid .e-toolbar .e-tbar-btn {
    border-radius: 8px;
}*/

/* Built-in Column Chooser button */
/*.e-grid .e-toolbar .e-cc-toolbar {
    border-radius: 8px;
    padding: 6px 10px;
}*/

/* Optional: make it look more like a settings control */
/*.e-grid .e-toolbar .e-cc-toolbar:hover {
    transform: translateY(-1px);
    transition: all 0.15s ease;
}*/

/* Optional: hide the text so it becomes icon-first */
/*.workup-grid-icon-columns .e-toolbar .e-cc-toolbar .e-tbar-btn-text {
    display: none;
}*/
/* Column chooser dialog header */
.e-dialog.e-ccdlg .e-dlg-header-content {
    background-color: #973a90;
    color: #fff;
}

/* Header text */
.e-dialog.e-ccdlg .e-dlg-header {
    color: #fff;
}

/* Close icon */
.e-dialog.e-ccdlg .e-dlg-closeicon-btn {
    color: #fff;
}
.e-toolbar .e-tbar-btn .e-tbar-btn-text {
    font-family: 'Sora', sans-serif;
}
.e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label {
    font-family: 'Sora', sans-serif;
}

    .timer-panel {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
    }
    .timer-display {
        font-size: 1.8rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: 2px;
        color: #343a40;
        min-width: 160px;
        text-align: center;
    }
    .timer-running .timer-display { color: #dc3545; }
    .btn-timer-start  { min-width: 100px; }
    .entry-running td { border-left: 3px solid #dc3545 !important; background-color: #fff5f5 !important; }

/* ==========================================================================
   Home page redesign — panel dashboard
   Added 2026-07-29. Panels: hero, quick actions, AI bar, and the nine
   customisable widgets. See WorkspaceWeb/Models/HomePanelRegistry.cs for the
   panel list. Uses the --token custom properties defined at the top of this
   file (see "Colour variables" section).
   ========================================================================== */

.homeDash { max-width: 1500px; font-size: 14px; padding: 22px 26px 40px; }

.homeDash-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 16px; }

/* Hero */
.homeDash .hero {
    background: linear-gradient(120deg, var(--plum-950) 0%, var(--violet-700) 60%, var(--plum-600) 100%);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.homeDash .hero h1 { font-size: 26px; font-weight: 600; color: #fff; margin: 0; }
.homeDash .hero p { font-size: 14px; color: rgba(255,255,255,0.85); margin-top: 6px; }
.homeDash .hero-stats { display: flex; gap: 12px; flex-shrink: 0; }
.homeDash .hstat { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); padding: 11px 18px; text-align: center; min-width: 92px; display: block; text-decoration: none; color: inherit; transition: background .15s ease; }
.homeDash .hstat:hover, .homeDash .hstat:focus { background: rgba(255,255,255,0.22); color: inherit; text-decoration: none; }
.homeDash .hstat b { font-size: 20px; font-weight: 600; display: block; }
.homeDash .hstat span { font-size: 11px; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: .05em; }

/* Quick actions */
.homeDash .quick-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.homeDash .qbtn {
    background: var(--white);
    border: 1px solid #D1D1D1;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: transform .12s, box-shadow .12s;
}
.homeDash .qbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(66,3,61,0.1); text-decoration: none; color: inherit; }
.homeDash .qbtn .qicon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.homeDash .qbtn span:last-child { font-size: 13.5px; font-weight: 500; }
.homeDash .qi-violet { background: var(--violet-50); color: var(--violet-700); }
.homeDash .qi-teal   { background: var(--teal-50);   color: var(--teal-700); }
.homeDash .qi-carrot { background: var(--carrot-50); color: var(--carrot-700); }
.homeDash .qi-pink   { background: var(--pink-50);   color: var(--pink-700); }
.homeDash .qi-sky    { background: var(--sky-50);    color: var(--sky-700); }

/* AI bar - the one deliberate animated flourish on this page */
.homeDash .ai-bar-wrap {
    border-radius: var(--radius-lg);
    padding: 2px;
    margin-bottom: 16px;
    background: linear-gradient(100deg, var(--plum-600), var(--violet-600), var(--sky-500), var(--plum-600));
    background-size: 300% 100%;
    animation: homeAiFlow 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .homeDash .ai-bar-wrap { animation: none; }
}
@keyframes homeAiFlow { to { background-position: 300% 0; } }
.homeDash .ai-bar { background: var(--white); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.homeDash .ai-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--plum-600), var(--violet-700)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 13px; }
.homeDash .ai-input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 14px; color: var(--grey-900); background: transparent; }
.homeDash .ai-input::placeholder { color: var(--grey-300); }
.homeDash .ai-send { width: 32px; height: 32px; border-radius: 50%; background: var(--violet-50); color: var(--violet-700); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }

/* Customise control */
.homeDash .cust-wrap { position: relative; }
.homeDash .cust-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-900); font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-md); cursor: pointer; }
.homeDash .cust-btn:hover { background: var(--violet-50); border-color: var(--violet-300); color: var(--violet-800); }
.homeDash .cust-pop {
    position: absolute; top: calc(100% + 8px); right: 0; width: 300px;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(66,3,61,0.16); padding: 16px 18px; z-index: 50;
}
.homeDash .cust-pop[hidden] { display: none; }
.homeDash .cust-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.homeDash .cust-note { font-size: 12px; color: var(--grey-600); margin-bottom: 13px; line-height: 1.55; }
.homeDash .cust-group { font-size: 10.5px; font-weight: 600; color: var(--grey-300); text-transform: uppercase; letter-spacing: .06em; margin: 13px 0 7px; }
.homeDash .cust-group:first-of-type { margin-top: 0; }
.homeDash .cust-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; cursor: pointer; }
.homeDash .cust-row span:first-child { font-size: 13.5px; font-weight: 500; }
.homeDash .cust-row input[type="checkbox"] { position: absolute; opacity: 0; width: 34px; height: 19px; margin: 0; cursor: pointer; }
.homeDash .sw { width: 34px; height: 19px; border-radius: 20px; background: var(--grey-200); flex-shrink: 0; position: relative; transition: background .15s; }
.homeDash .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; }
.homeDash .cust-row input[type="checkbox"]:checked ~ .sw { background: var(--violet-600); }
.homeDash .cust-row input[type="checkbox"]:checked ~ .sw::after { transform: translateX(15px); }
.homeDash .cust-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.homeDash .cust-reset { font-size: 12.5px; font-weight: 600; color: var(--violet-700); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.homeDash .cust-done { font-size: 12.5px; font-weight: 600; background: var(--violet-100); border: 1px solid var(--violet-300); color: var(--violet-800); border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; font-family: inherit; }

/* Grid + cards shared by every panel ViewComponent */
.homeDash .grid-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.homeDash .col-empty { font-size: 12.5px; color: var(--grey-300); text-align: center; padding: 22px 0; background: var(--white); border: 1px dashed #D1D1D1; border-radius: var(--radius-lg); }
.homeDash .card { background: var(--white); border: 1px solid #D1D1D1; border-radius: var(--radius-lg); padding: 19px 21px; margin-bottom: 16px; }
.homeDash .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.homeDash .card-head h2 { font-size: var(--section-heading-size); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.homeDash .count-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--violet-100); color: var(--violet-800); }
.homeDash .card-link { font-size: 12.5px; color: var(--violet-700); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.homeDash .card-link:hover { text-decoration: underline; }

/* Task timer widget - shared component also used on the legacy dashboard, so scope the card look here rather than editing its markup */
.homeDash .dashboardBox { background: var(--white); border: 1px solid #D1D1D1; border-radius: var(--radius-lg); padding: 19px 21px; margin: 0 0 16px; }
.homeDash .dashboardBox h4 { font-size: var(--section-heading-size); font-weight: 600; margin: 0 0 14px; color: var(--grey-900); }
.homeDash .dashboardBox .form-control { border-radius: var(--radius-sm); border-color: var(--grey-200); font-size: 13px; }
.homeDash .dashboardBox .form-control:focus { border-color: var(--violet-600); box-shadow: none; }
.homeDash .dashboardBox .btn-group .btn { font-size: 12px; border-color: var(--grey-200); color: var(--grey-600); }
.homeDash .dashboardBox .btn-group .btn.active { background: var(--violet-100); border-color: var(--violet-300); color: var(--violet-800); }
.homeDash .dashboardBox .timer-display { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--grey-900); }
.homeDash .dashboardBox .btn-timer-start { border-radius: var(--radius-sm); font-weight: 600; font-size: 12.5px; border: none; }
.homeDash .dashboardBox a { font-size: 12.5px; color: var(--violet-700); text-decoration: none; font-weight: 500; }
.homeDash .dashboardBox a:hover { text-decoration: underline; }

/* Panel loading skeleton - reserves height so panels don't shift once AJAX-populated */
.homeDash .panel-skeleton { display: flex; flex-direction: column; gap: 8px; }
.homeDash .skeleton-line { height: 12px; border-radius: 6px; background: var(--grey-100); width: 70%; }
.homeDash .skeleton-line-wide { width: 100%; height: 140px; }
.homeDash .chart-box .skeleton-line-wide,
.homeDash .chart-box-sm .skeleton-line-wide { height: 100%; }
.homeDash .chart-box { height: 150px; }
.homeDash .chart-box-sm { height: 168px; }
@media (prefers-reduced-motion: no-preference) {
    .homeDash .skeleton-line { animation: homeSkeletonPulse 1.4s ease-in-out infinite; }
}
@keyframes homeSkeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Accessibility: visible keyboard focus on every interactive element in this page */
.homeDash .cust-btn:focus-visible,
.homeDash .qbtn:focus-visible,
.homeDash .card-link:focus-visible,
.homeDash .ai-send:focus-visible,
.homeDash .ai-input:focus-visible,
.homeDash .cust-reset:focus-visible,
.homeDash .cust-done:focus-visible,
.homeDash .cust-row input[type="checkbox"]:focus-visible ~ .sw {
    outline: 2px solid var(--violet-600);
    outline-offset: 2px;
}

@media (max-width: 1080px) {
    .homeDash .quick-row { grid-template-columns: repeat(3, 1fr); }
    .homeDash .grid-main { grid-template-columns: 1fr; }
    .homeDash .hero { flex-direction: column; align-items: flex-start; }
}

/* Per-panel empty state (distinct from .col-empty, which is for a whole hidden column) */
.homeDash .panel-empty { font-size: 13px; color: var(--grey-600); text-align: center; padding: 20px 8px; line-height: 1.6; }
.homeDash .panel-empty a { color: var(--violet-700); font-weight: 500; }
.homeDash .visually-hidden { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Chart legend (time chart, tasks-by-project chart) */
.homeDash .chart-legend { display: flex; flex-wrap: wrap; gap: 11px 16px; margin-bottom: 12px; align-items: center; }
.homeDash .cl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey-600); }
.homeDash .clsq { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: inline-block; }

/* Week nav (My time by day) */
.homeDash .wk-nav { display: flex; align-items: center; gap: 8px; }
.homeDash .wk-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-600); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.homeDash .wk-btn:hover { background: var(--violet-50); border-color: var(--violet-300); color: var(--violet-800); }
.homeDash .wk-label { font-size: 13px; font-weight: 600; min-width: 122px; text-align: center; white-space: nowrap; }
.homeDash .wk-today { font-size: 12px; font-weight: 600; color: var(--violet-700); border: 1px solid var(--violet-200); background: var(--violet-50); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; font-family: inherit; }
.homeDash .wk-today:hover { background: var(--violet-100, var(--violet-50)); border-color: var(--violet-300); }
/* Passive tag shown when the current week is displayed - deliberately not button-like */
.homeDash .wk-current { font-size: 12px; font-weight: 600; color: var(--grey-600); padding: 5px 2px; }
.homeDash .chart-foot { font-size: 12px; color: var(--grey-600); margin-top: 9px; }

/* Timesheet summary (My time by day) */
.homeDash .ts-divider { border-top: 1px solid var(--border-soft); margin: 14px 0 11px; }
.homeDash .ts-rows { display: flex; flex-direction: column; gap: 7px; }
.homeDash .ts-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 12.5px; }
.homeDash .ts-label a { color: inherit; font-weight: 500; text-decoration: none; }
.homeDash .ts-label a:hover { text-decoration: underline; }
.homeDash .ts-metric { color: var(--grey-600); white-space: nowrap; }
.homeDash .ts-metric b { color: var(--grey-900); font-weight: 600; }

/* Recent projects */
.homeDash .proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.homeDash .proj-card { border: 1px solid var(--border-soft); border-left: 3px solid var(--violet-600); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 12px 14px; background: var(--white); text-decoration: none; color: inherit; display: block; transition: background .12s; }
.homeDash .proj-card:hover { background: var(--violet-50); text-decoration: none; color: inherit; }
.homeDash .proj-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.homeDash .proj-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homeDash .proj-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.homeDash .pb-track { background: var(--teal-50); color: var(--teal-800); }
.homeDash .pb-risk { background: var(--carrot-50); color: var(--carrot-700); }
.homeDash .proj-sub { font-size: 11.5px; color: var(--grey-600); margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homeDash .pbar-row { display: flex; align-items: center; gap: 8px; }
.homeDash .pbar { flex: 1; height: 6px; border-radius: 3px; background: var(--grey-100); overflow: hidden; }
.homeDash .pbar > div { height: 100%; border-radius: 3px; }
.homeDash .pbar-pct { font-size: 11.5px; font-weight: 600; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* Tasks list */
.homeDash .tasks-scroll { max-height: 340px; overflow-y: auto; }
.homeDash .task-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.homeDash .task-row:first-child { border-top: none; padding-top: 0; }
.homeDash .task-check { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border); flex-shrink: 0; cursor: pointer; margin: 0; }
.homeDash .task-timer-btn { flex-shrink: 0; width: 20px; height: 20px; padding: 0; margin: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; }
.homeDash .task-row-link { flex: 1; min-width: 0; display: block; text-decoration: none; color: inherit; }
.homeDash .task-title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homeDash .task-row.is-complete .task-title { text-decoration: line-through; color: var(--grey-300); }
.homeDash .task-proj { font-size: 11.5px; color: var(--violet-700); margin-top: 1px; }
.homeDash .pill { font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.homeDash .p-high { background: var(--pink-50); color: var(--pink-700); }
.homeDash .p-med { background: var(--carrot-50); color: var(--carrot-700); }
.homeDash .p-low { background: var(--teal-50); color: var(--teal-800); }
.homeDash .due { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--pink-100); color: var(--pink-700); white-space: nowrap; }

/* Team this week */
/* Scoped to the team panel - .ts-row is also used (as a flex row) by the My time by day timesheet summary */
.homeDash [data-panel="team"] .ts-head { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) 100px; gap: 10px; padding: 0 4px 8px; border-bottom: 1px solid var(--border-soft); }
.homeDash [data-panel="team"] .ts-head span { font-size: 10.5px; font-weight: 600; color: var(--grey-300); text-transform: uppercase; letter-spacing: .06em; }
.homeDash [data-panel="team"] .ts-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) 100px; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border-soft); }
.homeDash [data-panel="team"] .ts-row:last-child { border-bottom: none; }
.homeDash .ts-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.homeDash .ts-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; background: var(--violet-100); color: var(--violet-800); }
.homeDash .ts-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.homeDash .ts-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homeDash .ts-role { font-size: 11px; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homeDash .wtag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.homeDash .w-office { background: var(--sky-100); color: var(--sky-700); }
.homeDash .w-home { background: var(--violet-100); color: var(--violet-800); }
.homeDash .w-leave { background: var(--carrot-100); color: var(--carrot-700); }
.homeDash .w-sick { background: var(--pink-100); color: var(--pink-700); }
.homeDash .chips { display: flex; gap: 5px; flex-wrap: wrap; }
.homeDash .chip { font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.homeDash .ch-violet { background: var(--violet-100); color: var(--violet-800); }
.homeDash .ch-teal { background: var(--teal-100); color: var(--teal-800); }
.homeDash .ch-sky { background: var(--sky-100); color: var(--sky-700); }
.homeDash .ch-carrot { background: var(--carrot-100); color: var(--carrot-700); }
.homeDash .ch-none { background: var(--grey-100); color: var(--grey-600); }
.homeDash .hrs { display: flex; align-items: center; gap: 8px; }
.homeDash .hrs-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--grey-100); overflow: hidden; }
.homeDash .hrs-bar > div { height: 100%; border-radius: 3px; }
.homeDash .hrs-val { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* News feed */
.homeDash .nf-list { max-height: 460px; overflow-y: auto; }
.homeDash .nf-item { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--border-soft); }
.homeDash .nf-item:first-child { border-top: none; padding-top: 0; }
.homeDash .nf-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.homeDash .nf-body { flex: 1; min-width: 0; }
.homeDash .nf-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.homeDash .nf-text { font-size: 13px; line-height: 1.55; color: var(--grey-600); }
.homeDash .nf-text b { font-weight: 600; color: var(--grey-900); }
.homeDash .nf-meta { display: flex; align-items: center; gap: 11px; margin-top: 7px; flex-wrap: wrap; }
.homeDash .nf-time { font-size: 11.5px; color: var(--grey-300); }
.homeDash .nf-act { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 6px; border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-900); cursor: pointer; font-family: inherit; }
.homeDash .nf-act:hover { background: var(--grey-50); }
.homeDash .nf-act.primary { background: var(--violet-100); border-color: var(--violet-300); color: var(--violet-800); }
.homeDash .nf-unread { width: 6px; height: 6px; border-radius: 50%; background: var(--pink-500); flex-shrink: 0; display: inline-block; }

/* Schedule agenda */
.homeDash .ag-day { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.homeDash .ag-day:first-of-type { border-top: none; padding-top: 0; }
.homeDash .ag-date { text-align: center; }
.homeDash .ag-dow { font-size: 10.5px; font-weight: 600; color: var(--grey-300); text-transform: uppercase; letter-spacing: .05em; }
.homeDash .ag-num { font-size: 17px; font-weight: 600; line-height: 1.1; }
.homeDash .ag-today .ag-num, .homeDash .ag-today .ag-dow { color: var(--violet-700); }
.homeDash .ag-items { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.homeDash .ag-item { display: flex; align-items: center; gap: 9px; border-left: 3px solid var(--violet-600); background: var(--violet-50); border-radius: 0 6px 6px 0; padding: 6px 10px; min-width: 0; }
.homeDash .ag-item.a-teal { border-left-color: var(--teal-600); background: var(--teal-50); }
.homeDash .ag-item.a-sky { border-left-color: var(--sky-500); background: var(--sky-50); }
.homeDash .ag-item.a-carrot { border-left-color: var(--carrot-500); background: var(--carrot-50); }
.homeDash .ag-time { font-size: 11px; font-weight: 600; color: var(--grey-600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.homeDash .ag-title { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.homeDash .ag-title a { color: inherit; text-decoration: none; }
.homeDash .ag-title a:hover { text-decoration: underline; }
.homeDash .ag-empty { font-size: 12px; color: var(--grey-300); padding: 4px 0; }

/* Leave */
.homeDash .card-link-btn { background: none; border: none; font-family: inherit; padding: 0; }
.homeDash .leave-row { display: flex; align-items: center; gap: 20px; }
.homeDash .ring-wrap { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.homeDash .ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.homeDash .ring-txt b { font-size: 24px; font-weight: 700; color: var(--grey-900); }
.homeDash .ring-txt span { font-size: 11px; color: var(--grey-600); }
.homeDash .card-head h2 a { color: inherit; text-decoration: none; }
.homeDash .card-head h2 a:hover { text-decoration: underline; }
.homeDash .leave-stats { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.homeDash .leave-stats .lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 12.5px; }
.homeDash .leave-stats .lrow b { font-weight: 600; }
.homeDash .leave-stats .lrow span { color: var(--grey-600); }
.homeDash .leave-stats .lrow-hero span { font-size: 13px; font-weight: 500; color: var(--grey-900); }
.homeDash .leave-stats .lrow-hero b { font-size: 20px; font-weight: 700; color: var(--violet-700); }
.homeDash .lrow-divider { border-top: 1px solid var(--border-soft); margin: 1px 0 3px; }
.homeDash .leave-stats .lval-warn { color: var(--pink-700); }

/* Filter pill (grid filter toggle with clear segment) */
.filter-pill { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.filter-pill-main { display: inline-flex; align-items: center; border: none; background: none; padding: 6px 12px; font-size: 15px; font-weight: 500; color: var(--grey-900); cursor: pointer; }
.filter-pill-active { background: var(--violet-50); border-color: var(--violet-200); }
.filter-pill-active .filter-pill-main { color: var(--violet-800); font-weight: 600; }
.filter-pill-clear { display: inline-flex; align-items: center; justify-content: center; width: 30px; border: none; border-left: 1px solid var(--violet-200); background: var(--violet-50); color: var(--violet-800); cursor: pointer; padding: 0; }
.filter-pill-clear:hover, .filter-pill-clear:focus { background: var(--violet-600); color: var(--violet-50); outline: none; }


/* Announcements (Pages/Components/Announcements) - not scoped to .homeDash as they can also show from the layout */
.announce-stack { margin: 0 0 16px; }
.announce-card { display: flex; align-items: flex-start; gap: 14px; background: var(--violet-50); border: 1px solid var(--violet-200); border-left: 4px solid var(--violet-600); border-radius: var(--radius-lg, 10px); padding: 16px 18px; transition: opacity .2s ease, transform .2s ease; }
.announce-card.announce-leaving { opacity: 0; transform: translateY(-4px); }
.announce-card.announce-info { background: var(--sky-50, #F0F9FF); border-color: #CDE7F7; border-left-color: var(--sky-500, #0EA5E9); }
.announce-card.announce-offer { background: var(--carrot-50); border-color: var(--carrot-100); border-left-color: var(--carrot-500); }
.announce-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--violet-100); color: var(--violet-700); font-size: 15px; }
.announce-info .announce-icon { background: #DCEFFB; color: #0369A1; }
.announce-offer .announce-icon { background: var(--carrot-100); color: var(--carrot-700); }
.announce-body { flex: 1; min-width: 0; }
.announce-card .announce-title { font-size: var(--section-heading-size); font-weight: 600; margin: 4px 0 6px; padding: 0; }
.announce-content { font-size: 13.5px; line-height: 1.55; color: var(--grey-900, #333); }
.announce-content > :last-child { margin-bottom: 0; }
.announce-content p { margin: 0 0 8px; }
.announce-content ul, .announce-content ol { margin: 0 0 8px; padding-left: 20px; }
.announce-content li { margin-bottom: 3px; }
.announce-content h1, .announce-content h2, .announce-content h3, .announce-content h4 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; padding: 0; }
.announce-content a { color: var(--violet-700); text-decoration: underline; }
.announce-content table { border-collapse: collapse; margin: 0 0 8px; font-size: 13px; }
.announce-content th, .announce-content td { border: 1px solid var(--grey-200, #ddd); padding: 4px 8px; }
.announce-dismiss { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--grey-200, #ddd); background: var(--white, #fff); color: var(--grey-900, #333); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.announce-dismiss:hover { border-color: var(--violet-600); color: var(--violet-700); }
@media (max-width: 600px) {
    .announce-card { flex-wrap: wrap; }
    .announce-dismiss { margin-left: 48px; }
}

/* === Project Overview (2026-10) ===========================================
   Redesigned Overview tab on View Project, behind the EnableProjectOverviewV2
   flag. Markup is wrapped in "homeDash projDash" so it reuses the Home page
   hero, quick-action, AI bar and card styles above; only the differences and
   the 12-column panel grid live here. Panel list: WorkspaceWeb/Models/ProjectOverviewLayout.cs
   ========================================================================== */

.homeDash.projDash { max-width: none; padding: 16px 0 32px; }

/* Hero: chips + title + meta on the left, five KPI tiles on the right */
.projDash .po-hero { flex-wrap: wrap; }
.projDash .po-hero-main { min-width: 0; }
.projDash .po-hero h1 { margin: 8px 0 6px; letter-spacing: -0.3px; }
.projDash .po-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.projDash .po-chip { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.34); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.projDash .po-meta { font-size: 12.5px; color: rgba(255,255,255,0.88); display: flex; gap: 14px; flex-wrap: wrap; }
.projDash .po-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.projDash .po-kpi { min-width: 96px; padding: 10px 14px; border-radius: var(--radius-md); background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.3); text-align: center; color: #fff; text-decoration: none; display: block; }
.projDash a.po-kpi:hover, .projDash a.po-kpi:focus { background: rgba(255,255,255,0.22); color: #fff; text-decoration: none; }
.projDash .po-kpi b { display: block; font-size: 23px; font-weight: 600; line-height: 1.2; }
.projDash .po-kpi span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.85); }

/* Solid RAG pill in the hero - always text plus colour; amber uses dark text for contrast */
.projDash .po-rag { font-weight: 700; letter-spacing: .04em; border-color: rgba(255,255,255,0.5); }
.projDash .po-rag-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.projDash .po-rag-red { background: var(--pink-700); color: #fff; }
.projDash .po-rag-amber { background: var(--carrot-400); color: #2A1F2D; }
.projDash .po-rag-green { background: var(--teal-700); color: #fff; }

/* Quick actions - number of buttons varies with project type and permissions */
.projDash .po-quick-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Ask Workup AI - text shortcut buttons instead of the Home page's round send button */
.projDash .po-ai .ai-bar { padding: 8px 8px 8px 16px; }
.projDash .po-ai-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; border: none; background: var(--violet-50); color: var(--violet-800); border-radius: var(--radius-sm); height: 34px; padding: 0 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.projDash .po-ai-btn:hover { background: var(--violet-100); }

/* 12-column panel grid; panels span 12, 8 or 4 */
.projDash .po-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.projDash .po-col { min-width: 0; display: flex; flex-direction: column; }
.projDash .po-s12 { grid-column: span 12; }
.projDash .po-s8 { grid-column: span 8; }
.projDash .po-s4 { grid-column: span 4; }
.projDash .po-col > .card { margin-bottom: 0; flex: 1 1 auto; }
.projDash .po-stack { gap: 16px; }
.projDash .po-stack > .card { flex: 0 0 auto; }

/* Panel cards: header tools, segmented toggles and the month picker */
.projDash .po-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.projDash .po-card > .card-head { margin-bottom: 0; flex-wrap: wrap; }
.projDash .po-card.po-loading { opacity: .6; pointer-events: none; }
.projDash .po-head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.projDash .po-seg { display: inline-flex; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 2px; gap: 2px; align-self: flex-start; }
.projDash .po-seg button { font-family: inherit; font-size: 11.5px; border: 0; background: transparent; color: var(--grey-600); border-radius: 6px; padding: 0 10px; height: 28px; cursor: pointer; white-space: nowrap; }
.projDash .po-seg button:hover { color: var(--violet-800); }
.projDash .po-seg button.on { background: var(--violet-50); color: var(--violet-800); font-weight: 600; }
.projDash .po-mpick { display: flex; align-items: center; gap: 8px; }
.projDash .po-mpick b { font-size: 13px; font-weight: 600; min-width: 116px; text-align: center; }
.projDash .po-mpick button:disabled { opacity: .4; cursor: default; }
.projDash .muted { color: var(--grey-600); }
.projDash .small { font-size: 11.5px; }

/* Badges - always text plus colour */
.projDash .po-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 500; white-space: nowrap; display: inline-block; }
.projDash .po-b-red { background: var(--pink-50); color: var(--pink-700); }
.projDash .po-b-amber { background: var(--carrot-50); color: var(--carrot-700); }
.projDash .po-b-green { background: var(--teal-50); color: var(--teal-800); }
.projDash .po-b-blue { background: var(--sky-50); color: var(--sky-700); }
.projDash .po-b-grey { background: var(--grey-100); color: var(--grey-600); }
.projDash .po-text-red { color: var(--pink-700); }

/* At a glance tiles */
.projDash .po-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.projDash .po-gt { border: 1px solid var(--border-soft); background: var(--grey-50); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.projDash .po-gt small { font-size: 11.5px; color: var(--grey-600); }
.projDash .po-gt b { font-size: 22px; font-weight: 600; line-height: 1.25; }
.projDash .po-cmp { font-size: 11.5px; color: var(--grey-600); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Tables (Workload, Who's contributing) */
.projDash .po-scroll { overflow-x: auto; position: relative; }   /* contains absolutely positioned sr-only text */
.projDash .po-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.projDash .po-t th { text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-600); padding: 6px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.projDash .po-t td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.projDash .po-t tbody tr:last-child td { border-bottom: 0; }
.projDash .po-t .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.projDash .po-t td b { font-weight: 600; }
.projDash .po-t tfoot td { font-weight: 600; border-top: 1px solid var(--grey-200); border-bottom: 0; }
.projDash .po-t tfoot .po-normal { font-weight: 400; }
.projDash .po-t .po-grp-h { text-align: center; border-bottom: 0; padding-bottom: 0; }
.projDash .po-t .po-th-bottom { vertical-align: bottom; }
.projDash .po-t .po-th-note { text-transform: none; letter-spacing: 0; }
.projDash .po-t .po-cur { background: var(--violet-50); }
.projDash .po-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.projDash .po-who b { font-weight: 500; display: block; }
.projDash .po-who span { font-size: 11px; color: var(--grey-600); display: block; }
.projDash .po-who > .po-av { display: inline-flex; font-size: 10.5px; color: var(--violet-800); }   /* the avatar is a span too - keep it a centred circle */
.projDash .po-av { width: 28px; height: 28px; border-radius: 50%; background: var(--violet-100); color: var(--violet-800); font-size: 10.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.projDash .po-av img { width: 100%; height: 100%; object-fit: cover; }

/* Stacked bars and legend */
.projDash .po-stk { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--grey-100); min-width: 120px; margin-bottom: 3px; }
.projDash .po-stk i { display: block; height: 100%; }
.projDash .po-s-od { background: var(--pink-600); }
.projDash .po-s-wk { background: var(--carrot-400); }
.projDash .po-s-lt, .projDash .po-s-pr { background: var(--violet-700); }
.projDash .po-s-ot { background: var(--violet-200); }
.projDash .po-s-over { background: var(--pink-600); }
.projDash .po-s-lv { background: var(--sky-500); }
.projDash .po-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--grey-600); }
.projDash .po-legend span { display: inline-flex; align-items: center; gap: 6px; }
.projDash .po-legend .po-legend-gap { margin-left: 12px; }
.projDash .po-sq { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Contributors summary strip */
.projDash .po-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.projDash .po-stat { background: var(--grey-50); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; }
.projDash .po-stat small { display: block; font-size: 11px; color: var(--grey-600); margin-bottom: 2px; }
.projDash .po-stat b { font-size: 17px; font-weight: 600; }
.projDash .po-stat em { font-style: normal; font-size: 11px; margin-left: 4px; }

/* Recent comments */
.projDash .po-cm { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.projDash .po-cm:first-child { padding-top: 0; }
.projDash .po-cm:last-child { border-bottom: 0; }
.projDash .po-cm-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.projDash .po-cm-hd { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.projDash .po-cm-hd b { font-weight: 600; }
.projDash .po-cm-ctx { font-size: 11.5px; color: var(--grey-600); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.projDash .po-cm-ctx a { color: var(--violet-700); }
.projDash .po-cm p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--grey-900); background: var(--grey-50); border: 1px solid var(--border-soft); border-radius: 0 10px 10px 10px; padding: 8px 10px; white-space: pre-line; overflow-wrap: anywhere; }
.projDash .po-compose { display: flex; gap: 8px; align-items: center; border: 1px solid var(--grey-200); border-radius: var(--radius-md); padding: 4px 4px 4px 12px; margin-top: auto; }
.projDash .po-compose:focus-within { border-color: var(--violet-600); }
.projDash .po-compose input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 12.5px; background: transparent; min-width: 0; }
.projDash .po-btn-pri { font-family: inherit; font-size: 12.5px; font-weight: 500; border: 1px solid var(--violet-700); background: var(--violet-700); color: #fff; border-radius: var(--radius-sm); height: 32px; padding: 0 14px; cursor: pointer; }
.projDash .po-btn-pri:hover { background: var(--violet-800); }
.projDash .po-btn-pri:disabled { opacity: .6; cursor: default; }

/* Shared bits for the Customer panels */
.projDash .po-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; border: 1px solid var(--grey-200); background: var(--white); color: var(--violet-800); border-radius: var(--radius-sm); height: 32px; padding: 0 12px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
.projDash .po-btn:hover { border-color: var(--violet-600); text-decoration: none; color: var(--violet-800); }
.projDash .po-btn:disabled { opacity: .55; cursor: default; }
.projDash .po-b-plum { background: var(--violet-50); color: var(--violet-800); }
.projDash .po-text-green { color: var(--teal-800); }
.projDash .po-m0 { margin: 0; }
.projDash .po-subhead h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.projDash .po-sw-rev { background: var(--violet-700); }
.projDash .po-sw-cost { background: var(--carrot-400); }
.projDash .po-sw-profit { background: var(--teal-600); }
.projDash .po-sw-forecast { background: #EDE5EC; border: 1px dashed var(--violet-700); }
.projDash .po-sw-none { background: var(--grey-100); }
.projDash .po-line { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.projDash .po-stk-lg { height: 12px; }
.projDash .po-stk-sm { height: 6px; min-width: 0; }
.projDash .po-s-done { background: var(--teal-600); }
.projDash .po-legend-top { margin-top: 8px; }
.projDash .po-bar { height: 6px; background: var(--grey-100); border-radius: 99px; overflow: hidden; margin-bottom: 3px; }
.projDash .po-bar i { display: block; height: 100%; border-radius: 99px; }
.projDash .po-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 12.5px; margin: 0; }
.projDash .po-kv dt { color: var(--grey-600); font-weight: 400; }
.projDash .po-kv dd { margin: 0; text-align: right; font-weight: 500; }
.projDash .po-li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.projDash .po-li:last-child { border-bottom: 0; }
.projDash .po-li-tx { flex: 1; min-width: 0; }
.projDash .po-li-tx b { font-weight: 500; display: block; line-height: 1.4; }
.projDash .po-li-tx a { color: inherit; }
.projDash .po-li-tx span { font-size: 11.5px; color: var(--grey-600); }
.projDash .po-callout { background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: var(--radius-md); padding: 10px 12px; }
.projDash .po-ico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--violet-100); color: var(--violet-700); font-size: 13px; }
.projDash .po-stat-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projDash .po-stat-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.projDash .po-stat em { display: inline-block; }

/* Project status (RAG) - always the word as well as the colour */
.projDash .po-rag-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; }
.projDash .po-rag-all { border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; border-width: 1px; border-style: solid; }
.projDash .po-rag-all p { margin: 0; font-size: 12px; color: var(--grey-600); line-height: 1.5; }
.projDash .po-rag-big { display: flex; align-items: center; gap: 12px; }
.projDash .po-rag-big b { font-size: 26px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.projDash .po-rag-big span { display: block; font-size: 11.5px; color: var(--grey-600); margin-top: 4px; }
.projDash .po-lamp { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.projDash .po-lamp-r { background: #C8324A; box-shadow: 0 0 0 6px #F8D7DD; }
.projDash .po-lamp-a { background: #E39A2A; box-shadow: 0 0 0 6px #FBE8C8; }
.projDash .po-lamp-g { background: #0E7C6B; box-shadow: 0 0 0 6px #CDEDE5; }
.projDash .po-rag-word-r { color: #A81E36; }
.projDash .po-rag-word-a { color: #7F4C00; }
.projDash .po-rag-word-g { color: #0B6A51; }
.projDash .po-rag-bg-r { background: #FDF1F3; border-color: #F3C6CE; }
.projDash .po-rag-bg-a { background: #FEF7EC; border-color: #F2D9AE; }
.projDash .po-rag-bg-g { background: #F1FAF7; border-color: #C9EADF; }
.projDash .po-rag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.projDash .po-rm { border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; border-width: 1px; border-style: solid; }
.projDash .po-rm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.projDash .po-rm-top b { font-size: 12.5px; font-weight: 600; }
.projDash .po-rm p { margin: 0; font-size: 12px; color: var(--grey-900); line-height: 1.45; flex: 1; }
.projDash .po-rm a { font-size: 11.5px; font-weight: 500; color: var(--violet-700); }
.projDash .po-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; }
.projDash .po-pill-r { background: #C8324A; color: #fff; }
.projDash .po-pill-a { background: #E39A2A; color: #2A1F2D; }
.projDash .po-pill-g { background: #0E7C6B; color: #fff; }
.projDash .po-how { position: relative; font-size: 12px; }
.projDash .po-how summary { color: var(--violet-700); cursor: pointer; list-style: none; font-weight: 500; }
.projDash .po-how summary::-webkit-details-marker { display: none; }
.projDash .po-how-pop { position: absolute; right: 0; top: 24px; z-index: 20; width: 340px; max-width: 80vw; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(66,3,61,0.14); padding: 12px 14px; }
.projDash .po-how-pop ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; color: var(--grey-900); line-height: 1.45; }

/* Financials */
.projDash .po-fin th[scope="row"] { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--grey-900); font-weight: 500; border-bottom: 1px solid var(--border-soft); padding: 10px 8px; white-space: normal; }
.projDash .po-fin tbody tr:last-child th { border-bottom: 0; }
.projDash .po-fin th[scope="row"] .po-normal { display: block; font-weight: 400; }
.projDash .po-fin .po-fin-profit th, .projDash .po-fin .po-fin-profit td { background: #F4FBF9; }
.projDash .po-note-a { display: flex; gap: 10px; align-items: flex-start; background: #FEF7EC; border: 1px solid #F2D9AE; color: #5C3A00; border-radius: var(--radius-md); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.projDash .po-note-a i { color: #B36B00; margin-top: 3px; }
.projDash .po-cost-split { display: flex; flex-direction: column; gap: 6px; }
.projDash .po-fin-chart { height: 230px; }

/* Mini Gantt bars (Activities, Key dates) */
.projDash .po-gantt { position: relative; height: 10px; background: var(--grey-100); border-radius: 99px; min-width: 140px; margin-bottom: 4px; }
.projDash .po-gantt-lg { height: 12px; }
.projDash .po-gantt i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.projDash .po-g-done { background: var(--teal-600); }
.projDash .po-g-act { background: var(--violet-700); }
.projDash .po-g-up { background: var(--violet-200); }
.projDash .po-g-late { background: repeating-linear-gradient(45deg, var(--pink-600), var(--pink-600) 3px, #F8D7DD 3px, #F8D7DD 6px); }
.projDash .po-g-faded { opacity: .55; }
.projDash .po-g-today { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--pink-600); border-radius: 2px; }
.projDash .po-gantt-scale { display: flex; justify-content: space-between; margin-top: 4px; }
.projDash .po-tk { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 120px; }
.projDash .po-tk b { font-weight: 600; }
.projDash .po-countdown b { font-size: 36px; font-weight: 700; line-height: 1; color: var(--violet-800); display: block; }
.projDash .po-countdown span { font-size: 12px; color: var(--grey-600); }

/* Tasks summary doughnut */
.projDash .po-donut-row { display: flex; align-items: center; gap: 16px; }
.projDash .po-donut-wrap { position: relative; width: 110px; height: 110px; flex: none; }
.projDash .po-donut { width: 110px; height: 110px; }
.projDash .po-donut-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.projDash .po-donut-txt b { font-size: 20px; font-weight: 600; line-height: 1.1; }
.projDash .po-donut-txt span { font-size: 10.5px; color: var(--grey-600); }
.projDash .po-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.projDash .po-donut-legend span { display: inline-flex; align-items: center; gap: 8px; }

/* Focus rings for the controls this block adds */
.projDash .po-kpi:focus-visible,
.projDash .po-ai-btn:focus-visible,
.projDash .po-quick-row .qbtn:focus-visible,
.projDash .po-seg button:focus-visible,
.projDash .po-btn:focus-visible,
.projDash .po-how summary:focus-visible,
.projDash .po-btn-pri:focus-visible {
    outline: 2px solid var(--violet-600);
    outline-offset: 2px;
}

/* Internal and Management panels */
.projDash .po-ico-g { background: var(--teal-100); color: var(--teal-800); }
.projDash .po-ico-r { background: #FCE4E7; color: #A81E36; }
.projDash .po-ico-a { background: #FDF0DA; color: #7F4C00; }
.projDash .po-ico-grey { background: var(--grey-100); color: var(--grey-600); }
.projDash .po-sq-line { width: 2px; height: 12px; border-radius: 1px; background: var(--pink-600); }
.projDash .po-sq-hours { background: #C27BB8; }
.projDash .po-sq-opened { background: #D8B9D4; }
.projDash .po-sq.po-g-late, .projDash .po-sq.po-g-up { display: inline-block; }
.projDash .po-sw-line { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--violet-700); }
.projDash .po-sw-ideal { border-top: 2px dotted #A99AAB; }
.projDash .po-sw-fc { border-top: 2px dashed #C27BB8; }
.projDash .po-sw-avg { border-top: 2px dashed var(--carrot-400); }

.projDash .po-plan td { vertical-align: middle; }
.projDash .po-plan .po-who a { color: inherit; }
.projDash .po-act-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.projDash .po-axis { position: relative; height: 14px; }
.projDash .po-axis span { position: absolute; top: 0; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.projDash .po-gantt .po-g-prog-late { background: var(--pink-600); }
.projDash .po-g-ms { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; transform: rotate(45deg); border-radius: 2px; background: #fff; border: 1.5px solid var(--violet-700); }
.projDash .po-g-ms-done { background: var(--teal-600); border-color: var(--teal-600); }
.projDash .po-g-ms-late { border-color: var(--pink-600); }
.projDash .po-ms-key { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1.5px; background: #fff; border: 1.5px solid var(--violet-700); }

.projDash .po-big-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.projDash .po-big-line b { font-size: 26px; font-weight: 600; line-height: 1.1; }
.projDash .po-bar-lg { height: 10px; }
.projDash .po-hbars { display: flex; flex-direction: column; gap: 10px; }
.projDash .po-hbar-lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 3px; }
.projDash .po-hbar-lbl > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projDash .po-hbar-lbl b { font-weight: 500; }
.projDash .po-status-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.projDash .po-stat-green { background: #F2FAF8; border-color: #D3EEE8; }
.projDash .po-stat-green b { color: #0B6A51; }
.projDash .po-stat-red b { color: #A81E36; }
.projDash .po-burndown, .projDash .po-monthly { min-height: 220px; }
.projDash .po-taskflow { min-height: 150px; }

/* Customise (per-user panel show/hide) - reuses the Home page .cust-* popover */
/* Customise cog over the hero's top-right corner (outside the hero, which is re-rendered after a RAG override) */
.projDash .po-hero-wrap { position: relative; }
.projDash .po-hero-wrap > .cust-wrap { position: absolute; top: 12px; right: 12px; z-index: 5; }
.projDash .po-hero-wrap .cust-pop { z-index: 30; }
.projDash .po-hero-wrap .po-chips { padding-right: 40px; }
.projDash .po-hero-cog { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.34); background: rgba(255,255,255,0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.projDash .po-hero-cog:hover, .projDash .po-hero-cog[aria-expanded="true"] { background: rgba(255,255,255,0.26); }
.projDash .po-hero-cog:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.projDash .po-col.po-solo { grid-column: span 12; }
.projDash .po-col.po-col-empty { display: none; }
.projDash .po-all-hidden { display: block; }

/* RAG override - cog in the overall status box opens a dialog, which is moved to <body> while open */
.projDash .po-rag-all { position: relative; }
.projDash .po-rag-cog { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.75); }
.projDash .po-rag-cog ~ .po-rag-big { padding-right: 36px; }
.projDash .po-icon-btn { width: 32px; height: 32px; border: 1px solid var(--grey-200); background: var(--white); color: var(--violet-800); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.projDash .po-icon-btn:hover, .projDash .po-icon-btn:focus-visible { border-color: var(--violet-600); }

/* Client Portal panel (customer projects): customer contacts, their portal access and login status */
.projDash .po-portal .card-head { flex-wrap: wrap; }
.projDash .po-portal-row { align-items: center; }
.projDash .po-portal-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--grey-100); }
.projDash .po-portal-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.projDash .po-portal-access { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin: 0; cursor: pointer; }
.projDash .po-portal-access input { accent-color: var(--violet-700); }
.projDash .po-portal-add { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.projDash .po-portal-add select, .projDash .po-portal-add input { flex: 1 1 200px; min-width: 0; height: 32px; }
/* Same badges and buttons in the Client Portal column of the company Contacts grid */
.portalCell .po-badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 500; white-space: nowrap; display: inline-block; }
.portalCell .po-b-red { background: var(--pink-50); color: var(--pink-700); }
.portalCell .po-b-amber { background: var(--carrot-50); color: var(--carrot-700); }
.portalCell .po-b-green { background: var(--teal-50); color: var(--teal-800); }
.portalCell .po-b-grey { background: var(--grey-100); color: var(--grey-600); }
.portalCell .po-btn { font-size: 12px; font-weight: 500; border: 1px solid var(--grey-200); background: var(--white); color: var(--violet-800); border-radius: var(--radius-sm); height: 28px; padding: 0 10px; cursor: pointer; }
.portalCell .po-btn:hover { border-color: var(--violet-600); }
.po-rag-dialog fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.po-rag-dialog legend { font-size: inherit; width: auto; margin-bottom: .5rem; }
.po-rag-dialog .po-override-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.po-rag-dialog .po-override-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; border: 1px solid; cursor: pointer; margin: 0; }
.po-rag-dialog .po-override-date { max-width: 200px; }
.po-rag-dialog .po-rag-bg-r { background: #FDF1F3; border-color: #F3C6CE; }
.po-rag-dialog .po-rag-bg-a { background: #FEF7EC; border-color: #F2D9AE; }
.po-rag-dialog .po-rag-bg-g { background: #F1FAF7; border-color: #C9EADF; }
.po-rag-dialog .po-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; }
.po-rag-dialog .po-pill-r { background: #C8324A; color: #fff; }
.po-rag-dialog .po-pill-a { background: #E39A2A; color: #2A1F2D; }
.po-rag-dialog .po-pill-g { background: #0E7C6B; color: #fff; }
.po-rag-dialog .modal-footer { flex-wrap: wrap; gap: 8px; }
.po-rag-dialog .modal-footer > * { margin: 0; }
.projDash .po-rag-all p.po-rag-comment { color: var(--grey-900); font-style: italic; font-size: 13px; }
.projDash .po-rag-lastweek { font-weight: 500; }
.projDash .po-rag-big b .po-rag-manual { font-size: 14px; font-weight: 600; letter-spacing: 0; }


/* Client card - contact name links to the Company Contact dialog; email and phone are links */
.projDash .po-contact .po-av { width: 40px; height: 40px; font-size: 13px; }
.projDash .po-contact b { font-size: 15px; font-weight: 600; }
.projDash .po-contact b a { color: var(--violet-800); }
.projDash .po-contact span { font-size: 12px; }
.projDash .po-contact-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.projDash .po-contact-lines li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.projDash .po-contact-lines i { width: 14px; text-align: center; color: var(--grey-600); flex: none; }
.projDash .po-contact-lines a { color: var(--violet-700); overflow-wrap: anywhere; }

/* Project team - resources and suppliers on the project */
.projDash .po-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.projDash .po-team-item { border: 1px solid var(--grey-200); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.projDash .po-team-item .po-who a { color: var(--violet-800); }
.projDash .po-team-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.projDash .po-team-links { display: flex; gap: 12px; flex-shrink: 0; }
.projDash .po-team-links a, .projDash .po-team-remove { color: var(--grey-600); }
.projDash .po-team-links a:hover, .projDash .po-team-links a:focus-visible { color: var(--violet-700); }
.projDash .po-team-remove { border: 0; background: none; padding: 0; cursor: pointer; line-height: inherit; }
.projDash .po-team-remove:hover, .projDash .po-team-remove:focus-visible { color: var(--pink-700); }
.projDash .po-team-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.projDash .po-mate { position: relative; }
.projDash .po-mate-btn { display: block; border-radius: 50%; text-decoration: none; }
.projDash .po-mate-btn .po-av { width: 38px; height: 38px; font-size: 12.5px; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--grey-200); }
.projDash a.po-mate-btn:hover .po-av, .projDash .po-mate-btn:focus-visible .po-av { box-shadow: 0 0 0 2px var(--violet-600); }
.projDash .po-mate-btn:focus-visible { outline: none; }
/* Hidden with display:none so off-screen tooltips never add sideways scroll; projectOverview.js sets --tip-shift to keep them on screen */
.projDash .po-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(calc(-50% + var(--tip-shift, 0px))); z-index: 25; width: max-content; max-width: min(260px, calc(100vw - 16px)); background: var(--grey-900); color: #fff; border-radius: 6px; padding: 8px 10px; font-size: 11.5px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; }
.projDash .po-tip b { display: block; font-size: 12.5px; font-weight: 600; }
.projDash .po-tip span { display: block; color: rgba(255,255,255,.85); }
.projDash .po-mate:hover .po-tip, .projDash .po-mate:focus-within .po-tip { display: block; }
.projDash .po-team-sub { font-size: 13.5px; font-weight: 600; margin: 16px 0 8px; }
.projDash .card-head h2 .muted { font-weight: 400; margin-left: 4px; }
@media (max-width: 1180px) {
    .projDash .po-s8, .projDash .po-s4 { grid-column: span 12; }
    .projDash .po-quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .projDash .po-rag-wrap { grid-template-columns: 1fr; }
    .projDash .po-rag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .projDash .po-hero { padding: 18px; }
    .projDash .po-kpis { width: 100%; }
    .projDash .po-kpi { min-width: 0; flex: 1 1 calc(50% - 10px); }
    .projDash .po-quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projDash .po-ai .ai-bar { flex-wrap: wrap; }
    .projDash .po-ai .ai-input { flex-basis: calc(100% - 50px); }
    .projDash .po-glance, .projDash .po-stat-row, .projDash .po-status-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projDash .po-rag-grid { grid-template-columns: 1fr; }
    .projDash .po-how-pop { right: auto; left: 0; }
}
/* === end Project Overview (2026-10) === */

/* === Project AI side panel (2026-10) - Pages/Components/ProjectAiPanel, projectAiPanel.js === */
.proj-ai {
    position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 1035;
    display: flex; flex-direction: column; background: var(--white); color: var(--grey-900);
    border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(66,3,61,0.12);
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
body.proj-ai-open .proj-ai { transform: none; visibility: visible; transition: transform .25s ease; }
@media (min-width: 1400px) {
    #page-content-wrapper { transition: margin-right .25s ease; }
    body.proj-ai-open #page-content-wrapper { margin-right: 400px; }
    body.proj-ai-open .proj-ai { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .proj-ai, body.proj-ai-open .proj-ai, #page-content-wrapper { transition: none; }
}

.proj-ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border-soft); }
.proj-ai-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; background: linear-gradient(135deg, var(--plum-600), var(--violet-700)); }
.proj-ai-titles { flex: 1; min-width: 0; }
.proj-ai-titles h2 { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.2; }
.proj-ai-sub { font-size: 12px; color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-ai-iconbtn { width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--grey-600); cursor: pointer; flex-shrink: 0; }
.proj-ai-iconbtn:hover { background: var(--violet-50); color: var(--violet-800); }

.proj-ai-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.proj-ai-welcome p { font-size: 13.5px; color: var(--grey-600); margin: 0 0 12px; }
.proj-ai-prompts { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-ai-prompt { font-family: inherit; font-size: 12.5px; font-weight: 500; border: 1px solid var(--violet-200); background: var(--violet-50); color: var(--violet-800); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.proj-ai-prompt:hover { background: var(--violet-100); border-color: var(--violet-300); }

.proj-ai-msg { display: flex; }
.proj-ai-user { justify-content: flex-end; }
.proj-ai-bubble { max-width: 100%; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.proj-ai-user .proj-ai-bubble { max-width: 85%; background: var(--violet-100); color: var(--grey-900); padding: 8px 12px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.proj-ai-assistant .proj-ai-bubble { width: 100%; }
.proj-ai-error .proj-ai-bubble { color: var(--pink-700); }
.proj-ai-bubble p { margin: 0 0 8px; }
.proj-ai-bubble > :last-child { margin-bottom: 0; }
.proj-ai-bubble h1, .proj-ai-bubble h2, .proj-ai-bubble h3, .proj-ai-bubble h4, .proj-ai-bubble h5, .proj-ai-bubble h6 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
.proj-ai-bubble ul, .proj-ai-bubble ol { margin: 0 0 8px; padding-left: 20px; }
.proj-ai-bubble li { margin-bottom: 2px; }
.proj-ai-bubble code { font-size: 12px; background: var(--grey-50); padding: 1px 4px; border-radius: 4px; }
.proj-ai-bubble pre { background: var(--grey-50); padding: 8px; border-radius: var(--radius-sm); overflow-x: auto; }
.proj-ai-bubble a { color: var(--violet-700); text-decoration: underline; }
.proj-ai-table { overflow-x: auto; margin: 0 0 8px; }
.proj-ai-table table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.proj-ai-table th, .proj-ai-table td { padding: 5px 8px; border-bottom: 1px solid var(--grey-200); text-align: left; vertical-align: top; }
.proj-ai-table th { font-weight: 600; color: var(--grey-600); background: var(--grey-50); }

.proj-ai-typing { display: inline-flex; gap: 4px; padding: 10px 0; }
.proj-ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-300); animation: projAiDot 1.2s infinite ease-in-out; }
.proj-ai-typing span:nth-child(2) { animation-delay: .15s; }
.proj-ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes projAiDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .proj-ai-typing span { animation: none; } }

.proj-ai-foot { padding: 10px 12px 12px; border-top: 1px solid var(--border-soft); }
.proj-ai-input { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--grey-200); border-radius: 14px; padding: 6px 6px 6px 12px; }
.proj-ai-input:focus-within { border-color: var(--violet-600); box-shadow: 0 0 0 3px var(--violet-100); }
.proj-ai-input textarea { flex: 1; border: none; outline: none; resize: none; font-family: inherit; font-size: 13.5px; line-height: 1.45; padding: 5px 0; max-height: 140px; background: transparent; color: var(--grey-900); }
.proj-ai-send { width: 32px; height: 32px; border: none; border-radius: 50%; flex-shrink: 0; background: var(--violet-700); color: #fff; cursor: pointer; }
.proj-ai-send:hover { background: var(--violet-800); }
.proj-ai-send:disabled { background: var(--grey-300); cursor: default; }
.proj-ai-note { font-size: 11px; color: var(--grey-600); text-align: center; margin-top: 6px; }
.proj-ai .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.proj-ai-iconbtn:focus-visible, .proj-ai-prompt:focus-visible, .proj-ai-send:focus-visible { outline: 3px solid rgba(178,71,172,0.45); outline-offset: 2px; }
.proj-ai-toggle i { margin-right: 6px; }
/* === end Project AI side panel === */