:root {
    --red: #e4002b;
    --red-hover: #c80027;

    --blue: #0081a6;
    --aqua: #00b2a9;

    --background: #f5f6f8;

    --surface: #ffffff;
    --surface-secondary: #f1f3f5;
    --surface-hover: #fafbfc;

    --text: #202124;
    --text-secondary: #62666a;
    --text-muted: #8b8f94;

    --separator: #dfe1e5;
    --border: #dfe1e5;
    --border-strong: #c8cbd0;

    --radius-small: 0.30rem;

    --gutc-width: 5.75rem;
    --status-width: 7rem;
    --content-width: 75rem;
}


/* ==========================================================================
   Base
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 100%;
}

body {
    margin: 0;

    padding:
        1.15rem
        0
        3.75rem;

    line-height: 1.2;
}


/* ==========================================================================
   Shared width
   ========================================================================== */

.dashboard,
.app-content,
.quick-task-bar-inner {
    width: 100%;
    max-width: var(--content-width);

    margin-inline: auto;

    padding-inline: 1.25rem;
}


/* ==========================================================================
   Current user selector
   ========================================================================== */

.current-user-control {
    position: absolute;

    z-index: 50;

    top: 1.15rem;
    right: 1.15rem;
}

.current-user-select {
    width: auto;
    min-width: 7.50rem;
    height: 1.65rem;

    padding:
        0
        1.50rem
        0
        0.50rem;

    color: var(--text);

    font-family: inherit;
    font-size: 0.55rem;
    font-weight: 500;

    background-color: var(--surface);

    border:
        0.05rem solid
        var(--border);

    border-radius:
        var(--radius-small);

    outline: none;

    cursor: pointer;
}

.current-user-select:focus {
    border-color: var(--blue);

    box-shadow:
        0
        0
        0
        0.15rem
        rgba(0, 129, 166, 0.10);
}


/* ==========================================================================
   Dashboard
   ========================================================================== */

.dashboard {
    display: grid;

    grid-template-columns:
        13.15rem
        minmax(0, 1fr);

    gap: 0.50rem;

    margin-bottom: 0.90rem;
}

.dashboard-card {
    display: flex;

    flex-direction: column;

    min-width: 0;
    height: 8.65rem;

    padding:
        0.65rem
        0.75rem;

    background: var(--surface);

    border-radius: 0.30rem;

    box-shadow:
        0
        0.05rem
        0.25rem
        rgba(0, 0, 0, 0.06);
}

.dashboard-label {
    color: var(--text-secondary);

    font-size: 0.55rem;
    font-weight: 650;
}

.dashboard-subtitle {
    color: var(--text-muted);

    font-size: 0.45rem;
}

.dashboard-subtitle-inline {
    margin-left: 0.30rem;
}


/* ==========================================================================
   Pending card
   ========================================================================== */

.pending-card {
    justify-content: flex-start;
}

.pending-card-heading {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 0.50rem;

    padding-bottom: 0.40rem;

    border-bottom:
        0.05rem solid
        var(--separator);
}

.pending-count {
    margin: 0;

    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1;
}

.pending-breakdown {
    display: flex;

    flex: 1;

    flex-direction: column;

    justify-content: center;

    gap: 0.30rem;
}

.pending-breakdown-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 0.50rem;

    color: var(--text-secondary);

    font-size: 0.45rem;
}

.pending-breakdown-row strong {
    color: var(--text);

    font-size: 0.50rem;
    font-weight: 650;
}


/* ==========================================================================
   Dashboard header
   ========================================================================== */

.dashboard-card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;
}


/* ==========================================================================
   Chart legend
   ========================================================================== */

.chart-legend {
    display: flex;

    align-items: center;

    gap: 0.50rem;
}

.legend-item {
    display: flex;

    align-items: center;

    gap: 0.20rem;

    color: var(--text-secondary);

    font-size: 0.50rem;
    font-weight: 600;
}

.legend-swatch {
    display: block;

    width: 0.45rem;
    height: 0.45rem;

    border-radius: 0.05rem;
}

.legend-not-started {
    background: #e4e6e8;

    border:
        0.05rem solid
        #c8cbd0;
}

.legend-running {
    background: #fff2b8;
}

.legend-waiting {
    background: #b9bdc1;
}

.legend-completed {
    background: #a9dfb8;
}

.legend-cancelled {
    background: #ffd5dc;
}


/* ==========================================================================
   Status chart
   ========================================================================== */

.status-history-card {
    overflow: hidden;
}

.status-chart {
    display: grid;

    flex: 1;

    gap: 0.20rem;

    min-height: 0;

    margin-top: 0.45rem;
}

.status-chart-column {
    display: grid;

    grid-template-rows:
        0.65rem
        minmax(0, 1fr)
        0.95rem;

    align-items: end;

    min-width: 0;

    text-align: center;
}

.status-chart-count {
    color: var(--text-muted);

    font-size: 0.40rem;
    line-height: 1;
}

.status-chart-track {
    display: flex;

    flex-direction: column-reverse;

    justify-content: flex-start;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-bottom:
        0.05rem solid
        var(--separator);
}

.status-stack-segment {
    flex:
        0
        0
        auto;

    width: 70%;

    margin-inline: auto;
}

.stack-not-started {
    background: #e4e6e8;
}

.stack-running {
    background: #fff2b8;
}

.stack-waiting {
    background: #b9bdc1;
}

.stack-completed {
    background: #a9dfb8;
}

.stack-cancelled {
    background: #ffd5dc;
}

.status-chart-date {
    display: block;

    width: 1.75rem;

    margin:
        0.20rem
        auto
        0;

    color: var(--text-muted);

    font-size: 0.30rem;
    line-height: 1;

    transform: rotate(-45deg);

    transform-origin: center center;

    white-space: nowrap;
}


/* ==========================================================================
   Task list header
   ========================================================================== */

.task-list-header {
    display: grid;

    grid-template-columns:
        var(--gutc-width)
        var(--status-width)
        minmax(0, 1fr);

    align-items: center;

    min-height: 1.50rem;

    color: var(--text-muted);

    border: 0;

    font-size: 0.45rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.task-list-header-gutc {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: center;

    width: 100%;
    height: 100%;

    text-align: center;
}

.task-list-header-gutc span {
    display: flex;

    align-items: center;
    justify-content: center;

    height: 100%;
}

.task-list-header-status {
    text-align: center;
}

.task-list-header-task {
    padding-left: 0.45rem;
}


/* ==========================================================================
   Task list
   ========================================================================== */

.task-list {
    display: flex;

    flex-direction: column;

    gap: 0;

    width: 100%;
}

.task-wrapper {
    width: 100%;
    min-width: 0;

    border-bottom:
        0.05rem solid
        var(--separator);
}


/* ==========================================================================
   Task card
   ========================================================================== */

.task-card {
    display: grid;

    grid-template-columns:
        var(--gutc-width)
        var(--status-width)
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;
    min-width: 0;
    min-height: 2.15rem;

    background: var(--surface);

    border: 0;

    overflow: hidden;

    transition:
        background
        0.10s
        ease;
}

.task-wrapper:first-child .task-card {
    border-radius:
        0.30rem
        0.30rem
        0
        0;
}

.task-card:hover {
    background: var(--surface-hover);
}

.task-controls {
    display: contents;
}


/* ==========================================================================
   GUTC
   ========================================================================== */

.gutc {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-self: stretch;

    gap: 0;
    padding: 0;

    background: var(--surface);
}

.gutc-value {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 100%;

    line-height: 1;

    user-select: none;
}

.gutc-value strong {
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
}


/* ==========================================================================
   GUTC colors
   ========================================================================== */

.gutc-null {
    color: #686d72;
    background: #e4e6e8;
}

.gutc-1 {
    color: #176b35;
    background: #dff3e5;
}

.gutc-2 {
    color: #527019;
    background: #eaf0ce;
}

.gutc-3 {
    color: #725c00;
    background: #fff2b8;
}

.gutc-4 {
    color: #8a4800;
    background: #ffe0bc;
}

.gutc-5 {
    color: #9b1c2e;
    background: #ffd5dc;
}


/* ==========================================================================
   Status colors
   ========================================================================== */

.status-not-started {
    background: var(--surface);
}

.status-running {
    background: #fff2b8;
}

.status-waiting {
    color: #555b61;
    background: #e4e6e8;
}

.status-completed {
    background: #dff3e5;
}

.status-cancelled {
    background: #ffd5dc;
}


/* ==========================================================================
   Status controls
   ========================================================================== */

.status-select,
.quick-status {
    align-self: stretch;

    width: 100%;
    min-width: 0;
    min-height: 0;

    margin: 0;

    padding:
        0
        0.40rem;

    color: var(--text);

    font-family: inherit;
    font-size: 0.50rem;
    font-weight: 400;

    text-align: center;
    text-align-last: center;

    border: 0;
    border-radius: 0;

    outline: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: none;

    transition:
        background
        0.10s
        ease;
}

.status-select:focus,
.quick-status:focus {
    box-shadow:
        inset
        0
        0
        0
        0.05rem
        rgba(0, 129, 166, 0.25);
}


/* ==========================================================================
   Status options
   ========================================================================== */

.status-select option,
.quick-status option,
.full-status option {
    color: var(--text);
    font-weight: 400;
}

.status-select option[value="Não Iniciada"],
.quick-status option[value="Não Iniciada"],
.full-status option[value="Não Iniciada"] {
    background: #ffffff;
}

.status-select option[value="Em Andamento"],
.quick-status option[value="Em Andamento"],
.full-status option[value="Em Andamento"] {
    background: #fff2b8;
}

.status-select option[value="Aguardando:: Processo"],
.status-select option[value="Aguardando:: Retorno"],
.quick-status option[value="Aguardando:: Processo"],
.quick-status option[value="Aguardando:: Retorno"],
.full-status option[value="Aguardando:: Processo"],
.full-status option[value="Aguardando:: Retorno"] {
    color: #555b61;
    background: #e4e6e8;
}

.status-select option[value="Concluída"],
.quick-status option[value="Concluída"],
.full-status option[value="Concluída"] {
    background: #dff3e5;
}

.status-select option[value="Cancelada"],
.quick-status option[value="Cancelada"],
.full-status option[value="Cancelada"] {
    background: #ffd5dc;
}


/* ==========================================================================
   Task data
   ========================================================================== */

.task-data {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 0.75rem;

    min-width: 0;

    padding:
        0.20rem
        0.45rem;
}

.task-main-content {
    display: grid;

    grid-template-rows:
        auto
        auto;

    align-content: center;

    gap: 0.15rem;

    min-width: 0;
}

.task-title-row {
    min-width: 0;

    overflow: hidden;

    line-height: 1;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.task-title-row strong {
    font-size: 0.65rem;
    font-weight: 650;
}

.task-details-row {
    display: flex;

    align-items: center;

    gap:
        0.15rem
        0.40rem;

    min-width: 0;

    overflow: hidden;

    color: var(--text-muted);

    font-size: 0.45rem;
    line-height: 1;

    white-space: nowrap;
}

.task-detail {
    flex:
        0
        0
        auto;
}

.task-detail-label {
    margin-right: 0.15rem;

    color: var(--text-secondary);

    font-weight: 600;
}

.task-tag {
    flex:
        0
        0
        auto;

    padding:
        0.05rem
        0.25rem;

    color: #62666a;

    background: #eceeef;

    border-radius: 62.50rem;

    font-size: 0.45rem;
    font-weight: 600;
}



.task-data-editable {
    cursor: pointer;
}

.task-data-editable:focus-visible {
    outline:
        0.10rem solid
        var(--blue);

    outline-offset: -0.10rem;
}

.full-error {
    color: var(--red) !important;

    font-size: 0.45rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Task clocks
   ========================================================================== */

.task-clocks {
    display: grid;

    grid-template-rows:
        auto
        auto;

    align-content: center;

    gap: 0.10rem;

    min-width: 8.75rem;

    text-align: right;
}

.task-clock {
    display: grid;

    grid-template-columns:
        auto
        4.60rem;

    align-items: baseline;

    justify-content: end;

    gap: 0.40rem;

    white-space: nowrap;
}

.task-clock-label {
    color: var(--text-muted);

    font-size: 0.40rem;
    font-weight: 500;
}

.task-clock-value {
    color: var(--text-secondary);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 0.50rem;

    font-variant-numeric:
        tabular-nums;

    font-weight: 600;

    line-height: 1;

    text-align: right;
}

.task-clock-running
.task-clock-value[data-active="true"] {
    color: #725c00;
}

.task-clock-waiting
.task-clock-value[data-active="true"] {
    color: #555b61;
}


/* ==========================================================================
   Infinite scroll
   ========================================================================== */

.task-page-loader {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 2rem;

    color: var(--text-muted);

    font-size: 0.50rem;
}


/* ==========================================================================
   Fixed quick form
   ========================================================================== */

.quick-task-bar {
    position: fixed;

    z-index: 100;

    right: 0;
    bottom: 0;
    left: 0;

    background:
        rgba(255, 255, 255, 0.98);

    border-top:
        0.05rem solid
        var(--separator);

    box-shadow:
        0
        -0.15rem
        0.50rem
        rgba(0, 0, 0, 0.04);

    backdrop-filter: blur(0.65rem);
}

.quick-task-bar-inner {
    width: 100%;
}

.quick-task-form {
    display: grid;

    grid-template-columns:
        var(--gutc-width)
        var(--status-width)
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;
    min-width: 0;
    min-height: 2.40rem;

    background: var(--surface);
}


/* ==========================================================================
   Quick GUTC
   ========================================================================== */

.quick-gutc {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: stretch;
}

.quick-gutc-field {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;

    color: #686d72;
    background: #e4e6e8;

    transition:
        background
        0.10s
        ease,
        color
        0.10s
        ease;
}

.quick-gutc-field.gutc-input-1 {
    color: #176b35;
    background: #dff3e5;
}

.quick-gutc-field.gutc-input-2 {
    color: #527019;
    background: #eaf0ce;
}

.quick-gutc-field.gutc-input-3 {
    color: #725c00;
    background: #fff2b8;
}

.quick-gutc-field.gutc-input-4 {
    color: #8a4800;
    background: #ffe0bc;
}

.quick-gutc-field.gutc-input-5 {
    color: #9b1c2e;
    background: #ffd5dc;
}

.quick-gutc-field input[type="number"] {
    width: 100%;
    min-width: 0;

    height: 100%;
    min-height: 0;

    padding:
        0
        0.05rem;

    color: inherit;

    font-size: 0.55rem;
    font-weight: 700;

    text-align: center;

    background: transparent;

    border: 0;
    border-radius: 0;

    outline: none;

    appearance: textfield;
    -moz-appearance: textfield;
}

.quick-gutc-field input[type="number"]::placeholder {
    color: #8b8f94;
    opacity: 1;
}

.quick-gutc-field input[type="number"]::-webkit-inner-spin-button,
.quick-gutc-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}


/* ==========================================================================
   Quick task data
   ========================================================================== */

.quick-task-data {
    display: grid;

    grid-template-rows:
        auto
        auto;

    align-content: center;

    gap: 0.15rem;

    min-width: 0;

    padding:
        0.15rem
        0.40rem;
}

.quick-title-row {
    display: flex;

    align-items: center;

    gap: 0.30rem;

    min-width: 0;
}

.quick-task-data input {
    min-height: 0;

    padding:
        0.05rem
        0.20rem;

    font: inherit;

    background: transparent;

    border: 0;

    border-bottom:
        0.05rem solid
        transparent;

    border-radius: 0;

    outline: none;
}

.quick-task-data input:focus {
    border-bottom-color:
        var(--blue);

    box-shadow: none;
}

.quick-title-row input[type="text"] {
    flex:
        1
        1
        auto;

    min-width: 0;

    font-size: 0.65rem;
    font-weight: 650;
}

.quick-details-row {
    display: flex;

    align-items: center;

    gap: 0.40rem;

    min-width: 0;
}

.quick-details-row input {
    width: auto;
    min-width: 0;

    color: var(--text-secondary);

    font-size: 0.45rem;
}


/* ==========================================================================
   Requested by search
   ========================================================================== */

.quick-requester-search {
    position: relative;

    flex:
        1
        1
        13.75rem;

    min-width: 0;
}

.quick-requester-search > input[type="text"] {
    width: 100%;
}


/* ==========================================================================
   Requested via
   ========================================================================== */

.quick-requested-via {
    flex:
        0
        0
        5rem;

    align-self: stretch;

    width: 5rem;
    min-width: 5rem;
    min-height: 0;

    padding:
        0
        0.40rem;

    color: var(--text-secondary);

    font-family: inherit;
    font-size: 0.45rem;
    font-weight: 400;

    text-align: center;
    text-align-last: center;

    background: var(--surface);

    border: 0;
    border-radius: 0;

    outline: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: none;
}

.quick-requested-via:focus {
    box-shadow:
        inset
        0
        0
        0
        0.05rem
        rgba(0, 129, 166, 0.25);
}

.quick-requested-via option {
    color: var(--text);

    background: var(--surface);

    font-weight: 400;
}


/* ==========================================================================
   Active search
   ========================================================================== */

.quick-title-search {
    position: relative;
}

.task-search-results,
.user-search-results {
    position: absolute;

    z-index: 200;

    right: 0;
    bottom: calc(100% + 0.20rem);
    left: 0;

    display: flex;

    flex-direction: column;

    max-height: 15rem;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--surface);

    border:
        0.05rem solid
        var(--border);

    border-radius: 0.30rem;

    box-shadow:
        0
        0.30rem
        1rem
        rgba(0, 0, 0, 0.12);
}

.task-search-results:empty,
.user-search-results:empty {
    display: none;
}

.task-search-result,
.user-search-result {
    display: grid;

    grid-template-rows:
        auto
        auto;

    gap: 0.20rem;

    width: 100%;

    padding:
        0.40rem
        0.50rem;

    color: var(--text);

    font-family: inherit;

    text-align: left;

    background: var(--surface);

    border: 0;

    border-bottom:
        0.05rem solid
        var(--separator);

    border-radius: 0;

    outline: none;

    cursor: pointer;
}

.task-search-result:last-child,
.user-search-result:last-child {
    border-bottom: 0;
}

.task-search-result:hover,
.task-search-result:focus,
.task-search-result-active,
.user-search-result:hover,
.user-search-result:focus,
.user-search-result-active {
    background: var(--surface-secondary);
}

.task-search-result-title,
.user-search-result-name {
    display: block;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    color: var(--text);

    font-size: 0.60rem;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.task-search-result-meta {
    display: flex;

    align-items: center;

    gap: 0.25rem;

    min-width: 0;

    overflow: hidden;

    color: var(--text-muted);

    font-size: 0.45rem;

    white-space: nowrap;
}

.user-search-result-email {
    overflow: hidden;

    color: var(--text-muted);

    font-size: 0.45rem;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.search-gutc {
    display: inline-flex;

    flex:
        0
        0
        auto;

    align-items: center;
    justify-content: center;

    width: 1.10rem;
    height: 1rem;

    font-size: 0.45rem;
    font-weight: 700;

    border-radius: 0.15rem;
}

.task-search-duration {
    flex:
        0
        0
        auto;

    margin-left: 0.15rem;
}


/* ==========================================================================
   Quick actions
   ========================================================================== */

.quick-actions {
    display: flex;

    flex:
        0
        0
        auto;

    align-items: stretch;

    gap: 0.15rem;
}

.quick-action-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 1.50rem;
    min-height: 1.40rem;

    padding: 0;

    font: inherit;
    font-size: 0.70rem;
    font-weight: 700;

    border: 0;
    border-radius: var(--radius-small);

    cursor: pointer;
}

.quick-create-button {
    color: #176b35;

    background: #dff3e5;
}

.quick-create-button:hover {
    background: #ccebd6;
}

.quick-more-button {
    color: var(--text-secondary);

    background: var(--surface-secondary);
}

.quick-more-button:hover {
    color: var(--text);

    background: #e4e6e8;
}

.quick-error {
    color: var(--red);

    font-size: 0.45rem;
    font-weight: 600;
}


/* ==========================================================================
   Modal
   ========================================================================== */

.task-modal {
    width: min(
        42.50rem,
        calc(100vw - 2rem)
    );

    max-height:
        calc(100vh - 3rem);

    padding: 0;

    color: var(--text);

    background: var(--surface);

    border:
        0.05rem solid
        var(--border);

    border-radius: 0.30rem;

    box-shadow:
        0
        1.25rem
        3.75rem
        rgba(0, 0, 0, 0.20);

    overflow: hidden;
}

.task-modal::backdrop {
    background:
        rgba(15, 18, 22, 0.48);

    backdrop-filter: blur(0.15rem);
}

.task-modal-content {
    max-height:
        calc(100vh - 3rem);

    overflow-y: auto;
}

.task-modal-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    padding:
        0.90rem
        1rem
        0.70rem;

    background: var(--surface);

    border-bottom:
        0.05rem solid
        var(--separator);
}

.task-modal-header h2 {
    margin: 0;

    font-size: 1rem;
}

.task-modal-header p {
    margin:
        0.15rem
        0
        0;

    color: var(--text-secondary);

    font-size: 0.70rem;
}

.modal-close {
    width: 1.65rem;
    height: 1.65rem;

    padding: 0;

    color: var(--text-secondary);

    font-size: 1.25rem;

    background: transparent;

    border: 0;

    cursor: pointer;
}


/* ==========================================================================
   Full form
   ========================================================================== */

.full-task-form {
    padding: 1rem;
}

.full-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0.65rem;
}

.full-field {
    display: flex;

    flex-direction: column;

    gap: 0.20rem;
}

.full-field-wide {
    grid-column:
        1 /
        -1;
}

.full-field > span {
    color: var(--text-secondary);

    font-size: 0.50rem;
    font-weight: 600;
}

.full-field input,
.full-field textarea,
.full-field select {
    width: 100%;

    min-height: 1.90rem;

    padding:
        0.30rem
        0.45rem;

    color: var(--text);

    font: inherit;
    font-size: 0.65rem;

    background: var(--surface);

    border:
        0.05rem solid
        var(--border);

    border-radius:
        var(--radius-small);

    outline: none;
}

.full-field textarea {
    resize: vertical;
}

.full-field input:focus,
.full-field textarea:focus,
.full-field select:focus {
    border-color: var(--blue);

    box-shadow:
        0
        0
        0
        0.15rem
        rgba(0, 129, 166, 0.10);
}


/* ==========================================================================
   Full search
   ========================================================================== */

.full-search-field {
    position: relative;
}

.full-search-results {
    position: absolute;

    z-index: 500;

    top: calc(100% + 0.20rem);
    right: 0;
    bottom: auto;
    left: 0;

    max-height: 15rem;
}


/* ==========================================================================
   Full status
   ========================================================================== */

.full-field .full-status {
    width: 100%;

    min-height: 1.90rem;

    padding:
        0.30rem
        0.45rem;

    color: var(--text);

    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 400;

    text-align: center;
    text-align-last: center;

    border:
        0.05rem solid
        var(--border);

    border-radius:
        var(--radius-small);

    outline: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: none;

    transition:
        background
        0.10s
        ease;
}


/* ==========================================================================
   Full GUTC
   ========================================================================== */

.full-gutc {
    display: grid;

    grid-column:
        1 /
        -1;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0.45rem;
}

.full-gutc-field {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0.20rem;

    padding:
        0.30rem
        0.45rem;

    color: #686d72;
    background: #e4e6e8;

    border-radius:
        var(--radius-small);

    transition:
        background
        0.10s
        ease,
        color
        0.10s
        ease;
}

.full-gutc-field.gutc-input-1 {
    color: #176b35;
    background: #dff3e5;
}

.full-gutc-field.gutc-input-2 {
    color: #527019;
    background: #eaf0ce;
}

.full-gutc-field.gutc-input-3 {
    color: #725c00;
    background: #fff2b8;
}

.full-gutc-field.gutc-input-4 {
    color: #8a4800;
    background: #ffe0bc;
}

.full-gutc-field.gutc-input-5 {
    color: #9b1c2e;
    background: #ffd5dc;
}

.full-gutc-field span {
    color: inherit;

    font-size: 0.50rem;
    font-weight: 700;
}

.full-gutc-field input[type="number"] {
    width: 100%;

    min-height: 1.50rem;

    padding:
        0.15rem
        0.25rem;

    color: inherit;

    font: inherit;
    font-size: 0.65rem;
    font-weight: 700;

    text-align: center;

    background: transparent;

    border: 0;
    border-radius: 0;

    outline: none;

    appearance: textfield;
    -moz-appearance: textfield;
}

.full-gutc-field input[type="number"]::placeholder {
    color: #8b8f94;
    opacity: 1;
}

.full-gutc-field input[type="number"]::-webkit-inner-spin-button,
.full-gutc-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}

.full-gutc-field input[type="number"]:focus {
    box-shadow:
        inset
        0
        -0.05rem
        0
        rgba(0, 129, 166, 0.55);
}


/* ==========================================================================
   Full form actions
   ========================================================================== */

.full-form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 0.45rem;

    margin-top: 0.90rem;
}

.primary-button,
.secondary-button {
    min-height: 1.90rem;

    padding:
        0.30rem
        0.75rem;

    font: inherit;
    font-size: 0.55rem;
    font-weight: 650;

    border-radius:
        var(--radius-small);

    cursor: pointer;
}

.primary-button {
    color: #ffffff;

    background: var(--red);

    border: 0;
}

.primary-button:hover {
    background: var(--red-hover);
}

.secondary-button {
    color: var(--text-secondary);

    background: var(--surface);

    border:
        0.05rem solid
        var(--border);
}


/* ==========================================================================
   Generic
   ========================================================================== */

input,
textarea,
select,
button {
    font-family: inherit;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 43.75rem) {
    body {
        padding-bottom: 3.65rem;
    }

    .dashboard,
    .app-content,
    .quick-task-bar-inner {
        padding-inline: 0.65rem;
    }

    .current-user-control {
        top: 0.65rem;
        right: 0.65rem;
    }

    .current-user-select {
        min-width: 6.50rem;

        font-size: 0.50rem;
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        height: 7.50rem;
    }

    .pending-card {
        height: auto;
        min-height: 7.50rem;
    }

    .status-history-card {
        overflow-x: auto;
    }

    .status-chart {
        min-width: 40.65rem;
    }

    .task-card,
    .quick-task-form,
    .task-list-header {
        grid-template-columns:
            5.15rem
            7rem
            minmax(0, 1fr);
    }

    .status-select,
    .quick-status {
        font-size: 0.45rem;
    }

    .task-data {
        gap: 0.40rem;
    }

    .task-clocks {
        min-width: 6.60rem;
    }

    .task-clock {
        grid-template-columns:
            auto
            4.15rem;

        gap: 0.20rem;
    }

    .task-clock-label {
        font-size: 0.35rem;
    }

    .task-clock-value {
        font-size: 0.45rem;
    }

    .quick-requested-via {
        width: 4.25rem;
        min-width: 4.25rem;

        flex-basis: 4.25rem;
    }

    .task-search-results,
    .user-search-results {
        max-height: 12rem;
    }

    .full-form-grid {
        grid-template-columns: 1fr;
    }

    .full-field-wide,
    .full-gutc {
        grid-column: 1;
    }

    .full-gutc {
        grid-template-columns:
            repeat(2, 1fr);
    }
}