/**
 * ImotMax - Extended Theme Styles
 * Complements the main style.css with utility classes and print styles.
 * @package Imoten
 */

/* ===== Utility classes ===== */
.im-text-center { text-align: center; }
.im-text-left { text-align: left; }
.im-text-right { text-align: right; }

.im-mt-1 { margin-top: 0.5rem; }
.im-mt-2 { margin-top: 1rem; }
.im-mt-3 { margin-top: 1.5rem; }
.im-mt-4 { margin-top: 2rem; }
.im-mb-1 { margin-bottom: 0.5rem; }
.im-mb-2 { margin-bottom: 1rem; }
.im-mb-3 { margin-bottom: 1.5rem; }
.im-mb-4 { margin-bottom: 2rem; }

.im-hidden { display: none !important; }
.im-flex { display: flex; }
.im-flex-col { display: flex; flex-direction: column; }
.im-items-center { align-items: center; }
.im-justify-between { justify-content: space-between; }
.im-justify-center { justify-content: center; }
.im-gap-1 { gap: 0.5rem; }
.im-gap-2 { gap: 1rem; }
.im-gap-3 { gap: 1.5rem; }

.im-w-full { width: 100%; }
.im-rounded { border-radius: var(--im-radius); }
.im-rounded-lg { border-radius: var(--im-radius-lg); }
.im-shadow { box-shadow: var(--im-shadow); }
.im-shadow-md { box-shadow: var(--im-shadow-md); }

.im-text-sm { font-size: 0.875rem; }
.im-text-xs { font-size: 0.75rem; }
.im-text-lg { font-size: 1.125rem; }
.im-font-bold { font-weight: 700; }
.im-font-semibold { font-weight: 600; }

.im-text-primary { color: var(--im-primary); }
.im-text-success { color: var(--im-success); }
.im-text-error { color: var(--im-error); }
.im-text-muted { color: var(--im-gray-500); }

.im-bg-white { background: var(--im-white); }
.im-bg-gray { background: var(--im-gray-50); }

.im-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.im-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.im-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Form elements ===== */
.im-form-group {
    margin-bottom: 1rem;
}

.im-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--im-gray-700);
    margin-bottom: 0.375rem;
}

.im-form-input,
.im-form-select,
.im-form-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--im-gray-300);
    border-radius: var(--im-radius);
    font-family: var(--im-font);
    font-size: 0.9375rem;
    color: var(--im-gray-800);
    background: var(--im-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.im-form-input:focus:not(:focus-visible),
.im-form-select:focus:not(:focus-visible),
.im-form-textarea:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--im-primary);
    box-shadow: 0 0 0 3px var(--im-primary-light);
}

.im-form-input:focus-visible,
.im-form-select:focus-visible,
.im-form-textarea:focus-visible {
    outline: 2px solid var(--im-primary);
    outline-offset: 2px;
    border-color: var(--im-primary);
    box-shadow: 0 0 0 3px var(--im-primary-light);
}

.im-form-input::placeholder {
    color: var(--im-gray-400);
}

.im-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.im-form-help {
    font-size: 0.75rem;
    color: var(--im-gray-500);
    margin-top: 0.25rem;
}

.im-form-error {
    font-size: 0.75rem;
    color: var(--im-error);
    margin-top: 0.25rem;
}

/* ===== Alert / Notice boxes ===== */
.im-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--im-radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.im-alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.im-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.im-alert--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.im-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ===== Empty state ===== */
.im-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--im-gray-500);
}

.im-empty__icon {
    margin-bottom: 1rem;
    color: var(--im-gray-300);
}

.im-empty__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--im-gray-700);
    margin-bottom: 0.5rem;
}

.im-empty__text {
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ===== Tabs ===== */
.im-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--im-gray-200);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.im-tab {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--im-gray-500);
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.im-tab:hover {
    color: var(--im-gray-700);
}

.im-tab.is-active {
    color: var(--im-primary);
    border-bottom-color: var(--im-primary);
    font-weight: 600;
}

/* ===== Loading spinner ===== */
.im-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--im-gray-200);
    border-top-color: var(--im-primary);
    border-radius: 50%;
    animation: im-spin 0.7s linear infinite;
}

.im-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

@keyframes im-spin {
    to { transform: rotate(360deg); }
}

/* ===== Tag / Label ===== */
.im-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.im-tag--primary {
    background: var(--im-primary-light);
    color: var(--im-primary);
}

.im-tag--success {
    background: #dcfce7;
    color: #166534;
}

.im-tag--warning {
    background: #fef3c7;
    color: #92400e;
}

.im-tag--error {
    background: #fee2e2;
    color: #dc2626;
}

/* ===== Modal ===== */
.im-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.im-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.im-modal {
    background: var(--im-white);
    border-radius: var(--im-radius-xl);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.2s;
}

.im-modal-overlay.is-open .im-modal {
    transform: translateY(0);
}

.im-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--im-gray-200);
}

.im-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
}

.im-modal__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--im-gray-400);
    cursor: pointer;
    padding: 0.25rem;
}

.im-modal__close:hover {
    color: var(--im-gray-700);
}

.im-modal__body {
    padding: 1.5rem;
}

.im-modal__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--im-gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ===== Property Labels (auto-generated smart labels) ===== */
.im-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin: 0.375rem 0;
}

.im-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.im-label:hover {
    opacity: 0.85;
}

.im-label svg {
    flex-shrink: 0;
}

.im-label__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-label--more {
    font-weight: 500;
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
}

/* In compact mode (property cards), limit label container height */
.im-card .im-labels {
    max-height: 1.75rem;
    overflow: hidden;
}

/* ===== Print styles ===== */
@media print {
    .im-header,
    .im-footer,
    .im-scroll-top,
    .im-filter-toggle,
    .im-filter-drawer,
    .im-filter-drawer-overlay,
    #im-cookie-banner,
    .im-card__favorite,
    .im-card__compare,
    .im-btn,
    #im-compare-bar,
    #im-lightbox,
    #im-inquiry-form,
    #im-report-form,
    #im-share-panel,
    #im-share-toggle,
    #im-property-map,
    .im-section,
    nav {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    .im-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Single property: force single column for print */
    div[style*="grid-template-columns: 1fr 360px"] {
        display: block !important;
    }

    aside[style*="position: sticky"] {
        position: static !important;
        margin-top: 1rem;
    }

    /* Remove shadows for print */
    [style*="box-shadow"] {
        box-shadow: none !important;
    }

    a {
        color: black !important;
        text-decoration: underline;
    }

    .im-card {
        box-shadow: none !important;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    .im-properties-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Show URL after links for print */
    .im-post-content a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #666;
    }
}

/* ===== Accessibility ===== */
:focus-visible {
    outline: 2px solid var(--im-primary);
    outline-offset: 2px;
}

.im-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 0.75rem 1.5rem;
    background: var(--im-primary);
    color: var(--im-white);
    z-index: 9999;
    font-weight: 600;
    transition: top 0.2s;
}

.im-skip-link:focus {
    top: 0;
}

/* ===== Selection colors ===== */
::selection {
    background: var(--im-primary-light);
    color: var(--im-primary-dark);
}

/* ===== Scrollbar styling ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--im-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--im-gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--im-gray-400);
}