/* assets/css/styles.css */
/* 20260129 - btnDownloadPdf */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensures padding/borders are included in element's total width/height */
}

h3 {
     font-weight: bold;
     font-size: larger;
    }

p {
    font-size: medium;
    }

h3, label :not(.aiNewsReportChoice label) :not(.input-title){
    display: flex;
    align-items: center; /* Ini kuncinya: Rata tengah vertikal */
    gap: 10px;       

    margin-top: 5px ;    /* Jarak antara icon dan teks */
    margin-bottom: 5px;
    }

h3, .input-title {
    display: flex !important;
    align-items: center !important; /* Kunci sejajar vertikal */
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 8px;
    font-weight: bold;
    line-height: 1;                 /* Menghilangkan sisa ruang antar baris teks */

    }

button {
   height: 35px;
   border-radius: 10px; 
   font-size: large;
    }

.btnAction_1 {
    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Jarak antara icon dan teks */
    
    /* Styling Tombol */
    padding: 10px 20px;
    font-size: 16px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 12px; /* Lebih rounded agar terlihat modern di 2026 */
    background-color: #1a1a1a;  /* #1a1a1a; Hitam elegan */
    color: #ffffff;
    transition: all 0.3s ease;
}

.btnAction_1::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    
    /* Memasukkan file PNG */
    background-image: url('../icons/logo-insight.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    border-radius: 50% ;
}

/* Efek Hover */
.btnAction_1:hover {
    background-color: #333333;
    transform: translateY(-2px); /* Efek sedikit naik saat hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Efek Klik */
.btnAction_1:active {
    transform: scale(0.95);
}



input {
    min-height: 30px;
    border-radius: 5px;
    font-size: medium;
    }

textarea {
    border-radius: 5px;
    font-size: large;
    }
.standardButton {
    background-color: #4CAF50; /* Hijau */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: medium;
    }

img {
    border-radius: 5px;
    }

.standardButton:hover {
    background-color: #45a049;
    }

#result_test, #result_company_profile, #result_company_news {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
}

#result_company_profile img {
    display: block;
    margin-top: 10px;
    max-width: 100%;
    height: auto;
}

.news-title {
    font-weight: bold;
}


.finnhub-container {
    border-style: solid;
    border-color: white;
    background-color:grey ;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 30px;

   /* Perbaikan: Menggunakan lebar persentase yang aman */
    width: 100%; 
    max-width: 1200px; /* Batas maksimal agar tidak terlalu melar di monitor ultra-wide */
    margin-left: auto;
    margin-right: auto;
    
    /* Pastikan box-sizing aktif agar padding tidak menambah lebar */
    box-sizing: border-box;
    display: block;
    clear: both;

    }


/* -->input dan textarea juga mengikuti lebar container */
.finnhub-container input[type="text"], 
.finnhub-container textarea {
    width: 100%;
    max-width: 100%; /* Mencegah elemen keluar jalur */
    box-sizing: border-box;
    margin-top: 0px;
    margin-bottom: 15px;
}

.aiNewsReportChoice {
    background-color: #555555;
    color: white ;
    border-radius: 10px; 
    padding :15px ;
   
    display: flex ; /*semua elemen dalam 1 baris */
    flex-wrap: wrap ; /*layar kecil -> radio button pindah kebawah*/
    align-items : center ;
    gap: 10px ;
    padding : 15px ;

    margin-bottom: 15px;

    }

/* Memastikan input radio dan labelnya nempel rapi */
.aiNewsReportChoice label {
    display: inline-flex !important;
    align-items: center;
    width : auto ;
    cursor: pointer;
    vertical-align: middle;

    margin-bottom: 5px;   /* Reset margin agar tidak berantakan di dalam choice */
    gap: 5px;
    
}

.aiNewsReportChoice input[type="radio"] {
    margin: 0 -5px 0 0 !important; /* Jarak antara lingkaran radio dan teksnya */
    cursor: pointer;
    width: auto; /* Mencegah radio button melar karena aturan input global */
    }   



.aiNewsReportChoice p {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Gunakan selector yang sangat spesifik untuk label di dalam box choice */
.finnhub-container .aiNewsReportChoice label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0 10px 0 0; /* Atur margin: atas 0, kanan 10px, bawah 0, kiri 0 */
    gap: 5px;
    font-size: 13px;    /* Ukuran sedikit lebih kecil dari teks "Trader Report" */
    font-weight: normal; /* Agar tidak se-tebal judulnya */
}
/* Pastikan radio button tidak merusak alignment */
.aiNewsReportChoice input[type="radio"] {
    margin: 0;
}




/*ICON*/



.icon-medium {
    
    display: inline-block;
    width: 40px;
    height: 40px;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    border-radius: 20% ;
    }


/* Perbaikan Icon Medium agar tidak merusak baris */
.icon-medium , .icon-small , .icon-small2 {
    display: block;      /* Menghindari whitespace di bawah image */
    
    object-fit: cover;   /* Memastikan gambar tidak gepeng */
    flex-shrink: 0;      /* Mencegah icon menciut */
}

/* Pastikan icon tidak punya margin yang mendorong teks */
.icon-small, .icon-medium {
    display: inline-block;
    margin: 0; 
    vertical-align: middle;
}



.icon-small {
    
    width: 24px;
    height: 24px;
    }

.icon-small2 {
    
    width: 18px;
    height: 18px;
    }
    

.form-group { 
    margin-top: 20px ;
    margin-bottom: 20px; }
    
.input-title {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: bold; 
    margin-right: 10px;
    }

    /* Hilangkan margin label global jika label tersebut ada di dalam input-title */
.input-title label {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px;
    cursor: pointer;
}

/* BUTTON DOWNLOAD PDF */
/* Kita gunakan Class agar bisa dipakai berulang kali */
.btnDownloadPdf {
    /* 1. Menggunakan Flexbox agar ikon dan teks sejajar sempurna di tengah */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 2. Jarak antara ikon dan teks */
    gap: 8px;
    
    /* 3. Hapus tinggi kaku (35px). Biarkan padding yang mengatur ukuran tombol */
    height: auto !important; 
    padding: 8px 16px;
    
    /* 4. Styling Dasar */
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #ffffff; /* Warna putih bersih */
    color: #333;
    
    /* 5. Mencegah teks turun ke bawah (wrap) jika tombol sempit */
    white-space: nowrap; 
    
    /* 6. Penting: Menetralkan tinggi baris teks agar tidak terdorong ke bawah */
    line-height: 1; 
    transition: all 0.3s ease;
}

/* Efek saat kursor menyentuh tombol */
.btnDownloadPdf:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

/* Mengatur ikon di dalam tombol download */
.btnDownloadPdf img {
    /* Mencegah ikon menciut atau gepeng */
    flex-shrink: 0;
    display: block;
    margin: 0;
}