/* ============================================================
   SATHI SIGNUP PAGE
   Moodle signup.php
   ============================================================ */


/* ============================================================
   1. REMOVE MOODLE LOGIN PAGE WIDTH RESTRICTION
   ============================================================ */

/* ============================================================
   REMOVE HORIZONTAL SCROLL
   ============================================================ */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* Make widths include padding/border */
body#page-login-signup *,
body#page-login-signup *::before,
body#page-login-signup *::after {
    box-sizing: border-box;
}


/* Moodle outer wrappers must never exceed viewport */
body#page-login-signup #page,
body#page-login-signup #page-wrapper,
body#page-login-signup .login-wrapper,
body#page-login-signup .login-container,
body#page-login-signup .sathi-signup-page,
body#page-login-signup .sathi-signup-card {
    max-width: 100% !important;
}


/* Main Moodle login wrapper */
body#page-login-signup .login-wrapper {
    width: 100% !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: hidden;
}


/* Signup container */
body#page-login-signup .login-container {
    width: 100% !important;
    max-width: 1100px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Custom page wrapper */
.sathi-signup-page {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Signup card */
.sathi-signup-card {
    width: 100% !important;
    max-width: 1000px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   IMPORTANT:
   REMOVE BOOTSTRAP .ROW NEGATIVE MARGINS
   ============================================================ */

.sathi-signup-form .row,
.sathi-signup-form .fitem.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Prevent grid columns from forcing overflow */
.sathi-signup-form .fcontainer {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
}


/* Every grid child should be shrinkable */
.sathi-signup-form .fcontainer > * {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* Moodle Bootstrap columns */
.sathi-signup-form [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* Inputs should never exceed grid column */
.sathi-signup-form input,
.sathi-signup-form select,
.sathi-signup-form textarea,
.sathi-signup-form .form-control {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* Long Moodle help/error messages should wrap */
.sathi-signup-form .form-text,
.sathi-signup-form .fdescription,
.sathi-signup-form .invalid-feedback,
.sathi-signup-form .form-control-feedback {
    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    body#page-login-signup .login-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    .sathi-signup-card {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    .sathi-signup-form .fcontainer {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body#page-login-signup .login-wrapper {
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

    padding: 40px 20px !important;
}


body#page-login-signup .login-container {
    width: 100% !important;
    max-width: 1100px !important;

    background: transparent !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 auto !important;
}


/* ============================================================
   2. PAGE
   ============================================================ */

.sathi-signup-page {
    width: 100%;
    display: flex;
    justify-content: center;
}


/* ============================================================
   3. SIGNUP CARD
   ============================================================ */

.sathi-signup-card {
    width: 100%;
    max-width: 1000px;

    background: #ffffff;

    border-radius: 18px;

    padding: 42px 55px;

    box-sizing: border-box;

    box-shadow:
        0 8px 30px rgba(15, 39, 71, 0.08);
}


/* ============================================================
   4. HEADER
   ============================================================ */

.sathi-signup-header {
    text-align: center;
    margin-bottom: 38px;
}


.sathi-signup-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 16px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #eef4ff;

    color: #1557b0;

    font-size: 27px;
}


.sathi-signup-header h1 {
    margin: 0;

    color: #102b4e;

    font-size: 32px;
    line-height: 1.15;

    font-weight: 700;
}


.sathi-signup-header p {
    margin: 10px 0 0;

    color: #64748b;

    font-size: 15px;
    line-height: 1.5;
}


/* ============================================================
   5. MOODLE FORM
   ============================================================ */

.sathi-signup-form {
    width: 100%;
}


.sathi-signup-form form,
.sathi-signup-form .mform {
    width: 100% !important;
    max-width: none !important;
}


/* ============================================================
   6. TWO COLUMN GRID
   ============================================================ */

/*
 Moodle normally puts fields inside .fcontainer.

 This is the correct place to apply the grid.

 DO NOT use:

 .mform > div {
     display:grid;
 }

 because Moodle has helper/info divs there too.
*/

.sathi-signup-form .fcontainer {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 32px;
    row-gap: 24px;

    width: 100%;
}


/* ============================================================
   7. EACH MOODLE FIELD
   ============================================================ */

/*
 Moodle uses:

 .fitem
 .form-group
 .row

 We need the entire fitem to occupy one grid cell.
*/

.sathi-signup-form .fcontainer > .fitem,
.sathi-signup-form .fcontainer > .form-group {
    width: 100% !important;

    min-width: 0;

    margin: 0 !important;
}


/* ============================================================
   8. REMOVE BOOTSTRAP HORIZONTAL LABEL LAYOUT
   ============================================================ */

/*
 Moodle usually generates something like:

 .fitem.row
     .col-md-3       <- label
     .col-md-9       <- input

 We want:

 Label
 Input

 vertically.
*/

.sathi-signup-form .fitem.row {
    display: block !important;
}


.sathi-signup-form .fitem > .col-form-label,
.sathi-signup-form .fitem > [class*="col-md-"],
.sathi-signup-form .fitem > [class*="col-lg-"],
.sathi-signup-form .fitem > .felement {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ============================================================
   9. LABEL
   ============================================================ */

.sathi-signup-form .col-form-label,
.sathi-signup-form label {

    display: block;

    width: 100%;

    margin: 0 0 8px;

    padding-top: 0 !important;

    color: #132641;

    font-size: 14px;

    font-weight: 600;
}


/* ============================================================
   10. INPUTS
   ============================================================ */

.sathi-signup-form input[type="text"],
.sathi-signup-form input[type="password"],
.sathi-signup-form input[type="email"],
.sathi-signup-form input[type="tel"],
.sathi-signup-form input[type="number"],
.sathi-signup-form select,
.sathi-signup-form textarea,
.sathi-signup-form .form-control {

    width: 100% !important;

    max-width: 100% !important;

    min-height: 48px;

    box-sizing: border-box;

    padding: 10px 14px;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    box-shadow: none;
}


.sathi-signup-form textarea {
    min-height: 100px;
}


/* ============================================================
   11. INPUT FOCUS
   ============================================================ */

.sathi-signup-form .form-control:focus,
.sathi-signup-form input:focus,
.sathi-signup-form select:focus,
.sathi-signup-form textarea:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* ============================================================
   12. PASSWORD POLICY
   ============================================================ */

/*
 THIS IS IMPORTANT.

 Moodle inserts password policy information as a separate
 element between Username and Password.

 Without this rule you get:

 Username        Password policy
 Password        Email

 which is exactly what your screenshot shows.
*/


.sathi-signup-form #fitem_id_passwordpolicyinfo,
.sathi-signup-form [id*="passwordpolicyinfo"] {

    grid-column: 1 / -1 !important;

    width: 100% !important;
}


/*
 Make policy look like helper text rather than a field.
*/

.sathi-signup-form #fitem_id_passwordpolicyinfo,
.sathi-signup-form [id*="passwordpolicyinfo"] {

    font-size: 12px;

    line-height: 1.5;

    color: #718096;
}


/* ============================================================
   13. IMPORTANT: REORDER ACCOUNT FIELDS
   ============================================================ */

/*
 Moodle normally renders:

 Username
 Password policy
 Password
 Email
 Email again

 We want:

 Username      Password

 Password policy

 Email         Email again
*/


.sathi-signup-form #fitem_id_username {
    order: 10;
}


.sathi-signup-form #fitem_id_password {
    order: 20;
}


.sathi-signup-form #fitem_id_passwordpolicyinfo {
    order: 30;

    grid-column: 1 / -1 !important;
}


.sathi-signup-form #fitem_id_email {
    order: 40;
}


.sathi-signup-form #fitem_id_email2 {
    order: 50;
}


/* Moodle versions/plugins may use emailagain */

.sathi-signup-form #fitem_id_emailagain {
    order: 50;
}


/* ============================================================
   14. FIELDSET HEADINGS
   ============================================================ */

.sathi-signup-form fieldset {
    width: 100% !important;

    margin: 0 0 30px !important;

    padding: 0 !important;

    border: 0 !important;
}


.sathi-signup-form fieldset legend {
    width: 100%;

    margin-bottom: 20px;

    color: #102b4e;

    font-weight: 700;
}


/* ============================================================
   15. HELP TEXT
   ============================================================ */

.sathi-signup-form .form-text,
.sathi-signup-form .form-control-feedback,
.sathi-signup-form .fdescription {

    display: block;

    width: 100%;

    margin-top: 6px;

    color: #7c8ba1;

    font-size: 12px;

    line-height: 1.4;
}


/* ============================================================
   16. ERRORS
   ============================================================ */

.sathi-signup-form .invalid-feedback {

    display: block;

    width: 100%;

    margin-top: 5px;

    font-size: 12px;
}


/* ============================================================
   17. CHECKBOX / SPECIAL ELEMENTS
   ============================================================ */

.sathi-signup-form .form-check {

    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 8px;
}


.sathi-signup-form .form-check input {
    min-height: auto;
}


/* ============================================================
   18. ACTION BUTTONS - FULL WIDTH ROW
   ============================================================ */

.sathi-signup-form .fitem_actionbuttons,
.sathi-signup-form .form-buttons {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin-top: 15px !important;

    text-align: center;
}


/* ============================================================
   19. CREATE ACCOUNT BUTTON
   ============================================================ */

.sathi-signup-form .btn-primary,
.sathi-signup-form button[type="submit"],
.sathi-signup-form input[type="submit"] {

    min-height: 48px;

    padding: 11px 30px;

    border: 0;

    border-radius: 9px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;
}


/* ============================================================
   20. LOGIN LINK
   ============================================================ */

.sathi-signup-login {

    width: 100%;

    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid #e5e7eb;

    text-align: center;

    color: #64748b;

    font-size: 14px;
}


.sathi-signup-login a {

    margin-left: 5px;

    color: #2563eb;

    font-weight: 600;

    text-decoration: none;
}


.sathi-signup-login a:hover {
    text-decoration: underline;
}


/* ============================================================
   21. TABLET
   ============================================================ */

@media (max-width: 900px) {

    body#page-login-signup .login-container {
        max-width: 750px !important;
    }


    .sathi-signup-card {
        padding: 35px;
    }


    .sathi-signup-form .fcontainer {
        column-gap: 22px;
    }
}


/* ============================================================
   22. MOBILE
   ============================================================ */

@media (max-width: 700px) {

    body#page-login-signup .login-wrapper {

        padding: 20px 12px !important;
    }


    body#page-login-signup .login-container {

        width: 100% !important;

        max-width: 100% !important;
    }


    .sathi-signup-card {

        width: 100%;

        padding: 28px 20px;

        border-radius: 12px;
    }


    .sathi-signup-form .fcontainer {

        grid-template-columns: 1fr !important;

        row-gap: 20px;
    }


    .sathi-signup-form #fitem_id_passwordpolicyinfo,
    .sathi-signup-form [id*="passwordpolicyinfo"] {

        grid-column: 1 !important;
    }


    .sathi-signup-header h1 {

        font-size: 27px;
    }
}