/* =========================================================
   MODIFY JOB - XAF DETAIL VIEW
   ========================================================= */


/* =========================================================
   SECTION CONTAINERS
   ========================================================= */

.modify-current-job,
.modify-dates,
.modify-new-job,
.modify-info {
	border: 1px solid #d9e1ec !important;
	border-radius: 8px !important;
	margin-bottom: 10px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-sizing: border-box;
}


	/* =========================================================
   COMPACT GROUP HEADERS
   ========================================================= */

	.modify-current-job .dxbl-group-header,
	.modify-dates .dxbl-group-header,
	.modify-new-job .dxbl-group-header,
	.modify-info .dxbl-group-header {
		min-height: 38px !important;
		height: 38px !important;
		padding: 0 12px !important;
		display: flex !important;
		align-items: center !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		border-bottom: 1px solid #e1e6ef !important;
		box-sizing: border-box !important;
	}


/* =========================================================
   CURRENT JOB
   Blue
   ========================================================= */

.modify-current-job {
	border-color: #cfe0ff !important;
	background-color: #fafcff !important;
}

	.modify-current-job .dxbl-group-header {
		background-color: #eff6ff !important;
		color: #1d4ed8 !important;
	}


/* =========================================================
   EFFECTIVE DATES
   Green
   ========================================================= */

.modify-dates {
	border-color: #ccebd8 !important;
}

	.modify-dates .dxbl-group-header {
		background-color: #f0fdf4 !important;
		color: #15803d !important;
	}


/* =========================================================
   NEW JOB
   Indigo
   ========================================================= */

.modify-new-job {
	border-color: #d9d7ff !important;
}

	.modify-new-job .dxbl-group-header {
		background-color: #eef2ff !important;
		color: #4338ca !important;
	}


/* =========================================================
   MODIFICATION INFORMATION
   Orange
   ========================================================= */

.modify-info {
	border-color: #f4dfb8 !important;
}

	.modify-info .dxbl-group-header {
		background-color: #fffbeb !important;
		color: #b45309 !important;
	}


	/* =========================================================
   GROUP CONTENT
   ========================================================= */

	.modify-current-job .dxbl-group-content,
	.modify-dates .dxbl-group-content,
	.modify-new-job .dxbl-group-content,
	.modify-info .dxbl-group-content {
		padding: 10px 14px !important;
		box-sizing: border-box !important;
	}


	/* =========================================================
   LABELS
   ========================================================= */

	.modify-current-job label,
	.modify-dates label,
	.modify-new-job label,
	.modify-info label {
		font-weight: 500;
		color: #475569;
	}


/* =========================================================
   CURRENT JOB
   Read-only / subdued appearance
   ========================================================= */

.modify-current-job .dxbl-group-content {
	color: #64748b;
}


/* =========================================================
   EDITABLE FIELDS
   ========================================================= */

.modify-new-job .dxbl-text-edit,
.modify-dates .dxbl-text-edit,
.modify-info .dxbl-text-edit {
	border-radius: 6px !important;
}


/* =========================================================
   NEW JOB EDITORS
   ========================================================= */

.modify-new-job .dxbl-text-edit {
	background-color: #ffffff !important;
}


	/* =========================================================
   HOVER
   ========================================================= */

	.modify-new-job .dxbl-text-edit:hover,
	.modify-dates .dxbl-text-edit:hover,
	.modify-info .dxbl-text-edit:hover {
		border-color: #94a3b8 !important;
	}


	/* =========================================================
   FOCUS
   ========================================================= */

	.modify-new-job .dxbl-text-edit:focus-within,
	.modify-dates .dxbl-text-edit:focus-within,
	.modify-info .dxbl-text-edit:focus-within {
		border-color: #6366f1 !important;
		box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12) !important;
	}


/* =========================================================
   REQUIRED FIELD MARK
   ========================================================= */

.modify-current-job .dxbl-required-mark,
.modify-dates .dxbl-required-mark,
.modify-new-job .dxbl-required-mark,
.modify-info .dxbl-required-mark {
	color: #dc2626 !important;
}


/* =========================================================
   NOTES
   ========================================================= */

.modify-info textarea {
	min-height: 70px;
	border-radius: 6px !important;
	resize: vertical;
}





/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

	.modify-current-job,
	.modify-dates,
	.modify-new-job,
	.modify-info {
		margin-bottom: 8px !important;
		border-radius: 6px !important;
	}

		.modify-current-job .dxbl-group-content,
		.modify-dates .dxbl-group-content,
		.modify-new-job .dxbl-group-content,
		.modify-info .dxbl-group-content {
			padding: 8px 10px !important;
		}

		.modify-current-job .dxbl-group-header,
		.modify-dates .dxbl-group-header,
		.modify-new-job .dxbl-group-header,
		.modify-info .dxbl-group-header {
			min-height: 36px !important;
			height: 36px !important;
			padding: 0 10px !important;
	}
}

/* My Workspace dashboard */
.onedesk-dashboard {
    --od-ink: #1f2937;
    --od-muted: #64748b;
    --od-line: #dbe3ef;
    --od-surface: #ffffff;
    --od-canvas: #f5f7fb;
    --od-primary: #2563eb;
    --od-primary-dark: #1d4ed8;
    --od-warning: #b45309;
    --od-danger: #b91c1c;
    background: var(--od-canvas);
    color: var(--od-ink);
    min-height: 100%;
    padding: 16px;
}

.onedesk-dashboard__header,
.onedesk-dashboard__actions,
.onedesk-dashboard__section-heading,
.onedesk-dashboard__schedule-item,
.onedesk-dashboard__list-row,
.onedesk-dashboard__aim,
.onedesk-dashboard__team-card > div {
    display: flex;
}

.onedesk-dashboard__header {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.onedesk-dashboard h1,
.onedesk-dashboard h2,
.onedesk-dashboard p {
    margin-top: 0;
}

.onedesk-dashboard h1 {
    font-size: 24px;
    margin-bottom: 4px;
}

.onedesk-dashboard h2 {
    font-size: 16px;
    margin-bottom: 0;
}

.onedesk-dashboard__eyebrow {
    color: var(--od-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.onedesk-dashboard__subtitle,
.onedesk-dashboard__empty,
.onedesk-dashboard__scope span,
.onedesk-dashboard__branch-picker span,
.onedesk-dashboard__kpi span,
.onedesk-dashboard__kpi small,
.onedesk-dashboard__schedule-item span,
.onedesk-dashboard__list-row span,
.onedesk-dashboard__aim span,
.onedesk-dashboard__team-card span,
.onedesk-dashboard__team-card small,
.onedesk-dashboard__poll-grid span,
.onedesk-dashboard__footer,
.onedesk-dashboard__section-heading > span {
    color: var(--od-muted);
    font-size: 12px;
}

.onedesk-dashboard__subtitle {
    margin-bottom: 0;
}

.onedesk-dashboard__actions {
    align-items: flex-end;
}

.onedesk-dashboard__branch-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.onedesk-dashboard__scope,
.onedesk-dashboard__branch-picker {
    background: var(--od-surface);
    border: 1px solid var(--od-line);
    border-radius: 8px;
    padding: 6px 9px;
}

.onedesk-dashboard__scope span,
.onedesk-dashboard__scope strong,
.onedesk-dashboard__branch-picker span {
    display: block;
}

.onedesk-dashboard__branch-picker select {
    background: transparent;
    border: 0;
    color: var(--od-ink);
    font-size: 13px;
    font-weight: 600;
    min-width: 140px;
    padding: 0;
}

.onedesk-dashboard__branch-picker {
    align-items: center;
    align-self: center;
    display: flex;
    flex: 0 1 260px;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
}

.onedesk-dashboard__branch-picker > span {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
}

.onedesk-dashboard__branch-combobox {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 30px !important;
    min-height: 30px !important;
}

.onedesk-dashboard__branch-combobox.dxbl-text-edit,
.onedesk-dashboard__branch-combobox .dxbl-text-edit-input,
.onedesk-dashboard__branch-combobox input {
    font-weight: 600;
    height: 30px !important;
    min-height: 30px !important;
}

.onedesk-dashboard__branch-input,
.onedesk-dashboard__branch-options,
.onedesk-dashboard__branch-options * {
    font-size: 14px !important;
}

.onedesk-dashboard__refresh {
    background: var(--od-primary);
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    align-self: center;
    margin-bottom: 0;
    height: 40px !important;
    min-height: 40px !important;
    padding: 7px 12px;
    white-space: nowrap;
}

/* DevExpress's .dxbl-btn.dxbl-sm rule is more specific than the dashboard class. */
.onedesk-dashboard__branch-actions button.dxbl-btn.dxbl-btn-primary.dxbl-sm.onedesk-dashboard__refresh {
    align-items: center;
    display: inline-flex;
    height: 40px !important;
    justify-content: center;
    min-height: 40px !important;
    padding: 0 12px !important;
}

.onedesk-dashboard__refresh:hover:not(:disabled) {
    background: var(--od-primary-dark);
}

.onedesk-dashboard__refresh:disabled {
    cursor: wait;
    opacity: .7;
}

.onedesk-dashboard__message {
    background: var(--od-surface);
    border: 1px solid var(--od-line);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
}

.onedesk-dashboard__message--error {
    border-color: #fecaca;
    color: var(--od-danger);
}

.onedesk-dashboard__kpis,
.onedesk-dashboard__team-grid,
.onedesk-dashboard__poll-grid {
    display: grid;
    gap: 10px;
}

.onedesk-dashboard__kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 12px;
}

.onedesk-dashboard__kpi,
.onedesk-dashboard__panel,
.onedesk-dashboard__team-card,
.onedesk-dashboard__poll-grid article {
    background: var(--od-surface);
    border: 1px solid var(--od-line);
    border-radius: 10px;
}

.onedesk-dashboard__kpi {
    min-height: 86px;
    padding: 12px;
}

.onedesk-dashboard__kpi span,
.onedesk-dashboard__kpi strong,
.onedesk-dashboard__kpi small {
    display: block;
}

.onedesk-dashboard__kpi strong {
    font-size: 22px;
    margin: 6px 0 3px;
}

.onedesk-dashboard__kpi--primary {
    background: linear-gradient(135deg, var(--od-primary), var(--od-primary-dark));
    border-color: var(--od-primary-dark);
    color: #ffffff;
}

.onedesk-dashboard__kpi--primary span,
.onedesk-dashboard__kpi--primary small {
    color: rgba(255, 255, 255, .8);
}

.onedesk-dashboard__two-column {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
}

.onedesk-dashboard__panel {
    margin-bottom: 12px;
    min-width: 0;
    padding: 14px;
}

.onedesk-dashboard__two-column .onedesk-dashboard__panel {
    margin-bottom: 0;
}

.onedesk-dashboard__section-heading {
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.onedesk-dashboard__empty {
    margin-bottom: 0;
}

.onedesk-dashboard__schedule-list,
.onedesk-dashboard__item-list,
.onedesk-dashboard__aim-list {
    border-top: 1px solid var(--od-line);
}

.onedesk-dashboard__schedule-item,
.onedesk-dashboard__list-row {
    align-items: center;
    border-bottom: 1px solid var(--od-line);
    gap: 10px;
    justify-content: space-between;
    padding: 9px 0;
}

.onedesk-dashboard__schedule-item strong,
.onedesk-dashboard__schedule-item span,
.onedesk-dashboard__list-row strong,
.onedesk-dashboard__list-row span,
.onedesk-dashboard__aim strong,
.onedesk-dashboard__aim span {
    display: block;
}

.onedesk-dashboard__schedule-item time,
.onedesk-dashboard__list-row time {
    color: var(--od-muted);
    font-size: 12px;
    white-space: nowrap;
}

.onedesk-dashboard__schedule-item.is-overdue strong,
.onedesk-dashboard__team-card .is-warning {
    color: var(--od-danger);
}

.onedesk-dashboard__chart {
    width: 100%;
}

.onedesk-dashboard__team-grid {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.onedesk-dashboard__team-card {
    padding: 12px;
}

.onedesk-dashboard__team-card > strong,
.onedesk-dashboard__team-card > span {
    display: block;
}

.onedesk-dashboard__team-card > span {
    margin: 3px 0 12px;
}

.onedesk-dashboard__team-card > div {
    align-items: baseline;
    gap: 5px;
}

.onedesk-dashboard__team-card b {
    font-size: 18px;
}

.onedesk-dashboard__team-card small {
    margin-inline-end: 10px;
}

.onedesk-dashboard__aim {
    align-items: center;
    border-bottom: 1px solid var(--od-line);
    gap: 10px;
    padding: 10px 0;
}

.onedesk-dashboard__aim > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.onedesk-dashboard__aim > b {
    font-size: 12px;
}

.onedesk-dashboard__progress {
    background: #dbeafe;
    border-radius: 99px;
    flex: 0 0 90px;
    height: 7px;
    overflow: hidden;
}

.onedesk-dashboard__progress span {
    background: var(--od-primary);
    display: block;
    height: 100%;
}

.onedesk-dashboard__poll-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.onedesk-dashboard__poll-grid article {
    padding: 11px;
}

.onedesk-dashboard__poll-grid strong,
.onedesk-dashboard__poll-grid span {
    display: block;
}

.onedesk-dashboard__poll-grid span {
    margin-top: 4px;
}

.onedesk-dashboard__footer {
    margin: 14px 0 2px;
    text-align: end;
}

@media (max-width: 1000px) {
    .onedesk-dashboard__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .onedesk-dashboard {
        padding: 10px;
    }

    .onedesk-dashboard__header,
    .onedesk-dashboard__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .onedesk-dashboard__kpis,
    .onedesk-dashboard__two-column {
        grid-template-columns: 1fr;
    }

    .onedesk-dashboard__branch-picker select {
        min-width: 100%;
    }

    .onedesk-dashboard__branch-actions {
        width: 100%;
    }

    .onedesk-dashboard__branch-picker {
        flex: 1 1 0;
    }
}

.onedesk-dashboard__branch-picker,
.onedesk-dashboard__branch-picker > span,
.onedesk-dashboard__branch-input,
.onedesk-dashboard__branch-options {
    direction: rtl;
    text-align: right;
}