/* =========================================================
   Dartdata Components
   ========================================================= */

:root {
    --dd-border: #dee2e6;
    --dd-border-light: #e9ecef;
    --dd-bg-muted: #f8f9fa;
    --dd-text-muted: #6c757d;

    --dd-radius: .375rem;
    --dd-section-gap: 1rem;
}


/* =========================================================
   Página
   ========================================================= */

.dd-page {
    max-width: 1400px;
    margin: 0 auto;
}

.dd-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
    margin-bottom: 1rem;
}

.dd-page-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.dd-page-subtitle {
    margin-top: .15rem;
    font-size: .82rem;
    color: var(--dd-text-muted);
}


/* =========================================================
   Toolbar
   ========================================================= */

.dd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    padding: .5rem 0;
    margin-bottom: 1rem;

    border-bottom: 1px solid var(--dd-border);
}

.dd-toolbar-start,
.dd-toolbar-end {
    display: flex;
    align-items: center;
    gap: .5rem;
}


/* =========================================================
   Formulário
   ========================================================= */

.dd-form {
    font-size: .78rem;
}

.dd-form .form-label {
    font-size: .72rem;
    font-weight: 500;
    margin-bottom: .1rem;
    padding-top: .475rem;
}

.dd-form .form-control,
.dd-form .form-select {
    font-size: .78rem;
}

.dd-form-row {
    margin-bottom: .75rem;
}

/* ==========================================================
   Checkbox
   ========================================================== */

.dd-field-checkbox {
    margin-top: .25rem;
    margin-bottom: .5rem;
}

.dd-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    margin: 0;

    font-size: .78rem;
    font-weight: 500;

    color: #495057;

    cursor: pointer;
    user-select: none;
}

.dd-checkbox .form-check-input {
    width: 1rem;
    height: 1rem;

    margin: 0;

    flex-shrink: 0;

    cursor: pointer;
}


/* =========================================================
   Section
   ========================================================= */

.dd-section {
    margin-bottom: var(--dd-section-gap);
}

.dd-section-header {
    display: flex;
    align-items: center;
    gap: .4rem;

    padding-bottom: .4rem;
    margin-bottom: .75rem;

    border-bottom: 1px solid var(--dd-border);

    font-size: .9rem;
    font-weight: 600;
}

.dd-section-body {
    padding: 0 .25rem;
}


/* =========================================================
   Card
   ========================================================= */

.dd-card {
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    background: #fff;

    margin-bottom: 1rem;
}

.dd-card-header {
    padding: .65rem .8rem;

    border-bottom: 1px solid var(--dd-border-light);

    font-size: .88rem;
    font-weight: 600;
}

.dd-card-body {
    padding: .8rem;
}


/* =========================================================
   Accordion
   ========================================================= */

.dd-accordion {
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);

    background: #fff;

    margin-bottom: .75rem;

    overflow: hidden;
}

.dd-accordion-header {
    display: flex;
    align-items: center;

    min-height: 42px;

    padding: .55rem .75rem;

    cursor: pointer;
    user-select: none;

    background: var(--dd-bg-muted);
}

.dd-accordion-header:hover {
    background: #f1f3f5;
}

.dd-accordion-icon {
    margin-right: .5rem;
    color: var(--dd-text-muted);
}

.dd-accordion-title {
    font-weight: 600;
    font-size: .86rem;
}

.dd-accordion-summary {
    margin-left: auto;
    margin-right: .75rem;

    color: var(--dd-text-muted);
    font-size: .78rem;
}

.dd-accordion-chevron {
    transition: transform .15s ease;
}

.dd-accordion[open] .dd-accordion-chevron {
    transform: rotate(90deg);
}

.dd-accordion-body {
    padding: .85rem;
}


/* remove marcador padrão do details */

.dd-accordion summary {
    list-style: none;
}

.dd-accordion summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   Empty state
   ========================================================= */

.dd-empty {
    text-align: center;

    padding: 2rem 1rem;

    color: var(--dd-text-muted);
}

.dd-empty-icon {
    display: block;

    font-size: 1.7rem;

    margin-bottom: .5rem;
}

.dd-empty-title {
    color: #495057;
    font-weight: 600;
}

.dd-empty-text {
    font-size: .82rem;
}


/* =========================================================
   Relacionamentos
   ========================================================= */

.dd-related-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: .75rem;
}

.dd-related-card {
    display: block;

    padding: .8rem;

    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);

    text-decoration: none;
    color: inherit;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.dd-related-card:hover {
    border-color: #adb5bd;

    box-shadow:
        0 .125rem .25rem rgba(0, 0, 0, .05);
}

.dd-related-card-title {
    display: flex;
    align-items: center;

    gap: .4rem;

    font-weight: 600;
    font-size: .85rem;
}

.dd-related-card-summary {
    margin-top: .35rem;

    color: var(--dd-text-muted);

    font-size: .78rem;
}