/* 
 * Shared Detail Pages CSS
 * Common styles for tender_detail and job_detail pages
 * Optimized for performance
 */

/* ========================================
   GLOBAL STYLES
   ======================================== */
body {
    background: #FCFCFD;
    color: #0F172A;
}

/* ========================================
   CONTAINER
   ======================================== */
.container {
    max-width: 1200px;
}

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb {
    background: transparent;
    padding: 0.75rem 0;
}

.breadcrumb-link {
    color: #4F9CF9;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-link:hover {
    color: #3B82F6;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #64748B;
}

.breadcrumb-current {
    color: #64748B;
}

/* ========================================
   CARD STYLING
   ======================================== */
.card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-color: #CBD5E1;
}

.card-header {
    background: #FFFFFF;
    color: #0F172A;
    padding: 1.5rem;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #E2E8F0;
}

.card-header h1,
.card-header h3,
.card-header h5,
.card-header a {
    color: #0F172A;
}

.card-content,
.card-body {
    padding: 1.5rem;
}

/* Sidebar Cards */
.detail-sidebar .card-header {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.detail-sidebar .card-header h3,
.detail-sidebar .card-header h5 {
    color: #0F172A;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* ========================================
   DETAIL GRID LAYOUT
   ======================================== */
.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

.detail-main {
    min-width: 0;
}

.detail-sidebar {
    min-width: 0;
}

@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-sidebar {
        order: 2;
    }
    
    .detail-main {
        order: 1;
    }
}

@media (max-width: 768px) {
    .detail-grid {
        gap: 1.5rem;
    }
}

/* ========================================
   ORGANIZATION HEADER
   ======================================== */
.organization-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E2E8F0;
}

.organization-header-no-org {
    justify-content: flex-end;
}

.org-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}

.org-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.org-avatar-placeholder {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    aspect-ratio: 1;
    background: #4F9CF9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.org-avatar-placeholder i {
    color: white;
    font-size: 1.25rem;
}

.org-link {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0F172A;
    text-decoration: none;
    transition: color 0.15s ease;
    flex: 1;
    min-width: 0;
}

.org-link:hover {
    color: #4F9CF9;
}

.organization-header .share-btn {
    flex-shrink: 0;
    margin-left: auto;
}

.organization-header-no-org .share-btn {
    margin-left: 0;
}

/* ========================================
   TITLE SECTIONS
   ======================================== */
.tender-title-section,
.job-title-section {
    margin-bottom: 1.5rem;
}

.tender-title,
.job-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

/* ========================================
   META INFORMATION
   ======================================== */
.meta-information-section {
    margin-top: 1rem;
}

.meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ========================================
   BADGES
   ======================================== */
.badge {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge-featured {
    background: #FCD34D;
    color: #78350F;
}

.badge-category {
    background: #4F9CF9;
    color: white;
}

.badge-location {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.badge-active {
    background: #10B981;
    color: white;
}

.badge-urgent {
    background: #F59E0B;
    color: white;
}

.badge-expired {
    background: #6B7280;
    color: white;
}

.badge.bg-primary {
    background: #4F9CF9 !important;
    color: white !important;
}

.badge.bg-warning {
    background: #FCD34D !important;
    color: #78350F !important;
}

.badge.bg-light {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0;
}

.badge.text-dark {
    background: #F8FAFC !important;
    color: #334155 !important;
    border: 1px solid #E2E8F0;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-outline {
    background: white;
    border: 1px solid #4F9CF9;
    color: #4F9CF9;
}

.btn-outline:hover {
    background: #4F9CF9;
    color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-primary {
    background: #4F9CF9;
    color: white;
    border: 1px solid #4F9CF9;
}

.btn-primary:hover {
    background: #3B82F6;
    border-color: #3B82F6;
}

.btn-outline-primary {
    background: white;
    border: 1px solid #4F9CF9;
    color: #4F9CF9;
    border-radius: 6px;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    transition: all 0.15s ease;
}

.btn-outline-primary:hover {
    background: #4F9CF9;
    border-color: #4F9CF9;
    color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-full-width {
    width: 100%;
    justify-content: center;
}

/* ========================================
   INFO ITEMS
   ======================================== */
.info-item {
    margin-bottom: 1.5rem;
}

.info-label {
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-value {
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
}

.info-value i,
.info-value .fa {
    color: #4F9CF9;
}

.deadline-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: #0F172A;
    font-weight: 500;
}

.posted-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: #0F172A;
    font-weight: 500;
    margin: 0;
}

/* ========================================
   STATUS SECTION
   ======================================== */
.status-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #F8FAFC;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.status-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 0.5rem;
    margin: 0;
}

.deadline-warning {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #FEF3C7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #78350F;
}

.deadline-warning span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E2E8F0;
}

/* ========================================
   QUILL DOCUMENT PREVIEW
   ======================================== */
.quill-document-preview {
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 24px;
    margin: 16px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.quill-document-preview .ql-editor {
    padding: 0;
    border: none;
    font-size: 16px;
    line-height: 1.6;
    /* direction will be set by JavaScript based on content */
    unicode-bidi: plaintext;
}

/* Ensure dir attribute is respected */
.quill-document-preview .ql-editor[dir="rtl"],
.quill-document-preview .ql-editor[dir="rtl"] p,
.quill-document-preview .ql-editor[dir="rtl"] h1,
.quill-document-preview .ql-editor[dir="rtl"] h2,
.quill-document-preview .ql-editor[dir="rtl"] h3 {
    direction: rtl;
    text-align: right;
}

.quill-document-preview .ql-editor[dir="ltr"],
.quill-document-preview .ql-editor[dir="ltr"] p,
.quill-document-preview .ql-editor[dir="ltr"] h1,
.quill-document-preview .ql-editor[dir="ltr"] h2,
.quill-document-preview .ql-editor[dir="ltr"] h3 {
    direction: ltr;
    text-align: left;
}

.quill-document-preview .ql-editor h1,
.quill-document-preview .ql-editor h2,
.quill-document-preview .ql-editor h3 {
    margin: 16px 0 12px 0;
    font-weight: 600;
}

.quill-document-preview .ql-editor h1 { font-size: 24px; }
.quill-document-preview .ql-editor h2 { font-size: 20px; }
.quill-document-preview .ql-editor h3 { font-size: 18px; }

.quill-document-preview .ql-editor p {
    margin: 8px 0;
}

.quill-document-preview .ql-editor ul,
.quill-document-preview .ql-editor ol {
    margin: 12px 0;
    padding-inline-start: 24px;
}

.quill-document-preview .ql-editor li {
    margin: 4px 0;
}

.quill-document-preview .ql-editor blockquote {
    border-inline-start: 4px solid #ccc;
    margin: 16px 0;
    padding: 8px 16px;
    background: #f9f9f9;
    font-style: italic;
}

.quill-document-preview .ql-editor code {
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.quill-document-preview .ql-editor pre {
    background: #f4f4f4;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 12px 0;
}

.quill-document-preview .ql-editor a {
    color: #0066cc;
    text-decoration: underline;
}

.quill-document-preview .ql-editor a:hover {
    color: #004499;
}

/* ========================================
   CONTACT INFO
   ======================================== */
.contact-info {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.contact-info p {
    margin-bottom: 0.75rem;
    color: #374151;
    font-size: 0.875rem;
}

.contact-info p:last-child {
    margin-bottom: 0;
}

.contact-info i {
    color: #4F9CF9;
    margin-left: 0.5rem;
    width: 18px;
}

.contact-info a {
    color: #4F9CF9;
    text-decoration: none;
    font-weight: 500;
}

.contact-info a:hover {
    color: #3B82F6;
    text-decoration: underline;
}

/* ========================================
   ICON COLORS
   ======================================== */
.text-primary {
    color: #4F9CF9 !important;
}

.text-danger {
    color: #EF4444 !important;
}

.text-success {
    color: #10B981 !important;
}

.text-warning {
    color: #F59E0B !important;
}

.text-info {
    color: #3B82F6 !important;
}

.fa-calendar-alt,
.fa-calendar,
.fa-clock,
.fa-map-marker-alt,
.fa-tags,
.fa-building,
.fa-info-circle {
    color: #4F9CF9;
}

/* ========================================
   SHARE BUTTON
   ======================================== */
.share-btn {
    flex-shrink: 0;
}

.share-btn.shared {
    background: #10B981;
    border-color: #10B981;
    color: white;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .card-header {
        padding: 1rem !important;
    }
    
    .card-content,
    .card-body {
        padding: 1rem !important;
    }
    
    .tender-title,
    .job-title {
        font-size: 1.5rem;
    }
    
    .organization-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .organization-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    
    .organization-header > div:first-child a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100vw - 180px);
        display: block;
    }
    
    .org-avatar {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        max-width: 56px;
        max-height: 56px;
    }
    
    .org-avatar-placeholder {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        max-width: 56px;
        max-height: 56px;
    }
    
    .share-btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8125rem !important;
        white-space: nowrap;
    }
    
    .share-btn i {
        font-size: 0.9375rem !important;
        margin-left: 0.25rem;
    }
    
    .share-btn span {
        font-size: 0.8125rem !important;
    }
    
    .quill-document-preview {
        padding: 16px;
        margin: 12px 0;
    }
    
    .quill-document-preview .ql-editor {
        font-size: 14px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .quill-document-preview {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
        color: black;
    }
}

/* ========================================
   DARK THEME SUPPORT - DISABLED
   ======================================== */
/* Dark mode support removed to maintain consistent styling */