/* ============================================================
   Eduro Corporate Identity — Modals, Alerts & Notifications
   Primary:   #DE6B3B  |  Hover: #F2943C  |  Cancel: #6c757d
   ============================================================ */

/* ----------------------------------------------------------
   1. BOOTSTRAP MODALS — global overrides
   ---------------------------------------------------------- */

.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%);
    color: #fff;
    border-bottom: none;
    padding: 18px 24px;
    border-radius: 0;
}

.modal-header h4,
.modal-header .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    margin: 0;
}

.modal-header .close,
.modal-header button.close {
    color: #fff;
    opacity: 0.85;
    text-shadow: none;
    font-size: 22px;
}
.modal-header .close:hover {
    opacity: 1;
    color: #fff;
}

/* Borderless header variant (apply_job modal) */
.modal-header.borderless {
    background: transparent;
    padding-bottom: 4px;
}
.modal-header.borderless h4,
.modal-header.borderless .modal-title {
    color: #333;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid #f0f0f0;
    padding: 16px 24px;
    background: #fafafa;
}

/* ----------------------------------------------------------
   2. BUTTONS inside modals — primary / action buttons
   ---------------------------------------------------------- */

/* Bootstrap .btn-primary → Eduro orange */
.btn-primary,
.modal .btn-primary,
.modal-footer .btn-primary {
    background-color: #DE6B3B !important;
    border-color: #DE6B3B !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 600;
    padding: 10px 28px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.modal .btn-primary:hover,
.modal .btn-primary:focus {
    background-color: #F2943C !important;
    border-color: #F2943C !important;
    color: #fff !important;
}

/* .btn-default used as primary action in Eduro frontend modals */
.modal .btn-default.submitBtn,
.modal .btn-default.continueBtn,
.modal .btn-default.chooseBtn,
.modal-footer .btn-default.submitBtn,
.modal-footer .btn-default.continueBtn {
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%) !important;
    border-color: #DE6B3B !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 600;
    padding: 10px 28px;
    box-shadow: 0 3px 12px rgba(222, 107, 59, 0.35);
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.modal .btn-default.submitBtn:hover,
.modal .btn-default.continueBtn:hover,
.modal .btn-default.chooseBtn:hover,
.modal-footer .btn-default.submitBtn:hover,
.modal-footer .btn-default.continueBtn:hover {
    filter: brightness(1.08);
    box-shadow: 0 5px 18px rgba(222, 107, 59, 0.45);
    color: #fff !important;
}

/* Cancel / back buttons */
.modal .backBtn,
.modal-footer .backBtn {
    color: #6c757d;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 16px;
    display: inline-block;
    transition: color 0.2s ease;
}
.modal .backBtn:hover,
.modal-footer .backBtn:hover {
    color: #DE6B3B;
    text-decoration: none;
}

/* Admin modal dismiss / cancel buttons */
.modal .btn-default:not(.submitBtn):not(.continueBtn):not(.chooseBtn),
.modal .btn-secondary,
button[data-dismiss="modal"]:not(.close) {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #555 !important;
    border-radius: 50px !important;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.modal .btn-default:not(.submitBtn):not(.continueBtn):not(.chooseBtn):hover,
.modal .btn-secondary:hover {
    background-color: #e8e8e8 !important;
    color: #333 !important;
}

/* ----------------------------------------------------------
   3. SWEETALERT v1 (Admin area) — Eduro CI overrides
   ---------------------------------------------------------- */

.sweet-alert {
    border-radius: 12px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18) !important;
}

.sweet-alert h2 {
    color: #2d2d2d !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.sweet-alert p {
    color: #555 !important;
    font-size: 15px !important;
}

/* Confirm/action button → orange */
.sweet-alert button.confirm {
    background-color: #DE6B3B !important;
    border-radius: 50px !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
}
.sweet-alert button.confirm:hover {
    background-color: #F2943C !important;
}

/* Cancel button → neutral grey */
.sweet-alert button.cancel {
    background-color: #6c757d !important;
    border-radius: 50px !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
}
.sweet-alert button.cancel:hover {
    background-color: #5a6268 !important;
}

/* Warning icon ring → Eduro orange */
.sweet-alert .icon.warning {
    border-color: #DE6B3B !important;
}
.sweet-alert .icon.warning .body,
.sweet-alert .icon.warning .dot {
    background-color: #DE6B3B !important;
}

/* ----------------------------------------------------------
   4. SWEETALERT2 (swal2) — Eduro CI overrides
   ---------------------------------------------------------- */

.swal2-popup {
    border-radius: 12px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18) !important;
}

.swal2-title {
    color: #2d2d2d !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.swal2-content,
.swal2-html-container {
    color: #555 !important;
    font-size: 15px !important;
}

.swal2-confirm {
    background-color: #DE6B3B !important;
    border-radius: 50px !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: background-color 0.2s ease !important;
}
.swal2-confirm:hover,
.swal2-confirm:focus {
    background-color: #F2943C !important;
    box-shadow: 0 3px 12px rgba(222, 107, 59, 0.4) !important;
}

.swal2-cancel {
    background-color: #6c757d !important;
    border-radius: 50px !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: background-color 0.2s ease !important;
}
.swal2-cancel:hover,
.swal2-cancel:focus {
    background-color: #5a6268 !important;
}

.swal2-icon.swal2-warning {
    border-color: #DE6B3B !important;
    color: #DE6B3B !important;
}

/* ----------------------------------------------------------
   5. TOASTR NOTIFICATIONS (Admin area) — Eduro CI overrides
   ---------------------------------------------------------- */

#toast-container > div {
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    opacity: 0.97 !important;
    padding: 14px 18px 14px 52px !important;
    font-size: 14px !important;
    font-family: 'Nunito Sans', 'Lato', sans-serif !important;
}

#toast-container > .toast-success {
    background-color: #2e7d32 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E") !important;
}

#toast-container > .toast-error {
    background-color: #c62828 !important;
}

#toast-container > .toast-warning {
    background-color: #DE6B3B !important;
}

#toast-container > .toast-info {
    background-color: #1565c0 !important;
}

.toast-progress {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* ----------------------------------------------------------
   6. FRONTEND ALERTS (#header_alert) — Eduro CI overrides
   ---------------------------------------------------------- */

#header_alert {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 16px 18px;
    border-left: 5px solid #DE6B3B;
    gap: 14px;
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999;
    max-width: 380px;
    width: calc(100vw - 40px);
    animation: eduro-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eduro-toast-in {
    from { opacity: 0; transform: translateX(30px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}

@keyframes eduro-toast-out {
    from { opacity: 1; transform: translateX(0)    scale(1); }
    to   { opacity: 0; transform: translateX(30px) scale(0.95); }
}

#header_alert.dismissing {
    animation: eduro-toast-out 0.3s ease forwards;
}

#header_alert_icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

#header_alert_icon.has-error {
    background: linear-gradient(135deg, #c62828 0%, #e53935 100%);
}

#header_alert_icon .error-color {
    color: #fff !important;
}

#header_alert_content {
    flex: 1;
}

#header_alert_content h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #DE6B3B;
}

#header_alert_content .error-color,
#header_alert_content h3.error-color {
    color: #c62828 !important;
}

#header_alert_content p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

#header_alert button {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
#header_alert button:hover {
    background: #f5f5f5;
    color: #444;
}

/* Error-state variant */
#header_alert:has(#header_alert_icon.has-error) {
    border-left-color: #c62828;
}

/* ----------------------------------------------------------
   7. CHAT — new room modal (Vue component)
   ---------------------------------------------------------- */

#messenger_create_new_room_modal {
    border-radius: 12px;
}

#messenger_create_new_room_modal .btn {
    border-radius: 50px;
    font-weight: 600;
    padding: 9px 22px;
}

#messenger_create_new_room_modal .btn.btn-eduro-create {
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%);
    color: #fff;
    border: none;
    box-shadow: 0 3px 12px rgba(222, 107, 59, 0.35);
    transition: filter 0.2s ease;
}
#messenger_create_new_room_modal .btn.btn-eduro-create:hover {
    filter: brightness(1.08);
}

#messenger_create_new_room_modal .btn.btn-eduro-cancel {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}
#messenger_create_new_room_modal .btn.btn-eduro-cancel:hover {
    background: #e8e8e8;
    color: #333;
}

/* ----------------------------------------------------------
   8. BOOTSTRAP TOOLTIPS — Eduro CI overrides
   ---------------------------------------------------------- */

.tooltip .tooltip-inner {
    background-color: #2d2d2d;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Nunito Sans', 'Lato', sans-serif;
    padding: 6px 12px;
    max-width: 220px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

/* Arrow — all four placements */
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
    border-top-color: #2d2d2d;
}
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
    border-bottom-color: #2d2d2d;
}
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
    border-left-color: #2d2d2d;
}
.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
    border-right-color: #2d2d2d;
}

/* ----------------------------------------------------------
   9. BOOTSTRAP POPOVERS — Eduro CI overrides
   ---------------------------------------------------------- */

.popover {
    border: none;
    border-radius: 10px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
    font-family: 'Nunito Sans', 'Lato', sans-serif;
}

.popover-header {
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    padding: 10px 16px;
}

.popover-header::before {
    border-bottom-color: #DE6B3B !important;
}

.popover-body {
    color: #444;
    font-size: 13px;
    padding: 12px 16px;
    line-height: 1.55;
}

/* Popover arrow border — top placement */
.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^=top] > .arrow::before {
    border-top-color: rgba(0, 0, 0, 0.1);
}
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^=top] > .arrow::after {
    border-top-color: #fff;
}
/* Bottom placement */
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^=bottom] > .arrow::after {
    border-bottom-color: #DE6B3B;
}
.bs-popover-bottom .popover-header::before {
    border-bottom-color: #DE6B3B;
}

/* ----------------------------------------------------------
   10. BOOTSTRAP BADGES — Eduro color system (global)
   ---------------------------------------------------------- */

/* Base badge shape */
.badge {
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-family: 'Nunito Sans', 'Lato', sans-serif;
}

/* Primary → Eduro gradient */
.badge-primary {
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%) !important;
    color: #fff !important;
    border: none;
}

/* Info → Eduro secondary orange */
.badge-info {
    background-color: #F2943C !important;
    color: #fff !important;
    border: none;
}

/* Success → green (semantic colour, kept green but refined) */
.badge-success {
    background-color: #3a9a5c !important;
    color: #fff !important;
    border: none;
}

/* Danger → red (semantic, kept but refined) */
.badge-danger {
    background-color: #d93025 !important;
    color: #fff !important;
    border: none;
}

/* Warning → warm amber that complements Eduro palette */
.badge-warning {
    background-color: #e8a020 !important;
    color: #fff !important;
    border: none;
}

/* Secondary → neutral dark */
.badge-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
    border: none;
}

/* Light / dark */
.badge-light {
    background-color: #f5f5f5 !important;
    color: #444 !important;
    border: 1px solid #e0e0e0;
}

.badge-dark {
    background-color: #2d2d2d !important;
    color: #fff !important;
}

/* Outlined variant helper: badge-success-outline, badge-primary-outline */
.badge-success-outline {
    background: transparent !important;
    color: #3a9a5c !important;
    border: 1.5px solid #3a9a5c !important;
}

.badge-primary-outline {
    background: transparent !important;
    color: #DE6B3B !important;
    border: 1.5px solid #DE6B3B !important;
}

.badge-info-outline {
    background: transparent !important;
    color: #F2943C !important;
    border: 1.5px solid #F2943C !important;
}

/* ----------------------------------------------------------
   11. TIPPY.JS THEMES — Eduro CI overrides
   Tippy v5+ uses [data-theme="name"], older uses
   .tippy-tooltip.name-theme — both are covered below.
   ---------------------------------------------------------- */

/* --- dark theme (used as default info tooltip) --- */
.tippy-tooltip.dark-theme,
[data-tippy-theme="dark"] .tippy-box,
.tippy-box[data-theme="dark"] {
    background-color: #2d2d2d;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Nunito Sans', 'Lato', sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    padding: 6px 12px;
    font-weight: 500;
}

.tippy-box[data-theme="dark"] .tippy-arrow {
    color: #2d2d2d;
}

.tippy-box[data-theme="dark"][data-placement^="top"] > .tippy-arrow::before {
    border-top-color: #2d2d2d;
}
.tippy-box[data-theme="dark"][data-placement^="bottom"] > .tippy-arrow::before {
    border-bottom-color: #2d2d2d;
}
.tippy-box[data-theme="dark"][data-placement^="left"] > .tippy-arrow::before {
    border-left-color: #2d2d2d;
}
.tippy-box[data-theme="dark"][data-placement^="right"] > .tippy-arrow::before {
    border-right-color: #2d2d2d;
}

/* --- orange / Eduro primary theme --- */
.tippy-tooltip.orange-theme,
[data-tippy-theme="orange"] .tippy-box,
.tippy-box[data-theme="orange"] {
    background: linear-gradient(135deg, #DE6B3B 0%, #F2943C 100%);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Nunito Sans', 'Lato', sans-serif;
    box-shadow: 0 4px 16px rgba(222, 107, 59, 0.35);
    padding: 6px 12px;
    font-weight: 500;
}

.tippy-box[data-theme="orange"] .tippy-arrow {
    color: #DE6B3B;
}

.tippy-box[data-theme="orange"][data-placement^="top"] > .tippy-arrow::before {
    border-top-color: #DE6B3B;
}
.tippy-box[data-theme="orange"][data-placement^="bottom"] > .tippy-arrow::before {
    border-bottom-color: #DE6B3B;
}
.tippy-box[data-theme="orange"][data-placement^="left"] > .tippy-arrow::before {
    border-left-color: #DE6B3B;
}
.tippy-box[data-theme="orange"][data-placement^="right"] > .tippy-arrow::before {
    border-right-color: #DE6B3B;
}

/* --- danger theme (remove-candidate action) --- */
.tippy-tooltip.danger-theme,
[data-tippy-theme="danger"] .tippy-box,
.tippy-box[data-theme="danger"] {
    background-color: #d93025;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Nunito Sans', 'Lato', sans-serif;
    box-shadow: 0 4px 16px rgba(217, 48, 37, 0.35);
    padding: 6px 12px;
    font-weight: 500;
}

.tippy-box[data-theme="danger"] .tippy-arrow {
    color: #d93025;
}

.tippy-box[data-theme="danger"][data-placement^="top"] > .tippy-arrow::before {
    border-top-color: #d93025;
}
.tippy-box[data-theme="danger"][data-placement^="bottom"] > .tippy-arrow::before {
    border-bottom-color: #d93025;
}
.tippy-box[data-theme="danger"][data-placement^="left"] > .tippy-arrow::before {
    border-left-color: #d93025;
}
.tippy-box[data-theme="danger"][data-placement^="right"] > .tippy-arrow::before {
    border-right-color: #d93025;
}

/* --- default Eduro info-tooltip icon color override --- */
.info-tooltip i,
.icon-tooltip.cyan-text {
    color: #DE6B3B !important;
}