/**
 * Low Pixel Density Screen Optimizations
 *
 * This file contains CSS optimizations for screens with low pixel density
 * (device pixel ratio <= 1.5 or resolution <= 144dpi).
 *
 * These rules reduce padding, margins, font sizes, and element heights
 * to make the UI more compact on standard (non-retina) displays.
 *
 * To disable these optimizations for testing, simply comment out or remove
 * the <link> tag referencing this file in stylesApp.html
 *
 * Targets:
 * - Most 1080p desktop monitors
 * - Older laptops
 * - Standard definition displays
 */

@media (-webkit-max-device-pixel-ratio: 1.5),
       (max-resolution: 144dpi),
       (max-resolution: 1.5dppx) {

    /* ==================== DTASK.CSS OVERRIDES ==================== */

    /* Global spacing reductions */
    .modal-header {
        padding: 16px 24px;
    }

    .modal-title {
        font-size: 1.25rem;
    }

    .modal-subtitle {
        font-size: 0.8rem;
        margin-top: 2px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        padding: 14px 24px;
    }

    /* Content grid adjustments */
    .content-grid {
        gap: 16px;
    }

    .sidebar-section {
        gap: 14px;
    }

    /* Info cards */
    .info-card {
        padding: 14px;
        border-radius: 10px;
    }

    .section-title {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

    /* Metric rows */
    .metric-row {
        padding: 8px 0;
    }

    .metric-label {
        font-size: 0.8rem;
    }

    .metric-value {
        font-size: 0.85rem;
    }

    .metric-badge {
        padding: 3px 10px;
        font-size: 0.75rem;
    }

    /* Stats grid */
    .stats-grid {
        gap: 10px;
        margin-bottom: 12px;
    }

    .stat-card {
        padding: 12px;
        border-radius: 8px;
    }

    .stat-label {
        font-size: 0.7rem;
        margin-bottom: 3px;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-icon {
        font-size: 1rem;
    }

    /* Form elements */
    .comment-input {
        padding: 10px;
        font-size: 0.8rem;
    }

    /* Upload zone */
    .upload-zone {
        padding: 18px;
        border-radius: 10px;
    }

    .upload-icon {
        font-size: 2rem;
        margin-bottom: 6px;
    }

    /* File items */
    .file-item {
        gap: 10px;
        padding: 10px;
        margin-bottom: 6px;
    }

    .file-icon-wrapper {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }

    .file-name {
        font-size: 0.8rem;
    }

    .file-size {
        font-size: 0.7rem;
    }

    .btn-delete {
        width: 28px;
        height: 28px;
    }

    /* Preview container */
    .preview-header {
        padding: 12px 16px;
    }

    .preview-title {
        font-size: 0.8rem;
    }

    .btn-icon {
        width: 28px;
        height: 28px;
    }

    .no-preview i {
        font-size: 3rem;
        margin-bottom: 12px;
    }

    /* Buttons */
    .btn-modern {
        padding: 8px 18px;
        font-size: 0.8rem;
    }

    /* Loading components */
    .loading-card {
        padding: 1.5rem 2rem;
        gap: 0.75rem;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
    }

    .loading-text {
        font-size: 14px;
    }

    .loading-close {
        margin-top: 0.75rem;
        padding: 0.4rem 0.8rem;
        font-size: 13px;
    }

    /* Toast notifications */
    .toast-card {
        padding: 10px 18px;
        gap: 10px;
    }

    .toast-text {
        font-size: 13px;
    }

    /* UI Container */
    .ui-container {
        padding: 18px;
    }

    .ui-header {
        margin-bottom: 24px;
        padding-bottom: 12px;
    }

    .ui-header__title {
        font-size: 26px;
    }

    .ui-header__actions {
        gap: 10px;
    }

    .ui-btn {
        padding: 8px 16px;
        font-size: 13px;
        gap: 6px;
    }

    /* UI Grid */
    .ui-grid {
        gap: 18px;
    }

    /* UI Cards */
    .ui-card__header {
        padding: 14px 18px;
    }

    .ui-card__title {
        font-size: 16px;
    }

    .ui-card__body {
        padding: 18px;
    }

    /* Form elements */
    .ui-form-group {
        margin-bottom: 14px;
    }

    .ui-label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .ui-input,
    .ui-select,
    .ui-textarea {
        padding: 8px 10px;
        font-size: 13px;
    }

    .ui-textarea {
        min-height: 100px;
    }

    /* Editor */
    .ui-editor__toolbar {
        padding: 6px;
    }

    .ui-editor__btn {
        padding: 5px 8px;
    }

    .ui-editor__content {
        padding: 10px;
        min-height: 120px;
    }

    .ui-form-row {
        gap: 12px;
    }

    /* Badge */
    .ui-badge {
        padding: 3px 10px;
        font-size: 11px;
    }

    /* Info section */
    .ui-info-section {
        padding: 12px;
        margin-bottom: 14px;
    }

    .ui-info-section__title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .ui-info-section__content {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Activity feed */
    .ui-activity__item {
        padding: 10px 0;
    }

    .ui-activity__icon {
        width: 28px;
        height: 28px;
    }

    .ui-activity__text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .ui-activity__time {
        font-size: 11px;
    }

    /* Documents list */
    .ui-documents {
        max-height: 250px;
    }

    .ui-document-item {
        padding: 10px;
        margin-bottom: 10px;
    }

    .ui-document-item__icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .ui-document-item__name {
        font-size: 13px;
    }

    .ui-document-item__meta {
        font-size: 11px;
    }

    .ui-icon-btn {
        width: 28px;
        height: 28px;
    }

    /* Section actions */
    .ui-section-actions {
        margin-bottom: 12px;
    }

    .ui-section-actions__title {
        font-size: 14px;
    }

    /* Empty state */
    .ui-empty-state {
        padding: 30px 16px;
    }

    .ui-empty-state__icon {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .ui-empty-state__text {
        font-size: 13px;
    }

    /* File upload zone */
    .file-upload-zone-dropzone {
        padding: 30px 16px;
        min-height: 160px;
    }

    .file-upload-zone-instruction p {
        font-size: 14px;
    }

    .file-upload-zone-instruction small {
        font-size: 12px;
    }

    .file-upload-zone-summary i {
        font-size: 20px;
    }

    .file-upload-zone-summary strong {
        font-size: 14px;
    }

    .file-upload-zone-list {
        margin-top: 12px;
        gap: 6px;
    }

    .file-upload-zone-item {
        padding: 10px 12px;
    }

    .file-upload-zone-item-icon {
        width: 34px;
        height: 34px;
        font-size: 20px;
        margin-right: 10px;
    }

    .file-upload-zone-item-name {
        font-size: 13px;
    }

    .file-upload-zone-item-size {
        font-size: 11px;
    }

    .file-upload-zone-item-delete {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .file-upload-zone-compact .file-upload-zone-dropzone {
        padding: 16px 12px;
        min-height: 100px;
    }

    /* Empty state container */
    .empty-state-container {
        padding: 2rem 0.75rem;
        margin-top: 16px;
    }

    .empty-state-content h3 {
        margin-bottom: 0.4rem;
    }

    .empty-state-content p {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    /* Admin Dashboard */
    .ca-section-title {
        font-size: 1.1rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.4rem;
    }

    .ca-chart-card {
        padding: 1.25rem;
    }

    .ca-chart-title {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    /* ==================== STYLEHOME.CSS OVERRIDES ==================== */

    /* Navigation */
    .navbar {
        min-height: 44px;
    }

    .navbar-expand-md {
        height: 44px;
        line-height: 44px;
        padding: 0 12px;
    }

    .navbar-size {
        font-size: 14px;
    }

    /* Modern link */
    .modern-link {
        padding: 8px 16px;
        font-size: 1rem;
    }

    /* Module description */
    .module-desc {
        font-size: 13px;
    }

    /* Card body */
    .card-body h2 {
        font-size: 18px;
    }

    .card-body ul li p {
        font-size: 11px;
    }

    .card-body ul li a {
        font-size: 12px;
    }

    .card-item-size {
        font-size: 34px;
    }

    .card-description {
        font-size: 11px;
    }

    /* Side menu */
    .sidemenu {
        flex: 0 0 260px;
    }

    .sidemenu a {
        padding: 6px 6px 6px 24px;
        font-size: 16px;
    }

    .sidemenu span {
        font-size: small;
    }

    .side-left-menu {
        width: 260px;
    }

    .side-left-menu a {
        padding: 6px 6px 6px 24px;
        font-size: 16px;
    }

    .side-left-menu span {
        font-size: small;
    }

    .sidemenu-catalogs {
        width: 320px;
    }

    .sidemenu-catalogs a {
        padding: 6px 6px 6px 24px;
        font-size: 16px;
    }

    /* Sidenav */
    .sidenav a {
        padding: 6px 6px 6px 24px;
        font-size: 16px;
    }

    /* Title navbar */
    .title-navbar {
        font-size: 16px;
    }

    /* Vertical navbar */
    .vertical-navbar-item p {
        font-size: 14px;
    }

    /* Form elements */
    .form-step i {
        font-size: 22px;
    }

    .form-step p {
        font-size: 12px;
    }

    /* BS Wizard */
    .bs-wizard {
        margin-top: 30px;
        padding: 0 0 8px 0;
    }

    .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .bs-wizard > .bs-wizard-step .bs-wizard-info {
        font-size: 12px;
    }

    .bs-wizard > .bs-wizard-step > .bs-wizard-dot {
        width: 26px;
        height: 26px;
        top: 40px;
        margin-top: -13px;
        margin-left: -13px;
    }

    .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
        width: 12px;
        height: 12px;
        top: 7px;
        left: 7px;
    }

    .bs-wizard > .bs-wizard-step > .progress {
        height: 6px;
        margin: 16px 0;
    }

    /* Input elements */
    .input-xs {
        height: 20px;
        padding: 2px 4px;
        font-size: 11px;
    }

    .input-box {
        padding: 8px;
        font-size: 13px;
        min-height: 36px;
    }

    .textarea-box {
        padding: 8px;
        font-size: 13px;
        min-height: 36px;
    }

    /* Grid */
    .grid-header {
        padding: 2px;
        height: 8%;
    }

    .grid-item {
        padding: 4px;
    }

    /* Calendar */
    .calendar-day {
        padding: 8px;
    }

    /* Chat */
    .chat-header {
        padding: 4px;
        font-size: 11px;
    }

    .chat-messages {
        padding: 8px;
        height: 400px;
    }

    .chat-form {
        padding: 8px;
    }

    /* Messages */
    .message {
        margin-bottom: 8px;
    }

    .message-sender .time {
        font-size: 0.75rem;
    }

    .receiver .message-body {
        margin-left: 24px;
        padding: 8px;
    }

    .message-body {
        padding: 8px;
    }

    /* Waiting animation */
    .waiting-animation {
        height: 44px;
    }

    .drop-container {
        width: 70px;
        height: 70px;
    }

    .drop {
        width: 16px;
        height: 16px;
    }

    .watermark {
        margin-top: 16px;
        font-size: 28px;
    }

    /* Error container */
    .error-text {
        font-size: 14px;
        margin-bottom: 0.75rem;
    }

    .error-animation {
        width: 44px;
        height: 44px;
    }

    /* Avatar */
    .avatar-table {
        height: 44px;
        width: 44px;
        font-size: 18px;
    }

    .avatar-table-light {
        height: 44px;
        width: 44px;
        font-size: 18px;
    }

    .avatar {
        height: 130px;
        width: 130px;
        font-size: 70px;
    }

    /* Speedometer */
    .speedometer-arrow {
        height: 80px;
        top: 48px;
    }

    /* Buttons */
    .btn-home {
        padding: 5px 10px;
    }

    /* Tables */
    .table-text {
        font-size: 13px;
    }

    .table-wrapper {
        height: 82%;
    }

    /* Spinner */
    .spinner-inner {
        width: 26px;
        height: 26px;
    }

    /* Raindrop */
    .raindrop {
        width: 16px;
        height: 16px;
        margin: 4px;
    }

    .raindrop-container {
        height: 18%;
    }

    /* Wave */
    .wave {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    /* Tabs */
    .nav-tabs {
        margin-bottom: 1rem;
        gap: 0.15rem;
    }

    .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .nav-tabs .nav-link.active::before {
        height: 2px;
    }

    .tab-content {
        padding: 1rem;
    }

    /* Search */
    .search-container {
        max-width: 550px;
    }

    .search-input {
        padding: 3px 40px 3px 6px;
        font-size: 14px;
    }

    .search-icon {
        right: 12px;
        width: 18px;
        height: 18px;
    }

    /* Two/three lines text */
    .two-lines {
        line-height: 0.95em;
        height: 2.9em;
    }

    .two-lines-lg {
        line-height: 1.4em;
        height: 3.2em;
    }

    .three-lines {
        line-height: 1.4em;
        height: 3.2em;
    }

    /* App module container */
    .app-module-container {
        padding: 0;
    }

    /* Dropdown app */
    .dropdown-app-menu {
        min-width: 140px;
        padding: 10px 14px;
    }

    /* Modal */
    .modal {
        overflow: auto !important;
    }

    /* ==================== AI.CSS OVERRIDES ==================== */

    /* Sidebar */
    .ai-sidebar {
        width: 250px;
    }

    .ai-sidebar-header {
        padding: 14px;
    }

    .ai-sidebar-title {
        font-size: 1.1rem;
        gap: 8px;
    }

    .ai-new-chat-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        margin: 12px;
        gap: 6px;
    }

    .ai-conversation-list {
        padding: 8px;
    }

    .ai-conversation-item {
        padding: 10px 14px;
        margin-bottom: 6px;
        gap: 10px;
    }

    .ai-conversation-icon {
        width: 18px;
    }

    .ai-conversation-title {
        font-size: 0.85rem;
    }

    .ai-conversation-time {
        font-size: 0.65rem;
    }

    .ai-sidebar-footer {
        padding: 12px;
    }

    .ai-user-profile {
        gap: 8px;
    }

    .ai-user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .ai-user-name {
        font-size: 0.85rem;
    }

    .ai-user-status {
        font-size: 0.75rem;
    }

    .ai-settings-btn {
        font-size: 0.9rem;
    }

    /* Main content area */
    .ai-chat-header {
        padding: 12px 18px;
    }

    .ai-chat-title {
        font-size: 1rem;
    }

    .ai-chat-actions {
        gap: 10px;
    }

    .ai-action-btn {
        width: 32px;
        height: 32px;
    }

    .ai-messages-container {
        padding: 18px;
        gap: 16px;
    }

    .ai-message {
        gap: 12px;
    }

    .ai-message-avatar {
        width: 32px;
        height: 32px;
    }

    .ai-message-bubble {
        padding: 12px 14px;
        line-height: 1.45;
    }

    .ai-message-time {
        font-size: 0.65rem;
        margin-top: 5px;
    }

    /* Input area */
    .ai-input-area {
        padding: 10px 12px;
    }

    .ai-attachment-btn {
        font-size: 1rem;
        width: 36px;
        height: 36px;
    }

    .ai-input-field textarea {
        padding: 10px 14px;
        padding-right: 44px;
        min-height: 44px;
        max-height: 100px;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .ai-voice-btn {
        right: 10px;
        font-size: 0.9rem;
        width: 28px;
        height: 28px;
    }

    .ai-send-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Toggle sidebar button */
    .ai-toggle-sidebar {
        left: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    /* Right panel */
    .ai-panel {
        width: 320px;
    }

    .ai-panel-header {
        padding: 12px;
    }

    .ai-panel-title {
        font-size: 0.95rem;
    }

    .ai-panel-close {
        font-size: 0.9rem;
        width: 28px;
        height: 28px;
    }

    .ai-panel-content {
        padding: 12px;
    }

    /* File attachment preview */
    .ai-file-preview {
        gap: 6px;
        padding: 6px 10px;
        margin-bottom: 8px;
    }

    .ai-file-icon {
        font-size: 1.1rem;
    }

    .ai-file-name {
        font-size: 0.8rem;
    }

    .ai-file-remove {
        font-size: 0.85rem;
        width: 22px;
        height: 22px;
    }

    /* Welcome screen */
    .ai-welcome {
        padding: 18px;
    }

    .ai-welcome-icon {
        font-size: 2.5rem;
        margin-bottom: 18px;
    }

    .ai-welcome-title {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    .ai-welcome-subtitle {
        font-size: 0.9rem;
        margin-bottom: 26px;
    }

    .ai-suggestions {
        gap: 10px;
    }

    .ai-suggestion {
        padding: 12px;
    }

    .ai-suggestion-icon {
        margin-bottom: 6px;
    }

    .ai-suggestion-text {
        font-size: 0.85rem;
    }

    /* Typing indicator */
    .ai-typing {
        gap: 3px;
        padding: 5px 8px;
        margin-top: 8px;
    }

    .ai-typing-dot {
        width: 6px;
        height: 6px;
    }

    /* Textarea */
    .ai-textarea {
        min-height: 36px;
        max-height: 100px;
        padding: 8px;
        font-size: 13px;
        line-height: 1.45;
    }

    /* Small loading spinner */
    .small-loading-spinner {
        width: 22px;
        height: 22px;
        border-width: 3px;
    }

    /* Responsive adjustments for mobile within low density */
    @media (max-width: 768px) {
        .ai-sidebar {
            left: -250px;
        }
    }
}