/* styles.css - K7 Dashboard Complete Styles - Version 2.1 - 6 Milestones */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito Sans', Arial, sans-serif;
    background: linear-gradient(135deg, #000000 0%, #3a3a3a 100%);
    color: #ffffff;
    min-height: 100vh;
    padding: 30px;
    overflow-x: hidden;
}

/* ============================================
   MAIN GRID LAYOUT - Optimized for 4K (3840x2160)
   ============================================ */

.events-container {
    max-width: 3566px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1160px 1556px 800px;
    gap: 25px;
    align-items: start;
}

/* ============================================
   LEFT COLUMN
   ============================================ */

.success-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 2100px;
}

/* Logo and Stock Ticker Box */
.logo-stock-box {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 15px 20px;
    height: 220px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.logo-stock-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: stretch;
    gap: 15px;
}

.logo-and-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.success-logo {
    width: 368px;
    height: auto;
    margin-bottom: 0;
}

.success-logo path {
    fill: #ffffff;
}

.program-name {
    font-size: 2.1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-align: center;
    width: 100%;
    display: none;
}

/* Stock Ticker Styles */
.stock-ticker {
    flex: 0 0 47%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 20px 10px 20px;
    border: 2px solid #555;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
}

.stock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.stock-symbol {
    font-size: 2.1rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.1em;
}

.market-status {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.market-status.open {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.market-status.closed {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
}

.stock-price {
    font-size: 3.2rem;
    font-weight: 900;
    color: #2ecc71;
    line-height: 1.1;
    margin: 3px 0;
}

.stock-price.negative {
    color: #e74c3c;
}

.stock-change {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 2px 0;
    line-height: 1.2;
}

.stock-change.positive {
    color: #2ecc71;
}

.stock-change.negative {
    color: #e74c3c;
}

.stock-update-time {
    font-size: 1.6rem;
    color: #95a5a6;
    margin-top: 2px;
    margin-bottom: 0;
    line-height: 1.2;
}

.stock-loading {
    font-size: 1.1rem;
    color: #95a5a6;
    text-align: center;
}

/* Program Health Box */
.program-health-box {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 25px 25px 5px 25px;
    height: 410px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Health Section Styles */
.health-title {
    font-size: 2.6rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.health-boxes {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.health-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #555;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.health-box-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: #c0c0c0;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.health-box-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
}

.health-status-circle {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px currentColor;
    animation: pulse-glow 3s ease-in-out infinite;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.health-status-circle::after {
    content: '';
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
}

.health-status-circle[data-status="complete"]::after {
    content: '✓';
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px currentColor; }
    50% { box-shadow: 0 0 35px currentColor; }
}

.health-box-value {
    font-size: 2.8rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 65px;
}

.health-counts {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0;
}

.health-count {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #555;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.health-count-num {
    font-size: 2.3rem;
    font-weight: 900;
    color: #ffffff;
}

.health-count-dot-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.health-count-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.health-count-trend {
    font-size: 2.3rem;
    font-weight: 900;
    color: #ffffff;
}

.health-count-dot::after {
    content: '';
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

/* Show checkmark only for complete (blue) status */
.health-count:last-child .health-count-dot::after {
    content: '✓';
}

.health-count-label {
    font-size: 1.7rem;
    color: #c0c0c0;
    font-weight: 400;
    text-align: center;
}

.health-footer {
    font-size: 1.9rem;
    color: #ffffff;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 0px;
    border-top: 1px solid #555;
    margin-bottom: -23px;
}

/* Success Events Section */
.success-section {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 0 40px 40px 40px;
    height: 1370px;
    overflow: hidden;
    flex: 1 1 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.success-section-middle-column {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 0 40px 40px 40px;
    height: 1038px;
    overflow: hidden;
    flex: 1 1 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#successList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.recent-section {
    flex: 0 0 auto;
    margin-top: 25px;
}

.divider-section {
    flex: 0 0 auto;
    margin: 18px 0 30px 0;
    width: 100%;
}

.section-divider {
    height: 0;
    border: none;
    border-top: 2px solid #c0c0c0;
    width: 100%;
}

.historical-section {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.historical-header {
    flex: 0 0 auto;
    margin-bottom: 25px;
}

.historical-scroll-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.historical-scroll-container {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.success-item {
    margin-bottom: 15px;
    padding-left: 100px;
    position: relative;
    color: #ffffff;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.success-date-line {
    display: flex;
    gap: 20px;
    align-items: center;
}

.success-day {
    font-weight: 400;
    color: #d0d0d0;
    font-size: 2.1rem;
}

.success-separator {
    font-weight: 400;
    color: #d0d0d0;
    font-size: 2.1rem;
}

.success-date {
    font-weight: 400;
    color: #d0d0d0;
    font-size: 2.1rem;
}

.success-description {
    font-size: 2.1rem;
    font-weight: 400;
    color: #a0a0a0;
}

.success-section-label {
    font-size: 2.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    margin-top: 0;
    letter-spacing: 0.05em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================
   MIDDLE COLUMN - Media and Status
   ============================================ */

.media-only-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 2100px;
}

.media-container {
    width: 1556px;
    height: 1037px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #c0c0c0;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Media Display States */
.media-container img,
.media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.media-container img.media-loading,
.media-container video.media-loading {
    opacity: 0;
    pointer-events: none;
}

.media-container img.media-active,
.media-container video.media-active {
    opacity: 1;
    z-index: 2;
}

.media-container img.media-fading-out,
.media-container video.media-fading-out {
    opacity: 0;
    z-index: 1;
}

.media-container.has-active-media {
    background: #000;
}

/* Status Container */
.status-container {
    width: 1556px;
    height: 1038px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #c0c0c0;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.status-container-left-column {
    width: 1160px;
    height: 1420px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #c0c0c0;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.status-container-extended {
    height: 988px;
}

.status-column-headers {
    flex: 0 0 auto;
    margin-bottom: 15px;
}

.status-header-row {
    display: flex;
    width: 100%;
    padding: 8px 5px;
    background: rgba(192, 192, 192, 0.15);
    border-bottom: 2px solid #c0c0c0;
    align-items: center;
}

.status-header-cell {
    color: #ffffff;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    text-align: center;
}

/* ============================================
   STATUS COLUMN WIDTHS
   Container inner width = 1160 - 60px padding = 1100px
   350 (subsystem) + 90 (complexity w/ margin) + 5 × 132 = 1100px
   ============================================ */
.status-header-cell:nth-child(1) { width: 350px; text-align: left; }
.status-header-cell:nth-child(2) { width: 140px; margin-left: 0; margin-right: 0; text-align: center; }
.status-header-cell:nth-child(3) { width: 122px; margin-right: 0; text-align: center; }
.status-header-cell:nth-child(4) { width: 122px; margin-right: 0; text-align: center; }
.status-header-cell:nth-child(5) { width: 122px; margin-right: 0; text-align: center; }
.status-header-cell:nth-child(6) { width: 122px; margin-right: 0; text-align: center; }
.status-header-cell:nth-child(7) { width: 122px; margin-right: 0; text-align: center; }
.status-header-cell:nth-child(8) { display: none; }
.status-header-cell:nth-child(9) { display: none; }

.status-divider {
    display: none;
}

.status-table-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.status-scroll-container {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.status-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
}

.status-table tbody {
    display: block;
}

.status-table tbody tr {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 3px 5px;
    margin-bottom: 8px;
    height: 65px;
    min-height: 65px;
}

.status-row-light {
    background: #505050 !important;
    border-radius: 4px;
}

.status-row-light .status-subsystem,
.status-row-light .status-complexity,
.status-row-light .status-comments {
    color: #ffffff !important;
}

.status-row-dark {
    background: #1a1a1a !important;
    border-radius: 4px;
}

.status-row-dark .status-subsystem,
.status-row-dark .status-complexity,
.status-row-dark .status-comments {
    color: #ffffff !important;
}

.status-row-gray {
    background: #505050 !important;
    border-radius: 4px;
}

.status-row-gray .status-subsystem,
.status-row-gray .status-complexity,
.status-row-gray .status-comments {
    color: #ffffff !important;
}

.status-row-black {
    background: #000000 !important;
    border-radius: 0px;
    height: 65px;
    min-height: 65px;
    display: flex !important;
    width: 100%;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.status-row-black td {
    background: #000000 !important;
    flex: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.status-separator-row {
    height: 65px !important;
    min-height: 65px !important;
    background: #000000 !important;
    padding: 0 5px !important;
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 65px !important;
    border-radius: 0 !important;
}

.status-table td {
    color: inherit;
    font-size: 2.28rem;
    vertical-align: middle;
    padding: 0;
    flex-shrink: 0;
}

.status-subsystem {
    width: 350px;
    font-weight: 700;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.status-complexity {
    width: 110px;
    text-align: center;
    font-weight: 700;
    margin-left: 0;
    margin-right: 0;
    line-height: 1.2;
}

.status-circle-cell {
    width: 128px;
    margin-right: 0;
    text-align: center;
}

.status-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid rgba(128, 128, 128, 0.5);
}

.status-circle.r,
.status-circle.red {
    background: #e74c3c;
}

.status-circle.y,
.status-circle.yellow {
    background: #f39c12;
}

.status-circle.g,
.status-circle.green {
    background: #2ecc71;
}

.status-circle.b,
.status-circle.blue {
    background: #3498db;
    position: relative;
}

.status-circle.b::after,
.status-circle.blue::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.status-circle.empty {
    background: transparent;
    border: 2px solid rgba(128, 128, 128, 0.3);
}

.status-trend-cell {
    width: 128px;
    text-align: center;
}

.trend-arrow {
    font-size: 3.8rem;
    font-weight: 700;
}

.trend-up { color: #2ecc71; }
.trend-down { color: #e74c3c; }
.trend-same { color: #f39c12; }

.status-comments {
    display: none;
}

.status-key {
    display: flex;
    gap: 30px;
    padding: 15px;
    font-size: 1.9rem;
    color: #c0c0c0;
}

.status-key-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-key-circle.empty {
    background: transparent;
    border: 2px solid rgba(128, 128, 128, 0.3);
}

.status-key-circle.red   { background: #e74c3c; }
.status-key-circle.yellow { background: #f39c12; }
.status-key-circle.green  { background: #2ecc71; }
.status-key-circle.blue   { background: #3498db; }

.status-key-circle.blue::after {
    content: '✓';
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

/* ============================================
   RIGHT COLUMN - Six Countdown Boxes
   ============================================ */

.countdown-only-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 2100px;
}

.countdown-content {
    width: 800px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 18px 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 329px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.countdown-content.urgent {
    border-width: 8px;
    border-color: #e74c3c;
    animation: urgent-pulse 2s ease-in-out infinite;
}

.countdown-content.completion-on-time {
    border-width: 6px;
    border-color: #2ecc71;
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
}

.countdown-content.completion-late-minor {
    border-width: 6px;
    border-color: #f39c12;
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.5);
}

.countdown-content.completion-late-major {
    border-width: 6px;
    border-color: #e74c3c;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.5);
}

@keyframes urgent-pulse {
    0%, 100% { border-color: #e74c3c; box-shadow: 0 0 30px rgba(231, 76, 60, 0.5); }
    50% { border-color: #c0392b; box-shadow: 0 0 50px rgba(231, 76, 60, 0.8); }
}

.version-number {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
    letter-spacing: 0.05em;
}

.event-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.15;
    word-wrap: break-word;
}

.event-date {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #c0c0c0;
    letter-spacing: 0.05em;
    text-align: center;
}

.days-until {
    font-size: 2.2rem;
    font-weight: 700;
    color: #c0c0c0;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.countdown {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.time-block {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    padding: 4px 8px;
    min-width: 95px;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.time-block.hidden {
    display: none;
}

.time-value {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.9;
    color: #ffffff;
    text-align: center;
    transition: all 0.2s ease;
}

.time-value.updating {
    transform: scale(1.1);
    color: #2ecc71;
}

.time-label {
    font-size: 1rem;
    font-weight: 400;
    color: #c0c0c0;
    margin-top: 2px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}

.progress-container { display: none; }
.progress-bar       { display: none; }
.progress-fill      { display: none; }
.progress-label     { display: none; }

.warning {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}