.styled-input {
    background-color: #f9f9fc; /* abu muda */
    border: 1px solid #ccc; /* abu medium */
    border-radius: 6px;
    padding: 8px 10px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.styled-input:focus {
    border-color: #4dabf7; /* biru agak terang */
    box-shadow: 0 0 4px rgba(77, 171, 247, 0.5);
    background-color: #ffffff;
}

label {
    font-weight: 600;
    color: #333;
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
}

label::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: #4dabf7;
    margin-top: 2px;
    border-radius: 2px;
}

/* Judul section */
.form-section-title {
    font-weight: 700;
    font-size: 1.7rem; /* lebih besar dari teks biasa */
    color: #ffffff; /* biru Bootstrap, bisa diganti */
    border-left: 4px solid #ffffff; /* garis kiri */
    padding-left: 10px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Alternatif: background ringan */
.form-section-bg {
    background-color: #0d6efd; /* abu-abu sangat terang */
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.second-form-section-bg {
    background-color: #198754; /* abu-abu sangat terang */
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Sidebar nav links */
.offcanvas .nav-link {
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

/* Hover effect */
.offcanvas .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffc107; /* kuning highlight */
    transform: translateX(5px); /* geser dikit ke kanan */
}

/* Active nav item */
.offcanvas .nav-link.active {
    background-color: rgba(255, 193, 7, 0.2); /* kuning lembut */
    color: #ffc107; /* teks kuning */
    font-weight: 600;
}

/* CSS untuk animasi sidebar dan efek hover */
.offcanvas-start {
    transition: transform 0.3s ease-in-out;
}

.offcanvas-body .nav-link {
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
    border-radius: 8px;
    margin-bottom: 5px;
}

.offcanvas-body .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.offcanvas-title {
    animation: fadeIn 0.5s ease-in-out;
}

/* ======================================= */
/* Tambahan CSS untuk Accent Colors Navbar */
/* ======================================= */

/* Warna Dasar Bootstrap (Jika Anda menggunakan nama-nama ini) */
.accent-primary {
    --accent-color: #0d6efd;
} /* rekap_kapal (Biru Default) */
.accent-success {
    --accent-color: #198754;
} /* voyages (Hijau) */
.accent-info {
    --accent-color: #0dcaf0;
} /* sib_documents (Biru Muda) */
.accent-warning {
    --accent-color: #ffc107;
} /* vehicles (Kuning) */
.accent-secondary {
    --accent-color: #6c757d;
} /* properties (Abu-abu) */
.accent-danger {
    --accent-color: #dc3545;
} /* reports (Merah) */
.accent-ships {
    --accent-color: #6f42c1;
} /* ships (Hijau Tosca/Cian Tua) */

/* Pastikan style dasar navbar-accent ada dan tidak berubah: */
.navbar-accent {
    border-bottom: none !important;
    box-shadow: 0 4px 0 0 var(--accent-color, #0d6efd); /* Fallback ke Biru */
    transition: box-shadow 0.3s ease-in-out;
}

/* ======================================= */
/* Tambahan CSS untuk Accent Colors Sidebar */
/* ======================================= */

/* Definisi Warna Transparan untuk Background Aktif Sidebar */
/* Menggunakan opacity 0.2 dari warna card masing-masing */
.sidebar-accent-primary {
    --sidebar-bg: rgba(13, 110, 253, 0.2);
    --sidebar-color: #0d6efd;
}
.sidebar-accent-success {
    --sidebar-bg: rgba(25, 135, 84, 0.2);
    --sidebar-color: #198754;
}
.sidebar-accent-info {
    --sidebar-bg: rgba(13, 202, 240, 0.2);
    --sidebar-color: #0dcaf0;
}
.sidebar-accent-warning {
    --sidebar-bg: rgba(255, 193, 7, 0.2);
    --sidebar-color: #ffc107;
}
.sidebar-accent-secondary {
    --sidebar-bg: rgba(108, 117, 125, 0.2);
    --sidebar-color: #6c757d;
}
.sidebar-accent-danger {
    --sidebar-bg: rgba(220, 53, 69, 0.2);
    --sidebar-color: #dc3545;
}
.sidebar-accent-ships {
    --sidebar-bg: rgba(111, 66, 193, 0.2);
    --sidebar-color: #6f42c1;
} /* ships (Ungu) */

/* Menimpa Style Default Nav Link Active */
.offcanvas-body .nav-link.active {
    /* Menghapus gaya aktif default yang Anda miliki di bagian atas file */
    background-color: transparent !important;
    color: #ffc107 !important; /* Tetap pakai kuning default jika tidak ada aksen */
    font-weight: 600;
}

/* Style Khusus untuk Link Modul yang Memiliki Warna Accent */
.offcanvas-body .nav-link.active[class*="sidebar-accent-"] {
    /* Menggunakan warna transparan sebagai background */
    background-color: var(--sidebar-bg) !important;
    /* Menggunakan warna solid sebagai teks */
    color: var(--sidebar-color) !important;
    font-weight: 700 !important;

    /* Garis Kiri Tebal */
    border-left: 4px solid var(--sidebar-color);
    padding-left: 11px; /* Sesuaikan padding agar konten tidak tertutup border */
    transform: none !important; /* Hapus efek translateX yang ada di hover, agar link active tetap di tempat */
}

/* Style Khusus untuk Dashboard (agar tetap menggunakan default kuning) */
.sidebar-dashboard-link.active {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
    padding-left: 15px !important; /* Kembalikan padding default */
}

/* ======================================= */
/* Kustomisasi Tombol Outline Warna */
/* ======================================= */

/* Tombol Outline Ungu untuk Kapal/Ships */
.btn-outline-ships {
    color: #6f42c1; /* Warna teks ungu */
    border-color: #6f42c1; /* Warna garis luar ungu */
    transition: all 0.2s ease;
}

.btn-outline-ships:hover,
.btn-outline-ships:focus {
    color: #fff; /* Warna teks putih saat hover */
    background-color: #6f42c1; /* Background ungu solid saat hover */
    border-color: #6f42c1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ======================================= */
/* Kustomisasi Scrollbar (Hanya Chrome/Webkit) */
/* ======================================= */

/* 1. Mengatur lebar/tinggi scrollbar */
::-webkit-scrollbar {
    width: 8px; /* Mengatur lebar untuk scrollbar vertikal */
    height: 8px; /* Mengatur tinggi untuk scrollbar horizontal */
}

/* 2. Style TRACK (bagian belakang scrollbar yang diam) */
::-webkit-scrollbar-track {
    background: #212529; /* Warna gelap, serasi dengan navbar/sidebar bg-dark */
    border-radius: 10px;
}

/* 3. Style THUMB (bagian yang bisa digeser) */
::-webkit-scrollbar-thumb {
    background: #495057; /* Warna abu-abu yang lebih terang, mudah dilihat di latar gelap */
    border-radius: 10px;
}

/* 4. Style THUMB saat di-hover (opsional, untuk interaksi) */
::-webkit-scrollbar-thumb:hover {
    background: #6c757d; /* Warna abu-abu yang sedikit lebih terang saat di-hover */
}

/* Opsional: Jika Anda ingin menggunakan warna accent (misal: ungu/primary) pada THUMB,
   Anda bisa ganti background di atas dengan warna accent, misalnya #6f42c1 */
/*
::-webkit-scrollbar-thumb {
    background: #6f42c1;
    border-radius: 10px;
}
*/

.table-danger,
.table-danger > td,
.table-danger > th {
    background-color: #ff0000 !important; /* Merah untuk Expired */
    color: #000000;
}

.table-warning,
.table-warning > td,
.table-warning > th {
    background-color: #ffa500 !important; /* Oranye untuk Nearly Expired (14 hari) */
    color: #000000;
}

.table-nearly-expired,
.table-nearly-expired > td,
.table-nearly-expired > th {
    background-color: #ffff00 !important; /* Kuning untuk Nearly Expired (30 hari) */
    color: #000000;
}

.table-success,
.table-success > td,
.table-success > th {
    background-color: #01b050 !important; /* Hijau untuk Valid */
    color: #000000;
}

.print-only {
    display: none;
}

/* ===== TANDA TANGAN ===== */
.signature-section {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    text-align: center;
}

.signature-item {
    width: 23%;
}

.signature-line {
    border-bottom: 1px solid #000;
    height: 30px;
    margin-top: 40px;
    width: 100%;
}

@media print {
    /* Sembunyikan semua yang tidak perlu */
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    /* Biar konten full halaman */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hilangkan shadow & background bootstrap */
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd;
        /* page-break-inside: avoid; */
    }
    /* Rapikan margin print */
    body {
        margin: 0;
    }

    /* Warna tetap muncul di print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}