/*
 * Effort-tracking panels (ProjectTask "Time Breakdown"/"Sub-Tasks"/"Where the time
 * went" and Project "Project Effort"/"Effort at a Glance").
 *
 * Referenced by (JS views, all under client/modules/catalyst/src/views/):
 *   - project-task/record/panels/time-breakdown.js
 *   - project-task/record/panels/sub-tasks.js
 *   - project-task/record/panels/time-by-person.js
 *   - project/record/panels/effort.js
 *   - project/record/panels/effort-at-a-glance.js
 *
 * Registered in Resources/metadata/app/client.json under "cssList" so it is loaded
 * on every page load, the same way as the other Catalyst stylesheets in this folder.
 *
 * Class values (percentage widths, "over estimate" bar segments, etc.) are computed
 * per-record in JS and applied as inline styles on top of these classes - only the
 * static/shared look (colours, spacing, layout) lives here.
 */

/* Grey top accent shared by every effort-tracking panel, applied by JS via
   addClass() rather than as a static clientDefs panel style, since dynamicLogic
   only supports hiding a whole panel, not styling it - toggling classes in
   afterRender() is the simplest hook available for both jobs at once.
   Selector combined with .panel (not just .effort-panel-accent alone) to
   out-specificity the theme's own `.panel.panel-default` border-color rule -
   a single-class selector here would otherwise lose that cascade fight and
   only the (harmless but pointless) border-width/style would visibly apply.
   Colour reads the --effort-accent-color custom property so Time Breakdown and
   Project Effort (whose colour depends on their own remainingHoursLevel/
   totalRemainingHoursLevel - see helpers/remaining-hours-colour.js) can override
   it with a plain inline style, without needing !important: an inline-set custom
   property supplies the value var() resolves to here, it doesn't have to out-cascade
   this rule the way a literal colour would. Where the time went/Effort at a Glance
   never set the property, so they keep falling back to the fixed grey below. */
.panel.effort-panel-accent {
    border-top: 3px solid var(--effort-accent-color, #b9bcc0);
}

/* Header divider used by panels that show a subtitle under/beside the title
   (Time Breakdown, Project Effort). Panels without a subtitle (Where the time
   went, Effort at a Glance) keep the plain default header. Even combined with
   .panel-heading, the border-bottom COLOUR specifically still loses to a more
   specific (or later-cascading) theme rule - width/style apply but colour stays
   transparent - so !important is used just for that one property; padding needs
   no such override. Deliberately always grey (not tied to --effort-accent-color)
   - only the top accent border reflects the record's own level. */
.panel-heading.effort-panel-header-divided {
    border-bottom: 1px solid #ececec !important;
    padding: 13px 15px;
}

/* Removes the default panel-title bottom padding so the stacked/inline subtitle
   sits close underneath instead of leaving a visible gap. */
.effort-panel-header-divided .panel-title {
    padding-bottom: 0;
}

/* Title + subtitle on the same line, subtitle right-aligned (Project Effort). */
.effort-panel-title-inline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Title above subtitle, both left-aligned (Time Breakdown). */
.effort-panel-subtitle-stacked {
    font-size: 12.5px;
    margin-top: -3px;
    color: #999;
}

.effort-panel-subtitle-inline {
    font-size: 12.5px;
    font-weight: normal;
    color: #999;
}

/* Consumption bar: a thin track with 1-3 coloured segments (own/sub-task/over-estimate
   work) plus a marker line at the estimate boundary. Segment widths and the marker's
   left offset are the only genuinely per-record values, set inline by the view. */
.effort-bar-track {
    height: 10px;
    background: #e9eaec;
    display: flex;
    position: relative;
}

.effort-bar-segment-grey {
    background: #b9bcc0;
}

.effort-bar-segment-amber {
    background: #ffac11;
}

.effort-bar-segment-over {
    background: #ef5b7a;
}

.effort-bar-marker {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 2px;
    background: #333;
}

.effort-bar-caption {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #999;
    padding-top: 7px;
}

.effort-bar-caption-over {
    color: #c0392b;
}

/* Extra top spacing for the field-grid row that holds the Time Breakdown bar,
   so it doesn't sit flush against the Hours/Time Spent fields above it. */
.effort-field-row-spaced {
    padding-top: 2px;
}

/* Project Effort's per-group breakdown list. */
.effort-group-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.effort-group-heading {
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b8f96;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.effort-group-row {
    display: grid;
    grid-template-columns: 190px 1fr 74px;
    gap: 14px;
    align-items: center;
    line-height: 1.3;
}

.effort-group-name {
    font-size: 14px;
    color: #111;
}

.effort-group-bar-track {
    height: 8px;
    background: #e9eaec;
    display: flex;
}

.effort-group-numbers {
    font-size: 13px;
    color: #666;
    text-align: right;
}

/* Wraps the three top-level sections of the Project Effort panel (overall bar,
   per-group list, burn-up chart). Gap moved to `> * + *` below so a grey rule
   can sit right at the top of each section after the first, instead of using
   flex `gap` (which has no seam to draw a border into). */
.effort-sections {
    display: flex;
    flex-direction: column;
}

.effort-sections > * + * {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ececec;
}

.effort-overall-bar-wrapper {
    margin-top: 6px;
}

.effort-section-heading {
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b8f96;
    font-weight: 600;
    padding-bottom: 8px;
}

/* Container Flotr2 draws its canvas elements into - see effort.js drawBurnUpChart(). */
.effort-burn-up-chart {
    width: 100%;
    height: 180px;
}

/* "No estimate to measure against" callout - see effort.js/effort.tpl's
   missingEstimateNote. Deliberately a fixed amber, not tied to
   --effort-accent-color: this is a data-completeness notice, not a
   severity/health signal like the bars/accent border. */
.effort-missing-estimate-note {
    font-size: 12.5px;
    color: #8a7a52;
    background: #fdfaf2;
    border-left: 4px solid #ffac11;
    padding: 8px 11px;
    margin-top: 12px;
    line-height: 1.5;
}

/* State: no estimate and no logged time at all - the panel body collapses to
   this single sentence instead of the bar/group/burn-up sections. */
.effort-empty-message {
    font-size: 14px;
    color: #5b6068;
    line-height: 1.55;
}

/* Plain label/value stat rows, shared by "Where the time went" (ProjectTask) and
   "Effort at a Glance" (Project). */
.effort-stat-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.effort-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.effort-stat-label {
    color: #999;
}

.effort-stat-value-warning {
    color: #c0392b;
}

/* Sub-Tasks panel: synthetic (non-record) rows injected around the real sub-task
   rows - see sub-tasks.js updateContextRows(). Background is set per-cell rather
   than on the <tr> so the panel's own bottom-corner rounding (applied per-cell via
   inline border-radius in JS, copied from the list container) is actually visible;
   a <tr> background paints straight through a child <td>'s border-radius. */
.context-row > .cell {
    background: #fafafa;
}

.context-row-muted {
    color: #7b7f86;
}

.context-row-warning {
    color: #c0392b;
}

.context-row-value {
    text-align: right;
}

/* Remaining Hours pill (Case.remainingHours, ProjectTask.remainingHours,
   Project.totalRemainingHours) - see views/case/fields/remaining-hours.js.
   Background colour is NOT set here: it comes from one of the admin-configurable
   catalystRemainingHoursColor* Settings, resolved per-record via
   helpers/remaining-hours-colour.js and applied as an inline style, since an
   arbitrary admin-chosen hex value can't be baked into a static class. Everything
   else about the pill's look (shape, spacing, text colour) is static and lives
   here instead of being repeated as inline styles on every render. */
.remaining-hours-pill {
    display: inline-block;
    min-width: 45px;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 100%;
    text-align: center;
    color: #fff;
}