/* ============================================
   sistem_pakar_jantung/assets/css/style.css
   Versi Modern - Updated for Modern Login Design
   ============================================ */

/* ============================================
   RESET & BASE STYLES (Existing + Updated)
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* ============================================
   MODERN LOGIN STYLES (New Addition)
   ============================================ */

/* Background untuk login page */
.login-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-wrapper {
    width: 100%;
    max-width: 480px;
    animation: fadeIn 0.8s ease;
}

.login-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.login-card:hover {
    transform: translateY(-5px);
}

.card-header {
    padding: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.logo-icon {
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.logo-icon i {
    font-size: 32px;
    color: #667eea;
}

.card-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.card-header p {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 5px;
}

.card-body {
    padding: 30px;
}

.alert-error {
    background: #fee;
    border-left: 4px solid #ff6b6b;
    color: #d32f2f;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.5s ease;
}

.alert-error i {
    font-size: 20px;
}

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

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

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.input-icon {
    position: absolute;
    left: 15px;
    color: #667eea;
    font-size: 18px;
    z-index: 1;
}

.form-input {
    width: 100%;
    padding: 15px 15px 15px 50px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    background: #f9f9f9;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-toggle {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    transition: color 0.3s ease;
}

.password-toggle:hover {
    color: #667eea;
}

.input-hint {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.btn-login {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-top: 10px;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
}

.card-footer {
    padding: 20px 30px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    text-align: center;
}

.footer-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.footer-link {
    font-size: 13px;
    color: #667eea;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

.separator {
    color: #ccc;
    font-size: 12px;
}

.login-footer {
    text-align: center;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.version {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 5px;
}

/* ============================================
   EXISTING STYLES (Keep these as they are)
   ============================================ */

header {
    background-color: #3d28a7;
    color: #ecf0f1;
    padding: 10px 0;
    border-bottom: 5px solid #b2dfe9;
}

header .logo {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

header .logo img {
    height: 40px;
    margin-right: 10px;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav ul li a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 8px 15px;
    display: block;
    transition: background-color 0.3s ease;
}

header nav ul li a:hover,
header nav ul li a.active {
    background-color: #3498db;
    border-radius: 5px;
}

header nav ul li.right {
    margin-left: auto;
}

main {
    padding: 20px 0;
    min-height: calc(100vh - 180px); /* Adjust based on header/footer height */
}

footer {
    background-color: #2828a7;
    color: #ecf0f1;
    text-align: center;
    padding: 15px 0;
    margin-top: 20px;
}

/* OLD login-container (keep for backward compatibility) */
.login-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    margin: 50px auto;
    text-align: center;
}

.login-container h2 {
    color: #2c3e50;
    margin-bottom: 25px;
}

.form-group-old {
    margin-bottom: 15px;
    text-align: left;
}

.form-group-old label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group-old input[type="text"],
.form-group-old input[type="password"],
.form-group-old input[type="email"],
.form-group-old input[type="number"],
.form-group-old input[type="date"],
.form-group-old select,
.form-group-old textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding in width */
}

.btn-primary, .btn-info, .btn-warning, .btn-danger, .btn-success {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 5px 0;
}

.btn-primary:hover, .btn-primary:hover {
    background-color: #c0392b;
}

.btn-primary { background-color: #3498db; }
.btn-primary:hover { background-color: #2980b9; }
.btn-info { background-color: #3498db; } /* Biru */
.btn-info:hover { background-color: #2980b9; }
.btn-warning { background-color: #f39c12; } /* Kuning */
.btn-warning:hover { background-color: #e67e22; }
.btn-danger { background-color: #e74c3c; } /* Merah */
.btn-danger:hover { background-color: #c0392b; }
.btn-success { background-color: #2ecc71; } /* Hijau */
.btn-success:hover { background-color: #27ae60; }


.error-message {
    color: #e74c3c;
    background-color: #fdd;
    border: 1px solid #e74c3c;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.success-message {
    color: #2ecc71;
    background-color: #dfd;
    border: 1px solid #2ecc71;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.dashboard-menu ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.dashboard-menu ul li {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}

.dashboard-menu ul li:hover {
    transform: translateY(-5px);
}

.dashboard-menu ul li a {
    display: block;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #34495e;
    font-weight: bold;
    font-size: 1.1em;
}

.dashboard-menu ul li a:hover {
    color: #e74c3c;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

table th, table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #555;
}

table tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover {
    background-color: #f9f9f9;
}

/* Card styles */
.card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.card h3 {
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    color: #fff;
}
.badge-rendah { background-color: #28a745; } /* Hijau */
.badge-sedang { background-color: #ffc107; color: #333;} /* Kuning */
.badge-tinggi { background-color: #dc3545; } /* Merah */

.explanation-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 15px;
    margin-top: 20px;
    font-size: 0.9em;
}
.explanation-box h3, .explanation-box h4 {
    color: #34495e;
    margin-top: 0;
    margin-bottom: 10px;
}
.explanation-box strong {
    color: #e74c3c;
}
.mt-30 { margin-top: 30px; }

/* ============================================
   ANIMATIONS (New)
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column;
        align-items: flex-start;
    }
    header nav ul li.right {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }
    .login-container {
        margin: 20px auto;
        padding: 20px;
    }
    
    /* Responsive untuk login modern */
    .login-card {
        border-radius: 15px;
    }
    
    .card-header, .card-body {
        padding: 20px;
    }
    
    .card-header h1 {
        font-size: 20px;
    }
    
    .form-input {
        padding: 12px 12px 12px 45px;
        font-size: 15px;
    }
    
    .btn-login {
        padding: 14px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .login-wrapper {
        padding: 10px;
    }
    
    .card-header {
        padding: 20px 15px;
    }
    
    .card-body {
        padding: 20px 15px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .separator {
        display: none;
    }
}
/* ============================================
   HEADER BACKGROUND STYLES - VECTOR PATTERN
   ============================================ */

/* Header dengan pattern vector heart */
header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 20px 0;
    border-bottom: 5px solid #17a2b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Pattern heart di background */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 85C30 70 15 55 15 35C15 20 25 10 40 10C50 10 55 15 50 25C45 15 50 10 60 10C75 10 85 20 85 35C85 55 70 70 50 85Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E");
    background-size: 80px;
    opacity: 0.3;
    z-index: 1;
}

/* Efek gelombang di bagian bawah header */
header::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2317a2b8' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    z-index: 1;
}

/* Pastikan konten header di atas pattern */
header .container,
header .logo,
header nav ul,
header h1 {
    position: relative;
    z-index: 2;
}

/* Logo dengan efek modern */
header .logo {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 25px;
    border-radius: 15px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

header .logo img {
    height: 55px;
    margin-right: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

header .logo img:hover {
    transform: scale(1.05);
}

header h1 {
    margin: 0;
    font-size: 2.2em;
    font-weight: 800;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 1px;
}

/* Subtitle di bawah judul */
header .subtitle {
    font-size: 1.1em;
    opacity: 0.9;
    margin-top: 5px;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Navigation dengan efek glassmorphism */
header nav ul {
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 15px 25px;
    border-radius: 15px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

header nav ul li a {
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    display: block;
    transition: all 0.3s ease;
    border-radius: 10px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

header nav ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

header nav ul li a:hover::before {
    left: 100%;
}

header nav ul li a:hover,
header nav ul li a.active {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Icon di navigation */
header nav ul li a i {
    margin-right: 8px;
    font-size: 1.1em;
}

/* User info di kanan */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #28a745;
    font-weight: bold;
}

/* Responsive untuk header */
@media (max-width: 768px) {
    header {
        padding: 15px 0;
    }
    
    header::after {
        height: 15px;
    }
    
    header .logo {
        padding: 10px 15px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    header .logo img {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    header h1 {
        font-size: 1.6em;
    }
    
    header .subtitle {
        font-size: 0.9em;
    }
    
    header nav ul {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
        margin-top: 15px;
    }
    
    header nav ul li.right {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    
    header nav ul li a {
        width: 100%;
        text-align: center;
    }
    
    .user-info {
        justify-content: center;
        width: 100%;
    }
}