/* ⚠️ READ _Spec_Starsoft_StyleGuide.md BEFORE making ANY changes */

/* ============================================================================
   NEWS LIST VIEW - Table, Create Buttons
   ============================================================================ */

/* ============================================================================
   POST TABLE - News list table
   ============================================================================ */

.PostTable_Wrapper {
    width: 100%;
}

.PostTable {
    max-width: 1400px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

.PostTable_Header {
    background-color: rgb(248, 248, 248);
}

.PostTable th {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-weight: bold;
    padding: 12px 0px;
    text-align: left;
    border-top: 1px solid rgb(221, 221, 221);
    border-bottom: 1px solid rgb(221, 221, 221);
    color: var(--Gray_100);
    text-transform: uppercase;
    font-size: 16px;
}

.PostTable_Type_Header {
    width: 100px !important;
    padding-left: 32px !important;
}

.PostTable_Author_Header {
    width: 108px !important;
}

.PostTable_Post_Header {
    width: 448px !important;
}

.PostTable_Date_Header {
    width: 96px !important;
}

.PostTable_Delete_Header,
.PostTable_Delete_Data {
    width: 80px;
}

.PostTable td {
    padding: 8px 0px;
    text-align: left;
    border-bottom: 1px solid rgb(240, 240, 240);
    vertical-align: middle;
}

.PostTable tr:hover {
    background-color: rgb(250, 250, 250);
}

.PostTable_Delete_Data {
    text-align: center;
}

/* Delete button styling */
.Post_Delete_Button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.1s;
    display: inline-block;
    line-height: 1;
    color: var(--Gray_100);
}

.Post_Delete_Button:hover {
    opacity: 1;
    transform: scale(1.2);
    color: var(--Red_255);
}

.Post_Delete_Button:active {
    transform: scale(0.95);
}

/* ============================================================================
   POST CREATE BUTTONS
   ============================================================================ */

.Post_Create_Buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px auto;
}

.Post_Create_Button {
    width: 208px;
    background: color-mix(in srgb, var(--Orange) 20%, white);
    color: var(--Orange);
    border: 1px dashed var(--Orange);
    border-radius: 8px;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.Post_Create_Log,
.Post_Create_Update {
    background: color-mix(in srgb, var(--Orange) 20%, white);
}

.Post_Create_Log:hover,
.Post_Create_Update:hover {
    filter: brightness(1.125);
}

.Post_Create_Button:active {
    transform: translateY(0);
}

/* ============================================================================
   PostTable BUTTONS - Post type badges in table
   ============================================================================ */

.PostTable_Type_Data,
.PostTable_Author_Data,
.PostTable_Post_Data,
.PostTable_Date_Data {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: var(--Gray_100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.PostTable_Type_Data {
    width: 100px !important;
    text-transform: uppercase;
    padding-left: 32px !important;
}

.PostTable_Post_Data {
    max-width: 512px;
}
   
.PostTable_Update,
.PostTable_Log {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 16px;
    border-radius: 50px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
    vertical-align: middle;
    filter: saturate(0.5);
}

.PostTable_Update {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background: color-mix(in srgb, var(--Gold) 85%, black);
    color: var(--color-highlight);
    height: 40px;
    line-height: 40px;
}

.PostTable_Update:hover {
    background: var(--Gold);
    filter: brightness(1.075);
    text-decoration: none;
}

.PostTable_Log {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background: var(--Orange);
    color: var(--color-highlight);
    max-width: 320px;
    height: 28px;
    line-height: 28px;   
}

.PostTable_Log:hover {
    background: var(--Orange);
    filter: brightness(1.0);
    text-decoration: none;
}

/* ============================================================================
   MOBILE RESPONSIVE - List View
   ============================================================================ */

@media (max-width: 960px) {
    
    .PostTable th,
    .PostTable td {
        padding: 4px 8px !important;
    }
    
    /* Hide Author and Delete columns in mobile */
    .PostTable_Author_Header,
    .PostTable_Author_Data,
    .PostTable_Delete_Header,
    .PostTable_Delete_Data {
        display: none;
    }
    
    /* Make TYPE column smaller on mobile */
    .PostTable_Type_Header,
    .PostTable_Type_Data {
        width: 48px !important;
        padding: 0px !important;
    }
    
    .PostTable_Type_Data {
        font-size: 10px !important;
    }
    
    /* Make Date column compact on mobile */
    .PostTable_Date_Header,
    .PostTable_Date_Data {
        width: 64px !important;
        padding: 8px
    }
    
    .PostTable_Date_Data {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    
    /* Make Post column flexible on mobile */
    .PostTable_Post_Header {
        width: auto !important;
    }
    
    /* Make update/log buttons clip with ellipsis on mobile */
    .PostTable_Log {
        font-size: 12px !important;
    }

    .PostTable_Update {
        font-size: 12px !important;
        height: 32px !important;
        border-radius: 16px !important;
        line-height: 32px !important;
    }
    
    .PostTable_Log {
        font-weight: normal !important;
        
    }
    
    /* Hide Create Post buttons */
    .Post_Create_Buttons {
        display: none !important;
    }
    
    /* Hide delete button in mobile view */
    .Post_Delete_Button {
        display: none;
    }
    
    .Back_to_List {
        flex-shrink: 0;
    }
}