/* =====================================================================
   style.css — GREKONGSI MINIMAL untuk halaman login monitoring.tiketgraha.id
   ---------------------------------------------------------------------
   CATATAN PENTING:
   style.css ASLI dari template "Bitter Mobile Template" TIDAK ADA di arsip
   /var/www/public_html/tiketing/. Folder assets/ yang ada berisi template
   BERBEDA (Bootstrap 5: app.css, apexcharts, datatable).

   Berkas ini adalah REKONSTRUKSI MINIMAL, bukan salinan template asli.
   Fungsinya hanya memberi layout dasar untuk class yang dipakai login.php,
   sehingga form login tetap rapi dan bisa dipakai.

   Untuk tampilan persis seperti semula, ganti berkas ini dengan style.css
   asli dari backup aplikasi.

   Bootstrap 3.3.7 dimuat dari CDN, jadi semua class bawaan
   (form-control, btn, btn-primary, btn-block, form-group) sudah normal.
   Yang perlu ditangani di sini hanya class kustom template:
   appHeader, pageTitle, sectionTitle, appContent, login-form, brand,
   thumbnail, btn-container, divider, loading.
   ===================================================================== */

body {
    color: #000000;
    background-color: #f2f6fa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- Judul halaman --- */
.appHeader {
    text-align: center;
    padding: 18px 10px 0;
}

.pageTitle {
    font-size: 20px;
    font-weight: 600;
}

/* --- Kotak konten utama --- */
#appCapsule {
    padding: 0 0 40px;
}

.appContent {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.sectionTitle .title h1 {
    font-size: 26px;
    margin: 0;
    letter-spacing: .5px;
}

.sectionTitle .lead {
    color: #6c757d;
    font-size: 14px;
}

/* --- Logo --- */
.brand .thumbnail {
    border: 0;
    margin-bottom: 14px;
}

.brand img {
    max-width: 100%;
    height: auto;
}

/* --- Form --- */
.login-form .form-control {
    height: 42px;
}

.btn-container {
    margin-top: 6px;
}

.btn-container .btn {
    height: 42px;
    font-weight: 600;
}

/* --- Pemisah --- */
.divider {
    border-top: 1px solid #e6ebf1;
}

/* --- Overlay loading (dikendalikan pace.min.js) --- */
.loading {
    display: none;
}

/* --- Ikon mata pada field password --- */
#mybutton {
    position: relative;
    z-index: 1;
    left: 90%;
    top: -25px;
    cursor: pointer;
}

/* --- Utilitas margin yang dipakai markup tapi hanya ada di BS4/BS5 --- */
.mt-3 { margin-top: 1rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.text-center { text-align: center; }

/* --- Layar kecil --- */
@media (max-width: 480px) {
    .appContent {
        padding: 16px;
        margin: 0 12px;
    }
    .sectionTitle .title h1 {
        font-size: 22px;
    }
}