/**
 * Hacklog Theme
 * 
 * A minimal, high-contrast theme for professional project management.
 * Designed for long daily use with improved legibility and hierarchy.
 * 
 * Fonts:
 * - IBM Plex Sans (headings)
 * - Ubuntu (body text)
 * 
 * Color Philosophy:
 * - Uses Bootstrap 5's semantic color system
 * - Enhances contrast through font-weight and spacing
 * - Maintains calm, professional aesthetic
 */

/* ============================================
   FONTS
   ============================================ */

/* IBM Plex Sans - Headings */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Ubuntu - Body Text */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');


/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

/**
 * Body text uses Ubuntu for excellent on-screen readability
 * Light weight (300) improves clarity at standard sizes
 */
body {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: #212529;
    background-color: #F8F9FA;
}

/**
 * Headings use IBM Plex Sans for clear hierarchy
 * Medium weights (500-600) provide structure without aggression
 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    color: #212529;
}

/**
 * Page-level headings (h1) use slightly bolder weight
 * for immediate visual hierarchy
 */
h1, .h1 {
    font-weight: 700;
}

/**
 * Smaller headings use medium weight to avoid visual clutter
 */
h5, h6, .h5, .h6 {
    font-weight: 500;
}


/* ============================================
   LINKS
   ============================================ */

/**
 * Links use primary color with medium weight for clarity
 * Hover state increases weight rather than relying solely on color
 */
a {
    color: #0B5ED7;
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    color: #0a58ca;
    text-decoration: underline;
}


/* ============================================
   CARDS & SURFACES
   ============================================ */

/**
 * Cards use pure white backgrounds on the light gray page
 * This creates clear visual separation without shadows
 */
.card {
    background-color: #FFFFFF;
    border-color: #DEE2E6;
}

/**
 * Card headers use light background for subtle hierarchy
 * Font weight creates emphasis without color contrast
 */
.card-header {
    background-color: #F8F9FA;
    border-bottom-color: #DEE2E6;
    font-weight: 500;
}

/**
 * Light card variant maintains readability
 */
.card.bg-light {
    background-color: #F8F9FA !important;
}


/* ============================================
   BUTTONS
   ============================================ */

/**
 * Primary buttons use the accent color
 * Font weight adds substance without increasing size
 */
.btn-primary {
    background-color: #6482b4;
    border-color: #6482b4;
    font-weight: 500;
}

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

/**
 * Outline buttons maintain consistency with improved weight
 */
.btn-outline-primary {
    color: #6482b4;
    border-color: #6482b4;
    font-weight: 500;
}

.btn-outline-primary:hover {
    background-color: #6482b4;
    border-color: #6482b4;
}

/**
 * Secondary and outline-secondary buttons remain subdued
 * to maintain action hierarchy
 */
.btn-secondary,
.btn-outline-secondary {
    font-weight: 400;
}


/* ============================================
   BADGES
   ============================================ */

/**
 * Badges use medium weight for readability at small sizes
 * No font-family override - inherits from context
 */
.badge {
    font-weight: 500;
}

/**
 * Secondary badge - improved contrast for readability
 * Uses darker gray background with white text
 */
.badge.bg-secondary {
    background-color: #495057 !important;
    color: #ffffff !important;
}


/* ============================================
   NAVIGATION
   ============================================ */

/**
 * Navbar brand uses heading font for consistency
 */
.navbar-brand {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/**
 * Navigation links use medium weight for clarity
 */
.nav-link {
    font-weight: 500;
}


/* ============================================
   TABLES
   ============================================ */

/**
 * Table headers use heading font for hierarchy
 */
thead th {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/**
 * Table borders use neutral gray
 */
.table-bordered {
    border-color: #DEE2E6;
}

.table-bordered th,
.table-bordered td {
    border-color: #DEE2E6;
}


/* ============================================
   FORMS
   ============================================ */

/**
 * Form labels use medium weight for clarity
 * without overwhelming the form field
 */
.form-label {
    font-weight: 500;
    color: #212529;
}

/**
 * Form controls maintain readability
 */
.form-control,
.form-select {
    border-color: #DEE2E6;
}

.form-control:focus,
.form-select:focus {
    border-color: #0B5ED7;
    box-shadow: 0 0 0 0.25rem rgba(11, 94, 215, 0.25);
}


/* ============================================
   ALERTS & EMPTY STATES
   ============================================ */

/**
 * Alerts use subtle backgrounds with clear borders
 * Text weight ensures readability
 */
.alert {
    border-color: #DEE2E6;
}

/**
 * Alert links inherit proper weight
 */
.alert-link {
    font-weight: 600;
}


/* ============================================
   LIST GROUPS
   ============================================ */

/**
 * List group items maintain clean borders
 */
.list-group-item {
    border-color: #DEE2E6;
}


/* ============================================
   BREADCRUMBS
   ============================================ */

/**
 * Breadcrumbs use medium weight for readability
 */
.breadcrumb-item {
    font-weight: 400;
}

.breadcrumb-item.active {
    font-weight: 500;
    color: #6C757D;
}


/* ============================================
   MODALS
   ============================================ */

/**
 * Modal headers use heading font and weight
 */
.modal-header {
    border-bottom-color: #DEE2E6;
}

.modal-title {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

.modal-footer {
    border-top-color: #DEE2E6;
}


/* ============================================
   TEXT UTILITIES - IMPROVED CONTRAST
   ============================================ */

/**
 * Muted text uses Bootstrap's neutral gray
 * Maintains readability while being visually subordinate
 */
.text-muted {
    color: #6C757D !important;
}

/**
 * Warning text - improved contrast for readability on white backgrounds
 * Uses darker amber tone that meets WCAG AA standards
 */
.text-warning {
    color: #996900 !important;
}

/**
 * Small text maintains adequate weight
 */
.small,
small {
    font-weight: 400;
}


/* ============================================
   SEMANTIC EMPHASIS
   ============================================ */

/**
 * Font-weight utilities for emphasis without color
 * Provides hierarchy through typography alone
 */
.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}


/* ============================================
   TRIX EDITOR CONTENT
   ============================================ */

/**
 * Rendered Trix content maintains body font
 * Headings within content use appropriate hierarchy
 */
.trix-content {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.trix-content h1,
.trix-content h2,
.trix-content h3,
.trix-content h4,
.trix-content h5,
.trix-content h6 {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

.hl-logo {
  display: inline-block;
  padding: 8px 10px;
  background: linear-gradient(
    to right,
    #0B5ED7,
    #0A58CA,
    #084298
  );
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

/* ============================================
   TIMELINE DUE-DATE HEAT MARKERS
   ============================================ */

/**
 * Visual density indicators for timeline weeks with due dates
 * Uses subtle blue tints to show work concentration without overwhelming phase bars
 * Heat levels represent density (count), not urgency
 */

/* Timeline table structure - calm, subtle borders */
.timeline-table {
    border-collapse: separate;
    border-spacing: 0;
}

.timeline-table thead th {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0.75rem 0.5rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f8f9fa 100%);
}

.timeline-table tbody td {
    border-left: 1px solid rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    padding: 0.75rem 0.5rem;
}

.timeline-table tbody td:first-child {
    border-left: none;
}

.timeline-header {
    font-weight: 500;
    font-size: 0.875rem;
}

.timeline-row {
    transition: background-color 0.2s ease;
}

.timeline-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.timeline-phase-label {
    font-weight: 500;
}

.timeline-overdue {
    background-color: rgba(220, 53, 69, 0.03);
}

/* Epic bars - soft, muted colors */
.timeline-bar-active {
    background-color: rgba(100, 130, 180, 0.18) !important;
}

.timeline-bar-completed {
    background-color: rgba(108, 117, 125, 0.12) !important;
}

.timeline-bar-overdue {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

.timeline-cell {
    position: relative;
}

/* Low density: 1 due date - subtle background hint */
.timeline-heat-low {
    background-color: rgba(100, 130, 180, 0.04) !important;
}

/* Medium density: 2-3 due dates - light emphasis */
.timeline-heat-medium {
    background-color: rgba(100, 130, 180, 0.08) !important;
}

/* High density: 4+ due dates - noticeable but not dominant */
.timeline-heat-high {
    background-color: rgba(100, 130, 180, 0.14) !important;
}

/* ============================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ============================================ */

/**
 * Project navigation tabs - horizontal scrolling on mobile
 */
.project-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    border-color: #0B5ED7;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.bg-primary-subtle {
    background-color: rgba(11, 94, 215, 0.3) !important;
}

.project-card .card-title a {
    color: inherit;
    transition: color 0.2s ease;
}

.project-card:hover .card-title a {
    color: #0B5ED7;
}

/**
 * Project navigation tabs - horizontal scrolling on mobile
 */
.project-nav-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.project-nav-wrapper::-webkit-scrollbar {
    height: 4px;
}

.project-nav-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.project-nav-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

.project-nav-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.project-nav-wrapper .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
}

.project-nav-wrapper .nav-item {
    flex-shrink: 0;
}

/**
 * Board header - responsive layout for title and actions
 */
.board-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.board-header-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.board-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* On tablets and up, arrange header horizontally */
@media (min-width: 768px) {
    .board-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .board-header-title {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .board-header-actions {
        flex-shrink: 0;
    }
}

/* Ensure buttons don't get too small on mobile */
@media (max-width: 767px) {
    .board-header-actions .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .board-header-actions .dropdown-menu {
        font-size: 0.875rem;
    }
}

/* ============================================
   ============================================ */