/* ==========================================================================
   Cartuul – Login screen (standalone)
   Self-contained styles for the sign-in page only. Does NOT depend on
   bootstrap/template.css/buttons.css etc. Upload to /css/login.css
   ========================================================================== */

:root {
    --ink:        #20223a;
    --ink-soft:   #5a5d76;
    --line:       #e7e7f2;
    --paper:      #f4f4fb;
    --paper-2:    #ffffff;
    --indigo:     #5078FE;
    --indigo-600: #4064eb;
    --violet:     #8aa0ff;
    --panel-1:    #e7ecfe;
    --panel-2:    #eef1fe;
    --error:      #ef5e6e;
    --ring:       rgba(80, 120, 254, 0.25);
    --radius:     14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: "Poppins", sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.login_page { min-height: 100vh; }

.ct-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* ---------- Brand panel ---------- */
.ct-brand {
    position: relative;
    overflow: hidden;
    background:
            radial-gradient(120% 90% at 12% 8%, rgba(80, 120, 254, 0.42) 0%, rgba(80,120,254,0) 55%),
            radial-gradient(110% 80% at 92% 96%, rgba(80, 120, 254, 0.30) 0%, rgba(80,120,254,0) 50%),
            linear-gradient(155deg, #1b2333 0%, #14161c 55%, #0a0b0e 100%);
    color: #fff;
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.ct-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 120% at 30% 20%, #000 0%, transparent 75%);
    pointer-events: none;
}
.ct-brand > * { position: relative; z-index: 1; }

/* ambient brand texture (decorative, not a pitch) */
.ct-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ct-brand .ct-art { z-index: 0; }
.ct-art svg { width: 100%; height: 100%; opacity: 0.6; }

.ct-greet {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
}
.ct-greet-sub {
    margin-top: 16px;
    font-size: 16.5px;
    line-height: 1.5;
    color: rgba(255,255,255,0.65);
    max-width: 30ch;
}
.ct-brand-foot { font-size: 13px; color: rgba(255,255,255,0.42); }
.ct-spacer { height: 1px; }

/* ---------- Form side ---------- */
.ct-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: var(--paper);
}

.login .formblock {
    position: relative;
    width: 100%;
    max-width: 392px;
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ct-logo { height: 34px; width: auto; display: block; margin: 0 auto 40px; }

.formblock .h3,
.formblock h1.h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 27px;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.ct-lede {
    margin-top: 7px;
    margin-bottom: 26px;
    font-size: 15px;
    color: var(--ink-soft);
}

#system-message-container:not(:empty) {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fdeef0;
    color: var(--error);
    font-size: 14px;
    border: 1px solid #f6cdd4;
}
/* Success / non-error flash messages */
#system-message-container .message,
#system-message-container .alert-success {
    background: #eaf7ef;
    color: #2f9e5e;
    border-color: #c6ecd4;
}

.control-group { margin-bottom: 18px; }
.ct-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.ct-field-row label,
.control-label label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.control-label.hidden { display: none; }

.ct-forgot {
    font-size: 13px;
    font-weight: 600;
    color: var(--indigo);
    text-decoration: none;
}
.ct-forgot:hover { text-decoration: underline; }

.controls { position: relative; }

input.inputbox {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 13px 15px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input.inputbox::placeholder { color: #a8a4bd; }
input.inputbox:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 4px var(--ring);
}
#password { padding-right: 50px; }

.ct-toggle {
    position: absolute;
    /* Anchored to the input's own height (~47px), NOT to .controls.
       This keeps the toggle on the input when jQuery Validate appends an
       error label below it and grows the .controls box. */
    top: 23px;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
}
.ct-toggle:hover { color: var(--indigo); background: #f1effb; }

/* Validation error message.
   login.php tags the message with .ct-error (and the field with .ct-invalid)
   via the validator hooks, so styling does not depend on scripts.js's
   errorClass. .error is kept as a fallback for the default class name. */
.ct-error,
label.error {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    clear: both;
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--error);
}
/* When the field becomes valid, jQuery Validate empties the message text but
   leaves the label in the DOM — hide it so the "!" badge does not show alone. */
.ct-error:empty,
label.error:empty {
    display: none;
}
/* small round "!" marker so the message reads as an error, not a stray line */
.ct-error::before,
label.error::before {
    content: "!";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Invalid field: red border + soft red focus ring + faint red fill */
input.inputbox.ct-invalid,
input.inputbox.error {
    border-color: var(--error);
    background: #fff7f8;
}
input.inputbox.ct-invalid:focus,
input.inputbox.error:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(239, 94, 110, 0.18);
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.btn {
    width: 100%;
    display: block;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.16s ease, transform 0.08s ease, border-color 0.16s ease;
}
.btn-primary {
    color: #fff;
    background: var(--indigo);
    border: none;
    padding: 14px;
    box-shadow: 0 8px 20px -8px rgba(80,120,254,0.5);
}
.btn-primary:hover { background: var(--indigo-600); }
.btn-primary:active { transform: translateY(1px); }
.btn-simple {
    color: var(--indigo);
    background: #fff;
    border: 1.5px solid var(--indigo);
    padding: 13px;
}
.btn-simple:hover { background: #eef2ff; border-color: var(--indigo-600); color: var(--indigo-600); }

.ct-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: #b3afc6;
    font-size: 12.5px;
    font-weight: 500;
}
.ct-divider::before, .ct-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.ct-copyright {
    margin-top: 36px;
    font-size: 12.5px;
    color: #a8a4bd;
    text-align: center;
}

/* Loading spinner (preserves original .formblock.loading behavior) */
.formblock.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(251, 250, 255, 0.65);
    border-radius: var(--radius);
    z-index: 5;
}
.formblock.loading::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid var(--line);
    border-top-color: var(--indigo);
    border-radius: 50%;
    z-index: 6;
    animation: cartuul-spin 0.7s linear infinite;
}

@keyframes cartuul-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
    .ct-shell { grid-template-columns: 1fr; }
    .ct-brand {
        padding: 26px 28px 22px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        min-height: auto;
    }
    .ct-spacer, .ct-greet-sub, .ct-brand-foot { display: none; }
    .ct-greet { font-size: clamp(22px, 6vw, 28px); }
    .ct-form-side { padding: 32px 24px 48px; align-items: flex-start; }

    /* iOS Safari zooms the page in (and stays zoomed) when a focused input has
       a font-size below 16px. Bump inputs to 16px on small screens to prevent
       the focus-zoom; the desktop look (15px) is unchanged. */
    input.inputbox { font-size: 16px; }
}

/* ==========================================================================
   BootstrapDialog / Bootstrap modal
   --------------------------------------------------------------------------
   The login page no longer loads bootstrap.min.css + template.css, but
   bootstrap-dialog.js is still used by the app (e.g. confirm/alert popups).
   Without this CSS the modal renders as an unstyled block at the bottom of
   the page. These rules restore the modal behaviour (fixed overlay, backdrop,
   centered dialog) and restyle it to match the new login design.
   ========================================================================== */

.fade { opacity: 0; -webkit-transition: opacity .15s linear; transition: opacity .15s linear; }
.fade.in { opacity: 1; }

.modal-open { overflow: hidden; }

.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 16px;
}
@media (min-width: 768px) {
    .modal-dialog { width: 420px; margin: 40px auto; }
}

.modal-content {
    position: relative;
    background-color: var(--paper-2);
    background-clip: padding-box;
    border: none;
    border-radius: 16px;
    outline: 0;
    box-shadow: 0 24px 60px -16px rgba(20, 22, 30, 0.45);
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1040;
    background-color: #14161c;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: .55; }

.modal-header {
    padding: 22px 24px 0;
    border-bottom: none;
}
.modal-title,
.modal .bootstrap-dialog-title {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: center;
}
.modal .bootstrap-dialog-title::first-letter { text-transform: uppercase; }

.modal-body {
    position: relative;
    padding: 14px 24px 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: center;
}
.modal .popup_text {
    font-size: 16px;
    line-height: 1.45;
    padding: 0 0 6px;
}

.modal-footer {
    padding: 18px 24px 22px;
    border-top: none;
    text-align: center;
}

/* Dialog buttons sit side-by-side and reuse the login button styles */
.modal .bootstrap-dialog-footer-buttons {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}
.modal .bootstrap-dialog-footer-buttons .btn {
    width: auto;
    flex: 1 1 0;
    max-width: 48%;
    margin: 0;
    padding: 13px 18px;
    font-size: 14.5px;
    line-height: 1;
}
.modal .bootstrap-dialog-footer-buttons .btn:last-child:first-child {
    max-width: 100%;
    margin: 0 auto;
}
/* keep the secondary / cancel action on the left */
.modal .bootstrap-dialog-footer-buttons .btn-default { order: 1; }

/* Neutral (cancel/secondary) button used by dialogs */
.btn-default {
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
}
.btn-default:hover { background: #f4f4fb; border-color: #d7d7e6; }

/* Close (×) button */
.close {
    float: right;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-soft);
    background: 0 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: .5;
}
.close:hover, .close:focus { opacity: 1; color: var(--ink); text-decoration: none; }
.modal-header .close { margin-top: -2px; }