/* _content/Petro/Components/Elements/PRVCalculation/MudWeightInputs.razor.rz.scp.css */
.modern-label[b-7zuy7ip6xx] {
    margin-bottom: 5px;
    font-weight: 550;
    color: var(--text-secondary);
}

.modern-input[b-7zuy7ip6xx] {
    padding: 4px 0px 4px 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-secondary);
    background-color: var(--bg-white);
    background-clip: padding-box;
    border: 1px solid var(--brd-gray);
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out;
}

    .modern-input:focus[b-7zuy7ip6xx] {
        outline: none;
        border-color: var(--brd-dark);
        box-shadow: var(--shadow-focus-size) var(--bg-white-shadow);
    }

    /* Hover effect */
    .modern-input:hover[b-7zuy7ip6xx] {
        border-color: var(--hover-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

.invalid-input[b-7zuy7ip6xx] {
    border-color: var(--status-error-border);
    box-shadow: var(--shadow-hover-size) var(--status-error-shadow);
}

.default-value[b-7zuy7ip6xx] {
    color: var(--brd-dark);
}

.required-field[b-7zuy7ip6xx] {
    color: var(--status-red);
    margin-left: 2px;
    font-weight: bold;
}

/* Button styling for add/remove */
.btn-remove[b-7zuy7ip6xx] {
    background-color: var(--bg-gray);
    border: 1px solid var(--brd-dark);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
    padding: 0;
    line-height: 0;
    font-size: 18px; /* Slightly larger to ensure visibility */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

    .btn-remove:hover[b-7zuy7ip6xx] {
        background-color: var(--hover-gray);
    }

/* Icons */
.bi-x-icon[b-7zuy7ip6xx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='var(--bg-gray)' class='bi bi-x' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.btn-add[b-7zuy7ip6xx] {
    color: var(--text-primary);
    background-color: var(--bg-white);
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 500;
    padding: 0;
    transition: all 0.2s ease; /* Smooth transition for hover effects */
}

    .btn-add:hover[b-7zuy7ip6xx] {
        color: var(--primary); /* Change text color to primary like radio button */
        font-weight: 500; /* Make text bold */
    }

.placeholder[b-7zuy7ip6xx] {
    margin-bottom: 10px;
}

/* Remove spinner buttons from number inputs */
input[b-7zuy7ip6xx]::-webkit-outer-spin-button,
input[b-7zuy7ip6xx]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* _content/Petro/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-faapfiiq6p] {
    position: relative;
    display: flex;
    background-color: var(--bg-gray);
    padding: 0px;
    height: auto;
}

main[b-faapfiiq6p] {
    flex: 9;
    margin: 10px;
    padding: 0px 20px 0px 0px;
    background-color: var(--bg-white);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 0 10px var(--bg-white-shadow);
}

.content[b-faapfiiq6p] {
    flex: 1;
    max-width: auto;
    height: auto;
    padding-left: 2rem;
    padding-right: 1rem;
}

.sidebar[b-faapfiiq6p] {
    flex: 1;
    top: 0px;
    left: 0px;
    background: var(--bg-gray);
    padding: 0px 20px 0px 0px;
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    margin-left: 0;
    margin-right: 0px;
    position: sticky;
}

/* Previously 769px*/
@media (min-width: 900px) {
    .page[b-faapfiiq6p] {
        flex-direction: row;
    }

    .sidebar[b-faapfiiq6p] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        display: block; /* Ensure sidebar shows on desktop */
    }
}

/* Previously 768px*/
@media (max-width: 899px) {
    .page[b-faapfiiq6p] {
        flex-direction: column; /* Stack vertically on mobile */
    }

    main[b-faapfiiq6p] {
        flex: 1;
        margin: 10px;
    }

    .content[b-faapfiiq6p] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* _content/Petro/Components/Layout/NavMenu.razor.rz.scp.css */
/* ======================
   HAMBURGER MENU (Mobile)
   ====================== */

/* Hamburger Menu Button */
.hamburger-toggle[b-i09cs8u8os] {
    display: flex; /* Hidden on desktop */
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1002;
    background: var(--bg-white);
    border: none;
    border-radius: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

    .hamburger-toggle:hover[b-i09cs8u8os] {
        background: var(--hover-gray);
    }
    .hamburger-toggle:focus[b-i09cs8u8os] {
        outline: none; 
    }

/* Mobile Overlay */
.nav-overlay[b-i09cs8u8os] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nav-overlay.active[b-i09cs8u8os] {
    opacity: 1;
    pointer-events: auto;
}

/* Navigation Drawer */
.nav-drawer[b-i09cs8u8os] {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--bg-gray);
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

    .nav-drawer.open[b-i09cs8u8os] {
        transform: translateX(0);
        z-index: 9999 !important;
    }

.nav-overlay.active[b-i09cs8u8os] {
    z-index: 9998 !important;
}


/* Drawer Header */
.drawer-header[b-i09cs8u8os] {
    padding: 2rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-header .logo[b-i09cs8u8os] {
    margin-bottom: 0;
}

.drawer-header .back-home[b-i09cs8u8os] {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
}

/* Drawer Navigation */
.drawer-nav[b-i09cs8u8os] {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.drawer-nav .nav-item[b-i09cs8u8os] {
    padding: 0;
    margin: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.drawer-nav .nav-item:hover[b-i09cs8u8os] {
    background: var(--hover-gray);
}

.drawer-nav .nav-item[b-i09cs8u8os]  .active {
    font-weight: 500;
    background: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.drawer-nav .nav-item[b-i09cs8u8os]  .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.drawer-nav .nav-item[b-i09cs8u8os]  .nav-link span {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 1.1em;
    display: inline-block;
}

/* Drawer Footer */
.drawer-footer[b-i09cs8u8os] {
    padding: 1rem 1.5rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ======================
   DESKTOP SIDEBAR
   ====================== */

/* Logo and header styling */
.sidebar-text[b-i09cs8u8os] {
    margin-top: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
}

.logo[b-i09cs8u8os] {
    margin-bottom: 15px;
}

.back-home[b-i09cs8u8os] {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
}

/* Navigation container */
.nav-scrollable[b-i09cs8u8os] {
    height: auto;
    visibility: visible;
    overflow: visible;
}

.nav-item[b-i09cs8u8os] {
    padding: 0;
    margin: 10px 0px 0px 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    position: relative;
}

.nav-item:hover[b-i09cs8u8os] {
    background: var(--hover-gray);
}

/* Active state - applied when the NavLink gets the 'active' class */
.nav-item[b-i09cs8u8os]  .active {
    font-weight: 500;
    background: var(--bg-white);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--bg-gray);
}

.nav-item[b-i09cs8u8os]  .nav-link {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

/* Icon styling - ensure visibility */
.nav-item[b-i09cs8u8os]  .nav-link span {
    margin-right: 10px;
    width: 16px;
    text-align: center;
    font-size: 1.1em;
    display: inline-block;
    visibility: visible;
}

.nav-item[b-i09cs8u8os]  .bi::before {
    display: inline-block;
    content: "";
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
}

.sidebar-footer[b-i09cs8u8os] {
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    position: fixed;
    padding-left: 10px;
    bottom: 0;
    word-wrap: break-word; /* Allow text to wrap */
    overflow-wrap: break-word;
}

/* ======================
   RESPONSIVE BREAKPOINTS
   ====================== */
/* Previously 768px*/
@media (max-width: 899px) {
    /* Show hamburger menu */
    .hamburger-toggle[b-i09cs8u8os] {
        display: flex !important;
    }

    /* Show overlay when menu is active */
    .nav-overlay[b-i09cs8u8os] {
        display: block;
    }

    /* Completely hide desktop sidebar */
    .desktop-sidebar[b-i09cs8u8os] {
        display: none !important;
    }

    .nav-drawer.open ~ *[b-i09cs8u8os] {
        position: relative;
        z-index: 1;
    }
}

@media (min-width: 900px) {
    /* Hide mobile navigation elements */
    .hamburger-toggle[b-i09cs8u8os] {
        display: none; /* Hide on desktop */
    }
    .nav-overlay[b-i09cs8u8os],
    .nav-drawer[b-i09cs8u8os] {
        display: none !important;
    }

    /* Show desktop sidebar */
    .desktop-sidebar[b-i09cs8u8os] {
        display: block;
    }
}

/* ======================
   ACCESSIBILITY & PERFORMANCE
   ====================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .hamburger-toggle[b-i09cs8u8os],
    .hamburger-line[b-i09cs8u8os],
    .nav-overlay[b-i09cs8u8os],
    .nav-drawer[b-i09cs8u8os] {
        transition: none;
    }
}

/* _content/Petro/Components/Pages/About.razor.rz.scp.css */
/* Base section styles (reusing from roadmap) */
.section-card[b-3ra95qkrfy] {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 2rem;
    overflow: visible;
}

.section-title[b-3ra95qkrfy] {
    background: transparent;
    color: var(--text-primary);
    margin: 0;
    padding: 0.3rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid var(--brd-gray);
    margin-bottom: 1.5rem;
}

/* Platform Section Styles */
.platform-content[b-3ra95qkrfy] {
    margin-bottom: 2rem;
}

.platform-description[b-3ra95qkrfy] {
    margin-bottom: 2rem;
}

    .platform-description p[b-3ra95qkrfy] {
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 1rem;
        font-size: 1rem;
    }

.features-grid[b-3ra95qkrfy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.feature-card[b-3ra95qkrfy] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .feature-card:hover[b-3ra95qkrfy] {
        background: var(--bg-light-gray);
        border-color: var(--bg-light-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

.feature-icon[b-3ra95qkrfy] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light-gray);
    border-radius: 8px;
}

.feature-details[b-3ra95qkrfy] {
    flex: 1;
    padding-top: 0rem;
}

.feature-title[b-3ra95qkrfy] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.6;
}

.feature-description[b-3ra95qkrfy] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 1rem;
}

/* Team Section Styles */
.team-content[b-3ra95qkrfy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.team-member-card[b-3ra95qkrfy] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .team-member-card:hover[b-3ra95qkrfy] {
        background: var(--bg-light-gray);
        border-color: var(--bg-light-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

.member-photo[b-3ra95qkrfy] {
    flex-shrink: 0;
}

.profile-picture[b-3ra95qkrfy] {
    width: 100px;
    height: 120px;
    border-radius: 5px;
    object-fit: cover;
}

.member-details[b-3ra95qkrfy] {
    flex: 1;
    padding-top: 0rem;
}

.member-header[b-3ra95qkrfy] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.member-name[b-3ra95qkrfy] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.member-position[b-3ra95qkrfy] {
    color: var(--chart-blue);
    font-weight: 500;
    font-size: 0.95rem;
}

.member-description[b-3ra95qkrfy] {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 70ch; /* Limits to approximately 55 characters per line */
    word-wrap: break-word;
    font-size: 1rem;
}

.member-links[b-3ra95qkrfy] {
    display: flex;
    gap: 1rem;
}

.social-link[b-3ra95qkrfy] {
    color: var(--chart-blue);
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .social-link:hover[b-3ra95qkrfy] {
        color: var(--chart-purple);
    }

/* Contact Section Styles (reusing from roadmap) */
.contact-content[b-3ra95qkrfy] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item[b-3ra95qkrfy] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .contact-item:hover[b-3ra95qkrfy] {
        background: var(--bg-light-gray);
        border-color: var(--bg-light-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

.contact-emoji[b-3ra95qkrfy] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light-gray);
    border-radius: 5px;
}

.contact-text[b-3ra95qkrfy] {
    flex: 1;
    line-height: 1.6;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-top: 0rem;
}

.email-link[b-3ra95qkrfy], .linkedin-link[b-3ra95qkrfy] {
    color: var(--chart-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .email-link:hover[b-3ra95qkrfy], .linkedin-link:hover[b-3ra95qkrfy] {
        color: var(--chart-purple);
        text-decoration: underline;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .section-title[b-3ra95qkrfy] {
        font-size: 1.3rem;
    }

    .features-grid[b-3ra95qkrfy] {
        grid-template-columns: 1fr;
    }

    .team-content[b-3ra95qkrfy] {
        grid-template-columns: 1fr;
    }

    .feature-card[b-3ra95qkrfy],
    .team-member-card[b-3ra95qkrfy],
    .contact-item[b-3ra95qkrfy] {
        padding: 1rem;
        gap: 1rem;
    }

    .member-header[b-3ra95qkrfy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 0.75rem;
    }

    .team-member-card[b-3ra95qkrfy] {
        flex-direction: row;
        text-align: left;
    }

    .member-details[b-3ra95qkrfy] {
        padding-top: 0;
        display: flex;
        flex-direction: column;
    }

    .member-links[b-3ra95qkrfy] {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .section-title[b-3ra95qkrfy] {
        font-size: 1.3rem;
    }

    .feature-title[b-3ra95qkrfy],
    .member-name[b-3ra95qkrfy] {
        font-size: 1rem;
    }

    .profile-picture[b-3ra95qkrfy] {
        width: 60px;
        height: 60px;
    }
}
/* _content/Petro/Components/Pages/Calculations/PRVCalculator.razor.rz.scp.css */
/* ============================================================================
   1. CSS VARIABLES & RESET
   ============================================================================ */

/* Prevent horizontal scrollbar */
:root[b-tq4u85gigx] {
    overflow-x: hidden;
}

/* Remove spinner buttons */
input[b-tq4u85gigx]::-webkit-outer-spin-button,
input[b-tq4u85gigx]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number][b-tq4u85gigx] {
    -moz-appearance: textfield;
}

/* ============================================================================
   2. PAGE LAYOUT SYSTEM
   ============================================================================ */

/* Main page container */
.calculator-page[b-tq4u85gigx] {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

    .calculator-page h3[b-tq4u85gigx] {
        padding: 0;
    }

/* Layout structure */

.top-row[b-tq4u85gigx] {
    display: flex;
    margin-bottom: 20px;
}

    .top-row.column[b-tq4u85gigx] {
        padding: 0;
    }

    .top-row > .column:first-child[b-tq4u85gigx] {
        flex: 0 0 39%;
    }

    .top-row > .column:nth-child(2)[b-tq4u85gigx] {
        flex: 0 0 62%;
        min-width: 0;
    }

.column[b-tq4u85gigx] {
    flex: 1;
    padding: 0;
}

    .column:nth-child(3)[b-tq4u85gigx] {
        border-left: 1px solid var(--divider);
        padding-left: 20px;
    }

/* Input layout */
.input-row[b-tq4u85gigx] {
    display: flex;
    width: 100%;
}

/* Bottom section */
.bottom-section[b-tq4u85gigx] {
    clear: both;
    width: 100%;
    padding: 0 10px;
    border-top: 1px solid var(--divider);
    margin-top: 10px;
    padding-top: 20px;
}

/* ============================================================================
   3. FORM COMPONENTS
   ============================================================================ */

/* Labels */
.modern-label[b-tq4u85gigx] {
    display: block;
    margin-bottom: 5px;
    font-weight: 550;
    color: var(--text-secondary);
}

.required-field[b-tq4u85gigx] {
    color: var(--status-red);
    margin-left: 2px;
    font-weight: bold;
}

/* Input fields */
.modern-input[b-tq4u85gigx] {
    display: block;
    padding: 4px 0px 4px 10px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 400;
    margin-right: 1rem;
    color: var(--text-secondary);
    background-color: var(--bg-white);
    background-clip: padding-box;
    border: 1px solid var(--brd-gray);
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out;
}

    .modern-input:focus[b-tq4u85gigx] {
        outline: none;
        border-color: var(--brd-dark);
        box-shadow: var(--shadow-focus-size) var(--bg-white-shadow);
    }

    .modern-input:hover[b-tq4u85gigx] {
        border-color: var(--hover-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

/* Input states */
.default-value[b-tq4u85gigx] {
    color: var(--brd-dark);
}

.invalid-input[b-tq4u85gigx] {
    border-color: var(--status-error-border);
    box-shadow: var(--shadow-hover-size) var(--status-error-shadow);
}



/* ============================================================================
   4. BUTTON COMPONENTS
   ============================================================================ */

/* Button group */
.button-group[b-tq4u85gigx] {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* Button styling */
.btn-calculate[b-tq4u85gigx] {
    display: block;
    padding: 4px 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bg-white);
    background-color: var(--primary);
    border: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 4px 12px;
    min-width: 6px;
    height: 25px;
    width: 91px;
}

    .btn-calculate:hover[b-tq4u85gigx] {
        background-color: var(--primary-hover);
        box-shadow: var(--shadow-hover-size) var(--primary-dark-20);
    }

    .btn-calculate:active[b-tq4u85gigx] {
        background-color: var(--primary-dark);
        box-shadow: var(--shadow-active-size) var(--primary-dark-30);
    }

    .btn-calculate:focus[b-tq4u85gigx] {
        outline: none;
    }

    .btn-calculate:disabled[b-tq4u85gigx] {
        background-color: #cccccc;
        cursor: not-allowed;
        opacity: 0.65;
    }

/* Clear button */
.btn-clear.icon[b-tq4u85gigx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--bg-gray);
    border: 1px solid var(--brd-dark);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    padding: 4px 0;
    cursor: pointer;
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    transition: all 0.2s ease;
}

    .btn-clear.icon:hover[b-tq4u85gigx] {
        color: var(--status-error-main);
        border-color: var(--status-error-border);
        background-color: var(--status-error-background);
        box-shadow: var(--shadow-hover-size) var(--status-error-shadow);
    }

.btn-clear.confirm-reset[b-tq4u85gigx] {
    margin-left: 15px;
    background-color: var(--bg-gray);
    border: 1px solid var(--brd-dark);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    padding: 4px 12px;
    min-width: auto;
    transition: all 0.2s ease;
}

    .btn-clear.confirm-reset:hover[b-tq4u85gigx] {
        color: var(--status-error-main);
        border-color: var(--status-error-border);
        background-color: var(--status-error-background);
        box-shadow: var(--shadow-hover-size) var(--status-error-shadow);
    }



/* ============================================================================
   5. ALERT COMPONENTS
   ============================================================================ */

/* Alert styles */
.alert[b-tq4u85gigx] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
}

.alert-success[b-tq4u85gigx] {
    color: var(--status-success-main);
    background-color: var(--status-success-background);
    border-color: var(--status-success-border);
}

.alert-warning[b-tq4u85gigx] {
    color: var(--status-warning-main);
    background-color: var(--status-warning-background);
    border-color: var(--status-warning-border);
}

.alert-info[b-tq4u85gigx] {
    color: var(--status-info-main);
    background-color: var(--status-info-background);
    border-color: var(--status-info-border);
}

.alert-error[b-tq4u85gigx] {
    color: var(--status-error-main);
    background-color: var(--status-error-background);
    border-color: var(--status-error-border);
}

.alert-icon[b-tq4u85gigx] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.alert-content[b-tq4u85gigx] {
    flex-grow: 1;
}

.alert-success .alert-icon[b-tq4u85gigx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230f5132' class='bi bi-check-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}

.alert-warning .alert-icon[b-tq4u85gigx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23664d03' class='bi bi-exclamation-triangle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

.alert-info .alert-icon[b-tq4u85gigx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23055160' class='bi bi-info-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

.alert-error .alert-icon[b-tq4u85gigx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23842029' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
}

.validation-error-list[b-tq4u85gigx] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.2rem;
    list-style-type: disc;
}

    .validation-error-list li[b-tq4u85gigx] {
        margin-bottom: 0.25rem;
        line-height: 1.4;
        color: var(--status-error-main);
    }

        .validation-error-list li:last-child[b-tq4u85gigx] {
            margin-bottom: 0;
        }

.alert-content span + .validation-error-list[b-tq4u85gigx] {
    margin-top: 0.5rem;
}

.validation-error-list.custom-bullets[b-tq4u85gigx] {
    list-style: none;
    padding-left: 0;
}

    .validation-error-list.custom-bullets li[b-tq4u85gigx] {
        padding-left: 1.2rem;
    }

        .validation-error-list.custom-bullets li[b-tq4u85gigx]::before {
            content: "•";
            color: var(--status-error-main);
            font-weight: bold;
            position: absolute;
            left: 0;
        }

.validation-message[b-tq4u85gigx] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   6. SETTINGS COMPONENTS
   ============================================================================ */
.card-body h4[b-tq4u85gigx] {
    color: var(--text-primary);
}

.settings-row[b-tq4u85gigx] {
    display: flex;
    width: 100%;
}

.settings-column[b-tq4u85gigx] {
    flex: 1;
}

    .settings-column:first-child[b-tq4u85gigx] {
        border-right: 0px solid #dc3545;
    }

    .settings-column h5[b-tq4u85gigx] {
        border-bottom: 0px solid #dc3545;
        padding-bottom: 0.5rem;
        margin: 0;
        color: var(--text-secondary);
    }

.radio-group[b-tq4u85gigx] {
    margin-bottom: 1.5rem;
}

.radio-option[b-tq4u85gigx] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

    .radio-option input[type="radio"][b-tq4u85gigx] {
        margin-top: 0.25rem;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: var(--primary);
    }

.radio-option-centered[b-tq4u85gigx] {
    vertical-align: center;
}

    .radio-option-centered input[type="radio"][b-tq4u85gigx] {
        margin-top: 0;
    }

.radio-label[b-tq4u85gigx] {
    flex-grow: 1;
    cursor: pointer;
}

.radio-title[b-tq4u85gigx] {
    display: block;
    font-size: 0.85rem;
    font-weight: 550;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.radio-description[b-tq4u85gigx] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.3;
}

.radio-option:hover .radio-title[b-tq4u85gigx] {
    color: var(--primary);
}

.radio-option:hover input[type="radio"][b-tq4u85gigx] {
    transform: scale(1.05);
}

/* ============================================================================
   7. LOADING & SPINNER COMPONENTS
   ============================================================================ */

.loading-container[b-tq4u85gigx] {
    text-align: center;
    padding: 2rem;
}

.spinner[b-tq4u85gigx] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin-b-tq4u85gigx 1s linear infinite;
    margin-right: 8px;
}

.spinner-large[b-tq4u85gigx] {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin-b-tq4u85gigx 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-tq4u85gigx {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   8. TABLE COMPONENTS
   ============================================================================ */

.results-table-container[b-tq4u85gigx] {
    overflow-x: auto;
    margin-top: 1rem;
}

.results-table[b-tq4u85gigx] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

    .results-table th[b-tq4u85gigx],
    .results-table td[b-tq4u85gigx] {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }

    .results-table th[b-tq4u85gigx] {
        background-color: #f8f9fa;
        font-weight: bold;
    }

.flow-rate-cell[b-tq4u85gigx] {
    background-color: #f8f9fa;
    font-weight: bold;
}

.data-cell[b-tq4u85gigx] {
    background-color: white;
}

.error-cell[b-tq4u85gigx] {
    background-color: #ffebee;
    color: #c62828;
    cursor: pointer;
}

.error-text[b-tq4u85gigx] {
    font-weight: bold;
}

/* ============================================================================
   9. FORMULA COMPONENTS
   ============================================================================ */

.formula-container[b-tq4u85gigx] {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

.formula-text[b-tq4u85gigx] {
    font-size: 1.5rem;
}

.formula-variables[b-tq4u85gigx] {
    list-style: disc;
    padding-left: 1.5em;
}

    .formula-variables li[b-tq4u85gigx] {
        display: list-item;
        margin-bottom: 0.25rem;
        line-height: 1.3;
    }

        .formula-variables li > div[b-tq4u85gigx] {
            display: flex;
            align-items: baseline;
        }

        .formula-variables li strong[b-tq4u85gigx] {
            min-width: 2.5em;
            flex-shrink: 0;
            margin-right: 1em;
        }

/* ============================================================================
   10. RESPONSIVE OVERRIDES (Desktop-first approach)
   ============================================================================ */


/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .input-row[b-tq4u85gigx],
    .top-row[b-tq4u85gigx] {
        flex-direction: column;
    }

        .top-row > .column:first-child[b-tq4u85gigx],
        .top-row > .column:nth-child(2)[b-tq4u85gigx],
        .column[b-tq4u85gigx] {
            flex: 1 1 100%;
            width: 100%;
            min-width: 100%;
        }

            .column:nth-child(3)[b-tq4u85gigx] {
                border-left: none;
                padding-left: 0;
            }

    .button-group[b-tq4u85gigx] {
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }


    .results-table-container[b-tq4u85gigx] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .results-table[b-tq4u85gigx] {
        min-width: 600px;
    }

    .settings-row[b-tq4u85gigx] {
        flex-direction: column;
        padding-bottom: 0;
    }

    .radio-group:last-child[b-tq4u85gigx] {
        margin-bottom: 0;
    }

    .settings-column:first-child:not(:last-child)[b-tq4u85gigx] {
        border-right: none !important;
    }

    .formula-text[b-tq4u85gigx] {
        font-size: 1.2rem;
    }
}

/* _content/Petro/Components/Pages/Errors/Error404.razor.rz.scp.css */
.error-content[b-emr8c7qy5n] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    text-align: center;
}

.error-code[b-emr8c7qy5n] {
    font-size: 6rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    line-height: 1;
}

.error-title[b-emr8c7qy5n] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.error-description[b-emr8c7qy5n] {
    margin-bottom: 3rem;
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.btn-primary-large[b-emr8c7qy5n] {
    background-color: var(--primary);
    color: var(--bg-white);
    padding: 1rem 2rem;
    border-radius: 4px;
    border: none;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 3rem;
    display: inline-block;
}

    .btn-primary-large:hover[b-emr8c7qy5n] {
        background-color: var(--primary-hover); /* Lighter green */
        box-shadow: var(--shadow-hover-size) var(--primary-dark-20);
    }

    .btn-primary-large:active[b-emr8c7qy5n] {
        background-color: var(--primary-dark);
        box-shadow: var(--shadow-active-size) var(--primary-dark-30); /* Darker shadow when clicked */
    }

@media (max-width: 768px) {
    .error-code[b-emr8c7qy5n] {
        font-size: 4rem;
    }

    .error-title[b-emr8c7qy5n] {
        font-size: 1.5rem;
    }

    .error-description[b-emr8c7qy5n] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .error-code[b-emr8c7qy5n] {
        font-size: 3rem;
    }

    .error-title[b-emr8c7qy5n] {
        font-size: 1.25rem;
    }
}
/* _content/Petro/Components/Pages/Errors/Error500.razor.rz.scp.css */
.error-content[b-459jkr8hat] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    text-align: center;
}

.error-code[b-459jkr8hat] {
    font-size: 6rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    line-height: 1;
}

.error-title[b-459jkr8hat] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.error-description[b-459jkr8hat] {
    margin-bottom: 3rem;
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.btn-primary-large[b-459jkr8hat] {
    background-color: var(--primary);
    color: var(--bg-white);
    padding: 1rem 2rem;
    border-radius: 4px;
    border: none;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 3rem;
    display: inline-block;
}

    .btn-primary-large:hover[b-459jkr8hat] {
        background-color: var(--primary-hover); /* Lighter green */
        box-shadow: var(--shadow-hover-size) var(--primary-dark-20);
    }

    .btn-primary-large:active[b-459jkr8hat] {
        background-color: var(--primary-dark);
        box-shadow: var(--shadow-active-size) var(--primary-dark-30); /* Darker shadow when clicked */
    }

@media (max-width: 768px) {
    .error-code[b-459jkr8hat] {
        font-size: 4rem;
    }

    .error-title[b-459jkr8hat] {
        font-size: 1.5rem;
    }

    .error-description[b-459jkr8hat] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .error-code[b-459jkr8hat] {
        font-size: 3rem;
    }

    .error-title[b-459jkr8hat] {
        font-size: 1.25rem;
    }
}
/* _content/Petro/Components/Pages/Home.razor.rz.scp.css */
/* ===========================================
   HOME PAGE STYLES (Simplified)
   =========================================== */

/* Layout containers */
.responsive-container[b-fxpsiw27pt] {
    width: 100%;
    margin: 0 auto;
}

.desktop-grid-mobile-column[b-fxpsiw27pt] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    min-height: 70vh;
}

.section-card[b-fxpsiw27pt] {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 2rem;
    overflow: visible;
}

.text-content[b-fxpsiw27pt] {
    padding-right: 2rem;
}

.main-title[b-fxpsiw27pt] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3rem;
    line-height: 1.2;
}

.main-description[b-fxpsiw27pt] {
    margin-bottom: 3rem;
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1;
}

.btn-primary-large[b-fxpsiw27pt] {
    background-color: var(--primary);
    color: var(--bg-white);
    padding: 1rem 2rem;
    border-radius: 4px;
    border: none;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 3rem;
    display: inline-block;
}

    .btn-primary-large:hover[b-fxpsiw27pt] {
        background-color: var(--primary-hover);
        box-shadow: var(--shadow-hover-size) var(--primary-dark-20);
    }

    .btn-primary-large:active[b-fxpsiw27pt] {
        background-color: var(--primary-dark);
        box-shadow: var(--shadow-active-size) var(--primary-dark-30);
    }

.coming-soon-section[b-fxpsiw27pt] {
    margin-bottom: 3rem;
}

    .coming-soon-section h3[b-fxpsiw27pt] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1rem;
    }

.features-grid[b-fxpsiw27pt] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    padding-left: 0;
}

.feature-card[b-fxpsiw27pt] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .feature-card.clickable[b-fxpsiw27pt] {
        cursor: pointer;
    }

        .feature-card:hover[b-fxpsiw27pt],
        .feature-card.clickable:hover[b-fxpsiw27pt] {
            background: var(--bg-light-gray);
            border-color: var(--bg-light-gray);
            box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
        }

.feature-icon[b-fxpsiw27pt] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light-gray);
    border-radius: 8px;
}

.feature-details[b-fxpsiw27pt] {
    flex: 1;
    padding-top: 0.3rem;
}

.feature-text[b-fxpsiw27pt] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 500;
}

.image-content[b-fxpsiw27pt] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-illustration[b-fxpsiw27pt] {
    max-width: 100%;
    height: 100%;
    width: 100%;
    max-height: 500px;
}

/* Error and Loading States */
.btn-retry[b-fxpsiw27pt] {
    background-color: var(--chart-blue);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .btn-retry:hover[b-fxpsiw27pt] {
        background-color: var(--chart-purple);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

/* ===========================================
   MOBILE STYLES - Basic adjustments only
   =========================================== */

@media (max-width: 899px) {
    .desktop-grid-mobile-column[b-fxpsiw27pt] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
        align-items: flex-start
    }

    .text-content[b-fxpsiw27pt] {
        padding-right: 0;
    }

    .main-title[b-fxpsiw27pt] {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .main-description[b-fxpsiw27pt] {
        margin-bottom: 2rem;
        font-size: 1rem;
    }

    .btn-primary-large[b-fxpsiw27pt] {
        margin-bottom: 2rem;
        text-align: center;
        width: 350px;
    }

    .coming-soon-section[b-fxpsiw27pt] {
        margin-bottom: 2rem;
    }

    .features-grid[b-fxpsiw27pt] {
        max-width: 350px; /* Limit width on mobile */
    }
}
/* _content/Petro/Components/Pages/Roadmap.razor.rz.scp.css */
.section-card[b-xfws75f91v] {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 2rem;
    overflow: visible;
}

.section-title[b-xfws75f91v] {
    background: transparent;
    color: var(--text-primary);
    margin: 0;
    padding: 0.3rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid var(--brd-gray);
    margin-bottom: 1.5rem;
}

.feedback-item[b-xfws75f91v] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .feedback-item:last-child[b-xfws75f91v] {
        margin-bottom: 0;
    }

    .feedback-item:hover[b-xfws75f91v] {
        background: var(--bg-light-gray);
        border-color: var(--bg-light-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

.feedback-emoji[b-xfws75f91v] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light-gray);
    border-radius: 5px;
}

.feedback-text[b-xfws75f91v] {
    flex: 1;
    line-height: 1.6;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-top: 0rem;
}

.email-link[b-xfws75f91v], .linkedin-link[b-xfws75f91v] {
    color: var(--chart-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

    .email-link:hover[b-xfws75f91v], .linkedin-link:hover[b-xfws75f91v] {
        color: var(--chart-purple);
        text-decoration: underline;
    }

/* Backlog Section Styles */

.backlog-content[b-xfws75f91v] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 0rem;
    grid-column-gap: 1.5rem;
}

.backlog-item[b-xfws75f91v] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .backlog-item:hover[b-xfws75f91v] {
        background: var(--bg-light-gray);
        border-color: var(--bg-light-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }
    
.backlog-bullet[b-xfws75f91v] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light-gray);
    border-radius: 5px;
}

.backlog-details[b-xfws75f91v] {
    flex: 1;
    padding-top: 0rem;
}

.backlog-title[b-xfws75f91v] {
    margin: 0 0 .5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.6;
}

.backlog-description[b-xfws75f91v] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 1rem;
}

/* Release Section Styles */
.release-item[b-xfws75f91v] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-white);
    border-radius: 5px;
    border: 1px solid var(--brd-gray);
    transition: all 0.2s ease;
}

    .release-item:last-child[b-xfws75f91v] {
        margin-bottom: 0;
    }

    .release-item:hover[b-xfws75f91v] {
        background: var(--bg-light-gray);
        border-color: var(--bg-light-gray);
        box-shadow: var(--shadow-hover-size) var(--bg-white-shadow);
    }

.release-header[b-xfws75f91v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0rem;
}

.release-version[b-xfws75f91v] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.6;
}

.current-badge[b-xfws75f91v] {
    background: var(--chart-blue);
    color: var(--bg-white);
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 500;
}

.release-date[b-xfws75f91v] {
    color: var(--text-secondary);
    font-weight: 500;
}

.release-features[b-xfws75f91v] {
    list-style: circle;
    padding-left: 1.2rem;
    margin: 0;
}

    .release-features li[b-xfws75f91v] {
        padding: 0.5rem 0;
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .platform-info-page[b-xfws75f91v] {
        padding: 1rem 0;
    }

    .container[b-xfws75f91v] {
        padding: 0 0.5rem;
    }

    .section-title[b-xfws75f91v] {
        font-size: 1.3rem;
    }

    .backlog-content[b-xfws75f91v] {
        grid-template-columns: 1fr;
    }

    .feedback-content[b-xfws75f91v],
    .backlog-content[b-xfws75f91v],
    .releases-content[b-xfws75f91v] {
        padding: 1rem;
    }

    .feedback-item[b-xfws75f91v],
    .backlog-item[b-xfws75f91v],
    .release-item[b-xfws75f91v] {
        padding: 1rem;
    }

    .release-header[b-xfws75f91v] {
        flex-direction: column;
        align-items: flex-start;
    }
}