/**
 * Kontaktbok - Mobil och surfplatta
 * Sidomeny döljs på mobil; listan som kort. Företagets bottennav (company-mobile-nav.js) används;
 * body får padding-bottom från company-mobile-nav.css.
 */

/* Surfplatta: 769px–1024px – filter som horisontell rad ovanför listan */
@media (min-width: 769px) and (max-width: 1024px) {
    .contact-book-container,
    body.company-arv-rail .contact-book-container {
        grid-template-columns: 1fr !important;
        grid-template-areas: none;
    }

    .contact-book-sidebar,
    body.company-arv-rail .contact-book-sidebar {
        display: block !important;
        position: static !important;
        height: auto !important;
        width: auto !important;
        transform: none !important;
        z-index: auto !important;
        padding: var(--spacing-md) var(--spacing-lg);
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-card);
        box-shadow: none !important;
        margin: 0;
    }

    .contact-book-main,
    body.company-arv-rail .contact-book-main {
        grid-area: unset;
        width: 100%;
    }

    .btn-toggle-contact-filters,
    body.company-arv-rail .btn-toggle-contact-filters {
        display: none !important;
    }

    .contact-book-sidebar .sidebar-header {
        margin-bottom: var(--spacing-md);
    }

    .contact-book-sidebar .sidebar-header .back-link {
        margin-bottom: var(--spacing-sm);
    }

    .contact-book-sidebar .quick-filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-md);
        border-bottom: none;
    }

    .contact-book-sidebar .filter-btn {
        flex: 0 0 auto;
    }

    .contact-book-sidebar .btn-add-sidebar {
        width: auto;
        margin-top: 0;
    }

    .contact-list-header {
        display: grid;
        grid-template-columns:
          minmax(0, 1.4fr)
          minmax(0, 1.2fr)
          minmax(64px, 0.7fr)
          minmax(180px, 1.2fr);
    }

    .contact-list-header .contact-last-cell {
        display: none;
    }

    .contact-row {
        grid-template-columns:
          minmax(0, 1.4fr)
          minmax(0, 1.2fr)
          minmax(64px, 0.7fr)
          minmax(180px, 1.2fr);
        grid-template-areas: unset;
    }

    .contact-row .contact-last-cell {
        display: none;
    }

    .contact-row .contact-name-cell,
    .contact-row .contact-contact-cell,
    .contact-row .contact-type-cell,
    .contact-row .contact-actions-cell {
        grid-area: unset;
    }

    .contact-row .contact-name-line {
        display: flex;
    }

    .contact-row .contact-actions-cell {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .contact-row .action-btn.primary.btn-leave-quote-action {
        flex: 1 1 100%;
        justify-content: center;
    }

    .filter-source-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .contact-book-container,
    body.company-arv-rail .contact-book-container {
        grid-template-columns: 1fr !important;
        grid-template-areas: none;
        padding-bottom: 1rem;
    }

    .contact-book-sidebar {
        display: none;
    }

    /* Mobil: typfilter via dropdown — dölj drawer-knapp */
    .btn-toggle-contact-filters,
    body.company-arv-rail .btn-toggle-contact-filters {
        display: none !important;
    }

    body.company-arv-rail.contact-filters-open .contact-book-sidebar {
        display: none !important;
    }

    .contact-book-main,
    body.company-arv-rail .contact-book-main {
        padding: var(--spacing-lg);
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        grid-area: unset;
        width: 100%;
    }

    .contact-book-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .contact-book-toolbar .toolbar-left {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .contact-book-toolbar .toolbar-right {
        width: 100%;
        flex-direction: column;
    }

    .contact-book-toolbar .search-box {
        min-width: 100%;
        flex: 0 0 auto;
    }

    .contact-book-toolbar .sort-select {
        width: 100%;
        max-width: 100%;
    }

    .filter-source-mobile {
        display: block !important;
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
        border: 2px solid var(--border-color);
        border-radius: var(--border-radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        background: var(--bg-card);
        color: var(--text-primary);
        min-width: 0;
    }

    .contact-book-toolbar .toolbar-right .btn-primary {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        background: var(--primary-gradient);
        color: #fff;
        border: none;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
    }

    .contact-book-main .btn-primary,
    .contact-book-main .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .contact-list-header {
        display: none;
    }

    .contact-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "contact"
            "type"
            "last"
            "actions";
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-radius: var(--border-radius-md);
        margin-bottom: var(--spacing-sm);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-light);
    }

    .contact-row .contact-name-cell {
        grid-area: name;
    }

    .contact-row .contact-name-line {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .contact-row .contact-name,
    .contact-row .contact-notes {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .contact-row .contact-name-cell .contact-notes {
        display: block;
        margin-top: var(--spacing-xs);
    }

    .contact-row .contact-contact-cell {
        grid-area: contact;
        font-size: 0.875rem;
        color: var(--text-secondary);
        gap: 0.4rem;
    }

    .contact-row .contact-contact-cell .contact-link {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-row .contact-contact-cell .contact-link-text {
        white-space: normal;
    }

    .contact-row .contact-type-cell {
        grid-area: type;
        font-size: 0.8125rem;
    }

    .contact-row .contact-type-cell .type-badge {
        display: inline-block;
    }

    .contact-row .contact-last-cell {
        grid-area: last;
        display: block;
        font-size: 0.8125rem;
        color: var(--text-muted);
    }

    .contact-row .contact-last-cell::before {
        content: 'Senast använd: ';
        color: var(--text-muted);
    }

    .contact-row .contact-actions-cell {
        grid-area: actions;
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .contact-row .action-btn {
        flex: unset;
        min-width: 0;
        justify-content: center;
    }

    .contact-row .action-btn.primary.btn-leave-quote-action {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .contact-book-list {
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .contact-book-list .contact-row {
        background: var(--bg-card);
    }

    .contact-modal {
        padding: 0;
        align-items: flex-end;
    }

    .contact-modal-content {
        margin: 0;
        max-height: min(85dvh, 100%);
        max-width: 100%;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    }

    .contact-modal .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .contact-modal .form-actions {
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    }

    .contact-modal .form-actions .btn-primary,
    .contact-modal .form-actions .btn-secondary {
        flex: 1 1 auto;
        min-width: 0;
    }
}