/**
 * Luminary ERP custom stylesheet.
 *
 * Purpose:
 * - New frontend refactoring styles should be added here.
 * - Keep site.css as the existing/legacy global stylesheet.
 * - This file should be registered after site.css from CustomAsset.php.
 *
 * Safety rule:
 * - Prefer scoped classes using the "lerp-" prefix.
 * - Avoid changing broad Bootstrap/global classes unless absolutely required.
 */


/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
    --lerp-color-gold: #cb982b;
    --lerp-color-gold-dark: #b98622;
    --lerp-color-gold-soft: rgba(203, 152, 43, 0.15);

    --lerp-color-black: #010101;
    --lerp-color-text: #222222;
    --lerp-color-muted: #666666;
    --lerp-color-border: #dddddd;
    --lerp-color-white: #ffffff;
    --lerp-color-page-bg: #f7f5f0;

    --lerp-radius-sm: 8px;
    --lerp-radius-md: 12px;
    --lerp-radius-lg: 16px;

    --lerp-shadow-card: 0 18px 45px rgba(1, 1, 1, 0.12);
    --lerp-shadow-soft: 0 10px 28px rgba(1, 1, 1, 0.08);
}


/* ==========================================================================
   Login page
   File: views/user/login.php
   ========================================================================== */

/**
 * Page-level wrapper.
 *
 * Uses a scoped class so this does not affect other auth pages unless they opt in.
 */
.lerp-login-page {
    min-height: 100vh;
}

/**
 * Main login card.
 *
 * This enhances the existing .auth-box structure without replacing it.
 */
.lerp-login-card {
    overflow: hidden;
    border-radius: var(--lerp-radius-lg);
    box-shadow: var(--lerp-shadow-card);
}

/**
 * Left-side logo panel.
 *
 * Keeps the current two-column layout but improves alignment and spacing.
 */
.lerp-login-brand-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 40px 32px;
}

/**
 * Main logo sizing.
 *
 * Width-based sizing keeps the SVG responsive and sharp.
 */
.lerp-login-logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

/**
 * Right-side login form panel.
 */
.lerp-login-form-panel {
    padding: 46px 42px;
}

/**
 * Login heading.
 */
.lerp-login-heading {
    margin-bottom: 8px;
    color: var(--lerp-color-black);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/**
 * Small helper text under the heading.
 */
.lerp-login-subtitle {
    margin-bottom: 28px;
    color: var(--lerp-color-muted);
    font-size: 14px;
    line-height: 1.5;
}

/**
 * Login form spacing.
 */
.lerp-form-group {
    margin-bottom: 20px;
}

/**
 * Login form labels.
 */
.lerp-form-group .form-label {
    margin-bottom: 7px;
    color: var(--lerp-color-text);
    font-size: 14px;
    font-weight: 600;
}

/**
 * Login inputs.
 */
.lerp-login-input {
    height: 44px;
    border: 1px solid var(--lerp-color-border);
    border-radius: var(--lerp-radius-sm);
    box-shadow: none;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/**
 * Login input focus state.
 *
 * Gold focus ring matches the LERP logo color without being too heavy.
 */
.lerp-login-input:focus {
    border-color: var(--lerp-color-gold);
    box-shadow: 0 0 0 3px var(--lerp-color-gold-soft);
}

/**
 * Login button / forgot password row.
 */
.lerp-login-actions {
    margin-top: 26px;
}

/**
 * Login button.
 *
 * Uses the locked LERP gold as the primary action color.
 */
.lerp-login-button {
    min-width: 135px;
    padding: 10px 22px;
    border-color: var(--lerp-color-gold);
    background-color: var(--lerp-color-gold);
    color: var(--lerp-color-white);
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.lerp-login-button:hover,
.lerp-login-button:focus {
    border-color: var(--lerp-color-gold-dark);
    background-color: var(--lerp-color-gold-dark);
    color: var(--lerp-color-white);
}

.lerp-login-button:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

/**
 * Forgot password link.
 *
 * This intentionally overrides the older .form-content .fp-link styling only
 * for the refactored login page.
 */
.lerp-forgot-password-link {
    display: inline-block;
    margin-left: 14px;
    color: #555555;
    font-size: 14px;
    vertical-align: middle;
}

.lerp-forgot-password-link:hover,
.lerp-forgot-password-link:focus {
    color: var(--lerp-color-gold);
    text-decoration: none;
}

/**
 * Secondary Luminary logo card.
 */
.lerp-login-footer-card {
    margin-top: 18px;
    border-radius: 10px;
    box-shadow: var(--lerp-shadow-soft);
}

/**
 * Removes inline padding from the old view.
 */
.lerp-login-footer-logo-wrap {
    padding: 0;
    text-align: center;
}

/**
 * Small-screen layout safety.
 *
 * This only prevents the layout from breaking on smaller screens.
 * It does not change the existing mobile login restriction behavior.
 */
@media (max-width: 767px) {
    .lerp-login-brand-panel {
        min-height: auto;
        padding: 30px 24px 10px;
    }

    .lerp-login-form-panel {
        padding: 30px 24px 36px;
    }

    .lerp-login-heading {
        font-size: 26px;
        text-align: center;
    }

    .lerp-login-subtitle {
        text-align: center;
    }

    .lerp-forgot-password-link {
        display: block;
        margin-top: 14px;
        margin-left: 0;
    }
}

/* ==========================================================================
   Client list refactor
   File: views/client/list.php
   ========================================================================== */

/**
 * Client list page wrapper.
 */
.lerp-client-list-page {
    width: 100%;
}

/**
 * Client list grid mount.
 */
.lerp-client-list-grid {
    width: 100%;
}

/**
 * Register new client form spacing.
 */
.lerp-client-register-form .form-label {
    color: var(--lerp-color-text);
    font-size: 13px;
    font-weight: 600;
}

.lerp-client-register-form .form-control {
    min-height: 38px;
    font-size: 14px;
}

.lerp-client-register-help {
    margin-top: 12px;
    margin-bottom: 0;
    color: var(--lerp-color-muted);
    font-size: 13px;
}

/**
 * Client list toolbar action buttons.
 */
.lerp-client-list-grid .lerp-worksheet-toolbar-button {
    margin-right: 3px;
}

/**
 * Main client view button inside the grid.
 */
.lerp-client-view-button {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 1px !important;
    line-height: 1.2;
    border: 0;
}

/**
 * Client list grid should use the calculated viewport cleanly.
 */
.lerp-client-list-grid {
    width: 100%;
}

/**
 * Prevent unnecessary bottom spacing around the client grid area.
 */
.lerp-client-list-page {
    margin-bottom: 0;
}

/* ==========================================================================
   Client Info - Create Program modal
   ========================================================================== */

.lerp-create-program-modal-body {
    padding: 22px 38px 18px 38px;
    overflow-x: hidden;
}

.lerp-create-program-modal-body .row {
    margin-left: 0;
    margin-right: 0;
}

.lerp-create-program-field-row {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    max-width: 875px;
    margin: 0 0 7px 0;
}

.lerp-create-program-field-label {
    display: flex;
    align-items: center;
    min-height: 31px;
    padding: 4px 8px;
    background: #ecb627;
    border: 1px solid #cb982b;
    color: #010101;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.lerp-create-program-field-control {
    min-width: 0;
}

.lerp-create-program-field-control .form-control {
    width: 100%;
    height: 31px;
    min-height: 31px;
    padding: 4px 8px;
    border-radius: 0;
    border: 1px solid #cb982b;
    border-left: 0;
    background: #ffffff;
    color: #212529;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: none;
}

.lerp-create-program-field-control .form-control:disabled,
.lerp-create-program-field-control .form-control[readonly] {
    background: #f7f7f7;
    color: #777777;
}

.lerp-create-program-calendar-input {
    cursor: pointer;
}

/**
 * Keep jSuites calendar above Bootstrap modals.
 */
.jcalendar {
    z-index: 99999 !important;
}

/* ==========================================================================
   Client Info - Invoice type dialog
   File: views/client/client-info.php
   ========================================================================== */

.jconfirm.lerp-invoice-type-dialog .jconfirm-box {
    width: 520px !important;
    max-width: calc(100vw - 32px) !important;
}

.jconfirm.lerp-invoice-type-dialog .jconfirm-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    float: none !important;
    margin-top: 14px;
}

.jconfirm.lerp-invoice-type-dialog .jconfirm-buttons button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 145px;
    min-width: 145px;
    height: 40px;
    margin: 0 !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.jconfirm.lerp-invoice-type-dialog .jconfirm-buttons button i {
    margin-right: 6px;
}

@media (max-width: 575px) {
    .jconfirm.lerp-invoice-type-dialog .jconfirm-box {
        width: calc(100vw - 24px) !important;
    }

    .jconfirm.lerp-invoice-type-dialog .jconfirm-buttons {
        flex-wrap: wrap;
    }

    .jconfirm.lerp-invoice-type-dialog .jconfirm-buttons button {
        flex: 1 1 150px;
        width: auto;
        min-width: 0;
    }
}