/* ==========================================================================
   local_cc_registration – registration page styles
   Works inside Moodle's 'login' page layout. The login layout already
   provides the centered outer container; we style only what's inside it.
   ========================================================================== */

/* ---- CSS custom property defaults (overridden per-company via inline :root) ---- */
:root {
    --ccr-bg:      #f4f6f8;
    --ccr-btn:     #0073aa;
    --ccr-text:    #333333;
    --ccr-border:  #dde1e7;
    --ccr-radius:  8px;
    --ccr-font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Widen and center the registration box ---- */
/* Strip Moodle/Bootstrap constraints from every ancestor so ccr-outer
   can control its own width and centering. */
body.ccr-custom-reg #region-main,
body.ccr-custom-reg #region-main-box,
body.ccr-custom-reg #region-main > .card,
body.ccr-custom-reg #region-main > section > .card {
    width:     100% !important;
    max-width: none !important;
    flex:      none !important;
    padding:   0    !important;
    border:    none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Override Moodle/Boost login-layout inner containers */
body.ccr-custom-reg .login-wrapper {
    width:          100% !important;
    max-width:      none !important;
    padding:        0    !important;
    align-items:    flex-start !important;
}

body.ccr-custom-reg .login-container {
    width:          100% !important;
    max-width:      none !important;
    padding:        0    !important;
    background:     transparent !important;
    box-shadow:     none !important;
    border-radius:  0    !important;
}

/* The template wrapper owns all centering and max-width. */
.ccr-outer {
    width:        50%;
    max-width:    3300px;
    margin-left:  auto;
    margin-right: auto;
    padding:      2rem 2.5rem;
    background:   #ffffff;
    border-radius: var(--ccr-radius, 8px);
    box-shadow:   0 2px 16px rgba(0, 0, 0, 0.09);
}

/* ---- Page background color / image (targets the login layout body) ---- */
body.path-login.ccr-custom-reg {
    background-color: var(--ccr-bg);
}

body.path-login.ccr-custom-reg.ccr-has-bgimage {
    background-image: var(--ccr-bg-image);
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
}

/* ---- Branding block above the form ---- */
.ccr-branding {
    text-align:    center;
    margin-bottom: 1.25rem;
    font-family:   var(--ccr-font);
}

.ccr-logo {
    max-height:    120px;
    max-width:     min(340px, 100%);
    object-fit:    contain;
    margin-bottom: 1rem;
    display:       block;
    margin-left:   auto;
    margin-right:  auto;
}

.ccr-heading {
    font-size:   1.45rem;
    font-weight: 600;
    color:       var(--ccr-text);
    margin:      0 0 0.25rem;
    line-height: 1.3;
}

/* ---- Welcome block ---- */
.ccr-welcome {
    border-left:   3px solid var(--ccr-btn);
    padding:       0.65rem 0.9rem;
    margin-bottom: 1.1rem;
    font-size:     0.92rem;
    color:         var(--ccr-text);
    line-height:   1.5;
    background:    rgba(0,0,0,0.03);
    border-radius: 0 4px 4px 0;
}

/* ---- Form labels — prevent mid-word wrapping ---- */
/* min-width is on the column, not the <label> itself: putting it on the
   label forced every label (even short ones like "Password") out to a fixed
   width, leaving a visible gap before the required-field icon sitting next
   to it in the same flex row. */
.ccr-form-wrap .col-form-label {
    word-break:    normal;
    overflow-wrap: normal;
    white-space:   normal;
    min-width:     9rem;
}
.ccr-form-wrap label {
    word-break:    normal;
    overflow-wrap: normal;
    white-space:   normal;
}

/* ---- Form inputs — ensure they fill the container width ---- */
.ccr-form-wrap input[type="text"],
.ccr-form-wrap input[type="email"],
.ccr-form-wrap input[type="password"],
.ccr-form-wrap select,
.ccr-form-wrap textarea {
    width:      100% !important;
    box-sizing: border-box !important;
}

/* ---- Password unmask fields (eye-icon reveal) — the clickable display
   box is a flex child, not a plain input, so it needs to grow to fill the
   row instead of shrinking to its text content. Keeps password and
   confirm password the same width as the other inputs. flex-basis:0 forces
   it to claim all remaining space regardless of its text content. ---- */
.ccr-form-wrap [data-passwordunmask="wrapper"] {
    width: 100% !important;
}
.ccr-form-wrap [data-passwordunmask="wrapper"] > .d-flex {
    width: 100% !important;
}
.ccr-form-wrap [data-passwordunmask="wrapper"] a.form-control {
    flex:       1 1 0% !important;
    width:      auto !important;
    min-width:  0 !important;
    box-sizing: border-box !important;
}

/* ---- Buttons ---- */
/* Only override btn-primary colors when a company has set an explicit button_color. */
.ccr-btn-branded .ccr-form-wrap .btn-primary,
.ccr-btn-branded .ccr-login-btn.btn-primary {
    background-color: var(--ccr-btn);
    border-color:     var(--ccr-btn);
    color:            #ffffff;
}
.ccr-btn-branded .ccr-form-wrap .btn-primary:hover,
.ccr-btn-branded .ccr-login-btn.btn-primary:hover {
    filter: brightness(0.88);
}

/* ---- Footer links ---- */
.ccr-footer-links {
    text-align:  center;
    margin-top:  1.5rem;
}

.ccr-footer-links__text {
    font-size:     0.875rem;
    color:         #666;
    margin-bottom: 0.6rem;
}

.ccr-login-btn {
    min-width: 120px;
}