/* Use Hucklberri primary font (Noto Sans) throughout the application */
body {
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Session item styling */
.sidebar-item {
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sidebar-item:hover {
    background-color: #3E5F8A !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.nicegui-content {
    padding: 0 !important;
}

/* Quasar overrides
 * Placed inside @layer quasar so Quasar's own more-specific rules still win by
 * specificity. NiceGUI 3.x loads Quasar inside @layer quasar; unlayered CSS wins
 * regardless of specificity.
 *
 * Textarea sizing is intentionally NOT set here — each component sets its own
 * height via the Quasar `input-style` prop (see content_area.py), so there is no
 * global min-height that would affect unrelated textareas (doc upload, doc
 * generation preview, patient info, etc.). */
@layer quasar {
    /* Force black text on Quasar field controls (default is var(--q-primary)).
     * height/max-width/outline intentionally omitted — Quasar handles them correctly
     * once they are no longer overridden by unlayered CSS. */
    .q-field__control {
        color: rgb(0, 0, 0);
    }

}

/* Patient info page overrides — kept OUTSIDE @layer so they unconditionally win
 * over Quasar's @layer quasar rules (unlayered CSS beats any layered CSS in the
 * CSS cascade, regardless of specificity or source order).
 *
 * Tabs: hide the outside-arrows that Quasar 2.x renders by default.
 * Textarea: make the outlined border visibly black (Quasar 2.x only uses the
 *   `color` prop for the focused ::after element; the default ::before is grey).
 *   Also prevent Quasar's text-overflow:ellipsis from truncating long labels. */
.patient-info-tabs .q-tabs__arrow,
.recording-mode-tabs .q-tabs__arrow {
    display: none;
}
.test-input.q-field--outlined .q-field__control::before {
    border-color: black;
    border-width: 2px;
}
.test-input.q-field--outlined .q-field__control {
    padding-top: 8px;
    padding-bottom: 8px;
}
.test-input .q-field__label {
    overflow: visible;
    text-overflow: clip;
}


/* Text Selector Component Styles */

/* Main text selector wrapper - handles layout structure */
.text-selector-wrapper {
    height: 24rem; /* h-96 equivalent */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Modal content wrapper - full height for modal usage */
.text-selector-wrapper.modal-content {
    height: 100%;
    min-height: 60vh;
}

/* Text content container - handles document appearance and scrolling */
.text-selector-container {
    /* Document appearance - moved from NiceGUI for proper styling */
    line-height: 1.6;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #374151;

    /* Layout and structure */
    height: 100%;
    width: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;

    /* Scrolling behavior */
    overflow-y: auto;
    overflow-x: hidden;

    /* Text selection styling */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Desktop responsive adjustments */
@media (min-width: 768px) {
    .text-selector-container {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .text-selector-container {
        font-size: 16px;
        line-height: 1.7;
    }
}

@media (min-width: 1280px) {
    .text-selector-wrapper {
        height: 28rem; /* Larger on desktop */
    }

    .text-selector-container {
        font-size: 16px;
    }
}

/* Content area textarea (transcription review, document generation, reidentification).
 * In Quasar 2.x, .q-field__inner / .q-field__control / .q-field__native sit between
 * the NiceGUI wrapper (where .style() lands) and the native <textarea>.  Plain
 * `min-height: inherit` won't work because those intermediate elements inherit from
 * Quasar's own height:auto, not from the NiceGUI wrapper.  CSS custom properties DO
 * cascade through the full tree, so --ca-min-height (set via .style() in Python) is
 * accessible via var() on any descendant.
 * Placed outside @layer so it unconditionally beats Quasar's own layered rules. */
.content-area-input .q-field__inner,
.content-area-input .q-field__control,
.content-area-input .q-field__native {
    min-height: var(--ca-min-height, 400px);
}

/* Upload Drop Zone — shared by audio & document upload */

/* Hover state - subtle feedback */
.upload-drop-zone:hover .custom-visual {
    border-color: #9ca3af !important;
    background-color: #f9fafb !important;
}

/* Dragging state - same as hover effect */
.upload-drop-zone.dragging .custom-visual {
    border-color: #9ca3af !important;
    background-color: #f9fafb !important;
    transform: none !important;
    scale: none !important;
}

/* Smooth border / background transitions */
.upload-drop-zone .custom-visual {
    transition: border-color 0.2s ease, background-color 0.2s ease;
    transform: none !important;
}

/* Prevent any scaling or transformations during drag */
.upload-drop-zone.dragging {
    transform: none !important;
    scale: none !important;
}