@import url('qm-theme.css');

.qm-app .nav-link {
    color: inherit;
}

.qm-home-checklist li::marker {
    color: var(--qm-teal);
}

.qm-route-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.qm-route-summary .qm-chip {
    text-transform: none;
    letter-spacing: 0;
}

.qm-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.qm-entity-list {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.qm-library-accordion {
    overflow: hidden;
}

.qm-template-library-header {
    margin-bottom: 0;
}

.qm-template-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 180ms ease, opacity 180ms ease, margin-top 180ms ease;
}

.qm-template-accordion-body.expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 1rem;
}

.qm-template-accordion-body > .qm-template-drawer-body {
    min-height: 0;
    overflow: hidden;
}

.qm-template-drawer-body {
    display: grid;
    gap: 0.75rem;
}

.qm-entity-list-item {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    padding: 0.95rem 1rem;
    text-align: left;
    border: 1px solid rgba(203, 213, 225, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
}

.qm-entity-list-item.active {
    border-color: rgba(45, 212, 191, 0.38);
    background: rgba(20, 184, 166, 0.10);
}

.qm-entity-list-item strong,
.qm-template-service-row strong {
    color: var(--qm-white);
}

.qm-entity-list-item small,
.qm-template-service-row small {
    color: rgba(226, 232, 240, 0.68);
}

.qm-entity-editor {
    display: grid;
    gap: 1rem;
}

.qm-template-node {
    display: grid;
    gap: 1rem;
    padding-left: 0;
}

.qm-template-node.depth-0 > .qm-inline-editor { background: rgba(255, 255, 255, 0.03); }
.qm-template-node.depth-1 > .qm-inline-editor { background: rgba(255, 255, 255, 0.045); }
.qm-template-node.depth-2 > .qm-inline-editor { background: rgba(255, 255, 255, 0.06); }
.qm-template-node.depth-3 > .qm-inline-editor { background: rgba(255, 255, 255, 0.075); }
.qm-template-node.depth-4 > .qm-inline-editor { background: rgba(255, 255, 255, 0.09); }
.qm-template-node.depth-5 > .qm-inline-editor,
.qm-template-node.depth-6 > .qm-inline-editor { background: rgba(255, 255, 255, 0.105); }

.qm-template-node.depth-1,
.qm-template-node.depth-2,
.qm-template-node.depth-3,
.qm-template-node.depth-4,
.qm-template-node.depth-5,
.qm-template-node.depth-6 {
    padding-top: 0.55rem;
}

.qm-template-node.depth-1::before,
.qm-template-node.depth-2::before,
.qm-template-node.depth-3::before,
.qm-template-node.depth-4::before,
.qm-template-node.depth-5::before,
.qm-template-node.depth-6::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.6), rgba(45, 212, 191, 0.12));
}

.qm-template-node-header {
    align-items: center;
}

.qm-node-actions {
    justify-content: flex-end;
}

.qm-drawer-card {
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 225, 0.10);
    background: rgba(8, 17, 32, 0.35);
}

.qm-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--qm-white);
    font-weight: 700;
}

.qm-drawer-body {
    display: grid;
    gap: 0.85rem;
}

.qm-service-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.qm-search-results {
    display: grid;
    gap: 0.55rem;
}

.qm-search-result {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    text-align: left;
    color: inherit;
    border: 1px solid rgba(203, 213, 225, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.qm-search-result.active,
.qm-search-result:hover,
.qm-search-result-create {
    border-color: rgba(20, 184, 166, 0.30);
    background: rgba(20, 184, 166, 0.10);
}

.qm-search-result strong {
    color: var(--qm-white);
}

.qm-search-result small {
    color: rgba(226, 232, 240, 0.68);
}

.qm-template-service-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 225, 0.10);
    background: rgba(8, 17, 32, 0.35);
}

.qm-draft-actions {
    margin-top: 0.35rem;
}

.qm-footer-actions {
    justify-content: flex-start;
}

.qm-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
}

.qm-overlay-panel {
    width: min(100%, 820px);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    padding: 1.25rem;
    border: 1px solid rgba(203, 213, 225, 0.12);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(17, 28, 50, 0.98), rgba(10, 18, 31, 0.98));
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.48);
}

.qm-overlay-panel.wide {
    width: min(100%, 1100px);
}

.qm-overlay-body {
    display: grid;
    gap: 1rem;
}

.qm-overlay-actions {
    margin-top: 1rem;
    justify-content: flex-end;
}

.qm-full-width-card {
    width: 100%;
}

.qm-search-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 0.75rem;
    align-items: end;
}

.qm-card-button {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.qm-card-button:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, 0.30);
    background: rgba(20, 184, 166, 0.08);
}

.qm-customer-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.qm-detail-card {
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 225, 0.10);
    background: rgba(255, 255, 255, 0.03);
}

.qm-detail-card strong {
    display: block;
    margin-top: 0.3rem;
    color: var(--qm-white);
}

.qm-list-scroll {
    max-height: 52vh;
    overflow: auto;
    padding-right: 0.25rem;
}

@media (max-width: 1100px) {
    .qm-editor-shell {
        grid-template-columns: 1fr;
    }

    .qm-template-service-row {
        flex-direction: column;
        align-items: stretch;
    }

    .qm-customer-detail-grid,
    .qm-search-inline {
        grid-template-columns: 1fr;
    }
}