/**
 * Layouts CSS
 * Page structure, containers, and spacing utilities
 *
 * Contents:
 * - Empty State Styling
 * - Container Widths
 * - Flex Utilities
 * - Grid Utilities
 * - Spacing Utilities (margin, padding, gaps)
 * - Text Utilities (alignment)
 * - Overflow Utilities
 */

/* ============================================
   Empty State Styling
   ============================================ */

.empty-state {
    text-align: center;
    padding: 40px;
    color: #999;
}

.empty-state-icon {
    font-size: 3em;
    color: #ccc;
    margin-bottom: 15px;
    display: block;
}

.empty-state-message {
    font-size: 1em;
    margin: 0;
}

/* ============================================
   Container Widths
   ============================================ */

.container-narrow {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

.container-medium {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Full-height container variant - for pages that need to fill viewport (like chat interfaces) */
.container-full-height {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* Account for sidebar/navigation */
    max-width: none; /* Override container-wide max-width */
}

.container-full-height .page-header {
    flex-shrink: 0; /* Don't shrink the header */
}

/* ============================================
   Flex Utilities
   ============================================ */

.flex-row {
    display: flex;
    gap: 12px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

/* ============================================
   Grid Utilities
   ============================================ */

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.grid-form {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: start;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 100%;
}

/* Stats Grid - For summary stat cards - Fortune 500: Consistent 24px spacing */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Stat Card Grid - Responsive auto-fit grid for stat cards */
.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.stat-card-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

/* ============================================
   Spacing Utilities - Pixel-Based
   ============================================ */

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

/* Section spacing - Fortune 500: Consistent 32px between major sections */
.section-spacing { margin-bottom: 32px; }
.section-gap { margin-bottom: 32px; }

/* Margin Top */
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

/* Padding Top */
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }

/* Padding */
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }

/* ============================================
   Spacing Utilities - 8px Base Unit
   ============================================ */

/* Margin Bottom */
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

/* Margin Top */
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-auto { margin-top: auto; }

/* Margin Left/Right */
.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }

/* Padding */
.p-4 { padding: 4px; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }

/* Padding Top/Bottom */
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }

/* Padding Left/Right */
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-24 { padding-left: 24px; padding-right: 24px; }

/* Gaps (for flex/grid) */
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

/* ============================================
   Text Alignment Utilities
   ============================================ */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* ============================================
   Overflow Utilities
   ============================================ */

.overflow-auto {
    overflow-x: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* ============================================
   Visibility Utilities
   ============================================ */

.hidden {
    display: none !important;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* ============================================
   Responsive Utilities
   ============================================ */

@media (max-width: 768px) {
    .grid-2col,
    .grid-3col,
    .grid-4col {
        grid-template-columns: 1fr;
    }

    .grid-form {
        grid-template-columns: 1fr;
    }

    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ============================================
   Text Color Utilities
   ============================================ */

.text-primary { color: #1a2234; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #17a2b8; }
.text-muted { color: var(--content-text-muted, #666); }
.text-dark { color: #333; }
.text-secondary { color: #6c757d; }

/* Text link style */
.text-link {
    color: var(--page-heading-color, #1a2234);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.text-link:hover {
    color: var(--accent-primary, #1a2234);
}

/* Text size utilities */
.text-sm { font-size: 0.9em; }
.text-xs { font-size: 0.85em; }

/* ============================================
   Font Utilities
   ============================================ */

.font-weight-normal { font-weight: 400; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }

.font-sm { font-size: 0.85em; }
.font-xs { font-size: 0.75em; }
.font-lg { font-size: 1.1em; }

.font-italic { font-style: italic; }
.text-nowrap { white-space: nowrap; }

/* ============================================
   Border Utilities
   ============================================ */

.border-bottom { border-bottom: 1px solid #e9ecef; }
.border-top { border-top: 1px solid #e9ecef; }
.border { border: 1px solid #e9ecef; }
.border-none { border: none; }
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }

/* ============================================
   Display Utilities
   ============================================ */

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* ============================================
   Cursor Utilities
   ============================================ */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ============================================
   Background Utilities
   ============================================ */

.bg-white { background-color: white; }
.bg-light { background-color: #f8f9fa; }
.bg-transparent { background: none; }