/*
 * Intrazero SIS — Login Page Redesign
 * Shadcn-inspired centered card login
 * Loaded AFTER login.css — every selector matches or exceeds login.css specificity
 *
 * New semantic classes: .login-card, .login-card-header, .login-card-body,
 * .login-logo, .login-subtitle, .login-footer
 * Old .panel overrides kept as fallbacks for ForgotPass.php etc.
 */

/* ========================================================================
   DESIGN TOKENS (shared with main theme)
   ======================================================================== */
:root {
    --primary: #10B981;
    --primary-hover: #059669;
    --primary-ring: rgba(16, 185, 129, 0.35);
    --primary-light: rgba(16, 185, 129, 0.1);
    --background: #f8fafc;
    --card: #ffffff;
    --border: #e2e8f0;
    --foreground: #0f172a;
    --muted-fg: #64748b;
    --muted-bg: #f1f5f9;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   BODY & BACKGROUND
   ======================================================================== */
body {
    font-family: var(--font) !important;
    background: linear-gradient(180deg, var(--background) 0%, var(--muted-bg) 100%) !important;
    background-image: none !important;  /* kill login_bg.jpg */
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ========================================================================
   HIDE THE CLOCK
   ======================================================================== */
.clock {
    display: none !important;
}

/* ========================================================================
   LOGIN SECTION — beats: .login { display:table; }
   ======================================================================== */
.login,
section.login {
    background: transparent !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 20px !important;
    overflow: visible !important;
}

/* ========================================================================
   LOGIN WRAPPER — beats: .login .login-wrapper { display:table-cell; overflow:auto }
   ======================================================================== */
.login .login-wrapper,
.login-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    float: none !important;
    vertical-align: initial !important;
    text-align: center !important;
    overflow: visible !important;
}

/* ========================================================================
   LOGIN CARD (new semantic class)
   ======================================================================== */
.login-card {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
    margin-bottom: 20px;
}

/* ========================================================================
   LOGIN CARD HEADER (new semantic class)
   ======================================================================== */
.login-card-header {
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 32px 32px 24px !important;
    text-align: center !important;
}

/* Logo */
.login-logo {
    max-height: 48px !important;
    width: auto !important;
    display: inline-block;
    margin-bottom: 12px;
}

/* Subtitle */
.login-subtitle {
    font-family: var(--font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--muted-fg) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}

/* ========================================================================
   LOGIN CARD BODY (new semantic class)
   ======================================================================== */
.login-card-body {
    padding: 28px 32px !important;
    text-align: left !important;
}

html[dir="rtl"] .login-card-body {
    text-align: right !important;
}

/* ========================================================================
   LOGIN FOOTER (new semantic class)
   ======================================================================== */
.login-footer {
    width: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: var(--muted-fg) !important;
    font-size: 12px !important;
    font-family: var(--font) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.login-footer a {
    color: var(--primary) !important;
    text-decoration: none !important;
}

.login-footer a:hover {
    color: var(--primary-hover) !important;
}

/* ========================================================================
   PANEL / CARD FALLBACK — beats: .panel { width:450px; margin-top:10vh }
   Kept for ForgotPass.php and other pages using .panel inside .login
   ======================================================================== */
.login .panel,
.panel {
    width: auto !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: var(--shadow-md) !important;
}

.login .login-wrapper .panel,
.login-wrapper .panel {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

/* ========================================================================
   PANEL HEADING FALLBACK — beats: .panel .panel-heading { background:#f4f6f6 }
   ======================================================================== */
.login .panel .panel-heading,
.login-wrapper .panel-heading {
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 32px 32px 24px !important;
    text-align: center !important;
    position: relative;
    z-index: 3;
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}

/* Logo fallback */
.login .panel .panel-heading .logo,
.login-wrapper .panel-heading .logo {
    box-sizing: border-box;
    text-align: center;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

.login .panel .panel-heading .logo img,
.login-wrapper .panel-heading .logo img {
    max-height: 48px !important;
    width: auto !important;
}

/* ========================================================================
   H3 GRAY BAR FALLBACK — beats: .panel .panel-heading h3 { background:#dee0e1 }
   ======================================================================== */
.login .panel .panel-heading h3,
.login-wrapper .panel-heading h3 {
    font-family: var(--font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--muted-fg) !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.01em;
    background: none !important;
    background-color: transparent !important;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    text-align: center !important;
}

/* ========================================================================
   PANEL BODY FALLBACK — beats: .panel .panel-body { padding:35px 45px }
   ======================================================================== */
.login .panel .panel-body,
.login-wrapper .panel-body {
    padding: 28px 32px !important;
    text-align: left !important;
}

html[dir="rtl"] .login .panel .panel-body,
html[dir="rtl"] .login-wrapper .panel-body {
    text-align: right !important;
}

/* ========================================================================
   FORM INPUTS — beats: .panel .panel-body .form-control { border:0; border-bottom:2px solid }
   ======================================================================== */
.login-card-body .form-control,
.login .panel .panel-body .form-control,
.login-wrapper .form-control {
    height: 44px !important;
    border: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: 14px !important;
    font-family: var(--font) !important;
    color: var(--foreground) !important;
    background: var(--card) !important;
    background-image: none !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
    width: 100%;
    line-height: normal !important;
}

.login-card-body .form-control:focus,
.login .panel .panel-body .form-control:focus,
.login-wrapper .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
    outline: none !important;
}

.login-card-body .form-control::placeholder,
.login .panel .panel-body .form-control::placeholder,
.login-wrapper .form-control::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
}

/* ========================================================================
   FORM GROUP
   ======================================================================== */
.login-card-body .form-group,
.login .panel .panel-body .form-group,
.login-wrapper .form-group {
    margin-bottom: 16px !important;
    position: relative;
}

/* Kill the :before pseudo-element placeholder from login.css */
.login .form-control:before,
.login-wrapper .form-control:before {
    display: none !important;
    content: none !important;
}

/* ========================================================================
   ALERTS
   ======================================================================== */
.login-card-body .alert,
.login-wrapper .alert {
    border-radius: var(--radius) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border: 1px solid !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}

.login-card-body .alert-danger,
.login-wrapper .alert-danger {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #991b1b !important;
}

/* ========================================================================
   LANGUAGE SELECTOR
   ======================================================================== */
.language-selection {
    margin-bottom: 16px !important;
    position: relative !important;
}

.language-selection > i {
    display: none !important;
}

.language-selection .select2-container {
    width: 100% !important;
}

.language-selection .select2-container--default .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--card) !important;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.language-selection .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 20px !important;
    color: var(--foreground) !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    padding-left: 14px !important;
}

.language-selection .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

.language-selection .select2-container--default.select2-container--open .select2-selection--single,
.language-selection .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

.language-selection .select2-dropdown {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
}

.language-selection .select2-results__option {
    font-size: 13px !important;
    padding: 8px 14px !important;
    font-family: var(--font) !important;
}

.language-selection .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* Also override the generic select2 on login page */
.login .select2-selection--single {
    border: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    height: 40px !important;
}

.login .select2-selection--single .select2-selection__rendered {
    color: var(--foreground) !important;
    font-size: 13px !important;
    padding-left: 14px !important;
    padding-bottom: 0 !important;
    line-height: 38px !important;
}

/* ========================================================================
   REMEMBER ME & FORGOT PASSWORD
   ======================================================================== */
.checkbox-switch {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.checkbox-switch label {
    font-size: 13px !important;
    color: var(--muted-fg) !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
}

#forgotPass {
    color: var(--primary) !important;
    font-size: 13px !important;
    font-family: var(--font) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color var(--transition);
}

#forgotPass:hover {
    color: var(--primary-hover) !important;
}

/* ========================================================================
   LOGIN BUTTON — beats: .btn.btn-success { border-radius:40px }
   ======================================================================== */
.login-card-body .btn.btn-success,
.login-card-body .btn.btn-primary,
.login .btn.btn-success,
.login .btn.btn-primary,
.login-wrapper .btn-success,
.login-wrapper .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--font) !important;
    border-radius: var(--radius) !important;
    text-transform: none !important;
    letter-spacing: -0.01em;
    box-shadow: none !important;
    transition: background-color var(--transition), border-color var(--transition) !important;
    margin-top: 8px !important;
    padding: 8px 16px !important;
}

.login-card-body .btn.btn-success:hover,
.login-card-body .btn.btn-success:focus,
.login .btn.btn-success:hover,
.login .btn.btn-success:focus,
.login .btn.btn-primary:hover,
.login .btn.btn-primary:focus,
.login-wrapper .btn-success:hover,
.login-wrapper .btn-success:focus,
.login-wrapper .btn-primary:hover,
.login-wrapper .btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

/* Also override the active/focus compound selectors from login.css */
.login .btn-success.active.focus,
.login .btn-success.active:focus,
.login .btn-success.active:hover,
.login .btn-success:active.focus,
.login .btn-success:active:focus,
.login .btn-success:active:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* ========================================================================
   FOOTER FALLBACK — beats: footer { width:450px; color:#fff }
   Kept for ForgotPass.php etc.
   ======================================================================== */
.login footer,
footer {
    width: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: var(--muted-fg) !important;
    font-size: 12px !important;
    font-family: var(--font) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.login footer a,
.login-wrapper footer a,
footer a {
    color: var(--primary) !important;
    text-decoration: none !important;
}

.login footer a:hover,
footer a:hover {
    color: var(--primary-hover) !important;
    text-decoration: none !important;
}

/* ========================================================================
   PANEL FOOTER FALLBACK (login message)
   ======================================================================== */
.login .panel-footer,
.login .panel .panel-footer,
.login-wrapper .panel-footer {
    background: var(--muted-bg) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom-left-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
    padding: 14px 32px !important;
    font-size: 13px !important;
    color: var(--muted-fg) !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* ========================================================================
   FORGOT PASSWORD TABS
   ======================================================================== */
.forgot-tabs li a {
    color: var(--muted-fg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-family: var(--font) !important;
}

.forgot-tabs li.active a {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 480px) {
    .login,
    section.login {
        padding: 12px !important;
    }

    .login .login-wrapper,
    .login-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .login-card-header,
    .login .panel .panel-heading,
    .login-wrapper .panel-heading {
        padding: 24px 20px 20px !important;
    }

    .login-card-body,
    .login .panel .panel-body,
    .login-wrapper .panel-body {
        padding: 20px !important;
    }

    .login .panel-footer,
    .login-wrapper .panel-footer {
        padding: 14px 20px !important;
    }

    .login-footer,
    .login footer,
    footer {
        max-width: 100% !important;
    }
}

/* ========================================================================
   RTL SUPPORT
   ======================================================================== */
html[dir="rtl"] .language-selection .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 8px !important;
    padding-right: 14px !important;
}

html[dir="rtl"] .login .select2-selection--single .select2-selection__rendered {
    padding-left: 8px !important;
    padding-right: 14px !important;
    text-align: right !important;
}

html[dir="rtl"] .login-wrapper .form-control,
html[dir="rtl"] .login .panel .panel-body .form-control,
html[dir="rtl"] .login-card-body .form-control {
    text-align: right !important;
}

html[dir="rtl"] .forgot-password {
    text-align: left !important;
}