/*!
Theme Name: Accurora
Theme URI: https://www.accurora.com
Author: Accurora
Author URI: https://www.accurora.com
Description: Accurora theme for JMC
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
Text Domain: accurora

*/

:root {
    --a: 208 73% 43%;
    --n: 210 9% 44%;
    --b1: 0 0% 100%;
    
    --blue: #1e73be;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dd3333;
    --orange: #ff7f00;
    --dark-orange: #cc6600;
    --yellow: #f59e0b;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #ffffff;
    --gray: #cccccc;
    --gray-dark: #6c757d;
    
    --border-radius: 0.5rem;
}

[data-theme="light"] {
    --p: 21 100% 50%;
    --s: 249 81% 19%;

    --primary: #150958;
    --secondary: #FF4F01;
    
    --bg-base: var(--white);
    --bg-rail: #f1f5f9;      
    --bg-side: var(--white);
    --bg-app: #f4f7fe;       
    --bg-card: var(--white);
    --text-bold: #333333;
    --text-dim: var(--gray-dark);
    --border-base: var(--gray);
}

[data-theme="dark"] {
    --p: 21 100% 50%;
    --s: 249 81% 19%;
    --b1: hsl(232 47% 15%);
    --bc: hsl(0 0% 100%);

    --primary: #FF4F01;
    --secondary: #150958;
    
    --bg-base: #1e293b;
    --bg-sections: #0f172a;
    --bg-rail: var(--bg-sections);
    --bg-side: var(--bg-base);
    --bg-app: var(--bg-sections);
    --bg-card: var(--bg-base);
    --text-bold: #f8fafc;
    --text-dim: #94a3b8;
    --border-base: #334155;
}
    
.bg-primary, .btn-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.text-secondary { color: var(--text-dim) !important; }

body { background-color: var(--bg-app); color: var(--text-bold);}

/*.page-block { background-color: var(--bg-card); border-top: 1px solid var(--border-base); }*/
.app-card { background-color: var(--bg-card); border: 1px solid var(--border-base); }

.swal-button--cancel:not([disabled]):hover, button.swal2-cancel.swal2-styled:hover {
	background-color: #e8e8e8 !important;
}
 
button.swal2-confirm.danger.swal2-styled {
    background: var(--red) !important;
    color: var(--white);
}

.swal-button--danger:not([disabled]):hover {
    background-color: var(--red) !important;
}

.swal-button--cancel, button.swal2-cancel.swal2-styled {
    background-color: var(--gray) !important;
	color: inherit;
}

.swal-button--danger {
    background-color: var(--red) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--primary) !important;
}

.swal2-container .swal2-checkbox {
    display: none !important;
}

span.required, span.requiredstat, label.is-invalid {
	color: var(--red);
	font-size: 95%;
}

label.is-invalid {
	font-weight: normal;
	line-height: normal;
}

span.required, span.requiredstat {
	font-weight: bold;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

label {
    display: block !important;
	cursor: pointer;
	width: 100%;
}

/* =========================================================
   Choices.js Integration (Matches .form-control)
   ========================================================= */

/* 1. Base Structure */
.choices {
    margin-bottom: 0;
}

.choices__inner {
    width: 100%;
    min-height: 48px !important; /* Match .form-control */
    padding: 0 12px !important;
    border-radius: var(--border-radius) !important;
    border-color: var(--fallback-bc, oklch(var(--bc) / 0.2));
    background-color: var(--white);
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 2. Fix the Bold Issue: Ensure text inside is normal weight */
.choices__list--single, 
.choices__input, 
.choices__item {
    font-weight: 400 !important; /* Unbolds the selection text */
    font-size: 15px;
    background: none;
}

.choices__input {
    margin-bottom: 0 !important;
}

/* 3. Focus State */
.choices.is-focused .choices__inner {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* 4. Placeholder Styling */
.choices__list--single .choices__item.choices__placeholder,
.choices__placeholder,
.choices__input::placeholder {
    opacity: 1;
    font-weight: 400 !important;
    font-size: 15px;
}
.choices__list--dropdown {
    position: absolute;
    z-index: 9999;
}

input.choices__input[type="search"] {
    background-color: unset !important;
    border: unset !important;
    border-radius: unset !important;
}

.choices__list.choices__list--dropdown {
    background-color: var(--bg-base);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    color: var(--primary) !important;
}

.choices__list--dropdown .choices__item--selectable.is-selected {
    color: var(--secondary) !important;
}

/* --- Multi-Select Tag Styling --- */

/* The Tag Container */
.choices__list--multiple .choices__item {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    margin: 3px 10px 3px 0;
}

/* The 'X' Remove Button inside the Tag */
.choices__list--multiple .choices__item .choices__button {
    border-left: unset;
    margin-left: 8px !important;
    padding-left: 4px !important;
    opacity: 0.8;
}

.choices__list--multiple .choices__item .choices__button:hover {
    opacity: 1;
}

/* --- Dark Mode Overrides --- */
.dark .choices__list--multiple .choices__item {
}

/* Style for the input area when items are already selected */
.choices__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: unset !important;
}

 
.icon16 {
	width: 16px;
	cursor: pointer;
	margin: 0 auto;
}
.icon16header {
	width: 36px;
	text-align: center;
}

#pw_rules {
    list-style-type: none;
    padding: 0;
    text-align: right;
    font-size: 95%;
    margin: 0;
}

#pw_rules li {
    color: var(--red); /* Default/Invalid state */
    line-height: normal;
}

.input_instrcution {
    text-align: right;
    font-size: 95%;
    font-style: italic;
    line-height: normal;
}
#pw_rules li.valid {
    color: var(--green); /* Valid state */
}

#pw_rules li.valid::after {
    /* The Unicode for the checkmark icon */
    content: "\f14a"; 
    
    /* Required: Set the font family to Font Awesome */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    
    /* Required: Set the weight (900 is required for solid icons) */
    font-weight: 900; 
    
    margin-left: 8px;
    color: green;
}

.otp-link-disabled {
    pointer-events: none;
    opacity: 0.5;
    text-decoration: none;
    color: unset;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}