/* ==========================================================================
   SteamAhead Frontend Dashboard Layout
   ========================================================================== */

/* ==========================================================================
   Layout Wrappers
   ========================================================================== */

/* Outer dashboard wrap ensuring full-width expansion inside the theme's flex container, 
   while preserving spacing for the floating mobile navigation menu. */
.steamahead-dashboard-wrap {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* Centered inner container restricting max dashboard width on desktop while providing 
   balanced vertical and mobile-friendly horizontal padding. */
.steamahead-dashboard-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.steamahead-account-wrap,
.steamahead-dash-overview {
    width: 100%;
    box-sizing: border-box;
}


/* Contextual Top Header
   ========================================================================== */

/* Master wrapper for the top navigation dashboard header area */
.steamahead-dash-header {
    margin-bottom: 25px;
}

/* Flex layout wrapping the greeting message and the profile role toggles */
.steamahead-dash-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Primary page title for user dashboard pages */
.steamahead-dash-title {
    margin: 0;
    font-size: 24px;
    color: #1d2327;
}

/* Subtitle for contextual descriptions below the welcome message */
.steamahead-dash-subtitle {
    font-size: 14px;
    color: #646970;
}


/* Interactive Role Switcher
   ========================================================================== */

/* Dropdown capsule wrapper for the context role switches */
.steamahead-role-switcher {
    background: #ffffff;
    border: 1px solid #ccd0d4;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Form block for standard form submissions */
.steamahead-role-form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Text descriptor label for the role selection dropdown list */
.steamahead-role-label {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

/* Styled select selector form dropdown element */
.steamahead-role-select {
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #8c8f94;
}


/* Actionable Alerts
   ========================================================================== */

/* Notice bar module for urgent missing user meta flags */
.steamahead-alert-bar {
    background: #fff8e5;
    border-left: 4px solid #dba617;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Warning message text output style configurations */
.steamahead-alert-message {
    font-size: 14px;
    color: #1d2327;
}

/* Action button to redirect users to profile update files */
.steamahead-alert-btn {
    font-size: 12px;
    height: auto;
    padding: 4px 10px;
    line-height: 1.5;
}


/* Swipeable Bottom Floating Navigation
   ========================================================================== */

/* Fixed bottom navigation drawer supporting native mobile touch-swipe interactions */
.steamahead-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #dcdcde;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 9999;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Row-flow list configuration for sticky viewport nav bars */
.steamahead-mobile-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 100%;
    width: max-content;
    justify-content: space-around;
    align-items: center;
}

/* Individual list item columns inside bottom layouts */
.steamahead-nav-item {
    margin: 0;
    border-top: 3px solid transparent;
}

/* Top border transition highlight for active pages */
.steamahead-nav-item.steamahead-active {
    border-top: 3px solid #3575d3;
}

/* Core menu linkage targets enclosing display labels and icons */
.steamahead-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    min-width: 90px;
    transition: color 0.2s ease;
    color: #50575e;
}

/* Blue link text color override mapping to active states */
.steamahead-nav-item.steamahead-active .steamahead-nav-link {
    color: #3575d3;
}

/* Styled Dashicons matching center targets */
.steamahead-nav-icon {
    font-size: 20px;
    height: 20px;
    width: 20px;
    margin-bottom: 4px;
}


/* Dashboard View Content
   ========================================================================== */

/* Main layout block wrapper for the child view partial components */
.steamahead-dash-overview {
    margin-top: 20px;
}

/* Section titles defining subsections within active pages */
.steamahead-section-title {
    font-size: 20px;
    margin-bottom: 15px;
    color: #1d2327;
}


/* Telemetry Metric Cards
   ========================================================================== */

/* Dynamic auto-scaling grid layouts targeting metric boxes */
.steamahead-dash-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Self-contained structural info container card components */
.steamahead-metric-card {
    background: #ffffff;
    border: 1px solid #ccd0d4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* Flex structure mapping details to secondary layout properties */
.steamahead-metric-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Tiny tracking labels centered on summary targets */
.steamahead-metric-label {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #646970;
}

/* Bold numeric value outputs representing query limits */
.steamahead-metric-value {
    font-size: 32px;
    font-weight: 700;
    color: #1d2327;
    margin-top: 10px;
}

/* Circular asset frame wraps enclosing summary iconography */
.steamahead-metric-icon-wrap {
    background: #f0f6fc;
    color: #3575d3;
    border-radius: 50%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dashicon alignments matching graphic targets */
.steamahead-metric-icon {
    font-size: 24px;
    height: 24px;
    width: 24px;
}

/* Separator dividers separating base footer labels from inner card boundaries */
.steamahead-metric-card-footer {
    margin-top: 15px;
    border-top: 1px solid #f0f0f1;
    padding-top: 10px;
}

/* Link selections targeting active deep-links */
.steamahead-metric-link {
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #3575d3;
}

/* Light subtext details centered inside standard cards */
.steamahead-metric-meta {
    font-size: 13px;
    color: #646970;
}


/* Dynamic Feature Announcement Blocks
   ========================================================================== */

/* Welcome and announcement module layouts */
.steamahead-welcome-card {
    background: #ffffff;
    border: 1px solid #ccd0d4;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    margin-bottom: 30px;
}

/* Standard text formatting inside dashboard focus features */
.steamahead-welcome-card-text,
.steamahead-welcome-card-text p,
.steamahead-welcome-card-text div {
    color: #50575e;
    line-height: 1.6;
    margin: 0 0 15px 0;
    font-size: 14px;
}

/* Override header style and treat all headers (except h1) the same */
.steamahead-welcome-card-text h2,
.steamahead-welcome-card-text h3,
.steamahead-welcome-card-text h4,
.steamahead-welcome-card-text h5,
.steamahead-welcome-card-text h6
 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #1d2327;
}

/* ==========================================================================
   SteamAhead Dashboard Layout & Form Enhancements
   ========================================================================== */

/* 1. Full-Width Container Alignment */
/* SEE TOP OF FILE */

/* 2. Form Section Headers Hierarchy Fix */
.steamahead-form-section {
    margin-top: 45px;      /* Increased top separation between sections */
    margin-bottom: 25px;
}

.steamahead-form-section:first-of-type {
    margin-top: 20px;      /* Keeps the first section snug under the page title */
}

.steamahead-form-section-title {
    font-size: 22px;       /* Significantly reduced from 35px for better hierarchy */
    margin-top: 0;
    margin-bottom: 12px;   /* Tighter margin to pull input fields closer */
    line-height: 1.3em;
    font-weight: 600;      /* Slightly bolder weight to anchor the section */
    text-transform: none;
    color: #1d2327;
}

/* 3. Responsive Form Grid (Fills horizontal space like Overview Cards) */
.steamahead-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px 30px;        /* 20px vertical gap, 30px horizontal gap */
    width: 100%;
}

.steamahead-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;              /* Spacing between label and input */
    width: 100%;
}

/* Spans full width on multi-column layouts for checkboxes and security warnings */
.steamahead-form-row.type-checkbox,
.section-description {
    grid-column: 1 / -1;
}

/* 4. High-Contrast Accessible Form Controls */
.steamahead-form-control {
    background-color: #ffffff !important; /* Forces solid white background */
    border: 1px solid #8c8f94 !important; /* Higher contrast border border */
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 15px;
    color: #2c3338;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus and Active States */
.steamahead-form-control:focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1, 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    outline: 2px solid transparent !important;
}

/* Read-Only State Fallbacks */
.steamahead-form-readonly-val {
    background-color: #f0f0f1;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 15px;
    color: #646970;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.readonly-badge {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #8c8f94;
}

/* 5. Typography Label Alignment */
.steamahead-input-label {
    font-size: 14px;
    font-weight: 600;
    color: #2c3338;
    display: inline-block;
}

.required-star {
    color: #d63638;
    margin-left: 2px;
}