/* Professional PACS Login Interface */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fafc;
    min-height: 100vh;
    /* auto, not hidden: on a short window the form runs past the fold and the
       Sign In button becomes unreachable. Only shows a scrollbar when needed. */
    overflow: auto;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.pacs-login-container {
    display: flex;
    min-height: 100vh;
    /* Same reasoning as .showcase-panel: solid brand blue as the floor, so a failed
       gradient degrades to blue rather than exposing black behind the panels. */
    background: #1e3a8a;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

/* Left Panel - Login Form */
.login-panel {
    flex: 0 0 480px;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.login-header {
    padding: 40px 40px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pacs-logo {
    width: 66px;
    height: 66px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: white;
    padding: 4px;
}

.brand-logo {
    height: 33px;
    width: auto;
    margin-bottom: 4px;
}

.brand-text {
    text-align: center;
}

.brand-text p {
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
}

.login-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    text-align: center;
}

.login-subtitle {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 32px;
    text-align: center;
}

.pacs-login-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    color: #9ca3af;
    font-size: 16px;
    z-index: 1;
}

.input-wrapper input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    background: #fafafa;
    transition: all 0.2s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-wrapper input::placeholder {
    color: #9ca3af;
}

.password-toggle {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: #6b7280;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -8px 0;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

.forgot-password {
    font-size: 14px;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
}

.pacs-login-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.pacs-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.pacs-login-btn:active {
    transform: translateY(0);
}

.pacs-login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.error-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fef2f2;
    color: #dc2626;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    font-size: 14px;
    font-weight: 500;
}

.error-alert i {
    font-size: 16px;
    flex-shrink: 0;
}

.login-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
}

.info-item i {
    width: 16px;
    color: #10b981;
    font-size: 14px;
}

.login-footer {
    padding: 24px 40px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.demo-credentials {
    font-size: 13px;
    color: #f59e0b;
    background: #fef3c7;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 500;
}

.version {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.copyright {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

/* Right Panel - Showcase */
.showcase-panel {
    flex: 1;
    /* Solid colour FIRST, gradient second. The cards inside this panel are
       rgba(255,255,255,0.1) over backdrop-filter, i.e. they have no colour of their
       own - they only look right because this background shows through them. If the
       gradient does not paint, the panel falls back to the page behind it and the
       whole showcase renders as grey cards on black. The solid declaration means the
       worst case is a flat brand blue, never black. */
    background: #1e3a8a !important;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.showcase-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Grid lines drawn directly, not as a <pattern> fill: Safari sometimes fails to resolve
       the pattern and then paints the square in the default fill, black, over the whole
       panel - the grey-cards-on-black login page. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 0.25h100M0 10.25h100M0 20.25h100M0 30.25h100M0 40.25h100M0 50.25h100M0 60.25h100M0 70.25h100M0 80.25h100M0 90.25h100M0.25 0v100M10.25 0v100M20.25 0v100M30.25 0v100M40.25 0v100M50.25 0v100M60.25 0v100M70.25 0v100M80.25 0v100M90.25 0v100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></svg>');
}

.showcase-content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: 600px;
}

.medical-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}

.grid-item {
    text-align: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.medical-icon {
    font-size: 32px;
    margin-bottom: 16px;
    color: #60a5fa !important;
}

.grid-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.grid-item p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
}

.features-list {
    background: rgba(255, 255, 255, 0.1);
    padding: 27px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 32px;
}

.features-list h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
}

.features-list ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.features-list li i {
    color: #10b981;
    font-size: 12px;
    flex-shrink: 0;
}

.compliance-badges {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.badge i {
    color: #fbbf24;
    font-size: 16px;
}

/* Medical Loading Animation */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 58, 138, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
    backdrop-filter: blur(10px);
}

.medical-loader {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.pulse-ring {
    position: absolute;
    border: 3px solid #60a5fa;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: pulse 2s ease-in-out infinite;
}

.pulse-ring-delay {
    animation-delay: 1s;
}

.loader-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #60a5fa;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.loading-overlay p {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .login-panel {
        flex: 0 0 420px;
    }
    
    .showcase-panel {
        padding: 40px;
    }
    
    .medical-grid {
        gap: 24px;
    }
    
    .features-list ul {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    .pacs-login-container {
        flex-direction: column;
    }
    
    .login-panel {
        flex: none;
        width: 100%;
        min-height: 100vh;
    }
    
    .showcase-panel {
        display: none;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .login-panel {
        min-height: 100vh;
    }
    
    .login-header {
        padding: 20px 20px 16px;
    }
    
    .login-content {
        padding: 20px;
        justify-content: flex-start;
        padding-top: 40px;
    }
    
    .login-content h2 {
        font-size: 24px;
    }
    
    .login-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .input-wrapper input {
        padding: 14px 14px 14px 44px;
        font-size: 16px;
    }
    
    .input-icon {
        left: 14px;
        font-size: 14px;
    }
    
    .password-toggle {
        right: 14px;
    }
    
    .pacs-login-btn {
        padding: 14px;
        font-size: 16px;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .login-footer {
        padding: 16px 20px;
    }
}

@media (max-width: 640px) {
    .login-header {
        padding: 16px 16px 12px;
    }
    
    .login-content {
        padding: 16px;
        padding-top: 24px;
    }
    
    .login-footer {
        padding: 12px 16px;
    }
    
    .logo-section {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .pacs-logo {
        width: 48px;
        height: 48px;
        align-self: center;
    }
    
    .brand-text h1 {
        font-size: 20px;
    }
    
    .brand-text p {
        font-size: 12px;
    }
    
    .login-content h2 {
        font-size: 22px;
        text-align: center;
    }
    
    .login-subtitle {
        text-align: center;
        font-size: 14px;
    }
    
    .input-wrapper input {
        padding: 12px 12px 12px 40px;
    }
    
    .input-icon {
        left: 12px;
    }
    
    .password-toggle {
        right: 12px;
    }
    
    .demo-credentials {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .copyright {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .login-content {
        padding: 12px;
        padding-top: 20px;
    }
    
    .login-header {
        padding: 12px;
    }
    
    .login-footer {
        padding: 10px 12px;
    }
    
    .pacs-login-form {
        gap: 20px;
    }
    
    .input-group {
        gap: 6px;
    }
    
    .login-info {
        margin-top: 24px;
        gap: 10px;
    }
    
    .info-item {
        font-size: 13px;
        gap: 10px;
    }
}

@media (max-height: 700px) and (max-width: 768px) {
    .login-content {
        justify-content: flex-start;
        padding-top: 20px;
    }
    
    .login-info {
        margin-top: 20px;
    }
    
    .pacs-login-form {
        gap: 16px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
.pacs-login-btn:focus,
.input-wrapper input:focus,
.password-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .input-wrapper input {
        border-width: 3px;
    }
    
    .pacs-login-btn {
        border: 2px solid #1d4ed8;
    }
}