/* ==========================================================
   LokerPro Theme Dark Mode
   ========================================================== */

html[data-theme="dark"]{

    --pjs-body-bg: #121212;
    --pjs-card-bg: #1e1e1e;
    --pjs-header-bg: #1a1a1a;

    --pjs-text: #e5e7eb;
    --pjs-button: #fd1d3c;
    --pjs-text-soft: #cbd5e1;
    --pjs-border: #3a3a3a;

    --pjs-primary: #2f7df6;
    --pjs-primary-hover: #4c90f7;

    --pjs-shadow: rgba(0,0,0,.35);

}

html[data-theme="dark"] body{

   background:var(--pjs-body-bg);
   color:var(--pjs-text);

}

html[data-theme="dark"] .site{

   background:var(--pjs-body-bg);

}

/* ==========================================================
   HEADER
========================================================== */

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .pjs-headwrapper{

    background:#1a1a1a;

}

html[data-theme="dark"] .pjs-search input{

   background:#2a2a2a;
   color:#f2f2f2;
   border:1px solid #444;

}

html[data-theme="dark"] .pjs-search input::placeholder{

   color:#9b9b9b;

}


html[data-theme="dark"] .pjs-topnotification{
    background:#1f1f1f !important;
    color:#f3f3f3 !important;
}

html[data-theme="dark"] .wrap-marquee{
    background:transparent !important;
}

html[data-theme="dark"] .pjs-topnotification a{
    color:#ffffff !important;
}

html[data-theme="dark"] .pjs-mainmenu #primary-menu > li:first-child > a{
    background:#2b2b2b !important;
}

html[data-theme="dark"] .pjs-mainmenu{
    background:#1f1f1f !important;
}
/* ==========================================================
   Navigation
========================================================== */

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .pjs-menuwrap{

   background:#1a1a1a;

}

html[data-theme="dark"] .pjs-mainmenu #primary-menu > li > a{

   color:#f2f2f2;

}

html[data-theme="dark"] .pjs-mainmenu #primary-menu > li:hover > a,
html[data-theme="dark"] .pjs-mainmenu #primary-menu > li.current-menu-item > a,
html[data-theme="dark"] .pjs-mainmenu #primary-menu > li.current_page_item > a{

   color:#4da3ff;

}

/* ==========================================================
   White Box
========================================================== */

html[data-theme="dark"] .pjs-box{

   background:#1f1f1f;

   border:1px solid #303030;

   box-shadow:none;

}

html[data-theme="dark"] .pjs-box-content{

   background:#1f1f1f;

   border:none;

   box-shadow:none;

}

html[data-theme="dark"] .widget{

   background:#1f1f1f;

   border:1px solid #303030;

   box-shadow:none;

}

html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .widget h2,
html[data-theme="dark"] .widget h3{

   color:var(--pjs-text);

}

html[data-theme="dark"] .widget a{

   color:var(--pjs-text-soft);

}

html[data-theme="dark"] .widget a:hover{

   color:#4da3ff;

}

html[data-theme="dark"] .widget li{

   border-color:#353535;

}

/* ==========================================================
   Homepage Post Card
========================================================== */

html[data-theme="dark"] article.pjs-box-content{

   background:#1f1f1f;

   border:none;

   box-shadow:none;

}

html[data-theme="dark"] article.pjs-box-content .entry-content{

   color:#d6d6d6;

}

html[data-theme="dark"] article.pjs-box-content .post-title a{

   color:var(--pjs-text);

}

html[data-theme="dark"] article.pjs-box-content .post-title a:hover{

   color:#4da3ff;

}

html[data-theme="dark"] article.pjs-box-content .item-article{

   background:transparent;

}

/* ==========================================================
   Homepage Content
========================================================== */

html[data-theme="dark"] .content-area{

    background:#1f1f1f !important;

    color:#e8e8e8;

    border:1px solid #333;

    box-shadow:none;

}

/* ==========================================================
   Forms
========================================================== */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{

   background:#242424;
   color:#f2f2f2;
   border:1px solid #444;

}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{

   color:#8d8d8d;

}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{

   border-color:#5aa9ff;

   box-shadow:0 0 0 2px rgba(90,169,255,.15);

   outline:none;

}

/* ==========================================================
   Tables
========================================================== */

html[data-theme="dark"] table{

   background:#222;

   color:#f2f2f2;

   border-color:#444;

}

html[data-theme="dark"] td,
html[data-theme="dark"] th{

   border-color:#444;

}

/* ==========================================================
   Footer
========================================================== */

html[data-theme="dark"] footer{

    background:#1f1f1f;

}

html[data-theme="dark"] .site-footer{

    background:#1f1f1f !important;

    border-top:1px solid #333;

}

html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-copyright,
html[data-theme="dark"] .copyright{

    background:#1f1f1f !important;

    color:#d8d8d8;

}

html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .footer-bottom a,
html[data-theme="dark"] .copyright a{

    color:#f5f5f5;

}

html[data-theme="dark"] .site-footer a:hover{

    color:#5aa9ff;

}

html[data-theme="dark"] .site-footer hr,
html[data-theme="dark"] .site-footer .separator{

    border-color:#333;

}

/* ==========================================================
   Homepage Article Border
========================================================== */

html[data-theme="dark"] .content-area .item-article{

    border:none !important;

    box-shadow:none !important;

}

html[data-theme="dark"] .content-area article.pjs-box-content{

    border:none !important;

}

/* ==========================================================
   Infeed Banner
========================================================== */

html[data-theme="dark"] .pjs-infeed-banner .pjs-box-content{

    border:none !important;

}

/* ==========================================================
   Widget Title
========================================================== */

html[data-theme="dark"] .widget-title:after,
html[data-theme="dark"] .page-title:after,
html[data-theme="dark"] h3.widget-title:after{

    border-color:#d1d5db !important;

}

html[data-theme="dark"] .widget-title{
    color:var(--pjs-text);
}

/* ==========================================================
   ON TOP BUTTON & HUMBERGER MENU
========================================================== */

html[data-theme="dark"] .pjs-ontop{
    color:#d1d5db !important;
}

html[data-theme="dark"] .pjs-ontop svg{
    color:#d1d5db !important;
    fill:currentColor;
}

html[data-theme="dark"] .pjs-ontop:hover{
    color:#e5e5e5 !important;
}

html[data-theme="dark"] #pjs-responsive-menu{
    color:#d1d5db;
}

/* ==========================
   Mobile Side Menu - Dark
   ========================== */

html[data-theme="dark"] .sidr, 
html[data-theme="dark"] .sidr-class-logo-wrap{
    background:#1b1b1b;
    color:#e5e5e5;
}

html[data-theme="dark"] .sidr-class-logo-wrap {
    border-color:#2b2b2b;
}

html[data-theme="dark"] .sidr a{
    color:#e5e5e5;
}

html[data-theme="dark"] .sidr li{
    border-color:#2b2b2b;
}

html[data-theme="dark"] .sidr ul li{
    border-color:#2b2b2b;
}

html[data-theme="dark"] .sidr ul li a,
html[data-theme="dark"] .sidr ul li span{
    color:#e5e5e5;
}

html[data-theme="dark"] .sidr ul li:hover>a{
    background:#2b2b2b;
    color:#ffffff;
}

html[data-theme="dark"] .sidr ul li.active>a{
    background:#2b2b2b;
}

html[data-theme="dark"] .sidr .sidr-inner{
    background:#1b1b1b;
}

/* ==========================================================
   Mobile Menu - Logo Separator
========================================================== */

html[data-theme="dark"] .sidr-class-logo-wrap{

    border-bottom:1px solid #2b2b2b;

    margin-bottom:10px;

}

/* ==========================================================
   Mobile Menu Close Button
========================================================== */



html[data-theme="dark"] #sidr-id-close-topnavmenu-button svg{
    width:24px;
    height:24px;
    color:#d1d5db !important;
    fill:currentColor;
}

html[data-theme="dark"] #sidr-id-close-topnavmenu-button:hover{
    background:#e9e9e9;
}

/* ==========================================================
   Mobile Menu - Submenu Arrow (Dark Mode)
========================================================== */

html[data-theme="dark"] .sidr .sub-toggle .pjs-icon-down:before,
html[data-theme="dark"] .sidr .sub-toggle .pjs-icon-down:after,
html[data-theme="dark"] .sidr .sub-toggle .pjs-icon-up:before,
html[data-theme="dark"] .sidr .sub-toggle .pjs-icon-up:after{

    border-color:#ffffff !important;

}

/* ==========================================================
   Recommendation Label - Dark Mode
========================================================== */

html[data-theme="dark"] .text-marquee{

    background:linear-gradient(180deg,#e6e6e6,#b9b9b9) !important;

    color:#222 !important;

    border:1px solid #8c8c8c;

    text-shadow:none;

}

/* Tombol mode - Dark Mode */
html[data-theme="dark"] .pjs-theme-mode{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:-10px; /* naikkan, ubah menjadi -8px atau -12px bila perlu */
}

html[data-theme="dark"] #pjs-theme-toggle{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

html[data-theme="dark"] #pjs-theme-toggle svg,
html[data-theme="dark"] #pjs-theme-toggle i{
    color:#ffffff;
    fill:#ffffff;
}

html[data-theme="dark"] .pjs-theme-item[data-theme="light"] .pjs-theme-item-icon{
    color:#fd1d3c !important;
}

/* ==========================================================
   Breadcrumbs (single, archive, search, 404, page, blog)
========================================================== */

html[data-theme="dark"] .breadcrumbs{

    background-color:rgba(255,255,255,.05);

    color:var(--pjs-text-soft);

}

html[data-theme="dark"] .breadcrumbs a{

    color:#c0c0c0;

}

html[data-theme="dark"] .breadcrumbs a:hover{

    color:#4da3ff;

}

html[data-theme="dark"] .breadcrumbs .separator svg{

    color:#6b7280;

    fill:currentColor;

}

/* ==========================================================
   Single Job Page - Header (title, meta, apply button area)
========================================================== */

html[data-theme="dark"] .pjs-box-content.pjs-single .entry-header{

    border-color:var(--pjs-border);

}

html[data-theme="dark"] .entry-title{

    color:var(--pjs-text);

}

html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .entry-meta a{

    color:var(--pjs-text-soft);

}

html[data-theme="dark"] .pjs-box-content.pjs-single .entry-header span.byline,
html[data-theme="dark"] .pjs-box-content.pjs-single .entry-header span.posted-on,
html[data-theme="dark"] .pjs-box-content.pjs-single .entry-header span.pjs-view{

    color:#9ca3af;

}

html[data-theme="dark"] .download-filesize{

    color:#9ca3af !important;

}

/* ==========================================================
   Single Job Page - Job Specs Table (Posted by, Category, etc.)
========================================================== */

html[data-theme="dark"] .table-pjs{

    background:transparent;

    color:var(--pjs-text);

}

html[data-theme="dark"] .table-pjs td,
html[data-theme="dark"] .table-pjs th{

    color:var(--pjs-text);

    border-color:var(--pjs-border);

}

html[data-theme="dark"] .table-pjs th{

    color:var(--pjs-text-soft);

}

html[data-theme="dark"] .table-pjs tr{

    border-color:var(--pjs-border);

    color:var(--pjs-border);

}

/* ==========================================================
   Single Job Page - Specs / Apply / Closing Date Boxes
========================================================== */

html[data-theme="dark"] .pjs-list-specs{

    border-color:var(--pjs-border);

    background:var(--pjs-card-bg);

}

html[data-theme="dark"] .pjs-list-specs > li{

    border-color:var(--pjs-border);

    color:var(--pjs-text);

}

/* ==========================================================
   Single Job Page - Author Box
========================================================== */

html[data-theme="dark"] .pjs-authorbox{

    background-color:rgba(255,255,255,.05);

    color:var(--pjs-text);

}

html[data-theme="dark"] .pjs-ab-authorname{

    color:var(--pjs-text);

}

html[data-theme="dark"] .pjs-ab-desc{

    color:#9ca3af;

}

/* ==========================================================
   Single Job Page - Disclaimer / Info Box
========================================================== */

html[data-theme="dark"] .disclaimer_box .content{

    background:var(--pjs-card-bg);

    color:var(--pjs-text);

    box-shadow:0 0 0 3px rgba(255,255,255,.08);

}

/* ==========================================================
   Single Job Page - Tag Cloud
========================================================== */

html[data-theme="dark"] .tagcloud .tagtitle{

    color:var(--pjs-text);

}

html[data-theme="dark"] .tagcloud a{

    border-color:var(--pjs-border);

    color:var(--pjs-text-soft);

}

html[data-theme="dark"] .tagcloud a:hover,
html[data-theme="dark"] .tagcloud a:active,
html[data-theme="dark"] .tagcloud a:focus{

    background-color:var(--pjs-primary);

    border-color:var(--pjs-primary);

    color:#ffffff;

}

/* ==========================================================
   Related Jobs Box (bottom of single job page)
========================================================== */

html[data-theme="dark"] .related-item .related-box{

    background-color:var(--pjs-card-bg);

    color:var(--pjs-text);

    border:1px solid var(--pjs-border);

}

html[data-theme="dark"] .related-item .related-title h3 a{

    color:var(--pjs-text);

}

html[data-theme="dark"] .related-item .related-image{

    background:#2a2a2a;

}

html[data-theme="dark"] .related-item .related-image:before{

    background:#333333;

}

html[data-theme="dark"] .related-item .related-author img{

    background:#2a2a2a;

    border-color:var(--pjs-border);

}

html[data-theme="dark"] .related-item .related-author-name,
html[data-theme="dark"] .related-item .dot,
html[data-theme="dark"] .related-item .timeago{

    color:#9ca3af;

}

html[data-theme="dark"] div.lokerpro-related-post h3.related-title:after{

    border-color:var(--pjs-border) !important;

}

/* ==========================================================
   Load More / Infinite Scroll Button
========================================================== */

html[data-theme="dark"] #infinite-handle span{

    border-color:var(--pjs-border);

    color:var(--pjs-text);

    background:var(--pjs-card-bg);

}

/* ==========================================================
   Pagination (archive, search, blog listing)
========================================================== */

html[data-theme="dark"] .page-numbers,
html[data-theme="dark"] .post-page-numbers{

    background-color:#2a2a2a;

    color:var(--pjs-text);

}

html[data-theme="dark"] .page-numbers.current,
html[data-theme="dark"] .post-page-numbers.current,
html[data-theme="dark"] a.page-numbers:hover,
html[data-theme="dark"] a.post-page-numbers:hover{

    background-color:var(--pjs-primary);

    color:#ffffff;

}

html[data-theme="dark"] ul.page-numbers li a:hover,
html[data-theme="dark"] ul.page-numbers li span.page-numbers{

    background-color:var(--pjs-primary);

    color:#ffffff;

}

html[data-theme="dark"] .comment-navigation .nav-links,
html[data-theme="dark"] .posts-navigation .nav-links,
html[data-theme="dark"] .site-main .posts-navigation,
html[data-theme="dark"] .site-main .post-navigation{

    border-color:var(--pjs-border);

}

html[data-theme="dark"] .post-navigation .nav-previous span,
html[data-theme="dark"] .post-navigation .nav-next span{

    color:#9ca3af;

}

/* ==========================================================
   Comments (single job / blog post)
========================================================== */

html[data-theme="dark"] .comments-title,
html[data-theme="dark"] h3.comment-reply-title{

    color:var(--pjs-text);

}

html[data-theme="dark"] h3.comment-reply-title:after{

    border-color:var(--pjs-border);

}

html[data-theme="dark"] ol.comment-list li .comment-meta:after{

    border-color:var(--pjs-border);

}

html[data-theme="dark"] .bypostauthor > .comment-body{

    border-left-color:var(--pjs-border);

}

html[data-theme="dark"] ol.comment-list li div.vcard cite.fn,
html[data-theme="dark"] .comment-content{

    color:var(--pjs-text);

}

html[data-theme="dark"] ol.comment-list li div.comment-metadata a,
html[data-theme="dark"] #cancel-comment-reply-link,
html[data-theme="dark"] #commentform p.comment-notes{

    color:#9ca3af;

}

/* ==========================================================
   Theme Switcher Dropdown Menu (light/dark/auto)
========================================================== */

html[data-theme="dark"] .pjs-theme-menu{

    background:var(--pjs-card-bg);

    border:1px solid var(--pjs-border);

    box-shadow:0 10px 30px rgba(0,0,0,.5);

}

html[data-theme="dark"] .pjs-theme-item-text{

    color:var(--pjs-text);

}

html[data-theme="dark"] .pjs-theme-item:hover{

    background:#2a2a2a;

}

html[data-theme="dark"] .pjs-theme-item + .pjs-theme-item{

    border-top-color:var(--pjs-border);

}

/* ==========================================================
   Search Results / 404 / Generic Pages
========================================================== */

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .error-404 .page-content{

    color:var(--pjs-text);

}

html[data-theme="dark"] .error-404 .page-content{

    color:var(--pjs-text-soft);

}
/* ==========================================================
   Related Posts (list style) - jarak antar-judul dipersempit
   Pakai class yang sama dengan listing utama (.pjs-archivepage),
   perbaikan min-height/margin-nya sudah di style.css. Ini cuma
   menegaskan warna judul link-nya konsisten dengan dark mode.
========================================================== */
html[data-theme="dark"] .lokerpro-related-post .post-title a{

    color:var(--pjs-text);

}
html[data-theme="dark"] .lokerpro-related-post .post-title a:hover{

    color:var(--pjs-primary-hover);

}

/* ==========================================================
   Single Post - Semua Warna Text Link jadi Silver (dark mode)
========================================================== */
html[data-theme="dark"] .single #main a,
html[data-theme="dark"] .single #main a:visited{

    color:#c0c0c0;

}
html[data-theme="dark"] .single #main a:hover,
html[data-theme="dark"] .single #main a:focus{

    color:#4da3ff;

}

/* ==========================================================
   Single Post - Tombol "Apply Here" & "Post Comment" jadi Silver
========================================================== */
html[data-theme="dark"] .single #main a.in-single-download,
html[data-theme="dark"] .single #main input#submit,
html[data-theme="dark"] .single #main input[type="submit"]{

    background-color:#c0c0c0 !important;

    border-color:#c0c0c0 !important;

    color:#1a1a1a !important;

}

html[data-theme="dark"] .single #main a.in-single-download:hover,
html[data-theme="dark"] .single #main a.in-single-download:focus,
html[data-theme="dark"] .single #main input#submit:hover,
html[data-theme="dark"] .single #main input#submit:focus,
html[data-theme="dark"] .single #main input[type="submit"]:hover,
html[data-theme="dark"] .single #main input[type="submit"]:focus{

    background-color:#4da3ff !important;

    border-color:#4da3ff !important;

    color:#ffffff !important;

}

/* ==========================================================
   Apply Page - Hapus background-color kotak "Apply to" di dark mode
========================================================== */
html[data-theme="dark"] .text-download {

    background-color: transparent;

}

/* ==========================================================
   Desktop Primary Menu Carousel - Dark Mode
   Override warna dasar utk gradasi tepi + tombol panah.
   (Struktur & animasi ada di style.css)
   ========================================================== */
html[data-theme="dark"] .pjs-mainmenu{
	--pjs-cmenu-bg:#1f1f1f;
}
html[data-theme="dark"] .pjs-menu-carousel::before{
	background:linear-gradient(to right,#1f1f1f 22%,rgba(31,31,31,0) 100%);
}
html[data-theme="dark"] .pjs-menu-carousel::after{
	background:linear-gradient(to left,#1f1f1f 22%,rgba(31,31,31,0) 100%);
}
html[data-theme="dark"] .pjs-menu-arrow{
	background:#2b2b2b;
	color:#e6e6e6;
	border-color:rgba(255,255,255,.12);
	box-shadow:0 4px 14px rgba(0,0,0,.5);
}
html[data-theme="dark"] .pjs-menu-arrow:hover{
	background:var(--pjs-cmenu-accent);
	border-color:var(--pjs-cmenu-accent);
	color:#10240a;
	box-shadow:0 6px 18px rgba(139,195,74,.4);
}