/* ==========================================================================
   Storefront Authentication Gateway Module Stylesheet
   ========================================================================== */

/* Structural Layout Scaffolding Framework */
.auth-gateway-scaffold {
    max-width: 950px !important;
    margin-top: 3rem !important;
    padding-bottom: 6rem !important;
}

/* Header Brand Layout Identity Elements */
.auth-brand-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-brand-logo {
    font-size: 2.2rem;
    font-weight: 800;
    color: #131921;
    letter-spacing: -0.5px;
}

.auth-brand-subtitle {
    color: #475569;
    margin-top: 0.4rem;
}

.error-box-spacing {
    margin-bottom: 2rem !important;
}

/* Core Interface Split Card Panel Grid */
.ui.grid.stackable.auth-main-panel {
    background: #ffffff;
    border-radius: 8px;
    padding: 2.5rem 1.5rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #cbd5e1;
    margin: 0 !important;
}

.auth-column-title {
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 1.5rem 0 !important;
}

.auth-field-label {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Field Spacing Adjustments */
.field-spacing-large {
    margin-bottom: 1rem !important;
}

.field-spacing-xlarge {
    margin-bottom: 1.5rem !important;
}

/* Primary Form Submit Processing Buttons */
.auth-btn-submit {
    background-color: #f0c14b !important;
    color: #111111 !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

.auth-btn-submit:hover {
    background-color: #ddb13b !important;
}

.auth-btn-register {
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 1.1rem 0 !important;
}

/* Sandbox Testing Credentials Alert Box */
.sandbox-hint-box {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-top: 2rem;
    font-size: 0.88rem;
}

.sandbox-alert-text {
    font-weight: 700;
    color: #b12704;
}

/* Workspace Navigation Escape Anchors */
.auth-exit-workspace {
    text-align: center;
    margin-top: 2.5rem;
}

.auth-exit-link {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Utility Design Colors Hooks */
.gold-icon { color: #f0c14b !important; }
.teal-icon { color: #00b5ad !important; }



/* --------------------------------------------------------------------------
   Responsive Layout Contextual Adaptation Breakpoints
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    .auth-login-column {
        padding-right: 2.5rem !important;
    }
    .auth-register-column {
        padding-left: 2.5rem !important;
        border-left: 1px solid #e2e8f0 !important;
    }
}

@media only screen and (max-width: 767px) {
    .ui.grid.stackable.auth-main-panel {
        padding: 1.5rem 1rem !important;
    }
    .auth-login-column {
        padding-right: 0 !important;
        padding-bottom: 2rem !important;
    }
    /* Creates a top border to cleanly divide forms once stacked vertically on mobile */
    .auth-register-column {
        padding-left: 0 !important;
        padding-top: 2rem !important;
        border-top: 1px solid #e2e8f0 !important;
    }
}

/* =================================================================
   MEGAMART Customer Account Profile Dashboard Styles
   ================================================================= */

.account-dashboard-container {
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}

.account-sidebar-column {
    padding-right: 0 !important;
}

.account-profile-tabs.ui.vertical.menu {
    border-right: 1px solid #cbd5e1;
    min-height: 250px;
    box-shadow: none;
}

/* Force framework icons to align inline next to tab labels */
.account-profile-tabs .item > i.icon {
    float: none !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

.account-working-panel.ui.tab.segment {
    padding: 2rem;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    margin-top: 0;
}

.account-working-panel .ui.header {
    font-weight: 800;
    margin-bottom: 1.5rem;
}

/* Immutable form fields formatting override */
.ui.form .field.disabled input[readonly] {
    background: #f1f5f9;
    color: #64748b;
    opacity: 1; /* Prevents text from washing out completely */
}