/* Page layout for the Aurora components used by the Django templates. */
body {
    padding-top: 0;
}

.app-header {
    background: var(--primary);
    border-bottom: 4px solid #15a3a6;
}

.app-header__inner, .app-main {
    width: min(calc(100% - 2rem), 1120px);
    margin-inline: auto;
}

.app-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.75rem;
}

.app-brand {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.app-brand:hover, .app-brand:focus {
    color: #b6f0f2;
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.app-nav a:not([class]) {
    color: #fff;
    text-decoration: none;
}

.app-nav a:not([class]):hover {
    color: #b6f0f2;
    text-decoration: underline;
}

.app-nav .btn-outline-secondary {
    color: #fff;
    border-color: #fff;
}

.app-nav .btn-outline-secondary:hover {
    color: var(--primary);
    background: #fff;
}

.app-main {
    padding-block: 2rem 4rem;
}

.app-intro {
    max-width: 48rem;
    margin-bottom: 2rem;
}

.app-dashboard {
    margin-bottom: 2rem;
}

.app-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}

.app-dashboard__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    background-color: var(--primary);

}

.app-dashboard__card:hover,
.app-dashboard__card:focus-visible {
    text-decoration: none;
    border-color: var(--primary);
}

.app-dashboard__label {
    font-weight: 600;
    color: #fff;

}

.app-dashboard__number {
    font-size: 2.25rem;
    line-height: 1.1;
    color: #0fc8f1;

}

.app-dashboard__link {
    color: var(--primary);
}

.app-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.app-chart {
    padding: 1.5rem;
    min-width: 0;
    background-color: #e8ecec;
}

.app-chart h3 {
    margin: 0 0 1.5rem;
    text-align: center;
}

.app-chart__body {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.app-chart__donut {
    width: min(13rem, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.app-chart__center {
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--light);
    color: var(--primary);
    font-size: 1.6rem;
    font-weight: 700;
}

.app-chart__legend {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 9rem;
    display: grid;
    gap: .5rem;
}

.app-chart__legend li {
    display: grid;
    grid-template-columns: .75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    overflow-wrap: anywhere;
}

.app-chart__swatch {
    width: .75rem;
    height: .75rem;
    border-radius: .15rem;
}

.app-chart__empty {
    text-align: center;
    color: var(--secondary);
    margin: 2rem 0;
}

@media (max-width: 767px) {
    .app-charts { grid-template-columns: 1fr; }
}

.app-eyebrow {
    color: #137991;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.app-auth-page {
    display: flex;
    justify-content: center;
}

.app-auth-card {
    width: min(100%, 32rem);
}

.app-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.app-page-heading h1 {
    margin: 0;
}

.app-page-heading p {
    margin: .25rem 0 0;
    color: #666;
}

.app-actions, .app-search-controls, .app-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

.app-actions--spaced {
    margin-top: 1.25rem;
}

.app-search {
    margin-bottom: 1.5rem;
}

.app-search-controls > input {
    flex: 1;
    min-width: min(16rem, 100%);
}

.app-pagination {
    justify-content: center;
    margin-top: 1.5rem;
}

.app-form-card {
    max-width: 52rem;
}

.app-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

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

.app-form-label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.app-form .form-group {
    margin-block: .75rem;
}

.app-form .invalid-feedback {
    margin-top: .25rem;
}

.app-table-wrap {
    overflow-x: auto;
}

.app-table-wrap .table {
    margin-bottom: 0;
}

.app-status {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.app-status--ativo, .app-status--concluida {
    background: #e4f2dc;
    color: #276000;
}

.app-status--inativo {
    background: #e7eef2;
    color: #29485a;
}

.app-status--agendada {
    background: #e7eef2;
    color: #29485a;
}

.app-status--programada {
    background: #7cccd6;
    color: #07566b;
}

.app-status--em_execucao {
    background: #fff0cb;
    color: #694400;
}

.app-status--cancelada {
    background: #f9e3e3;
    color: #8c2024;
}

.app-status--preventiva {
    background: #bfdbfe;
    color: #1e3a8a;
}

.app-status--corretiva {
    background: #fef08a;
    color: #713f12;
}

.app-order-filters__main {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.app-order-filters__main > div:first-child {
    grid-column: span 4;
}

.app-order-filters__main > div {
    min-width: 0;
}

.app-order-filters__main .form-control {
    width: 100%;
}

@media (max-width: 767px) {
    .app-order-filters__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-order-filters__main > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .app-order-filters__main {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-order-filters__dates {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.app-order-filters__dates > div {
    min-width: 0;
}

.app-order-filters__dates .form-control {
    min-width: 0;
    width: 100%;
}

@media (max-width: 991px) {
    .app-order-filters__dates {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .app-order-filters__dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .app-order-filters__dates {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-order-filters__actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.app-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding-block: .75rem;
    border-bottom: 1px solid #cecece;
}

.checklist-group {
    margin-bottom: 1.25rem;
}

.checklist-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    background: #e6feff;
    border-left: 5px solid #137991;
}

.checklist-group__header h2 {
    margin: 0;
    color: #002d42;
    font-size: 1.35rem;
}

.checklist-group__body {
    padding: 1rem 1.25rem;
}

.checklist-item {
    margin: .75rem 0 .75rem 1rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid #b5e7f2;
    background: #fff;
}

.checklist-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.checklist-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .25rem;
}

.checklist-photo label {
    display: block;
    margin-top: .35rem;
}

.checklist-item + .checklist-item {
    border-top: 1px solid #e3e7e9;
}

.checklist-item__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.checklist-item__header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.checklist-item__header small {
    color: #666;
    font-weight: 400;
}

.checklist-item__hint {
    margin: .5rem 0 0;
    color: #666;
}

.checklist-options {
    margin: .75rem 0 0 1rem;
}

.client-asset {
    margin-bottom: 1.25rem;
}

.client-asset__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.client-asset__header h2 {
    margin: 0;
    font-size: 1.35rem;
}

.client-asset__header p {
    margin: .25rem 0 0;
    color: #666;
}

.app-section-heading {
    margin-top: 1.75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #137991;
}

.app-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.app-column {
    min-width: 0;
}

.app-address-control {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .75rem;
}

.app-address-control input {
    flex: 1;
    min-width: min(16rem, 100%);
}

.app-copy-button {
    white-space: nowrap;
}

.app-dialog {
    width: min(calc(100% - 2rem), 32rem);
    max-width: none;
    margin: auto;
    padding: 1.5rem;
    border: 1px solid #cecece;
    border-radius: .35rem;
    background: #fff;
    color: #252525;
    box-shadow: 0 6px 20px rgba(0, 45, 66, .2);
}

.app-dialog::backdrop {
    background: rgba(0, 45, 66, .6);
}

.app-dialog h2 {
    margin-top: 0;
}

.app-dialog .form-group {
    margin-top: 1rem;
}

.app-inline-form {
    display: inline;
}

textarea.form-control {
    min-height: 7rem;
}

input[type='checkbox'], input[type='radio'] {
    width: auto;
}

[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .app-header__inner {
        align-items: flex-start;
        flex-direction: column;
        padding-block: 1rem;
    }

    .app-form-grid, .app-grid-two {
        grid-template-columns: 1fr;
    }

    .app-field-wide {
        grid-column: auto;
    }
}