/**
 * @file
 * Dashboard Layout & Gen-Z Feed Styling
 * 
 * Works WITH the Bootstrap grid system used by Angular dashboard.
 * Layout: 3/12-5/12-4/12 -> Adjusted to 2.5/12-6/12-3.5/12
 */

/* ===========================================
   COLUMN WIDTH ADJUSTMENTS
   Uses Bootstrap column class overrides
   =========================================== */

/* Override Bootstrap column widths for dashboard */
@media (min-width: 1200px) {

    /* Left column - narrower (default is 25%, we want ~20%) */
    .dashboard-column-wrapper .col-xl-3.col-left {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    /* Center column - wider (default is 42%, we want ~50%) */
    .dashboard-column-wrapper .col-xl-5.col-center {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Right column - narrower (default is 33%, we want ~30%) */
    .dashboard-column-wrapper .col-xl-4.col-right {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
}

/* Ensure proper flex container */
.dashboard-column-wrapper.row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 -8px !important;
    align-items: flex-start !important;
    /* Needed for sticky to work */
}

.dashboard-column-wrapper .dashboard-column {
    padding: 0 8px !important;
}

/* ===========================================
   STICKY SIDEBARS - LinkedIn-style
   Left and Right columns stay fixed while feed scrolls
   =========================================== */

@media (min-width: 1200px) {

    /* Left column - sticky */
    .dashboard-column-wrapper .col-left {
        position: sticky !important;
        top: 80px !important;
        /* Below header */
        height: fit-content !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }

    /* Right column - sticky */
    .dashboard-column-wrapper .col-right {
        position: sticky !important;
        top: 80px !important;
        /* Below header */
        height: fit-content !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }

    /* Hide scrollbar on sidebars but keep functionality */
    .dashboard-column-wrapper .col-left::-webkit-scrollbar,
    .dashboard-column-wrapper .col-right::-webkit-scrollbar {
        width: 4px;
    }

    .dashboard-column-wrapper .col-left::-webkit-scrollbar-thumb,
    .dashboard-column-wrapper .col-right::-webkit-scrollbar-thumb {
        background: #d1d1d1;
        border-radius: 2px;
    }
}

/* ===========================================
   POST COMPOSER
   =========================================== */

.comment-form__container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 16px;
}

.comment-form__container .profile-pic img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.comment-form__container textarea,
.comment-form__container input[type="text"] {
    background: #f0f2f5;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    width: 100%;
}

.comment-form__container textarea:focus,
.comment-form__container input[type="text"]:focus {
    background: #fff;
    outline: 2px solid #0a66c2;
}

.awards-list {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.awards-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f0f2f5;
    border-radius: 16px;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.awards-list a:hover {
    background: #e4e6e9;
}

/* ===========================================
   POST CARDS
   =========================================== */

.comment-item__container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-bottom: 12px;
}

.comment-item__container:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.comment-item__user {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.comment-item__user .profile-pic img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.comment-item__name a {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
}

.comment-item__name a:hover {
    color: #0a66c2;
    text-decoration: underline;
}

.comment-item__date {
    font-size: 12px;
    color: #65676b;
}

.comment-item__body {
    font-size: 14px;
    line-height: 1.5;
    color: #1c1e21;
    margin-bottom: 12px;
}

.comment-item__body img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.comment-item__body a {
    color: #0a66c2;
}

/* ===========================================
   ACTION BAR
   =========================================== */

.comment-item__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid #e4e6e9;
    margin-top: 12px;
}

.comment-item__actions>a,
.comment-item__actions>button,
.comment-item__actions .use-ajax {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #65676b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.comment-item__actions>a:hover,
.comment-item__actions>button:hover,
.comment-item__actions .use-ajax:hover {
    background: #f0f2f5;
    color: #1a1a1a;
}

.comment-item__actions .fi {
    font-size: 18px;
}

/* ===========================================
   THREE DOT MENU
   =========================================== */

.comment-item__edit-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #65676b;
    border-radius: 50%;
    margin-left: auto;
}

.comment-item__edit-btn:hover {
    background: #f0f2f5;
}

.comment-item__edit-menu {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   PINNED POST
   =========================================== */

.comment-item__container.opigno-pinned-post {
    border-left: 3px solid #0a66c2;
}

.pinned-post {
    font-size: 11px;
    color: #0a66c2;
    font-weight: 600;
    margin-left: auto;
}