/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the
 * later versions of this theme.
 *
 * We advise that you use use this CSS to override
 * SmartAdmin styles.
 *
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 *
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

/* ============================================================
 * Navigation menu chevron rotation animation
 * jarvismenu swaps the <em> element entirely (fa-chevron-right <-> fa-chevron-up),
 * so we override fa-chevron-up to render the same right-pointing glyph and drive
 * the visual direction purely via rotation on li.open.
 * ============================================================ */

nav .collapse-sign {
    display: inline-block;
    transition: transform 0.2s ease;
}

nav .collapse-sign em.fa-chevron-up:before {
    content: "\f054";
}

nav li.open > a .collapse-sign {
    transform: rotate(-90deg);
}

/* ============================================================
 * Dropdown menu transition
 * Overrides SmartAdmin's flipInX animation with a simpler fade+slide
 * ============================================================ */

@keyframes ccDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.open > .dropdown-menu {
    animation-name: ccDropdownIn !important;
    animation-duration: 0.15s !important;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    animation-fill-mode: both !important;
    transform-origin: top left;
}

.btn-group .dropdown-menu {
    margin-top: 4px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.dropdown-menu > li > a {
    transition: background-color 0.25s ease, color 0.25s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #e2e8f0 !important;
    background-image: none !important;
    color: #000000 !important;
}

/* ============================================================
 * Table toolbar buttons
 * ============================================================ */

.dt-toolbar {
    overflow: visible !important;
}

.btn-refresh-table {
    transform-origin: center center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-refresh-table .glyphicon-refresh {
    display: inline-block;
    transition: color 0.2s ease, transform 0.4s ease;
}

.btn-refresh-table:hover {
    background-color: #f0fff4 !important;
    border-color: #5cb85c !important;
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(60, 179, 60, 0.18) !important;
}

.btn-refresh-table:hover .glyphicon-refresh {
    color: #2e8b2e !important;
    transform: rotate(180deg);
}

.btn-export-table {
    transform-origin: center center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-export-table .glyphicon-export {
    transition: color 0.2s ease, transform 0.2s ease;
    color: #888;
}

.btn-export-table:hover {
    background-color: #f8f0ff !important;
    border-color: #9370db !important;
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(147, 112, 219, 0.22) !important;
}

.btn-export-table:hover .glyphicon-export {
    color: #7b4fbf !important;
    transform: rotate(-15deg) scale(1.15);
}

/* ============================================================
 * Clear Filters button
 * ============================================================ */

.btn-clear-filters {
    transform-origin: center center;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-clear-filters .fa-eraser {
    transition: color 0.2s ease, transform 0.2s ease;
    color: #888;
}

.btn-clear-filters:hover {
    background-color: #fff3f0 !important;
    border-color: #e8846a !important;
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(232, 100, 60, 0.18) !important;
}

.btn-clear-filters:hover .fa-eraser {
    color: #d9532c;
    transform: rotate(-15deg) scale(1.15);
}

/* ============================================================
 * Modern jQuery UI Dialog
 * ============================================================ */

@keyframes ccDialogOpen {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ui-dialog.cc-dialog-opening {
    animation: ccDialogOpen 0.2s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* Overlay */
.ui-widget-overlay {
    background: rgba(10, 12, 20, 0.65) !important;
    opacity: 1 !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Dialog container */
.ui-dialog {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Clip titlebar and buttonpane to the dialog border-radius so rounded corners still render correctly */
.ui-dialog .ui-dialog-titlebar {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.ui-dialog .ui-dialog-buttonpane {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

/* Content area */
.ui-dialog .ui-dialog-content {
    border: none !important;
    background: #ffffff !important;
    padding: 18px 20px !important;
}




/* ===== BUTTONS ===================================================== */

.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 5px !important;
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-primary {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #1d4ed8 !important;
    border-color: #1e40af !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.30) !important;
}

/* btn-info is the most common action button in the app */
.btn-info {
    background-color: #0891b2 !important;
    border-color: #0e7490 !important;
    color: #fff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #0e7490 !important;
    border-color: #155e75 !important;
    box-shadow: 0 1px 4px rgba(8, 145, 178, 0.30) !important;
}

.btn-success {
    background-color: #16a34a !important;
    border-color: #15803d !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: #15803d !important;
    border-color: #166534 !important;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.30) !important;
}

.btn-danger {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.30) !important;
}

.btn-warning {
    background-color: #d97706 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #b45309 !important;
    border-color: #92400e !important;
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.30) !important;
}

.btn-default {
    background-color: #fff !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.btn-default:hover,
.btn-default:focus {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
    box-shadow: none !important;
}

/* jQuery UI dialog buttons get the same treatment */
.ui-dialog .ui-dialog-buttonpane .ui-button {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background-image: none !important;
    transition: background-color 0.15s ease !important;
}