/* assets/css/matrix.css */

#icosmo-matrix-page-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
    background-color: #2c2c2c;
    color: #e0e0e0;
}

/* Header Styles */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #4f4f4f;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-basis: 33.33%;
    justify-content: flex-start;
}

.header-center {
    flex-basis: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.header-right {
    flex-basis: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.clock-container {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Ensures children are left-aligned */
}

.title-container h1 {
    font-family: Arial, sans-serif; /* Set consistent sans-serif font */
    font-size: 2.2em;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #f0f0f0;
}

.title-container h2 {
    font-size: 1.45em;
    font-weight: thin !important;
    margin: -8px 0 0 3px !important; /* Force tight margin */
    padding: 0 !important;
    text-align: left !important;
    letter-spacing: normal !important;
    color: #aaa !important;
    border: none !important;
}

.header-right-title {
    font-size: 0.8em;
    color: #bdbdbd;
    font-weight: normal;
    white-space: nowrap;
}

.header-right-items {
    display: flex;
    gap: 25px;
    align-items: flex-start; /* Align items to their top edge */
}

.header-astro-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Force centering and sizing on ALL header symbols */
.header-astro-item .symbol, .header-astro-item .matrix-astro-image {
    font-size: 3em;
    width: 50px;
    height: 50px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* DEFINITIVE FIX: Override the global .zodiac-symbol rule specifically for the header */
.header-astro-item .zodiac-symbol {
    position: static !important;
    top: auto !important;
}


.header-astro-item .matrix-astro-label {
    font-size: 1em;
    color: #ccc;
    display: block;
    margin-top: 5px;
}

.header-astro-item .moon-phase-details {
    font-size: 0.8em;
    color: #999;
    min-height: 1.2em; /* Reserve space to prevent layout shifts */
}

/* Matrix Clock in Header Center */
.header-matrix-clock-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 200px; /* Constrain width */
}
.header-matrix-clock-box {
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.header-matrix-clock-time {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5em;
    font-weight: bold;
}
.header-matrix-clock-key {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.7em;
    font-weight: bold;
}


/* Main Content Styles */
#current-hour-table-container { margin-bottom: 20px; }
#current-hour-table-container h2,
#icosmo-matrix-page-container > h2 { /* Corrected, more specific selector */
    font-size: 1.2em;
    border-bottom: 1px solid #4f4f4f;
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-align: center;
    color: #f0f0f0;
}

.table-wrapper { overflow-x: auto; }
table {
    border-collapse: collapse;
    margin-top: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    background-color: #333;
    /* Define the CSS variable here, JS will update it */
    --sticky-col-1-width: 60px;
}
th, td {
    border: 1px solid #4f4f4f !important;
    padding: 4px 2px 4px 2px !important;
    text-align: left !important;
    font-size: 0.85em !important;
    vertical-align: middle !important;
    white-space: nowrap !important; /* THIS IS THE FIX: Enforce no-wrapping on ALL cells */
}
th {
    background-color: #4a4a4a !important;
    color: white !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}
tr:nth-child(even) { background-color: #3f3f3f; }
tr:hover { background-color: #5a5a5a; }
.color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #777;
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 2px;
    flex-shrink: 0;
}

/* --- STICKY COLUMN STYLES --- */

/* First column (Hour) */
th:nth-child(1), td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
}

/* Second column (Key) */
th:nth-child(2), td:nth-child(2) {
    position: sticky !important;
    left: var(--sticky-col-1-width) !important;
    z-index: 2 !important;
}

/* Ensure sticky header cells have correct background and are above other sticky cells */
th:nth-child(1), th:nth-child(2) {
    background-color: #4a4a4a !important;
    z-index: 3 !important;
}

/* Ensure sticky data cells have correct background to hide scrolling content */
td:nth-child(1), td:nth-child(2) {
    background-color: #333 !important;
}
tr:nth-child(even) td:nth-child(1),
tr:nth-child(even) td:nth-child(2) {
    background-color: #3f3f3f !important;
}
tr:hover td:nth-child(1),
tr:hover td:nth-child(2) {
    background-color: #5a5a5a !important;
}


/* Center align specific columns ONLY in the main hourly tables */
#matrixTableContainer th:nth-child(1),
#matrixTableContainer td:nth-child(1),
#current-hour-table-container th:nth-child(1),
#current-hour-table-container td:nth-child(1),
#matrixTableContainer th:nth-child(2),
#matrixTableContainer td:nth-child(2),
#current-hour-table-container th:nth-child(2),
#current-hour-table-container td:nth-child(2) {
    text-align: center !important;
}


/* Global symbol class - for font-family ONLY */
.symbol {
    font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif;
}

/* Table-specific symbol styling */
.data-entry .symbol {
    font-size: 1.2em;
    margin-right: 4px;
    display: inline-block;
    flex-shrink: 0; /* Prevents the symbol from being squished if the flex container runs out of space */
    vertical-align: middle;
    line-height: 1;
}

.data-entry .zodiac-symbol {
    position: relative;
    top: 1px;
}

.data-entry {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    min-width: max-content;
    white-space: nowrap; /* This is also correct, ensuring flex items don't wrap */
}
.data-entry:last-child {
    margin-bottom: 0;
}
.chakra-svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px; /* Add space between icon and name */
}
.platonic-solid-svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}
.force-svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}
.secondary-symbol {
    font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif;
    font-size: 0.9em !important;
    margin-left: 4px;
}

/* --- Styles for the Correspondence Tables (Elements, Solar System, etc.) --- */
#elementsTableContainer table,
#solarSystemTableContainer table,
#constellationsTableContainer table,
#kabbalaTableContainer table {
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
}

#elementsTableContainer .data-entry,
#solarSystemTableContainer .data-entry,
#constellationsTableContainer .data-entry,
#kabbalaTableContainer .data-entry {
    justify-content: flex-start !important;
}

/* --- NEW: Shortcode Item Styles --- */

/* Placeholder style to prevent layout shifts while JS is loading */
.icosmo-item-placeholder {
    min-height: 20px;
}

/* General container for all shortcode outputs */
.icosmo-item {
    display: inline-block;
    line-height: 1.4;
}

/* Meaning Block Styles */
.icosmo-item-meaning {
    display: block;
    margin: 1em 0;
}
.icosmo-item-meaning h4 {
    margin-bottom: 0.25em;
}
.icosmo-item-meaning p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Details List Styles */
.icosmo-details-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 12px;
    margin: 1em 0;
}
.icosmo-details-list dt {
    font-weight: bold;
    grid-column: 1;
}
.icosmo-details-list dd {
    margin: 0;
    grid-column: 2;
    display: flex;
    align-items: center;
}
.icosmo-details-list dd .symbol {
    margin-right: 6px;
    font-size: 1.2em;
}

/* Symbol-Name List Styles */
.icosmo-item-list {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}
.icosmo-item-list li {
    padding: 4px 0;
    display: flex;
    align-items: center;
}
.icosmo-item-list li .symbol {
    margin-right: 8px;
    font-size: 1.2em;
}

.su-row.column-padding .su-column-inner {
  padding: 2px;
}

/* Responsive */
@media (max-width: 900px) {
    .main-header {
        flex-direction: column;
        gap: 20px;
    }
    .header-left, .header-center, .header-right {
        flex-basis: auto;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .header-left {
        flex-direction: column;
    }
    .header-right-items {
        gap: 15px;
    }
    .header-astro-item .symbol, .header-astro-item .matrix-astro-image {
        font-size: 2.5em;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}