/* Trionix Board Professional Modern Login Card Redesign */

/* Page Background */
.no-auth-wrapper {
    background: #0b0f19 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding: 2rem 1rem !important;
}

/* Card Container */
.noauth-container {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 440px !important;
    background: #111827 !important;
    border: 1px solid #1f2937 !important;
    border-radius: 16px !important;
    padding: 2.5rem 2rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.noauth-container main.content, .noauth-container main.content > div {
    padding: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Hide unused / cramped sections */
section.image, .noauth-container section.image, .api-config, [class*="api-config"], [class*="api-url"] {
    display: none !important;
}

/* Logo inside card / top */
.no-auth-wrapper div.logo {
    background: url("/images/logo.svg") no-repeat center !important;
    background-size: contain !important;
    height: 48px !important;
    width: 180px !important;
    margin: 0 auto 1.5rem auto !important;
    display: block !important;
}

.no-auth-wrapper div.logo svg, .no-auth-wrapper div.logo img {
    display: none !important;
}

/* Card Title */
.noauth-container h2.title {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    color: #f9fafb !important;
    text-align: center !important;
    margin-bottom: 1.75rem !important;
}

/* Form Fields Spacing & Full Width */
#loginform, #registerform, form, div[data-v-0266c37b] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.field, .control, div[data-v-55523806], div[data-v-b34c5e98] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Input Labels */
.label, label.label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    margin-bottom: 0 !important;
}

/* Label with Forgot Password Link */
.label-with-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0.375rem !important;
}

.reset-password-link {
    font-size: 0.8125rem !important;
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    position: relative !important;
    float: none !important;
}

.reset-password-link:hover {
    text-decoration: underline !important;
}

/* Inputs */
input.input, input[type="text"], input[type="password"], input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 44px !important;
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 8px !important;
    color: #f9fafb !important;
    padding: 0 1rem !important;
    font-size: 0.9375rem !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

input.input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

/* Password Toggle Icon */
.password-field {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.password-field-type-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #9ca3af !important;
    cursor: pointer !important;
}

/* Checkbox */
label.checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    font-size: 0.875rem !important;
    color: #9ca3af !important;
    cursor: pointer !important;
}

label.checkbox input {
    width: 16px !important;
    height: 16px !important;
    accent-color: #2563eb !important;
}

/* Primary Button */
button.is-primary, button[type="submit"] {
    width: 100% !important;
    height: 44px !important;
    background: #2563eb !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 0.5rem !important;
    transition: background 0.2s ease !important;
}

button.is-primary:hover {
    background: #1d4ed8 !important;
}

/* Bottom Link */
p.mbs-2 {
    text-align: center !important;
    font-size: 0.875rem !important;
    color: #9ca3af !important;
    margin-top: 1rem !important;
}

p.mbs-2 a.inline-link {
    color: #3b82f6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

p.mbs-2 a.inline-link:hover {
    text-decoration: underline !important;
}

/* Top Navbar Single Logo */
.logo-link, a.logo-link {
    background-image: url("/images/logo.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    min-width: 140px !important;
    height: 34px !important;
    display: inline-block !important;
}

.logo-link svg, .logo-link img, a.logo-link svg, header .logo svg {
    display: none !important;
}

header div.logo, nav div.logo, .logo-container div.logo {
    display: none !important;
}

/* Hide Powered By text */
.powered-by, [class*="powered-by"] {
    display: none !important;
}