/*----------------------------------------------
      WP Job Portal New CSS 
------------------------------------------------*/
/* ---
Modern CSS for WP Job Portal (v3 without Font Family)
Author: Gemini
Description: A clean, responsive, flexbox-based design for job list and detail pages.
--- */

/* ----------------------------------------- */
/* == 1. Global Styles & Variable == */
/* ----------------------------------------- */
@import url('job_portal_variables.css');

:root {
    /* Palette: Slate & White */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-500: #64748b;
    --slate-900: #0f172a;
    --white: #ffffff;
}

/* theme */
div#wpjobportaladmin-wrapper .sidebar {background-color: var(--white);border-right: 1px solid var(--slate-200);display: flex;flex-direction: column;z-index: 20;box-shadow: 4px 0 24px rgba(148, 163, 184, 0.15);height: 100vh; /* Ensure full height */}
div#wpjobportaladmin-wrapper .sidebar-header {display: flex;align-items: center;padding: 0 24px;border-bottom: 1px solid var(--wpjp-border-color);flex-shrink: 0;}
div#wpjobportaladmin-wrapper #theme_heading {padding: 24px;overflow-y: auto;width: 30%;min-width: 250px;}
div#wpjobportaladmin-wrapper div.js_effect_preview{width: 50%;flex: 1 1 auto;}
div#wpjobportaladmin-wrapper #theme_heading::-webkit-scrollbar {width: 5px;}
div#wpjobportaladmin-wrapper #theme_heading::-webkit-scrollbar-thumb {background: var(--slate-300);border-radius: 10px;}
div#wpjobportaladmin-wrapper .js_themes_presets{display: flex;flex-wrap: wrap;width: 100%;gap: 12px;margin-bottom: 32px;padding-bottom: 24px;border: 1px solid var(--wpjp-border-color);padding: 24px;border-radius: 20px;background-color: #f4f4f5;}
div#wpjobportaladmin-wrapper .theme_platte {position: relative;min-width:70px; width: calc(100% / 4 - 9px);flex: 1 1 auto;height: 67px;border-radius: 20px;overflow: hidden;cursor: pointer;box-shadow: 0 1px 3px rgba(0,0,0,0.1);transition: all 0.2s ease;border: 1px solid var(--wpjp-border-color);display: flex;flex-direction: column;justify-content:center;text-align: center;}
div#wpjobportaladmin-wrapper .theme_platte:hover {transform: translateY(-2px);box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);border-color: #6366f1;}
div#wpjobportaladmin-wrapper .color_wrapper {display: flex;width: 100%;height: 50%;flex: 1 1 auto;}
div#wpjobportaladmin-wrapper .color_wrapper .color {flex: 1;height: 100%;}
div#wpjobportaladmin-wrapper a.set_theme {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;display:flex;align-items: center;justify-content: center;text-align: center;color: transparent;}
div#wpjobportaladmin-wrapper a.set_theme:hover{color: #ffffff;}
div#wpjobportaladmin-wrapper .color_portion {background-color: var(--slate-50);border: 1px solid var(--slate-200);border-radius: 20px;padding: 16px;margin-bottom: 16px;transition: all 0.2s;}
div#wpjobportaladmin-wrapper .color_portion:hover {border-color: #6366f1;background-color: var(--white);box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
div#wpjobportaladmin-wrapper .color_title {display: block;font-size: 11px;font-weight: 700;color: var(--slate-500);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 8px;font-family: sans-serif;}
div#wpjobportaladmin-wrapper .color_wrp {position: relative;display: flex;flex-wrap: wrap;align-items: center;border-radius: 20px;overflow: hidden;border: 1px solid var(--slate-200);}
div#wpjobportaladmin-wrapper .color_wrp_img {position: absolute;right: 12px;pointer-events: none;opacity: 0.8;display: flex;align-items: center;top: 15px;}
div#wpjobportaladmin-wrapper .color_wrp_img img {width: 16px;height: auto;display: block;}
div#wpjobportaladmin-wrapper #adminForm {background: #f4f4f5;padding: 24px;border-radius: 20px;border: 1px solid #e2e8f0;box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
div#wpjobportaladmin-wrapper .color_portion {margin-bottom: 20px;}
div#wpjobportaladmin-wrapper .color_portion:last-child {margin-bottom: 0;}
div#wpjobportaladmin-wrapper .color_title {display: block;font-size: 14px;font-weight: 600;color: #1e293b;margin-bottom: 8px;}
div#wpjobportaladmin-wrapper .color_wrp {display: flex;align-items: center;background: #f8fafc;border: 1px solid #cbd5e1;border-radius: 20px;padding: 6px;position: relative;}
div#wpjobportaladmin-wrapper .color_wrp:hover {border-color: #94a3b8;background: #fff;}
div#wpjobportaladmin-wrapper .color_wrp input[type="text"] {flex: 1;border: 1px solid rgba(0,0,0,0.1);border-radius: 15px;padding: 8px 12px;font-family: 'Courier New', monospace;font-weight: 700;color: #fff !important;font-size: 14px;outline: none;height: 55px;order: 1;}
div#wpjobportaladmin-wrapper .color_wrp_img {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;color: #64748b;cursor: pointer;border-radius: 6px;background-color: transparent;transition: background-color 0.2s, color 0.2s;order: 2;}
div#wpjobportaladmin-wrapper .wpjobportal-admin-themepge-wrapper .iris-picker{order: 3;margin-top: 15px !important;max-width:100%;}
.color_wrp_img:hover {color: #6366f1;background-color: #f1f5f9;}
div#wpjobportaladmin-wrapper .native-color-picker {position: absolute;right: 6px;top: 6px;width: 36px;height: 36px;opacity: 0;cursor: pointer;z-index: 20;}
div#wpjobportaladmin-wrapper .wp-info-box {margin-top: 20px;padding: 16px;background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);border: 1px solid #e0e7ff;border-radius: 12px;display: flex;gap: 12px;align-items: flex-start;}
div#wpjobportaladmin-wrapper .wp-info-box svg {color: #6366f1;flex-shrink: 0;}
div#wpjobportaladmin-wrapper .wp-section-title {display: flex;flex-wrap: wrap; align-items: center;gap: 10px;margin-bottom: 20px;padding-bottom: 20px; margin-top: 30px;width: 100%;justify-content: space-between;border-bottom: 1px solid var(--wpjp-border-color);}
div#wpjobportaladmin-wrapper .wp-section-title:first-child {margin-top: 0;}
div#wpjobportaladmin-wrapper .wp-section-title h2 {font-size: 18px;font-weight: 700;margin: 0;color: #1e293b;}
div#wpjobportaladmin-wrapper .wp-icon-box {background-color: #e0e7ff;color: #4f46e5;width: 36px;height: 36px;border-radius: 8px;display: flex;align-items: center;justify-content: center;}
div#wpjobportaladmin-wrapper .wp-icon-box.pink {background-color: #fce7f3;color: #db2777;}.wpjb-box-styles{display: flex;align-items: center;}.wp-icon-box-txt-wrp{display: flex;align-items: center;gap:10px;}
div#wpjobportaladmin-wrapper div.color_preset_title{display: flex;align-content: center;justify-content: center;text-align: center;padding: 10px;background-color: #ffffff;font-weight: bold;}
div#wpjobportaladmin-wrapper .wpjobportal-admin-themepge-wrapper{display: flex;align-items: flex-start;flex-wrap: wrap;background: #fff;box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);}
div#wpjobportaladmin-wrapper div.js_effect_preview{display: flex;width: 60%;flex: 1 1 auto;padding: 35px 24px 24px 0;flex-direction: column;}
div#wpjobportaladmin-wrapper div.wjportal-main-up-wrapper{display: flex;flex-wrap: wrap;gap: 12px;font-size: 17px;line-height: 1.6; margin-bottom: 32px !important; padding-bottom: 24px;border: 1px solid var(--wpjp-border-color);padding: 24px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}
div#wpjobportaladmin-wrapper div.js_preview-sidetitle{display: flex;align-items: center;gap: 10px;font-size: 32px;font-weight: bold;background-color:#f4f4f5;padding: 24px;border-top-left-radius: 20px;border-top-right-radius: 20px;border: 1px solid var(--wpjp-border-color);border-bottom: 0px;}
div#wpjobportaladmin-wrapper div.js_preview-sidetitle_icon{display: flex;align-items: center;color: #4f46e5;justify-content: center;}
div#wpjobportaladmin-wrapper span.wpjb-box-styles{color: #4f46e5;background: #e0e7ff;padding: 4px 10px;border-radius: 20px;font-weight: bold;}
div#wpjobportaladmin-wrapper .wjportal-item-status{margin: 0;}
div#wpjobportaladmin-wrapper .js_themes_presets .theme_platte .color:not(:first-child){display:none;}
div#wpjobportaladmin-wrapper div.wpjobportal-add-button-wrp{display: flex;flex-wrap: wrap; align-items: center;justify-content: center;text-align: center;padding-top: 30px;margin-top:35px;border-top: 1px solid #e2e8f0;}
div#wpjobportaladmin-wrapper div.wpjobportal-add-button-wrp a{display: flex;width:100%;min-height: 50px;align-items: center;justify-content: center;text-align: center;background-color: #209e24;border: 1px solid #368534;color: #fff;font-size: 17px;font-weight: bold;border-radius: 15px;}
div#wpjobportaladmin-wrapper div.wpjobportal-add-button-wrp a:hover{background-color: #000000;}
div#wpjobportaladmin-wrapper div#wpjobportaladmin-data input, div#wpjobportaladmin-data button, div#wpjobportaladmin-data select, div#wpjobportaladmin-data textarea{max-width: 100%;}
div#wpjobportaladmin-wrapper .wjportal-jobs-middle-wrp{flex: 1 1 auto;}
div#wpjobportaladmin-wrapper .wjportal-jobs-right-wrp{flex: 1 1 auto;}
div#wpjobportaladmin-wrapper .wjportal-jobs-cnt-wrp{flex-wrap: wrap;}
div#wpjobportaladmin-wrapper div.wpjobportal-sugestion-alert-wrp{display: flex;align-items: baseline;margin: 30px auto 0 auto;margin-top: 30px;max-width: 520px;padding: 15px;background: #feffdb;font-size: 14px;}
div#wpjobportaladmin-wrapper .wpjobportal-sugestion-alert{background: #fffbeb;border: 1px solid #fcd34d;color: #92400e;padding: 10px 15px;font-size: 13px;border-radius: 8px;display: flex;align-items: flex-start;gap: 5px;text-align: start;}

div#wpjobportaladmin-wrapper .color_wrp{flex-direction: column;align-items: flex-start;}
div#wpjobportaladmin-wrapper .color_wrp input[type="text"]{width: 100%;min-height: 55px;border-radius: 15px !important}
div#wpjobportaladmin-wrapper .wpjobportal-add-link, div#wpjobportaladmin-wrapper .wpjobportal-add-link.button{border-radius: 8px;}
@media (max-width: 1380px) {
    div#wpjobportaladmin-wrapper .wjportal-jobs-middle-wrp{width: 100%;}
    div#wpjobportaladmin-wrapper .wjportal-jobs-right-wrp{width: 100%;align-items: flex-start;}
    div#wpjobportaladmin-wrapper .iris-border .iris-picker-inner{display: flex;}
}
@media (max-width: 1080px){
    div#wpjobportaladmin-wrapper .wjportal-jobs-list-top-wrp{flex-wrap: wrap;justify-content: center;text-align: center;}
    div#wpjobportaladmin-wrapper .wjportal-jobs-middle-wrp{justify-content: center;text-align: center;}
    div#wpjobportaladmin-wrapper .wjportal-jobs-right-wrp{align-items:center;text-align: center;}
    div#wpjobportaladmin-wrapper .wjportal-jobs-data{justify-content: center;text-align: center;}
    div#wpjobportaladmin-wrapper span.wjportal-job-title{justify-content: center;text-align: center;}
    div#wpjobportaladmin-wrapper div.wjportal-jobs-list-btm-wrp div.wjportal-jobs-action-wrp{justify-content: center;text-align: center;}
}
@media (max-width: 782px){
     div#wpjobportaladmin-wrapper div#theme_heading div.color_portion{width: 100% !important;}
     div#wpjobportaladmin-wrapper #adminForm{padding: 14px;}
     div#wpjobportaladmin-wrapper .js_themes_presets{padding: 14px;}
     div#wpjobportaladmin-wrapper #theme_heading{padding-left: 14px;padding-right: 14px;flex: 1 1 auto;}
     div#wpjobportaladmin-wrapper div.js_effect_preview{padding-right: 14px;padding-left: 14px;}
}
@media (max-width: 650px){
    div#wpjobportaladmin-wrapper .color_wrp{flex-direction: column;align-items: flex-start;}
    div#wpjobportaladmin-wrapper .color_wrp input[type="text"]{width: 100%;min-height: 55px;}
}