/* ==========================================================================
   @netsef OS Core Architecture UI Framework - Light Green, Black & White Theme
   ========================================================================== */

/* --- 1. GLOBAL ROOT BASE RESET & CONFIGURATIONS --- */
* {
    box-sizing: border-box;
}

body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; 
    padding: 0; 
    background-color: #ffffff; /* Stark White Canvas */
    color: #111111; /* Clean Black Body Text */
    line-height: 1.5;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

/* --- 2. LAYOUT COMPONENT: CENTRAL NAVIGATION ENGINE --- */
nav { 
    background: #ffffff; 
    border-bottom: 2px solid #111111; /* Strong Black Border Line */
    padding: 15px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

/* Brand Identifier Bounding Boxes */
.logo-container { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    text-decoration: none; 
}

.logo-img { 
    height: 80px; 
    max-width: 280px; 
    object-fit: contain; 
}

.logo-text { 
    font-weight: 700; 
    font-size: 1.5rem; 
    color: #111111; /* Black Branding */
    letter-spacing: -0.3px;
}

/* Header Context Menu Item Lists */
.nav-links { 
    list-style: none; 
    display: flex; 
    gap: 25px; 
    margin: 0; 
    padding: 0; 
    align-items: center; 
}

.nav-links a { 
    text-decoration: none; 
    color: #444444; 
    font-size: 14px; 
    font-weight: 600; 
    transition: color 0.2s ease-in-out; 
}

.nav-links a:hover { 
    color: #111111; 
    text-decoration: underline;
}

.nav-dash-highlight {
    color: #2ecc71 !important; /* Vivid Light Green Focal Point */
}

/* --- 3. GLOBAL UI ACTIONS: BUTTON CONTROLS --- */
.btn-login { 
    border: 2px solid #111111; /* Solid Black Frame */
    color: #111111 !important; 
    padding: 8px 18px; 
    border-radius: 4px; 
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-login:hover {
    background-color: #2ecc71; /* Accent Flip to Light Green */
    color: #ffffff !important;
    border-color: #2ecc71;
}

.btn-reg { 
    background: #111111; /* Black Background Button */
    color: #ffffff !important; 
    padding: 10px 20px; 
    border-radius: 4px; 
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-reg:hover {
    background-color: #2ecc71; /* Transforms to Light Green */
    color: #ffffff !important;
}

.btn-primary {
    background: #2ecc71; /* Primary Light Green Theme Action */
    color: #ffffff !important;
    padding: 14px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #27ae60; /* Darker Green Depth */
}

.btn-outline {
    background: transparent;
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    border: 2px solid #ffffff;
    transition: background-color 0.2s, color 0.2s;
}

.btn-outline:hover {
    background: #ffffff;
    color: #111111 !important;
}

.btn-details {
    display: inline-block;
    background: #111111; /* Clean Black Detail Anchor Buttons */
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.btn-details:hover {
    background-color: #2ecc71; /* Highlights Light Green on engagement */
}

/* --- 4. TEMPLATE VIEW COMPONENT: HERO JUMBOTRON --- */
.hero-banner {
    background: #111111; /* Deep Black Background Backdrop */
    color: #ffffff;
    padding: 90px 5% 120px 5%;
    text-align: center;
}

.hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3rem;
    margin: 0 0 20px 0;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #aaaaaa;
    margin-bottom: 35px;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- 5. DOMAIN MODULE COMPONENT: ANALYTIC METRIC HIGHLIGHTS --- */
.main-content {
    padding: 60px 5%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    margin-top: -80px; /* Shifts cards over black hero background cleanly */
}

.stat-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #111111; /* Structural Minimal Outline Layout */
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111111;
}

/* Functional Light Green color overrides for metrics updates */
.color-blue { color: #2ecc71 !important; } 
.color-green { color: #2ecc71 !important; }

.stat-label {
    font-weight: 700;
    color: #555555;
    margin-top: 5px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* --- 6. CONTAINER BLOCKS: LIST SECTIONS --- */
.section-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #111111;
    padding-bottom: 15px;
}

.section-title {
    font-size: 1.8rem;
    color: #111111;
    margin: 0;
    font-weight: 800;
}

.section-subtitle {
    color: #555555;
    margin: 5px 0 0 0;
}

.link-view-all {
    color: #111111;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

.link-view-all:hover {
    color: #2ecc71;
    text-decoration: underline;
}

/* --- 7. REPEATER RECORD LIST MODULE: TENDER ITEM ROW BLOCK --- */
.tenders-list-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 60px;
}

.tender-item-card {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 6px;
    padding: 25px;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tender-item-card:hover {
    border-color: #111111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.tender-meta-tags {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.badge-ref {
    background: #2ecc71; /* Bright Light Green Tag Badge */
    color: #ffffff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: bold;
    font-family: monospace;
}

.meta-location {
    color: #666666;
    font-size: 13px;
    font-weight: 600;
}

.tender-card-title {
    margin: 0 0 10px 0;
    color: #111111;
    font-size: 1.3rem;
    font-weight: 700;
}

.tender-card-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.15s ease;
}

.tender-card-title a:hover {
    color: #2ecc71;
}

.tender-card-subinfo {
    color: #555555;
    font-size: 13px;
    margin-bottom: 12px;
}

.tender-card-excerpt {
    color: #333333;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Sidebar Parameter Actions Block */
.tender-action-block {
    text-align: right;
    border-left: 1px solid #dddddd;
    padding-left: 20px;
}

.closing-date-wrapper {
    margin-bottom: 15px;
}

.closing-label {
    display: block;
    font-size: 11px;
    color: #666666;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.closing-date {
    font-size: 14px;
    color: #111111; /* Integrated back to strict color mapping */
    background: #ffebeb; /* Subtle safety warning container background */
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    display: inline-block;
}

/* --- 8. GLOBAL EXCEPTION FALLBACK RESPONSIVE CARD STATES --- */
.empty-state-fallback {
    text-align: center;
    padding: 60px;
    background: #ffffff;
    border-radius: 6px;
    border: 2px dashed #111111;
    color: #555555;
}

/* --- 9. INTERFACE VIEW MEDIA RESPONSIVENESS ADJUSTMENTS --- */
@media (max-width: 768px) {
    .nav-links { 
        display: none; /* Collapses text menus natively on mobile views */
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .stats-grid {
        margin-top: 20px;
    }
    
    .tender-item-card {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tender-action-block {
        border-left: none !important;
        padding-left: 0 !important;
        text-align: left !important;
        border-top: 1px solid #dddddd;
        padding-top: 15px;
    }
}

/* --- 10. REPEATER RECORD LIST MODULE: DIRECTORY GRID BLOCK --- */
.directory-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.directory-item-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 6px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.directory-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.directory-card-title {
    margin: 12px 0 15px 0;
    font-size: 1.2rem;
    color: #111111;
    line-height: 1.4;
    font-weight: 700;
}

.directory-meta-body {
    flex-grow: 1;
    font-size: 13px;
    color: #444444;
    margin-bottom: 20px;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.meta-icon {
    font-size: 14px;
}

/* Premium Restriction Badges */
.badge-premium-locked {
    color: #ffffff !important;
    background: #111111;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

/* --- 11. FORM WRAPPERS AND SYSTEM COMPONENT CONTROLS --- */
.search-form-layout {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.input-field {
    flex: 1;
    padding: 12px;
    border: 2px solid #111111;
    border-radius: 4px;
    font-size: 14px;
    background: #ffffff;
    color: #111111;
}

.input-field:focus {
    outline: none;
    background: #f4fff7; /* Slight mint-green glow on interaction focus */
}

/* --- 12. ARCHITECTURAL WIDGETS: DATA PAGINATION SYSTEM --- */
.pagination-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    margin-top: 50px;
}

.pagination-link, .pagination-arrow {
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    background: #ffffff;
    color: #111111;
    border: 2px solid #111111;
    transition: background-color 0.15s, color 0.15s;
}

.pagination-link:hover, .pagination-arrow:hover {
    background: #2ecc71;
    color: #ffffff;
    border-color: #2ecc71;
}

.pagination-link.active {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.pagination-ellipsis {
    padding: 10px;
    color: #666666;
    font-weight: bold;
}

/* Structural Alignment Utilities */
.text-center { text-align: center; }
.font-mono { font-family: monospace; }
.grid-col-full { grid-column: 1 / -1; }

.meta-icon {
    font-size: 14px;
    color: #111111; /* Explicit Solid Black */
    display: inline-block;
    width: 20px; /* Fixed width prevents alignment shifts between lists */
    text-align: center;
}

/* --- 13. TEMPLATE VIEW COMPONENT: SPLIT PROFILE ENGINE --- */
.profile-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    margin-top: 30px;
    align-items: start;
}

/* Sidebar Module Details */
.profile-sidebar-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 6px;
    padding: 35px;
}

.profile-avatar-badge {
    width: 60px;
    height: 60px;
    background: #111111;
    color: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.profile-company-title {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    color: #111111;
    font-weight: 800;
}

.style-green-bg {
    background: #2ecc71 !important;
    border: none !important;
    display: inline-block;
    margin-bottom: 25px;
}

.profile-meta-field {
    margin-bottom: 20px;
}

.meta-field-label {
    display: block;
    font-size: 11px;
    color: #666666;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.meta-field-value {
    font-size: 16px;
    color: #111111;
    font-weight: 600;
}

/* Form Panel Details */
.profile-main-form-block {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 6px;
    padding: 40px;
}

.form-block-title {
    margin-top: 0;
    color: #111111;
    font-weight: 800;
    font-size: 1.8rem;
}

.profile-inquiry-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
    color: #111111;
}

/* --- 14. UI COMPONENT: FEEDBACK ALERTS --- */
.alert-box {
    padding: 20px;
    border-radius: 4px;
    margin: 25px 0;
    font-size: 14px;
    line-height: 1.5;
}

.alert-box.success {
    background: #effff4;
    color: #1b5e20;
    border: 2px solid #2ecc71;
}

.alert-box.error {
    background: #ffebeb;
    color: #b71c1c;
    border: 2px solid #111111;
}

.alert-title {
    margin: 0 0 5px 0;
    font-weight: 800;
}

/* --- 15. UTILITY STRUCTURAL SETS --- */
.width-full { width: 100%; }
.text-area-resize { resize: vertical; }
.btn-large {
    font-size: 16px;
    padding: 16px 30px;
    cursor: pointer;
    border: none;
}

/* Media Query Adaptations */
@media (max-width: 768px) {
    .profile-split-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- 16. TEMPLATE VIEW COMPONENT: PRICING SUBSCRIPTION SECTIONS --- */
.pricing-hero-banner {
    background: #ffffff;
    border-bottom: 2px solid #111111;
    padding: 60px 5%;
    text-align: center;
}

.text-black { color: #111111 !important; }

.pricing-hero-subtitle {
    color: #555555;
    max-width: 600px;
    margin: 15px auto 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.plans-flex-layout {
    padding: 60px 5%;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Pricing Card Architecture Elements */
.pricing-tier-card {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 6px;
    padding: 40px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Featured Premium Target UI Border Overrides */
.premium-focus-card {
    border-color: #2ecc71; /* Highlighted by your themed Light Green accent */
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.12);
}

.card-floating-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #111111;
    color: #ffffff;
    padding: 5px 20px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-label-muted {
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    font-size: 1.1rem;
}

.tier-label-highlight {
    color: #2ecc71; /* Accent Light Green Title Focus */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.tier-price-display {
    font-size: 3rem;
    font-weight: 800;
    margin: 20px 0;
    color: #111111;
}

.tier-price-period {
    font-size: 1rem;
    color: #666666;
    font-weight: 400;
}

/* System Feature Checklist Lists */
.tier-features-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    text-align: left;
    line-height: 2.2;
    font-size: 14px;
}

.feat-icon {
    font-weight: bold;
    display: inline-block;
    width: 20px;
}

.feat-icon.active {
    color: #2ecc71; /* Clean high-contrast confirmation checks */
}

.feat-icon.disabled {
    color: #111111;
}

.feat-disabled {
    color: #aaaaaa;
    text-decoration: line-through;
}

/* Interactive Action Form Wrapper Adjustments */
.paypal-render-engine {
    margin-top: auto;
    padding-top: 10px;
}

.display-block { display: block; }
.btn-large-padding { padding: 15px !important; }

/* --- 17. TEMPLATE VIEW COMPONENT: USER AUTHENTICATION HUB --- */
.auth-view-wrapper {
    padding: 80px 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background: #ffffff;
}

.auth-box-constrain {
    width: 100%;
    max-width: 420px;
}

.auth-card-panel {
    background: #ffffff;
    padding: 40px;
    border: 2px solid #111111;
    border-radius: 6px;
}

.auth-header-block {
    text-align: center;
    margin-bottom: 35px;
}

.auth-panel-title {
    margin: 0 0 10px 0;
    color: #111111;
    font-size: 2rem;
    font-weight: 800;
}

.form-split-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.form-checkbox-row {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.custom-checkbox {
    margin-right: 10px;
    cursor: pointer;
    accent-color: #2ecc71; /* Enforces light green matching for system checks */
}

.checkbox-ui-label {
    font-size: 13px;
    color: #555555;
    cursor: pointer;
    user-select: none;
}

.auth-footer-alternate-route {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #111111;
    font-size: 14px;
    color: #444444;
    font-weight: 600;
}

.meta-label-muted {
    font-size: 12px;
    color: #aaaaaa;
}

/* Structural Detail Classes */
.margin-bottom-sm { margin-bottom: 15px; }
.margin-top-md { margin-top: 20px; }
.font-xs { font-size: 12px; }
.font-base { font-size: 16px; }
.pointer { cursor: pointer; }

/* --- 18. TEMPLATE VIEW COMPONENT: USER REGISTRATION HUB --- */
.reg-box-constrain {
    width: 100%;
    max-width: 500px;
}

.form-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* Fallback breakpoint for smaller mobile viewports */
@media (max-width: 480px) {
    .form-split-grid {
        grid-template-columns: 1fr;
    }
}

.select-dropdown {
    padding: 12px;
    border: 2px solid #111111;
    border-radius: 4px;
    font-size: 15px;
    background-color: #ffffff;
    color: #111111;
    font-weight: 600;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111111' d='M0 0l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.select-dropdown:focus {
    border-color: #2ecc71;
}

.form-hint-text {
    display: block;
    color: #888888;
    font-size: 11px;
    margin-top: 6px;
    font-weight: 500;
}

.compliance-footer-text {
    text-align: center;
    font-size: 11px;
    color: #aaaaaa;
    margin-top: 20px;
    line-height: 1.4;
    font-weight: 500;
}

/* Structural Detail Overrides */
.no-margin { margin-bottom: 0; }
.margin-bottom-md { margin-bottom: 25px; }

/* --- 19. TEMPLATE VIEW COMPONENT: APPLICATION USER DASHBOARD --- */
.dashboard-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.dashboard-welcome-title {
    margin: 0;
    color: #111111;
    font-weight: 800;
    font-size: 2.2rem;
}

.premium-badge-padding {
    padding: 10px 20px !important;
}

/* Operational Stats Cards Matrix Layout */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-metric-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 6px;
    border: 2px solid #111111;
    text-align: center;
}

.stat-card-label {
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 11px;
}

.stat-card-number {
    margin: 10px 0 0 0;
    font-size: 2rem;
    font-weight: 800;
    color: #111111;
}

.text-green { color: #2ecc71 !important; }

/* Structural Grid Controls Split Core Layouts */
.dashboard-workspace-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 991px) {
    .dashboard-workspace-split {
        grid-template-columns: 1fr;
    }
}

.dashboard-main-panel {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 6px;
    padding: 30px;
}

.workspace-panel-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 800;
    font-size: 1.4rem;
    color: #111111;
}

/* UI Table Data Render Component */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
}

.dashboard-data-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-data-table th {
    text-align: left;
    border-bottom: 2px solid #111111;
    padding: 12px 0;
    color: #111111;
    font-weight: 800;
    font-size: 14px;
}

.dashboard-data-table td {
    padding: 15px 0;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
}

.table-cell-bold {
    font-weight: 700;
    color: #111111;
}

.table-cell-date {
    font-size: 13px;
    color: #555555;
    font-weight: 500;
}

.badge-review-tag {
    font-size: 11px;
    background: #111111;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

.table-empty-fallback-row {
    padding: 40px !important;
    text-align: center;
    color: #777777;
    font-weight: 500;
}

/* Sidebar Utilities Widgets Frame */
.dashboard-sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-tip-card {
    background: #111111;
    color: #ffffff;
    padding: 25px;
    border-radius: 6px;
}

.tip-card-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #2ecc71; /* Highlight system green header callout accent */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}

.tip-card-body {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 15px 0;
    color: #dddddd;
}

.tip-card-link {
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tip-card-link:hover {
    color: #2ecc71;
}

.sidebar-recommendations-card {
    background: #ffffff;
    border: 2px solid #111111;
    padding: 25px;
    border-radius: 6px;
}

.recommendation-card-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 800;
    color: #111111;
}

.recommendation-row-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #eef0f2;
    padding-bottom: 12px;
}

.recommendation-row-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.recommendation-item-link {
    text-decoration: none;
    color: #111111;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    line-height: 1.4;
}

.recommendation-item-link:hover {
    color: #2ecc71;
}

/* Micro Helpers Utility */
.margin-top-xs { margin-top: 8px; }
.display-inline-block { display: inline-block; }

/* --- 20. TEMPLATE VIEW COMPONENT: LEGAL & PRIVACY LAYOUTS --- */
.policy-hero-banner {
    background: #111111;
    color: #ffffff;
    padding: 60px 5%;
    text-align: center;
}

.policy-title-main {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
    font-weight: 800;
}

.policy-effective-stamp {
    opacity: 0.8;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.policy-body-container {
    padding: 60px 5%;
    max-width: 900px;
    margin: 0 auto;
}

.policy-content-card {
    background: #ffffff;
    padding: 40px;
    border: 2px solid #111111;
    border-radius: 6px;
}

.policy-section-heading {
    color: #111111;
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.policy-text-paragraph {
    color: #444444;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 15px;
}

.policy-bullet-list {
    padding-left: 20px;
    margin-bottom: 25px;
    line-height: 1.8;
    color: #444444;
    font-size: 15px;
}

.policy-bullet-list li {
    margin-bottom: 8px;
}

.policy-bullet-list li strong {
    color: #111111;
}

.policy-divider-line {
    border: 0;
    border-top: 2px solid #111111;
    margin: 30px 0;
}

/* POPIA Notice Block Styling */
.policy-officer-alert-box {
    margin-top: 40px;
    padding: 25px;
    background: #ffffff;
    border: 2px solid #111111;
    border-left: 6px solid #2ecc71; /* Thick left border themed signature Light Green */
    border-radius: 4px;
}

.officer-alert-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 800;
    color: #111111;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.officer-alert-body {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #34495e;
    font-weight: 500;
}

/* --- 21. TEMPLATE VIEW COMPONENT: CUSTOMER HELP & SUPPORT HUB --- */
.support-hero-banner {
    background: #ffffff;
    padding: 60px 5%;
    border-bottom: 2px solid #111111;
}

.hero-narrow-constrain {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.support-hero-subtitle {
    color: #555555;
    font-size: 1.1rem;
    margin-top: 15px;
    line-height: 1.6;
}

.support-flex-layout {
    padding: 60px 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.support-split-col {
    flex: 1;
    min-width: 300px;
}

.support-sidebar-heading {
    margin-bottom: 30px;
    color: #111111;
    font-weight: 800;
    font-size: 1.8rem;
}

/* FAQ Component Selectors */
.faq-item-block {
    margin-bottom: 25px;
    border-bottom: 1px solid #eef0f2;
    padding-bottom: 20px;
}

.faq-item-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-question-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: #111111;
    font-weight: 700;
    font-size: 1.1rem;
}

.faq-answer-body {
    color: #555555;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.faq-answer-body strong {
    color: #111111;
}

/* Support Form Panel Architecture Override */
.support-card-panel {
    background: #ffffff;
    border: 2px solid #111111;
    padding: 40px;
    border-radius: 6px;
}

.textarea-field {
    width: 100%;
    padding: 12px;
    border: 2px solid #111111;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 15px;
    color: #111111;
    background: #ffffff;
    font-family: inherit;
    resize: vertical;
    outline: none;
}

.textarea-field:focus {
    border-color: #2ecc71; /* Accent Light Green focus trigger matching fields */
}

/* --- 23. FOOTER FONT ICON OPTIMIZATIONS --- */
.footer-icon-glyph {
    color: #ffffff;             /* Crisp, solid white vector fill */
    font-size: 14px;
    width: 24px;                /* Creates structured, perfectly square horizontal container boundaries */
    text-align: center;
    margin-right: 8px;          /* Clean visual spacing separation from raw text details */
    display: inline-block;
}

/* Optional hover optimization specifically targeting contact list text lines */
.footer-contact-metadata-list li:hover .footer-icon-glyph {
    color: #2ecc71;             /* Themed transition link action back to Light Green on hover */
    transition: color 0.2s ease-in-out;
}

/* --- 22. GLOBAL SYSTEM MODULE LAYOUT: COMPLIANCE FOOTER --- */
.main-footer {
    background: #111111; /* Deep Black solid foundation block */
    color: #ffffff;
    padding: 60px 5% 20px 5%;
    margin-top: 50px;
    border-top: 4px solid #2ecc71; /* Accent Light Green top-border delimiter */
}

.footer-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-title-brand {
    color: #2ecc71; /* Signature Light Green text highlight */
    margin: 0 0 20px 0;
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-column-heading {
    color: #ffffff;
    margin: 0 0 20px 0;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-meta-description {
    color: #aaaaaa;
    line-height: 1.6;
    font-size: 14px;
    margin: 0 0 15px 0;
}

/* Metadata lists layout structural styling */
.footer-contact-metadata-list,
.footer-navigation-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-metadata-list li {
    margin-bottom: 10px;
    color: #aaaaaa;
    font-size: 14px;
    font-weight: 500;
}

.footer-glyph {
    margin-right: 6px;
}

.footer-navigation-links-list li {
    line-height: 2.2;
}

.footer-interactive-link {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

/* Interactive Focus Routing Hover states */
.footer-interactive-link:hover {
    color: #2ecc71; /* Transitions from muted grey smoothly into theme light green */
}

/* Newsletter Capture Components */
.footer-newsletter-hint {
    color: #aaaaaa;
    font-size: 14px;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.footer-inline-subscription-form {
    display: flex;
    gap: 8px;
}

.footer-input-field {
    padding: 12px;
    border: 2px solid #333333;
    border-radius: 4px;
    flex: 1;
    outline: none;
    font-size: 14px;
    background: #ffffff;
    color: #111111;
    font-weight: 600;
}

.footer-input-field:focus {
    border-color: #2ecc71;
}

.footer-button-action {
    padding: 12px 20px;
    background: #2ecc71; /* High contrast themed light green form trigger button */
    color: #111111;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    transition: background 0.2s ease;
}

.footer-button-action:hover {
    background: #ffffff;
    color: #111111;
}

.footer-structural-divider {
    border: 0;
    border-top: 1px solid #222222;
    margin: 0 0 20px 0;
}

.footer-bottom-compliance-row {
    text-align: center;
    color: #666666;
    font-size: 13px;
    font-weight: 500;
}

/* --- 24. INDEX LANDING MODULE: TESTIMONIAL SLIDER --- */
.testimonials-slider-section {
    background: #fdfdfd;
    padding: 80px 0;
    border-top: 2px solid #111111;
    overflow: hidden;
}

.testimonials-viewport-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

.testimonials-slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Base Card Object Configured with Solid White Fill & Crisp Hard Drop Shadow Box */
.testimonial-slide-card {
    background: #ffffff;          /* Solid White Card Base */
    border: 2px solid #111111;    /* Sharp Frame Boundary Line */
    padding: 40px;
    border-radius: 6px;
    min-width: calc(33.333% - 20px); /* 3 Up on Large Screens */
    box-shadow: 6px 6px 0px #111111; /* Sharp Architectural Box Shadow Block */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.testimonial-rating-stars {
    color: #2ecc71; /* Highlighted Signature Light Green fill */
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: 2px;
}

.testimonial-quote-text {
    font-size: 15px;
    line-height: 1.6;
    color: #444444;
    margin: 0 0 25px 0;
    font-style: italic;
}

.testimonial-profile-footer {
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
}

.testimonial-author-name {
    margin: 0 0 4px 0;
    font-weight: 800;
    font-size: 15px;
    color: #111111;
}

.testimonial-author-role {
    font-size: 12px;
    color: #777777;
    font-weight: 600;
}

/* Control Interfaces Layout Mapping */
.slider-controls-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 50px;
}

.slider-arrow-btn {
    background: #ffffff;
    border: 2px solid #111111;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #111111;
    box-shadow: 3px 3px 0px #111111;
    transition: all 0.15s ease;
}

.slider-arrow-btn:hover {
    background: #2ecc71; /* Pop active states to light green cleanly */
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #111111;
}

.slider-arrow-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px #111111;
}

.slider-dot-indicators {
    display: flex;
    gap: 10px;
}

.slider-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 1px solid #111111;
    cursor: pointer;
    transition: background 0.2s ease;
}

.slider-step-dot.is-active {
    background: #2ecc71; /* Current slide marker matched to theme accent */
    width: 24px;
    border-radius: 10px;
}

/* Responsive Grid Boundaries Custom Calculations */
@media (max-width: 992px) {
    .testimonial-slide-card {
        min-width: calc(50% - 15px); /* 2 Up view ports on Tablets */
    }
}

@media (max-width: 650px) {
    .testimonial-slide-card {
        min-width: 100%; /* 1 Up stack on compact mobile view screens */
    }
}

/* ==========================================================================
   TEMPLATING MODULE COMPONENT: SPLIT PROMO ROW GENERATOR
   ========================================================================== */

.feature-split-section {
    background: #ffffff; /* Stays crisp on stark white canvas background */
    padding: 80px 5%;
    border-bottom: 2px solid #111111; /* System line separator rule */
}

.feature-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Rigid clean split dual layouts */
    gap: 30px;
    align-items: center; /* Vertically centers typography rows against media blocks */
}

/* Left Column Image Frames */
.feature-column-media {
    width: 100%;
    height: 200px;
}

.feature-display-img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border: 2px solid #111111; /* Clean black border framing consistency */
    border-radius: 4px;
}

/* Right Column Typography Stacks */
.feature-column-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-main-heading {
    font-size: 2.2rem;
    color: #111111;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.feature-narrative-paragraph {
    font-size: 16px;
    color: #444444;
    line-height: 1.7;
    margin: 0;
}

/* --- INTERFACE VIEW MEDIA RESPONSIVENESS ADJUSTMENTS --- */
@media (max-width: 991px) {
    .feature-split-grid {
        gap: 35px; /* Compresses spacing for tablet layouts */
    }
    .feature-main-heading {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .feature-split-section {
        padding: 50px 5%;
    }
    
    .feature-split-grid {
        grid-template-columns: 1fr; /* Drops layouts cleanly to a single-column block stacked list on mobile devices */
        gap: 30px;
    }
    
    .feature-column-content {
        order: 2; /* Forces text to flow under the illustration asset safely */
    }
    
    .feature-column-media {
        order: 1;
    }
}

/* ==========================================================================
   TEMPLATING MODULE COMPONENT: SPLIT PROMO ROW GENERATOR (REVERSED FLOW)
   ========================================================================== */

/* Optional alternating utility to provide a very light background tint contrast */
.feature-bg-alt {
    background: #fafafa; 
}

/* 
   Note: The core layout drops directly onto your existing .feature-split-grid 
   and .feature-column-media styles perfectly. The responsive media overrides below 
   ensure that the layout stacks uniformly on mobile viewports.
*/

/* --- INTERFACE VIEW MEDIA RESPONSIVENESS ADJUSTMENTS (REVERSED STACKING) --- */
@media (max-width: 768px) {
    /* 
       For the reversed section, we want the image to stack ABOVE the text on mobile, 
       matching the visual pattern of your first layout section.
    */
    .feature-bg-alt .feature-split-grid {
        display: flex;
        flex-direction: column;
    }
    
    .feature-bg-alt .feature-column-media {
        order: 1; /* Pushes image to the top of the mobile stack */
        margin-bottom: 10px;
    }
    
    .feature-bg-alt .feature-column-content {
        order: 2; /* Keeps the typography flowing neatly underneath */
    }
}

/* ==========================================================================
   THEME RE-ENGINEERING: STARK BLACK & LIGHT GREEN DESIGN PIPELINE
   ========================================================================== */

.tender-view-container.theme-green-black {
    padding: 60px 5%;
    max-width: 1100px;
    margin: 0 auto;
}

.tender-navigation {
    margin-bottom: 30px;
}

.back-to-tenders {
    text-decoration: none;
    color: #111111;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 2px solid #2ecc71;
    padding-bottom: 2px;
    transition: all 0.2s ease;
}

.back-to-tenders:hover {
    color: #2ecc71;
}

.tender-layout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Header Text Rules */
.tender-main-title {
    font-size: 2.4rem;
    color: #111111;
    margin: 15px 0 20px 0;
    line-height: 1.2;
    font-weight: 800;
}

.tender-badge-ref {
    background: #111111;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
}

.tender-badge-bbee {
    background: #e8f8f5;
    color: #27ae60;
    padding: 5px 13px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid #a3e4d7;
}

.tender-meta-row {
    display: flex;
    gap: 20px;
    color: #555555;
    font-size: 15px;
}

.tender-divider {
    border: 0;
    border-top: 2px solid #111111;
    margin: 30px 0;
}

.tender-body-content {
    padding: 0 !important;
    line-height: 1.8;
    color: #222222;
}

/* Sidebar Box Container Specs */
.tender-card-sticky {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 30px;
    box-shadow: 6px 6px 0px rgba(17, 17, 17, 0.05);
}

.sidebar-info-row {
    margin-bottom: 25px;
}

.sidebar-info-row.metric-critical {
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-field-label {
    display: block;
    font-size: 11px;
    color: #777777;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.sidebar-field-value {
    font-weight: 900;
    font-family: monospace;
}

.sidebar-field-value.text-danger {
    font-size: 20px;
    color: #c0392b;
}

.sidebar-field-value.text-success {
    font-size: 24px;
    color: #111111;
    background: #e8f8f5;
    display: inline-block;
    padding: 2px 8px;
    border-left: 3px solid #2ecc71;
}

/* Action Center Download Vault Box */
.sidebar-document-vault {
    background: #fafafa;
    padding: 20px;
    border-radius: 4px;
    margin-top: 30px;
    border: 1px solid #111111;
}

.vault-heading {
    margin: 0 0 15px 0;
    color: #111111;
    font-size: 15px;
    font-weight: bold;
}

.btn-vault-download {
    display: block;
    text-align: center;
    background: #2ecc71;
    color: #111111;
    padding: 14px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #111111;
    box-shadow: 3px 3px 0px #111111;
    transition: all 0.15s ease;
}

.btn-vault-download:hover {
    background: #27ae60;
    color: #ffffff;
    box-shadow: 0px 0px 0px #111111;
    transform: translate(2px, 2px);
}

.auth-gate-link {
    color: #2ecc71;
    font-weight: bold;
    text-decoration: none;
}

/* Interactive Status Components */
.sidebar-status-container {
    margin-top: 25px;
    text-align: center;
}

.status-pill {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    border: 2px solid #111111;
}

.status-pill.status-active {
    background: #2ecc71;
    color: #111111;
}

.status-pill.status-closed {
    background: #111111;
    color: #ffffff;
}

.sidebar-notice-box {
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: #111111;
    border: 2px dashed #2ecc71;
}

/* --- RESPONSIVE WORKFLOW HOOKS --- */
@media (max-width: 768px) {
    .tender-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .tender-sidebar { order: 2; }
    .tender-main-content { order: 1; }
    .tender-main-title { font-size: 1.9rem; }
}

/* --- ICON INLINE ADJUSTMENT RULES --- */
.icon-spacing {
    margin-right: 8px;
    display: inline-block;
    vertical-align: -1px;
}

.icon-spacing-left {
    margin-left: 6px;
    display: inline-block;
    vertical-align: -1px;
}

/* Fixes for Font Awesome icons shifting button layout tracking lines */
.btn-vault-download i, 
.back-to-tenders i,
.tender-meta-row i {
    font-size: 0.95em;
}

/* ==========================================================================
   MODULE PLATFORM LAYER: PROFILE ACCOUNT CONTROL INTERFACE
   ========================================================================== */

.profile-view-container.theme-green-black {
    padding: 60px 5%;
    max-width: 850px;
    margin: 0 auto;
}

.profile-header-block {
    margin-bottom: 30px;
}

.profile-main-title {
    font-size: 2.2rem;
    color: #111111;
    margin: 0 0 8px 0;
    font-weight: 800;
}

.profile-subtitle {
    color: #555555;
    margin: 0;
    font-size: 15px;
}

/* System Alerts Config flags */
.alert-box {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #111111;
}

.alert-box.alert-success {
    background: #e8f8f5;
    color: #111111;
    border-color: #2ecc71;
}

.alert-box.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border-color: #111111;
}

/* Core Panel Container */
.profile-card-form {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 6px 6px 0px rgba(17, 17, 17, 0.05);
    padding: 12px; /* Uniform 12px padding top, right, bottom, and left */
}

/* Membership Ribbon Bars */
.membership-status-banner {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #111111;
    flex-wrap: wrap;
    gap: 15px;
}

.membership-status-banner.status-premium {
    background: #e8f8f5;
}

.membership-status-banner.status-free {
    background: #fafafa;
}

.membership-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111111;
}

.text-green {
    color: #2ecc71;
}

.btn-upgrade-action {
    font-size: 12px;
    color: #111111;
    font-weight: bold;
    text-decoration: none;
    background: #2ecc71;
    padding: 6px 14px;
    border-radius: 4px;
    border: 2px solid #111111;
    transition: all 0.15s ease;
}

.btn-upgrade-action:hover {
    background: #111111;
    color: #ffffff;
}

/* Input Fields & Forms Columns */
.form-padded-body {
    padding: 40px 30px;
}

.form-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 0;
}

.form-group.spacing-bottom-large {
    margin-bottom: 35px;
}

.form-field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 11px;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #111111;
    border-radius: 4px;
    font-size: 15px;
    background: #ffffff;
    color: #111111;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #2ecc71;
}

.select-dropdown {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
    padding-right: 40px;
}

/* Disabled Form Field Handling Wrapper */
.input-wrapper.disabled-wrapper {
    position: relative;
}

.field-status-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999999;
    font-size: 13px;
}

.form-control.field-disabled {
    padding-left: 38px;
    background: #fafafa;
    color: #777777;
    border-color: #cccccc;
    cursor: not-allowed;
}

/* Submit Action Call */
.btn-profile-submit {
    background: #111111;
    color: #ffffff;
    border: 2px solid #111111;
    padding: 16px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    font-size: 16px;
    box-shadow: 4px 4px 0px #2ecc71;
    transition: all 0.15s ease;
}

.btn-profile-submit:hover {
    background: #2ecc71;
    color: #111111;
    box-shadow: 0px 0px 0px #2ecc71;
}

.profile-footer-navigation {
    margin-top: 30px;
    text-align: center;
}

.profile-footer-navigation .back-link {
    color: #555555;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.2s ease;
}

.profile-footer-navigation .back-link:hover {
    color: #111111;
}

/* --- RESPONSIVE ADAPTABILITY HOOKS --- */
@media (max-width: 768px) {
    .form-grid-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .form-padded-body {
        padding: 30px 20px;
    }
    .membership-status-banner {
        padding: 15px 20px;
    }
}

/* ==========================================================================
   NETSEF CORE ARCHITECTURE: WIDE ONBOARDING ALERTS GRID
   ========================================================================== */
.onboarding-alert-section {
    padding: 80px 20px;
    background: #ffffff;
}

.onboarding-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.onboarding-section-header .profile-main-title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.onboarding-section-header .profile-subtitle {
    max-width: 650px;
    margin: 0 auto;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

/* Wide Responsive Grid Config */
.onboarding-columns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    max-width: 1200px; /* Increased framework constraints for maximum card width */
    margin: 0 auto;
}

/* Card Overrides & Base Alignment Hooks */
.onboarding-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 45px 30px;
    box-shadow: 6px 6px 0px #111111;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Highlight Variant for Final Stage Action Callout */
.onboarding-card-focus {
    box-shadow: 8px 8px 0px #2ecc71;
}

/* SVG Badge Containers */
.onboarding-icon-badge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.badge-accent-light {
    background: #e8f8f5;
    box-shadow: 3px 3px 0px #2ecc71;
}

.badge-accent-dark {
    background: #111111;
    box-shadow: 3px 3px 0px #2ecc71;
}

/* Structural Card Typography Rules */
.onboarding-step-title {
    font-size: 18px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.onboarding-step-desc {
    font-size: 14px;
    color: #444444;
    line-height: 1.6;
    margin: 0;
}

/* Tablet and Smartphone Grid Breakdowns */
@media (max-width: 991px) {
    .onboarding-columns-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 550px;
    }
    .onboarding-card {
        padding: 35px 25px;
    }
}

/* ==========================================================================
   NETSEF CORE ARCHITECTURE: 5-COLUMN WORKFLOW PIPELINE WITH ARROWS
   ========================================================================== */
.workflow-pipeline-section {
    padding: 80px 20px;
    background: #fafafa;
    border-top: 1px solid #eeeeee;
}

.workflow-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.workflow-section-header .profile-main-title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.workflow-section-header .profile-subtitle {
    max-width: 650px;
    margin: 0 auto;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

/* Row Track Engine */
.workflow-pipeline-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Individual Column Node */
.workflow-step-node {
    position: relative;
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 40px 20px 30px 20px;
    box-shadow: 4px 4px 0px #111111;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.workflow-final-node {
    box-shadow: 5px 5px 0px #2ecc71;
}

/* CSS Native Pure Arrow Construct */
.workflow-step-node:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 900;
    color: #111111;
    z-index: 5;
}

/* SVG Round Elements */
.workflow-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.badge-step-active {
    background: #e8f8f5;
    color: #111111;
    box-shadow: 2px 2px 0px #2ecc71;
}

.badge-step-focus {
    background: #111111;
    color: #2ecc71;
    box-shadow: 2px 2px 0px #2ecc71;
}

/* Typography elements */
.workflow-node-title {
    font-size: 16px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.workflow-node-desc {
    font-size: 13px;
    color: #555555;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE LAYOUT MATRIX (DEGRADES TO CLEAN VERTICAL STACK)
   ========================================================================== */
@media (max-width: 1199px) {
    .workflow-step-node:not(:last-child)::after {
        right: -16px;
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .workflow-pipeline-track {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 480px;
    }

    /* Redirect Arrow Directions Downward */
    .workflow-step-node:not(:last-child)::after {
        content: "↓";
        right: auto;
        left: 50%;
        bottom: -34px;
        top: auto;
        transform: translateX(-50%);
        font-size: 26px;
    }
}

/* ==========================================================================
   LATEST SHOWCASE FEED ARCHITECTURE (3 COLUMNS MAX)
   ========================================================================== */
.tenders-feed-section {
    padding: 80px 20px;
    background: #ffffff;
}

.tenders-feed-header {
    text-align: center;
    margin-bottom: 55px;
}

.tenders-feed-header .profile-main-title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.tenders-feed-header .profile-subtitle {
    max-width: 650px;
    margin: 0 auto;
    color: #555555;
    font-size: 16px;
    line-height: 1.6;
}

/* Rigid Grid Framework Control */
.tenders-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

.tender-feed-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 30px;
    box-shadow: 5px 5px 0px #111111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: transform 0.2s ease;
}

.tender-feed-card:hover {
    transform: translateY(-2px);
}

.tender-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.flat-solid-icon {
    width: 16px;
    height: 16px;
    fill: #111111;
    margin-right: 6px;
    display: inline-block;
    vertical-align: text-top;
}

.tender-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border: 1.5px solid #111111;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    color: #111111;
}

.badge-infrastructure { background: #e8f8f5; }
.badge-technology { background: #ebf5fb; }
.badge-services { background: #fef9e7; }

.tender-date {
    font-size: 12px;
    color: #777777;
    font-weight: 600;
}

.tender-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.tender-card-excerpt {
    font-size: 14px;
    color: #545454;
    line-height: 1.6;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

.tender-card-footer {
    border-top: 1px dashed #e0e0e0;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tender-location {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
}

.tender-location i {
    color: #2ecc71;
    margin-right: 4px;
}

.tender-view-link {
    font-size: 13px;
    font-weight: 800;
    color: #111111;
    text-decoration: none;
}

.tender-view-link:hover {
    color: #2ecc71;
}

.tenders-feed-action-zone {
    text-align: center;
}

/* Brutalist Button Form Element */
.btn-browse-wide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background: #111111;
    color: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 5px 5px 0px #2ecc71;
    box-sizing: border-box;
    transition: background 0.15s ease;
}

.btn-browse-wide:hover {
    background: #222222;
}

.icon-spacing-left {
    margin-left: 10px;
}

@media (max-width: 991px) {
    .tenders-feed-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 500px;
    }
}

/* ==========================================================================
   NETSEF CORE ARCHITECTURE: ABOUT US PAGE LAYOUT
   ========================================================================== */
.about-page-container {
    background: #ffffff;
    box-sizing: border-box;
}

/* Hero Section */
.about-hero-block {
    background: #fafafa;
    padding: 90px 20px;
    text-align: center;
    border-bottom: 2px solid #111111;
}

.about-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.about-hero-block .profile-main-title {
    font-size: 3rem;
    font-weight: 900;
    color: #111111;
    letter-spacing: -1.5px;
    margin: 0 0 20px 0;
}

.about-hero-block .profile-subtitle {
    font-size: 18px;
    color: #444444;
    line-height: 1.6;
    margin: 0;
}

/* Mission Layout */
.about-mission-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 20px 20px;
}

.mission-card {
    background: #ffffff;
    border: 2px solid #111111;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 6px 6px 0px #111111;
}

.section-sub-title {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: #111111;
    margin: 0 0 15px 0;
}

.body-text-lead {
    font-size: 16px;
    color: #333333;
    line-height: 1.7;
    margin: 0;
}

/* Chronological Timeline Grid */
.about-timeline-section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline-header {
    text-align: center;
    margin-bottom: 60px;
}

.timeline-header .profile-main-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.historical-timeline-track {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 40px;
    border-left: 3px dashed #111111;
}

.timeline-node {
    position: relative;
    margin-bottom: 45px;
}

.timeline-node:last-child {
    margin-bottom: 0;
}

/* Neobrutalist Date Tag Floating Over Dashed Line */
.node-marker-badge {
    position: absolute;
    left: -73px;
    top: 20px;
    width: 60px;
    background: #ffffff;
    border: 2px solid #111111;
    color: #111111;
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    padding: 6px 0;
    border-radius: 3px;
    box-shadow: 3px 3px 0px #111111;
}

.badge-highlight {
    background: #111111;
    color: #2ecc71;
    box-shadow: 3px 3px 0px #2ecc71;
}

.node-content-box {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 30px;
    box-shadow: 4px 4px 0px #111111;
}

.focus-border {
    box-shadow: 6px 6px 0px #2ecc71;
}

.node-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #111111;
}

.node-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* Footer Bottom CTA Block */
.about-footer-cta {
    background: #fafafa;
    padding: 80px 20px;
    text-align: center;
    border-top: 2px solid #111111;
}

.cta-inner-box {
    max-width: 600px;
    margin: 0 auto;
}

.cta-title {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 12px 0;
    color: #111111;
}

.cta-desc {
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

/* Mobile Screen Breakdowns */
@media (max-width: 767px) {
    .historical-timeline-track {
        padding-left: 0;
        border-left: none;
    }
    .node-marker-badge {
        position: relative;
        left: 0;
        top: 0;
        display: inline-block;
        margin-bottom: 12px;
        width: 70px;
    }
    .about-hero-block .profile-main-title {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   NETSEF CORE ARCHITECTURE: PLATFORM ADVANTAGES GRID (3 COLUMNS)
   ========================================================================== */
.about-advantages-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 60px 20px;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    box-sizing: border-box;
}

.advantage-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 35px 30px;
    box-shadow: 5px 5px 0px #111111;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.advantage-card:hover {
    transform: translateY(-3px);
    box-shadow: 7px 7px 0px #2ecc71;
}

/* Vector Canvas Constraints */
.advantage-icon-frame {
    margin-bottom: 20px;
}

.flat-solid-icon-large {
    width: 32px;
    height: 32px;
    fill: #111111;
    display: block;
}

/* Hover-state shifts fill matching your agency theme */
.advantage-card:hover .flat-solid-icon-large {
    fill: #2ecc71;
}

.advantage-title {
    font-size: 20px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.advantage-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONSTRAINTS
   ========================================================================== */
@media (max-width: 991px) {
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .advantage-card {
        padding: 30px 25px;
    }
}


.tenders-main-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #ffffff;
}

/* Layout Header Grid Matrix */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #111111;
    padding-bottom: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}
.section-title-group h1 { 
    font-size: 36px; 
    font-weight: 900; 
    color: #111111; 
    margin: 0 0 8px 0; 
    letter-spacing: -1px; 
}
.section-subtitle-text { 
    font-size: 15px; 
    color: #444444; 
    margin: 0; 
}

/* Strict Brutalist Tier Status Badges */
.tier-indicator-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 2px solid #111111;
    border-radius: 4px;
    margin-top: 12px;
    box-shadow: 2px 2px 0px #111111;
}
.tier-guest { background: #ffffff; color: #ff3333; }
.tier-free { background: #ffffff; color: #111111; }
.tier-premium { background: #2ecc71; color: #111111; }

/* High Contrast Form Elements */
.filter-form-control select {
    padding: 12px 40px 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    background-color: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    box-shadow: 4px 4px 0px #111111;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23111111' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.filter-form-control select:focus {
    outline: none;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #2ecc71;
}

/* Solid Card Layout Stack */
.tenders-list-stack { 
    display: flex; 
    flex-direction: column; 
    gap: 25px; 
}
.tender-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 30px;
    box-shadow: 5px 5px 0px #111111;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tender-item-card:hover { 
    transform: translate(-3px, -3px); 
    box-shadow: 8px 8px 0px #2ecc71; 
}

.tender-meta-tags { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 15px; 
}
.badge-ref { 
    background: #111111; 
    color: #ffffff; 
    font-size: 11px; 
    font-weight: 700; 
    padding: 4px 10px; 
    border-radius: 2px; 
    text-transform: uppercase;
}
.meta-location { 
    font-size: 13px; 
    color: #111111; 
    font-weight: 700; 
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.meta-location i { color: #2ecc71; }

.tender-card-title { 
    font-size: 22px; 
    font-weight: 800; 
    margin: 0 0 10px 0; 
    letter-spacing: -0.5px; 
}
.tender-card-title a { 
    color: #111111; 
    text-decoration: none; 
}
.tender-card-title a:hover { 
    color: #2ecc71; 
    text-decoration: underline; 
}

.tender-card-subinfo { 
    font-size: 14px; 
    color: #444444; 
    margin-bottom: 15px; 
    font-weight: 500; 
}
.tender-card-subinfo i { 
    color: #111111; 
    margin-right: 4px; 
}
.tender-card-excerpt { 
    font-size: 14px; 
    color: #555555; 
    line-height: 1.6; 
    margin: 0; 
    max-width: 800px; 
}

/* Action Panels Alignment */
.tender-action-block { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    gap: 20px; 
    min-width: 200px; 
}
.closing-date-wrapper { text-align: right; }
.closing-label { 
    display: block; 
    font-size: 11px; 
    text-transform: uppercase; 
    color: #666666; 
    font-weight: 800; 
    letter-spacing: 0.5px; 
    margin-bottom: 4px; 
}
.closing-date { 
    font-size: 15px; 
    font-weight: 800; 
    color: #111111; 
    background: #ffffff;
    border: 2px solid #111111;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-flex; 
    align-items: center; 
    gap: 6px;
    box-shadow: 2px 2px 0px #ff3333;
}
.closing-date i { color: #ff3333; }

/* Structural Bold Action Button Hierarchy */
.btn-details { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #111111; 
    color: #ffffff; 
    text-decoration: none; 
    padding: 12px 24px; 
    font-size: 14px; 
    font-weight: 700; 
    border: 2px solid #111111;
    border-radius: 4px; 
    width: 100%; 
    box-sizing: border-box; 
    box-shadow: 3px 3px 0px #2ecc71;
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-details:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #2ecc71;
}

/* Conversion CTA Wrappers */
.tier-gateways-container {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #111111;
}
.cta-conversion-block {
    text-align: center;
    background: #ffffff;
    border: 2px solid #111111;
    padding: 45px 20px;
    border-radius: 4px;
    box-shadow: 6px 6px 0px #111111;
}
.standard-free-card {
    box-shadow: 6px 6px 0px #2ecc71;
}
.cta-heading { 
    font-size: 24px; 
    font-weight: 900; 
    color: #111111; 
    margin: 0 0 10px 0; 
    letter-spacing: -0.5px; 
}
.cta-description { 
    font-size: 15px; 
    color: #444444; 
    margin: 0 0 25px 0; 
}
.btn-upgrade-action {
    display: inline-flex;
    align-items: center;
    background: #2ecc71;
    color: #111111;
    text-decoration: none;
    padding: 14px 32px;
    font-weight: 800;
    font-size: 15px;
    border: 2px solid #111111;
    border-radius: 4px;
    box-shadow: 4px 4px 0px #111111;
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-upgrade-action:hover { 
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #111111;
}

/* Pagination Interfaces Styling Rules */
.pagination-nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 20px 0;
}
.pagination-stats { 
    font-size: 14px; 
    color: #111111; 
    font-weight: 600; 
}
.pagination-controls-buttons { 
    display: flex; 
    gap: 12px; 
}
.btn-nav-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 2px solid #111111;
    color: #111111;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    box-shadow: 3px 3px 0px #111111;
}
.btn-nav-step:hover:not(.disabled-link) { 
    background: #2ecc71;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #111111;
}
.disabled-link { 
    opacity: 0.4; 
    box-shadow: none; 
    cursor: not-allowed; 
    pointer-events: none; 
}

/* Fallback Empty States */
.empty-state-fallback {
    text-align: center;
    padding: 60px 20px;
    border: 2px dashed #111111;
    border-radius: 4px;
    background: #ffffff;
}
.empty-state-fallback i { 
    font-size: 40px; 
    color: #111111; 
    margin-bottom: 16px; 
}
.empty-state-fallback h3 { 
    font-size: 20px; 
    font-weight: 800; 
    color: #111111; 
}

/* Responsive Structural Overrides */
@media (max-width: 768px) {
    .tender-item-card { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 20px; 
    }
    .tender-action-block { 
        width: 100%; 
        align-items: flex-start; 
        flex-direction: row; 
        justify-content: space-between; 
        border-top: 2px solid #111111; 
        padding-top: 20px; 
    }
    .closing-date-wrapper { text-align: left; }
    .btn-details { width: auto; }
    .pagination-nav-wrapper { 
        flex-direction: column; 
        gap: 15px; 
        text-align: center; 
    }
}

/* ==========================================================================
   Contractor Workspace Button Extensions
   ========================================================================== */
.btn-sourcing-preferences {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    background-color: #e8f8f5;
    color: #111111;
    border: 2px solid #2ecc71;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 3px 3px 0px #111111;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-sourcing-preferences:hover {
    background-color: #d1f2eb;
    color: #111111;
    text-decoration: none;
}

.btn-sourcing-preferences:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px #111111;
}

/* ==========================================================================
   Contractor Sourcing Preferences Page Elements
   ========================================================================== */

/* Page View Wrapper Layout */
.preferences-container {
    padding-top: 30px;
    padding-bottom: 40px;
}

/* Master Form Selection Layout Grid Split */
.preferences-split-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px; /* Reduced from 40px */
    align-items: start;
}

@media (max-width: 991px) {
    .preferences-split-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Vertical Stack Controller for Form Section Cards */
.preferences-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Tight vertical spacing between cards */
}

/* Functional Choice Selection Grid Containers */
.preference-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px; /* Reduced from 12px for closer items */
}

.province-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px; /* Reduced from 12px for closer items */
    padding: 12px; /* Uniform 12px padding top, right, bottom, and left */
}

/* Interactive Checkbox Label Blocks */
.preference-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px; /* Brought checkbox icon and text closer */
    padding: 8px 12px; /* Reduced from 14px 16px for a tighter box model */
    background: #fafafa;
    border: 2px solid #111111;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.preference-checkbox-label:hover {
    background: #f0f0f0;
    border-color: #2ecc71;
}

/* Custom Checkbox Node Settings */
.preference-checkbox-input {
    width: 16px; /* Scaled down slightly to match tight padding */
    height: 16px;
    accent-color: #2ecc71;
    cursor: pointer;
    margin: 0;
}

/* Form Submit Control Action Block */
.btn-preferences-save {
    background: #111111;
    color: #ffffff;
    border: 2px solid #111111;
    padding: 12px 24px; /* Tighter button padding */
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 4px 4px 0px #2ecc71;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-preferences-save:hover {
    background: #222222;
}

.btn-preferences-save:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #2ecc71;
}

/* ==========================================================================
   Contractor Dashboard Active Filter Layouts
   ========================================================================== */

/* Main Overview Matrix Card Box */
.matrix-overview-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 25px;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05);
}

/* Header Row positioning inside Content Card */
.matrix-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #111111;
    padding-bottom: 12px;
}

.matrix-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Section Title Flags inside Matrix Layout */
.matrix-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Flex Wrapper for dynamic badge groupings */
.matrix-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual Active Parameter Badges */
.matrix-active-badge {
    background: #fafafa;
    border: 2px solid #111111;
    color: #111111;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.1s ease;
}

.matrix-active-badge:hover {
    transform: translateY(-1px);
    background: #f1f1f1;
}

/* Dynamic FontAwesome Icon Accents */
.matrix-active-badge .fa-circle-check,
.matrix-active-badge .fa-map-pin {
    color: #2ecc71;
    font-size: 11px;
}

/* Fallback Container for unconfigured States */
.matrix-empty-fallback {
    margin: 0;
    font-size: 13px;
    color: #555555;
    line-height: 1.5;
    background: #fdf2f2;
    border: 2px dashed #e74c3c;
    padding: 12px 16px;
    border-radius: 4px;
    font-weight: 500;
}