/* ==========================================================================
   EPRINTS MODERN THEME - COMBINED (Login + Dashboard + Workarea)
   ========================================================================== */

/* ---------------------------------------------------------
   1. GLOBAL RESET & TYPOGRAPHY
   --------------------------------------------------------- */
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f4f6f9; /* Background abu-abu muda modern */
    color: #333;
    line-height: 1.6;
    margin: 0;
}

a {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #003d82;
}

/* ---------------------------------------------------------
   2. CARD STYLE LAYOUT (Kotak Putih Dasar)
   --------------------------------------------------------- */
/* Style dasar untuk SEMUA kotak konten */
.ep_block, 
.ep_summary_box, 
.ep_search_results, 
#ep_datasets_table, 
.ep_tab_panel,
.ep_import_bar {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 12px; /* Lebih rounded */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Shadow halus */
    padding: 25px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   3. LOGIN PAGE SPECIFIC (Teknik CSS :has)
   --------------------------------------------------------- */
/* LOGIKA: Jika .ep_block memiliki form login di dalamnya, 
   ubah ukurannya menjadi kecil dan taruh di tengah layar.
   (Browser modern support selector :has)
*/
.ep_block:has(.ep_login_form_table) {
    max-width: 450px;
    margin: 80px auto; /* Posisi tengah vertikal & horizontal */
    padding: 40px;
    border-top: 5px solid #0056b3; /* Aksen biru di atas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Shadow lebih tebal untuk login */
}

/* Fallback untuk browser lama: Form login di dalam card */
.ep_login_form_table {
    margin: 0 auto;
    width: 100%;
}

/* Ubah susunan form login menjadi vertikal */
.ep_login_form_table > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.ep_login_form_table label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
    text-align: left;
}

/* Input khusus login */
.ep_login_form_table input.ep_form_text {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #f8f9fa;
}

.ep_login_form_table input.ep_form_text:focus {
    background-color: #fff;
    border-color: #0056b3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
}

/* Sembunyikan instruksi login yang mengganggu */
.ep_block:has(.ep_login_form_table) > p {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------
   4. MODERN TABLES (Untuk Dashboard & Workarea)
   --------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Header Tabel */
th.ep_columns_title, 
th.ep_table_header, 
.ep_view_details_table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 15px;
    border-bottom: 2px solid #e9ecef;
    text-align: left;
}

/* Baris Data */
td.ep_columns_cell, 
td.ep_table_data,
.ep_view_details_table td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f1f1;
    color: #444;
    font-size: 0.95rem;
}

/* Hover Effect pada baris */
tr.ep_table_row:hover td,
tr.row_a:hover td, 
tr.row_b:hover td {
    background-color: #f8fbff; /* Biru sangat muda */
}

/* Bersihkan border tabel lama */
.ep_columns, #ep_datasets_table {
    border: none;
}

/* Ikon Aksi (View/Edit/Delete) */
.ep_action_list li {
    display: inline-block;
    margin-right: 10px;
}

.ep_form_action_icon {
    opacity: 0.6;
    transition: all 0.2s;
    height: 18px;
    width: auto;
}

.ep_form_action_icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* ---------------------------------------------------------
   5. BUTTONS & UI ELEMENTS
   --------------------------------------------------------- */
/* Tombol Utama (Login, New Item, Save) */
.ep_form_action_button, 
input[type="submit"] {
    background-color: #0056b3;
    color: white;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: inline-block;
}

.ep_form_action_button:hover, 
input[type="submit"]:hover {
    background-color: #004494;
    transform: translateY(-1px);
}

/* Tombol Login Khusus (Lebar Penuh) */
.ep_login_form_table .ep_form_action_button {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    font-size: 16px;
}

/* Tombol Danger (Destroy/Remove) */
input[value="Destroy"], 
input[value="Remove"],
input[name="_action_remove"] {
    background-color: #dc3545;
}

input[value="Destroy"]:hover {
    background-color: #c82333;
}

/* Form Inputs (Select & Text General) */
select, input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    color: #495057;
}

/* ---------------------------------------------------------
   6. TABS & WORKFLOW (Profil User)
   --------------------------------------------------------- */
.ep_tab_bar {
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 25px;
    padding-left: 0;
    list-style: none;
    display: flex;
    gap: 20px;
}

.ep_tab_link {
    display: block;
    padding: 10px 0;
    color: #6c757d;
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    position: relative;
}

.ep_tab_link:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Tab Aktif (Garis Bawah Biru) */
.ep_tab_selected .ep_tab_link {
    color: #0056b3;
}

.ep_tab_selected .ep_tab_link::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Menempel di garis container */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0056b3;
}

.ep_tab_selected, .ep_tab_bar li {
    border: none;
    background: none;
}

/* Judul Section di Profil */
.ep_title_row {
    background: transparent;
    border-bottom: 2px solid #0056b3;
}

.ep_title_row_inner {
    padding-top: 20px;
    padding-bottom: 10px;
}

.ep_title {
    font-size: 1.2rem;
    color: #0056b3;
    font-weight: 700;
}

/* ---------------------------------------------------------
   7. ALERTS & HELP BOXES
   --------------------------------------------------------- */
/* Kotak Help/Review Instructions */
.ep_summary_box_title {
    background: #495057;
    color: white;
    padding: 12px 20px;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.ep_summary_box_body {
    border: 1px solid #e1e4e8;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

/* Filter Bar (User Workarea) */
.ep_items_filters {
    background: #eef2f7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid #dae0e5;
}

.ep_items_filters a {
    background: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #ced4da;
    display: inline-flex;
    align-items: center;
}

.ep_items_filters a:hover {
    border-color: #0056b3;
    color: #0056b3;
}

.ep_items_filters img {
    margin-right: 6px;
    opacity: 0.6;
}

/* Warning & Messages */
.ep_msg_warning, .ep_msg_message, .ep_msg_error {
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    font-weight: 500;
}

.ep_msg_warning {
    background-color: #fff8e1;
    border-color: #ffe082;
    color: #b00020; /* Teks merah tua agar kontras */
}

/* Hide elemen layout jadul */
.ep_columns_alter { display: none; }
.ep_msg_warning_icon { display: none; }

/* --- FIX LAYOUT IMPORT & ADD COLUMN --- */

/* 1. Memperbaiki Baris Import (Tengah & Berjarak) */
.ep_import_bar > div, 
.ep_import_bar form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Memberi jarak antar elemen agar tidak mepet */
    flex-wrap: wrap;
}

/* 2. Memperbaiki Baris Add Column (Bawah Tabel) */
.ep_columns_add form {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Jarak antara text, dropdown, dan tombol */
    margin-top: 20px;
}

/* 3. Mencegah Input/Select menjadi Raksasa di bagian Toolbar */
.ep_import_bar select, 
.ep_import_bar input,
.ep_columns_add select, 
.ep_columns_add input {
    width: auto !important; /* Paksa lebar sesuai isi, jangan full screen */
    margin: 0 !important;   /* Reset margin aneh bawaan */
    display: inline-block !important;
}

/* 4. Merapikan Tombol New Item di paling atas */
.ep_action_list {
    text-align: center; /* Tengahkan tombol New Item */
    padding: 0;
    margin: 0;
}


/* =========================================
   FIX: IMPORT BAR & ADD COLUMN LAYOUT
   ========================================= */

/* 1. Atur Container agar Isinya Berjejer (Horizontal) */
.ep_import_bar > div > div,    /* Target container Import */
.ep_columns_add form {         /* Target container Add Column */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 15px; /* Memberi jarak enak antar elemen */
}

/* 2. Rapikan Label (Teks 'Import from' & 'Add Column') */
.ep_import_bar label,
.ep_columns_add label {
    display: flex !important;
    align-items: center;
    gap: 10px; /* Jarak antara teks label dengan dropdown */
    margin: 0 !important; /* Hapus margin bawah default */
    font-weight: 600;
    white-space: nowrap; /* Mencegah teks turun baris */
}

/* 3. Paksa Ukuran Dropdown & Tombol Jadi Compact (Tidak Full Width) */
.ep_import_bar .nice-select,   /* Plugin dropdown JS */
.ep_columns_add .nice-select,
.ep_import_bar select,         /* Fallback dropdown asli */
.ep_columns_add select,
.ep_import_bar input[type="submit"],
.ep_columns_add input[type="submit"] {
    width: auto !important;    /* Ikuti lebar konten, jangan layar penuh */
    min-width: 150px;          /* Lebar minimal agar teks terbaca */
    margin: 0 !important;      /* Reset margin aneh */
    height: 38px;              /* Samakan tinggi input dan tombol */
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}

/* 4. Khusus Tombol (Agar sejajar visual dengan dropdown) */
.ep_import_bar input[type="submit"],
.ep_columns_add input[type="submit"] {
    min-width: auto;           /* Tombol tidak perlu terlalu lebar */
    padding: 0 20px;
}

/* =========================================
   MODERN HELP / INSTRUCTION BOX STYLING
   ========================================= */

/* 1. Container Utama (Kartu) */
#ep_review_instructions.ep_summary_box {
    background-color: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    margin-bottom: 30px;
    overflow: hidden; /* Agar radius border tidak tembus */
    font-family: 'Inter', sans-serif;
}

/* 2. Header (Judul Help) */
#ep_review_instructions .ep_summary_box_title {
    background-color: #f1f5f9; /* Abu-abu kebiruan muda */
    color: #334155;
    padding: 12px 20px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

/* Link Collapse (+/-) di Header */
#ep_review_instructions .ep_box_collapse_link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
#ep_review_instructions .ep_box_collapse_link:hover {
    color: #0f172a;
}
/* Menyembunyikan gambar +/- bawaan yang jelek, ganti nanti kalau mau pake FontAwesome */
#ep_review_instructions .ep_box_collapse_link img {
    opacity: 0.6;
}

/* 3. Isi Konten */
#ep_review_instructions .ep_summary_box_body {
    padding: 25px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

#ep_review_instructions p {
    margin-bottom: 15px;
}

/* 4. Transformasi Daftar Ikon Menjadi GRID (Modern) */
/* Mengubah layout vertikal menjadi kotak-kotak rapi */
#ep_review_instructions .ep_icontable {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsif */
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 25px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
}

/* Style untuk setiap Item di dalam Grid */
#ep_review_instructions .ep_icontable > div {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}

#ep_review_instructions .ep_icontable > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}

/* Kolom Ikon */
#ep_review_instructions .ep_icontable > div > div:first-child {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff; /* Background biru muda di belakang ikon */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Gambar Ikon */
#ep_review_instructions .ep_icontable img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Kolom Teks Penjelasan */
#ep_review_instructions .ep_icontable > div > div:last-child {
    font-weight: 500;
    color: #334155;
    font-size: 0.9rem;
}

/* =========================================
   PHRASE EDITOR MAKEOVER
   ========================================= */

/* 1. Container Tabel Utama */
#ep_phraseedit_table {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    border-collapse: separate; 
    border-spacing: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-top: 20px;
    border: 1px solid #e9ecef;
}

/* 2. Header Tabel */
#ep_phraseedit_table th {
    background-color: #f8f9fa;
    color: #495057;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 15px 20px;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
}

/* 3. Baris & Sel */
#ep_phraseedit_table td {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top; /* Agar teks panjang rapi di atas */
    font-size: 0.9rem;
    color: #333;
}

#ep_phraseedit_table tr:last-child td {
    border-bottom: none; /* Hapus garis di baris terakhir */
}

#ep_phraseedit_table tr:hover td {
    background-color: #f1f3f5; /* Efek hover baris */
}

/* 4. Kolom Identifier (Kiri) */
/* Kita buat font monospace agar terlihat seperti kode */
#ep_phraseedit_table td[id$="_label"] {
    font-family: 'Consolas', 'Monaco', monospace;
    color: #d63384; /* Warna pink kemerahan ala code highlight */
    font-size: 0.85rem;
    width: 25%;
}

/* 5. Kolom Content (Tengah - Widget Edit) */
.ep_phraseedit_widget {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px 15px;
    min-height: 40px;
    cursor: text;
    transition: all 0.2s;
    font-family: inherit; /* Pakai font website, bukan monospace */
    width: 100% !important; /* Paksa lebar penuh */
    box-sizing: border-box;
}

.ep_phraseedit_widget:hover, 
.ep_phraseedit_widget:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

/* Ketika widget berubah jadi Textarea (Mode Edit) */
#ep_phraseedit_table textarea {
    width: 100% !important;
    border: 1px solid #80bdff;
    border-radius: 4px;
    padding: 10px;
    font-family: inherit;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* 6. Kolom Source (Kanan) */
#ep_phraseedit_table td:last-child {
    color: #6c757d;
    font-size: 0.8rem;
    font-style: italic;
    white-space: nowrap;
    width: 10%;
}

/* 7. Tombol-tombol kecil (Save, Reset, Cancel) */
#ep_phraseedit_table input[type="button"] {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    color: #495057;
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 3px;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
}
#ep_phraseedit_table input[type="button"]:hover {
    background-color: #dde2e6;
}
/* Tombol Save khusus warna biru */
#ep_phraseedit_table input[type="button"][value="Save"] {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* 8. "Add New Phrase" Bar (Di atas tabel) */
#ep_phraseedit_addbar {
    background: #e7f1ff !important; /* Biru muda segar */
    border: 1px solid #b6d4fe !important;
    border-radius: 8px;
    padding: 15px 20px !important;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Input text di addbar */
#ep_phraseedit_newid {
    border: 1px solid #ced4da !important;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.9rem;
    width: 300px;
}

/* Hapus style font monospace kaku bawaan di seluruh tabel */
.ep_phraseedit_widget, #ep_phraseedit_table textarea {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
}