/* =========================================================
   Samudra SaaS — Frontend Stylesheet
   Blue palette sourced from home page Astra global colors:
     Primary   #0f2385  (--ast-global-color-0)
     Accent    #6852f4  (button/highlight blue-violet)
     Hover     #5a43ef
     Light BG  #eef2ff
   ========================================================= */

/* ---------------------------------------------------------
   CSS custom properties — single source of truth
   --------------------------------------------------------- */
:root {
    --sms-primary:        #0f2385;
    --sms-primary-dark:   #0a1a6a;
    --sms-accent:         #6852f4;
    --sms-accent-hover:   #5a43ef;
    --sms-light-bg:       #eef2ff;
    --sms-border:         #d1d5db;
    --sms-text:           #040922;
    --sms-text-muted:     #45505f;
    --sms-white:          #ffffff;
    --sms-radius:         6px;
    --sms-shadow:         0 4px 16px rgba(15, 35, 133, 0.10);
}

/* ==========================================================
   1. USER REGISTRATION PLUGIN — colour overrides
   These CSS variables are output by the UR plugin and
   control every form element it renders (login + signup).
   ========================================================== */
:root {
    --ur-primary-color:                   var(--sms-primary);
    --ur-primary-dark:                    var(--sms-primary-dark);
    --ur-primary-light:                   var(--sms-white);
    --ur-button-text-normal-color:        var(--sms-white);
    --ur-button-text-hover-color:         var(--sms-white);
    --ur-button-background-normal-color:  var(--sms-primary);
    --ur-button-background-hover-color:   var(--sms-primary-dark);
}

/* ==========================================================
   2. WOOCOMMERCE LOGIN & REGISTRATION FORMS
   Covers both the My Account login tab and any
   standalone WooCommerce login/register shortcode page.
   ========================================================== */

/* --- Page headings on login/register pages --- */
.woocommerce-account .woocommerce > h2,
.woocommerce-account .woocommerce > h3,
.woocommerce-page .u-column1 h2,
.woocommerce-page .u-column2 h2 {
    color: var(--sms-primary);
}

/* --- Form field focus --- */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--sms-primary);
    box-shadow: 0 0 0 2px rgba(15, 35, 133, 0.15);
    outline: none;
}

/* --- Submit / login button --- */
.woocommerce .button.woocommerce-form-login__submit,
.woocommerce #customer_login .button,
.woocommerce form.login .button,
.woocommerce form.register .button {
    background-color: var(--sms-primary) !important;
    border-color:     var(--sms-primary) !important;
    color:            var(--sms-white)   !important;
    border-radius:    var(--sms-radius);
    transition:       background-color 0.2s, border-color 0.2s;
}

.woocommerce .button.woocommerce-form-login__submit:hover,
.woocommerce #customer_login .button:hover,
.woocommerce form.login .button:hover,
.woocommerce form.register .button:hover {
    background-color: var(--sms-primary-dark) !important;
    border-color:     var(--sms-primary-dark) !important;
}

/* --- Links inside login/register forms --- */
.woocommerce #customer_login a,
.woocommerce form.login a,
.woocommerce form.register a {
    color: var(--sms-primary);
}

.woocommerce #customer_login a:hover,
.woocommerce form.login a:hover,
.woocommerce form.register a:hover {
    color: var(--sms-primary-dark);
    text-decoration: underline;
}

/* --- Lost password link --- */
.woocommerce-LostPassword a,
.woocommerce form.login .lost_password a {
    color: var(--sms-primary);
}

/* --- Column layout on login/register page --- */
.woocommerce-page #customer_login {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.woocommerce-page #customer_login .u-column1,
.woocommerce-page #customer_login .u-column2 {
    flex: 1 1 300px;
    background: var(--sms-white);
    border: 1px solid var(--sms-border);
    border-top: 3px solid var(--sms-primary);
    border-radius: var(--sms-radius);
    padding: 32px;
    box-shadow: var(--sms-shadow);
}

/* ==========================================================
   3. WORDPRESS DEFAULT LOGIN PAGE (wp-login.php)
   ========================================================== */
body.login #login h1 a {
    background-image: none;
    text-indent: unset;
    font-size: 24px;
    font-weight: 700;
    color: var(--sms-primary);
    text-decoration: none;
    line-height: 1;
}

body.login {
    background-color: var(--sms-light-bg);
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
    border-top: 3px solid var(--sms-primary);
    border-radius: var(--sms-radius);
    box-shadow: var(--sms-shadow);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: var(--sms-primary) !important;
    box-shadow: 0 0 0 1px var(--sms-primary) !important;
}

body.login .button-primary,
body.login input[type="submit"] {
    background:    var(--sms-primary) !important;
    border-color:  var(--sms-primary-dark) var(--sms-primary-dark) var(--sms-primary) !important;
    box-shadow:    none !important;
    text-shadow:   none !important;
    color:         var(--sms-white) !important;
    transition:    background 0.2s;
}

body.login .button-primary:hover,
body.login input[type="submit"]:hover {
    background:   var(--sms-primary-dark) !important;
    border-color: var(--sms-primary-dark) !important;
}

body.login #nav a,
body.login #backtoblog a {
    color: var(--sms-primary);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: var(--sms-primary-dark);
}

/* ==========================================================
   4. LEARNER DASHBOARD (saas-client-portal)
   ========================================================== */
.saas-client-portal {
    max-width: 680px;
    font-family: inherit;
}

.saas-client-portal h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--sms-primary);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sms-light-bg);
}

/* Portal card */
.saas-portal-card {
    background:    var(--sms-white);
    border:        1px solid var(--sms-border);
    border-top:    3px solid var(--sms-primary);
    border-radius: var(--sms-radius);
    padding:       24px 28px;
    margin-top:    16px;
    box-shadow:    var(--sms-shadow);
}

/* Info table */
.saas-portal-table {
    width: 100%;
    border-collapse: collapse;
}

.saas-portal-table th {
    text-align:  left;
    width:       140px;
    padding:     10px 0;
    color:       var(--sms-text-muted);
    font-weight: 600;
    font-size:   14px;
    vertical-align: top;
}

.saas-portal-table td {
    padding:     10px 0;
    color:       var(--sms-text);
    font-size:   15px;
    vertical-align: top;
}

.saas-portal-table tr + tr th,
.saas-portal-table tr + tr td {
    border-top: 1px solid #f0f4ff;
}

/* Usage warnings */
.saas-limit-warning  { color: #d97706; font-weight: 600; }
.saas-limit-critical { color: #dc2626; font-weight: 600; }

/* Go-to-LMS button */
.saas-client-portal .button.wc-forward {
    display:          inline-block;
    margin-top:       12px;
    background:       var(--sms-primary);
    border-color:     var(--sms-primary);
    color:            var(--sms-white) !important;
    border-radius:    var(--sms-radius);
    padding:          10px 24px;
    font-weight:      600;
    text-decoration:  none;
    transition:       background 0.2s, border-color 0.2s;
}

.saas-client-portal .button.wc-forward:hover {
    background:   var(--sms-primary-dark);
    border-color: var(--sms-primary-dark);
}

/* Notice (no tenant found / suspended) */
.saas-portal-notice {
    background:    var(--sms-light-bg);
    border:        1px solid #c7d2fe;
    border-left:   4px solid var(--sms-primary);
    border-radius: var(--sms-radius);
    padding:       20px 24px;
    margin-top:    12px;
}

.saas-portal-notice h3 {
    border: none;
    margin-bottom: 8px;
    padding-bottom: 0;
    font-size: 18px;
}

.saas-portal-notice p {
    color: var(--sms-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================
   5. HOME PAGE — accent reinforcements
   Adds subtle blue treatment to Elementor-built sections
   that may be using generic colours.
   ========================================================== */

/* Ensure anchor/link colour matches primary on the homepage */
.home a:not([class]),
.home .entry-content a:not(.button):not(.wp-block-button__link) {
    color: var(--sms-primary);
}

.home a:not([class]):hover,
.home .entry-content a:not(.button):not(.wp-block-button__link):hover {
    color: var(--sms-primary-dark);
}

/* ==========================================================
   6. MOBILE RESPONSIVENESS
   ========================================================== */

/* --- Learner dashboard --- */
@media (max-width: 640px) {
    .saas-client-portal {
        max-width: 100%;
    }

    .saas-portal-card {
        padding: 16px;
    }

    .saas-portal-table {
        display: block;
    }

    .saas-portal-table tbody,
    .saas-portal-table tr {
        display: block;
    }

    .saas-portal-table th {
        display: block;
        width: 100%;
        padding: 10px 0 2px;
        border-top: none !important;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--sms-primary);
    }

    .saas-portal-table td {
        display: block;
        width: 100%;
        padding: 0 0 10px;
        border-top: none !important;
    }

    .saas-portal-table tr + tr th {
        border-top: 1px solid #f0f4ff !important;
    }

    .saas-client-portal .button.wc-forward {
        display: block;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* --- WooCommerce login / register columns --- */
@media (max-width: 768px) {
    .woocommerce-page #customer_login {
        flex-direction: column;
        gap: 24px;
    }

    .woocommerce-page #customer_login .u-column1,
    .woocommerce-page #customer_login .u-column2 {
        flex: 1 1 100%;
        padding: 20px;
    }
}

/* --- WooCommerce form buttons full-width on small screens --- */
@media (max-width: 480px) {
    .woocommerce form.login .button,
    .woocommerce form.register .button,
    .woocommerce .button.woocommerce-form-login__submit {
        width: 100%;
        text-align: center;
    }
}

/* --- wp-login.php --- */
@media (max-width: 480px) {
    body.login #loginform,
    body.login #registerform,
    body.login #lostpasswordform {
        width: calc(100vw - 40px);
        min-width: 0;
        padding: 20px;
    }

    body.login #login {
        width: calc(100vw - 40px);
        min-width: 0;
        padding: 0 20px;
    }
}