/* side bar, warna corporate lebih muda (secondary variants) */
.bg-gradient-primary {
    background-color: #DAB253 !important;
    background-image: linear-gradient(180deg, #DAB253 10%, #7a5f1c 100%) !important;
}

/* bg gradient dari #B08525 ke #DAB253 */
.bg-gradient-corporate {
    background: linear-gradient(to right, #B08525, #DAB253) !important;
}

/* bg gradient dari #282828 ke #4C4E4E */
.bg-gradient-corporate-black {
    background: linear-gradient(to right, #282828, #4C4E4E) !important;
}

/* button, warna corporate primary dark goldenrod */
.btn-corporate-primary-darkgold {
    background-color: #B08525 !important;
    border-color: #B08525 !important;
    color: white !important;
}

.btn-corporate-primary-darkgold:hover {
    background-color: #8a6720 !important;
    border-color: #7c5d1d !important;
    color: white !important;
}

/* button, warna corporate eerie black */
.btn-corporate-primary-black {
    background-color: #282828;
    border-color: #282828;
    color: white;
}

/* button, warna corporate eerie black */
.btn-corporate-secondary-grey {
    background-color: #4C4E4E;
    border-color: #4C4E4E;
    color: white;
}

/* card header */
.bg-corporate {
    background-color: #DAB253 !important;
    color: white;
}

/* card header black*/
.bg-corporate-black {
    background-color: #282828 !important;
    color: white;
}

/* table head, warna corporate lebih muda */
.thead-corporate {
    background-color: #DAB253 !important; 
    color: #ffffff !important;
}

/* thead-corporate-gradient dari #B08525 ke #DAB253 */
/* catatan: Jika ingin gradient dari atas ke bawah,
ganti to right menjadi to bottom */
.thead-corporate-gradient-gold {
    background: linear-gradient(to right, #B08525, #DAB253) !important;
    color: #ffffff !important;
}

.thead-corporate-gradient-black {
    background: linear-gradient(to right, #282828, #4C4E4E) !important;
    color: #ffffff !important;
}

.border-left-corporate-primary-darkgold {
    border-left: 0.25rem solid #B08525 !important;
}

.border-left-corporate-primary-black {
    border-left: 0.25rem solid #282828 !important;
}

.border-left-corporate-secondary-grey {
    border-left: 0.25rem solid #4C4E4E !important;
}

.border-left-corporate-secondary-gold {
    border-left: 0.25rem solid #DAB253 !important;
}



/* text colour primary DarkGoldenod */
.text-corporate-primary-darkgold {
    color: #B08525!important;
}

/* text colour primary Eerie Black */
.text-corporate-primary-black {
    color: #282828 !important;
}

/* .badge-corporate {
    background-color: #B08525 !important;
    color: #fff !important;
} */



/* BADGE STYLING */
.badge {
    font-weight: 600 !important;
    font-size: 0.85rem;
    padding: 0.4em 0.75em;
    border-radius: 0.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Badge Variasi Corporate */
.badge-corporate-gold {
    background-color: #B08525 !important;
    color: #fff !important;
}

.badge-corporate-black {
    background-color: #282828 !important;
    color: #fff !important;
}

.badge-corporate-grey {
    background-color: #4C4E4E !important;
    color: #fff !important;
}

/* Hover efek */
.badge-corporate-gold:hover,
.badge-corporate-black:hover,
.badge-corporate-grey:hover {
    opacity: 0.9;
    transition: 0.3s ease-in-out;
}

/* fonts */
@font-face {
    font-family: 'VisbyCF';
    src: url('/fonts/VisbyCF-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VisbyCF';
    src: url('/fonts/VisbyCF-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VisbyCF';
    src: url('/fonts/VisbyCF-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'VisbyCF';
    src: url('/fonts/VisbyCF-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Font global untuk seluruh body dan tabel */
body,
table, input,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    font-family: 'VisbyCF', sans-serif !important;
    font-weight: normal;
        /* Tambahkan ini jika belum */
}

/* badge kolom module di email_logs */
.badge-module {
    background-color: #4C4E4E !important;
    /* abu gelap corporate */
    color: #ffffff !important;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

/* badge kolom status di email_logs */
/* base class */
.badge-status {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    color: #ffffff !important;
}

/* Process steps (biru muda → progress) */
.badge-status.before_pdf,
.badge-status.after_pdf,
.badge-status.before_send,
.badge-status.enter_sendApprovalEmail,
.badge-status.after_resolve_recipients {
    background-color: #2B6CB0 !important;
    /* corporate blue for process */
}

/* Queued (ungu → pending queue) */
.badge-status.queued_global {
    background-color: #6B46C1 !important;
}

/* Success (emas → corporate success) */
.badge-status.sent_with_pdf,
.badge-status.sent_no_pdf {
    background-color: #B08525 !important;
    /* corporate gold */
    color: #ffffff !important;
}


/* Error (merah) */
.badge-status.failed,
.badge-status.failed_exception {
    background-color: #E53E3E !important;
}

/* Skipped / No Recipient (kuning gelap) */
.badge-status.skipped_no_recipient {
    background-color: #D69E2E !important;
    color: #1A1A1A !important;
}

/* =========================================================
   Email Log Viewer - Simplified Status Mapping
   Tambahan untuk display_status baru dari controller
   ======================================================= */

.badge-status.processing {
    background-color: #2B6CB0 !important;
    color: #ffffff !important;
}

.badge-status.queued {
    background-color: #6B46C1 !important;
    color: #ffffff !important;
}

/* Status Rejected untuk Approval Report */
.badge-status.rejected {
    background-color: #E53E3E !important;
    color: #ffffff !important;
}

/* =========================================================
   EMAIL LOG VIEWER - Enterprise Styling
   =======================================================*/

/* Card khusus email log (opsional, hanya sentuhan kecil) */
.email-log-card .card-body {
    background-color: #faf9f5;
}

@media (max-width: 767.98px) {
    .email-log-card .card-body {
        padding: 0.75rem;
    }
}

/* TABEL UTAMA */
.email-log-table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.email-log-table tbody td {
    font-size: 0.80rem;
    padding: 0.45rem 0.6rem;
    vertical-align: middle;
    border-color: rgba(0, 0, 0, 0.03);
}

/* Zebra + hover yang halus */
.email-log-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.email-log-table tbody tr:nth-child(even) {
    background-color: #f7f6f2;
}

.email-log-table tbody tr:hover {
    background-color: #fff8e5;
    transition: background-color 0.15s ease-in-out;
}

/* Kolom panjang: subject, email, payload */
.email-col-subject {
    max-width: 260px;
}

.email-col-address {
    max-width: 220px;
}

.email-col-payload {
    max-width: 260px;
}

/* Supaya text-truncate berfungsi dalam table */
.email-log-table .text-truncate {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

/* Badge Module (pakai corporate grey) */
.badge-module {
    background-color: #4C4E4E !important;
    color: #ffffff !important;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* BASE STATUS BADGE */
.badge-status {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-block;
    color: #ffffff !important;
    text-transform: none;
}

/* Process / intermediate */
.badge-status.before_pdf,
.badge-status.after_pdf,
.badge-status.before_send,
.badge-status.enter_sendApprovalEmail,
.badge-status.after_resolve_recipients {
    background-color: #2B6CB0 !important;
    /* biru proses */
}

/* Queued */
.badge-status.queued_global {
    background-color: #6B46C1 !important;
    /* ungu queue */
}

/* Success */
.badge-status.sent_with_pdf,
.badge-status.sent_no_pdf {
    background-color: #B08525 !important;
    /* corporate gold */
}

/* Failed */
.badge-status.failed,
.badge-status.failed_exception {
    background-color: #E53E3E !important;
}

/* Skipped / no recipient */
.badge-status.skipped_no_recipient {
    background-color: #D69E2E !important;
    color: #1A1A1A !important;
}

/* ===========================
   Email Log Viewer – Mobile Detail
   =========================== */

/* detail row default: hidden */
.email-log-table .elog-detail-row {
    display: none;
    background-color: #faf7ef;
}

/* hanya muncul di layar kecil */
@media (max-width: 767.98px) {
    .email-log-table .elog-detail-row.show {
        display: table-row;
    }

    .email-log-table .elog-detail-row td {
        border-top: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .btn-icon-only {
        padding: 0.15rem 0.35rem;
        border-radius: 999px;
    }
}

/* di layar >= md, detail row selalu disembunyikan */
@media (min-width: 768px) {
    .email-log-table .elog-detail-row {
        display: none !important;
    }
}

/* Pagination spacing + style */
.email-log-pagination .pagination {
    margin-bottom: 0;
}

.email-log-pagination .page-link {
    padding: 0.25rem 0.6rem;
    margin: 0 0.12rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
}

.email-log-pagination .page-item.active .page-link {
    background-color: #B08525;
    border-color: #B08525;
}

.email-log-pagination .page-item .page-link {
    color: #282828;
}

/* =========================================================
   SIDEBAR BRANDING – Corporate Identity Anchor
   ======================================================= */

.sidebar-brand--stacked {
    padding: 18px 14px;
    gap: 12px;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-brand-logo {
    width: 42px;
    /* lebih besar dari sebelumnya */
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.sidebar-brand-text {
    line-height: 1.15;
}

.sidebar-brand-text .brand-company {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.85;
}

.sidebar-brand-text .brand-product {
    margin-top: 12px;
        /* ⬅️ ini kuncinya */
    font-size: 16px;
    /* hero text */
    font-weight: 700;
    
}

.sidebar-brand-text .brand-subtitle {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 3px;
}

.sidebar-brand-text .brand-site {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-brand-text .brand-site__name {
    font-weight: 600;
}

/* --- Active Site block (clean 2 lines) --- */
.sidebar-brand-text .brand-site {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    text-align: center;
}

.sidebar-brand-text .brand-site__label {
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.85;
}

.sidebar-brand-text .brand-site__name {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;

    /* supaya tidak pecah aneh */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    margin-left: auto;
    margin-right: auto;
}

.sidebar-brand-text .brand-company {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sidebar-brand-logo {
    width: 48px;
    /* sebelumnya 42–44, naikkan sedikit */
    height: auto;
}

/* ===== Sidebar Brand spacing & polish ===== */
.sidebar-brand--stacked {
    padding-top: 26px !important;
    padding-bottom: 14px !important;
    margin-bottom: 10px !important;
}

/* Logo readability (sementara masih logo + teks) */
.sidebar-brand-logo {
    width: 48px !important;
    height: auto;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

/* Active Site divider: soften / or remove */
.sidebar-brand-text .brand-site {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* kabur */
    padding-top: 10px !important;
    margin-top: 12px !important;
    text-align: center;
}

.sidebar-brand-text .brand-site__label {
    margin-top: 6px;
        /* ⬅️ ini kuncinya */
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.85;
}

.sidebar-brand-text .brand-site__name {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    margin-left: auto;
    margin-right: auto;
}

/* Divider after brand: give breathing room */
.sidebar .sidebar-divider.my-0 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    opacity: 0.25;
}

/* =========================================================
   REPORT TABLE – Corporate Reporting Pages
   ======================================================= */

.report-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.report-title {
    font-weight: 600;
    color: #3c3f58;
    margin-bottom: 1.25rem;
}

.report-filter-label {
    font-weight: 500;
    color: #5b5f7a;
    margin-bottom: 0.35rem;
    display: block;
}

.report-filter-input {
    border-radius: 10px;
    min-height: 42px;
    border: 1px solid #d7dbea;
    box-shadow: none;
}

.report-filter-input:focus {
    border-color: #b9bfd3;
    box-shadow: none;
}

/* Report table */
.table-report thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.table-report tbody td {
    font-size: 0.82rem;
    padding: 0.45rem 0.6rem;
    vertical-align: top;
}

/* Zebra halus */
.table-report tbody tr:nth-child(even) {
    background-color: #f7f6f2;
}

.table-report tbody tr:hover {
    background-color: #fff8e5;
    transition: background-color 0.15s ease-in-out;
}