/**
 * TariffBase Custom Styles
 * Consistent styling utilities across all apps
 */

/* ============================================
   CARD UTILITIES
   ============================================ */

/* Standard card height for list views */
.card-full-height {
    height: calc(100vh - 300px);
    max-height: 70vh;
}

/* Consistent card spacing */
.card-standard-spacing {
    margin-bottom: 1.25rem;
}

@media (min-width: 1200px) {
    .card-standard-spacing {
        margin-bottom: 2.5rem;
    }
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

/* Truncate text to 2 lines */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Truncate text to 3 lines */
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* ============================================
   TIMELINE UTILITIES
   ============================================ */

/* Standard timeline styling */
.timeline-standard .timeline-item {
    /* Inherits from theme - no override needed */
}

/* ============================================
   TABLE UTILITIES
   ============================================ */

/* Compact table for dense data */
.table-compact tbody tr td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

/* ============================================
   FILTER SIDEBAR UTILITIES
   ============================================ */

/* Sticky filter sidebar */
.filter-sidebar-sticky {
    position: sticky;
    top: 20px;
    z-index: 95;
}

/* ============================================
   SPACING UTILITIES (Standard Grid Gaps)
   ============================================ */

/* Standard row spacing - already available in Bootstrap but documenting */
.row-standard-spacing {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

@media (min-width: 1200px) {
    .row-standard-spacing {
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 2.5rem;
    }
}

/* ============================================
   BUTTON UTILITIES
   ============================================ */

/* Ensure consistent icon button sizing */
.btn-icon-standard {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   FORM UTILITIES
   ============================================ */

/* Standard form label */
.form-label-standard {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ============================================
   EMPTY STATE UTILITIES
   ============================================ */

/* Center empty states */
.empty-state-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 3rem 1rem;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide on mobile, show on tablet+ */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

/* Ensure proper contrast in dark mode */
[data-bs-theme="dark"] .card-standard-spacing {
    /* Inherits theme colors - no override needed */
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Loading overlay for cards */
.card-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

[data-bs-theme="dark"] .card-loading-overlay {
    background: rgba(30, 30, 46, 0.8);
}

/* ============================================
   PAGINATION UTILITIES
   ============================================ */

/* Consistent pagination button spacing */
.pagination-standard .btn {
    margin: 0 0.125rem;
}

/* ============================================
   MARKDOWN CONTENT STYLING
   ============================================ */

/* Standard markdown content styling (for news, reports, etc.) */
.markdown-content h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.markdown-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.markdown-content h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.markdown-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.markdown-content code {
    background-color: #f8f9fa;
    color: #e83e8c;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.markdown-content pre {
    background-color: #f8f9fa;
    color: #212529;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content blockquote {
    border-left: 4px solid #0d6efd;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #6c757d;
    font-style: italic;
}

.markdown-content a {
    color: #0d6efd;
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

[data-bs-theme="dark"] .markdown-content code {
    background-color: #2b2b40;
    color: #ff6b9d;
}

[data-bs-theme="dark"] .markdown-content pre {
    background-color: #2b2b40;
    color: #e4e6ef;
}