@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --com-white1-color: #FFF;
    --com-white2-color: #FFFFFF29;
    --com-black1-color: #000;
    --com-black2-color: #00000029;
    --com-lightgray-color: #E2E2E2;
    --com-gray-color: #D3D2D2;
    --com-blue1-color: #001BCC;
    --com-blue2-color: #3651FF;
    --com-blue3-color: #3651FF29;
    --com-pink-color: #FE0058;
    --com-green-light-color: #d4edda;
    --com-green-color: #28a745;
    --com-red-light-color: #f8d7da;
    --com-red-color: #dc3545;
    --com-orange-light-color: #fff3cd;
    --com-orange-color: #fd7e14;
}

.primary-button {
    font-family: "inter", sans-serif;
    border-radius: 30px;
    border: 2px solid;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* PRIMARY THEME: DEFAULT */
.primary-theme-default {
    background: var(--com-blue2-color);
    border-color: var(--com-blue2-color);
}

    .primary-theme-default .label {
        color: var(--com-white1-color);
    }

    .primary-theme-default i {
        color: var(--com-white1-color);
    }

    .primary-theme-default:hover {
        background: var(--com-blue1-color);
        border-color: var(--com-white1-color);
    }

    .primary-theme-default:active {
        background: var(--com-blue1-color);
        border-color: var(--com-blue2-color);
    }

    .primary-theme-default.disabled {
        opacity: 50%;
        cursor: not-allowed;
        background: var(--com-blue2-color);
        border-color: var(--com-blue2-color);
    }

.primary-theme-inverse {
    background: var(--com-white1-color);
    border-color: var(--com-white1-color);
}

    .primary-theme-inverse .label {
        color: var(--com-blue2-color);
    }

    .primary-theme-inverse i {
        color: var(--com-blue2-color);
    }

    .primary-theme-inverse:hover {
        background: var(--com-blue1-color);
        border-color: var(--com-white1-color);
    }

        .primary-theme-inverse:hover i {
            color: var(--com-white1-color);
        }

        .primary-theme-inverse:hover .label {
            color: var(--com-white1-color);
        }

    .primary-theme-inverse:active {
        border-color: var(--com-blue1-color);
    }

    .primary-theme-inverse.disabled {
        opacity: 50%;
        cursor: not-allowed;
        background: var(--com-white1-color);
        border-color: var(--com-white1-color);
    }

        .primary-theme-inverse.disabled .label {
            color: var(--com-blue2-color);
        }

.secondary-button {
    font-family: "inter", sans-serif;
    border-radius: 30px;
    border: 2px solid;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* SECONDARY THEME: DEFAULT */
.secondary-theme-default {
    background: var(--com-blue3-color);
    border-color: var(--com-blue3-color);
}

    .secondary-theme-default .label {
        color: var(--com-blue1-color);
    }

    .secondary-theme-default i {
        color: var(--com-blue1-color);
    }

    .secondary-theme-default:hover {
        border-color: var(--com-pink-color);
    }

    .secondary-theme-default:active {
        border-color: var(--com-blue1-color);
    }

    .secondary-theme-default.disabled {
        opacity: 50%;
        cursor: not-allowed;
        background: var(--com-blue2-color);
        border-color: var(--com-blue2-color);
    }

/* SECONDARY THEME: INVERSE */
.secondary-theme-inverse {
    background: var(--com-white2-color);
    border-color: var(--com-white2-color);
}

    .secondary-theme-inverse .label {
        color: var(--com-white1-color);
    }

    .secondary-theme-inverse i {
        color: var(--com-white1-color);
    }

    .secondary-theme-inverse:hover {
        background: var(--com-black2-color);
        border-color: var(--com-pink-color);
    }

        .secondary-theme-inverse:hover i {
            color: var(--com-white1-color);
        }

        .secondary-theme-inverse:hover .label {
            color: var(--com-white1-color);
        }

    .secondary-theme-inverse:active {
        background: var(--com-white2-color);
        border-color: var(--com-white1-color);
    }

    .secondary-theme-inverse.disabled {
        opacity: 50%;
        cursor: not-allowed;
        background: var(--com-white1-color);
        border-color: var(--com-white1-color);
    }

        .secondary-theme-inverse.disabled .label {
            color: var(--com-blue2-color);
        }

.link-button {
    font-family: "inter", sans-serif;
    border-radius: 30px;
    border: 2px solid;
    padding: 0 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* LINK THEME: DEFAULT */
.link-theme-default {
    background: none;
    border-color: transparent;
}

    .link-theme-default .label {
        color: var(--com-blue1-color);
    }

    .link-theme-default i {
        color: var(--com-blue1-color);
    }

    .link-theme-default:hover {
        background: var(--com-blue3-color);
    }

    .link-theme-default:active {
        background: var(--com-blue3-color);
        border-color: var(--com-blue3-color);
    }

    .link-theme-default.disabled {
        opacity: 50%;
        cursor: not-allowed;
        background: none;
        border-color: transparent;
    }

/* LINK THEME: INVERSE */
.link-theme-inverse {
    background: none;
    border-color: transparent;
}

    .link-theme-inverse .label {
        color: var(--com-white1-color);
    }

    .link-theme-inverse i {
        color: var(--com-white1-color);
    }

    .link-theme-inverse:hover {
        background: var(--com-white2-color);
    }

        .link-theme-inverse:hover i {
            color: var(--com-white1-color);
        }

        .link-theme-inverse:hover .label {
            color: var(--com-white1-color);
        }

    .link-theme-inverse:active {
        border-color: var(--com-white2-color);
    }

    .link-theme-inverse.disabled {
        opacity: 50%;
        cursor: not-allowed;
        background: none;
        border-color: var(--com-white1-color);
    }

.collor-button {
    font-family: "inter", sans-serif;
    border-radius: 30px;
    border: 2px solid;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* COLLOR: GREEN */
.collor-greeen {
    background: var(--com-green-light-color);
    border-color: var(--com-green-color);
}

    .collor-greeen .label {
        color: var(--com-green-color);
    }

    .collor-greeen i {
        color: var(--com-green-color);
    }

    .collor-greeen:hover {
        background: var(--com-green-color);
        border-color: var(--com-green-color);
    }

        .collor-greeen:hover .label {
            color: var(--com-white1-color);
        }

        .collor-greeen:hover i {
            color: var(--com-white1-color);
        }

    .collor-greeen:active {
        opacity: 0.9;
    }

    .collor-greeen.disabled {
        opacity: 50%;
        cursor: not-allowed;
    }

/* COLLOR: RED */
.collor-red {
    background: var(--com-red-light-color);
    border-color: var(--com-red-color);
}

    .collor-red .label {
        color: var(--com-red-color);
    }

    .collor-red i {
        color: var(--com-red-color);
    }

    .collor-red:hover {
        background: var(--com-red-color);
        border-color: var(--com-red-color);
    }

        .collor-red:hover .label {
            color: var(--com-white1-color);
        }

        .collor-red:hover i {
            color: var(--com-white1-color);
        }

    .collor-red:active {
        opacity: 0.9;
    }

    .collor-red.disabled {
        opacity: 50%;
        cursor: not-allowed;
    }

/* COLLOR: ORANGE */
.collor-orange {
    background: var(--com-orange-light-color);
    border-color: var(--com-orange-color);
}

    .collor-orange .label {
        color: var(--com-orange-color);
    }

    .collor-orange i {
        color: var(--com-orange-color);
    }

    .collor-orange:hover {
        background: var(--com-orange-color);
        border-color: var(--com-orange-color);
    }

        .collor-orange:hover .label {
            color: var(--com-white1-color);
        }

        .collor-orange:hover i {
            color: var(--com-white1-color);
        }

    .collor-orange:active {
        opacity: 0.9;
    }

    .collor-orange.disabled {
        opacity: 50%;
        cursor: not-allowed;
    }

.icon-only {
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.icon-left .icon {
    order: -1;
}

.icon-right .icon {
    order: 1;
}

/* CustomMultiSelect Global Styles */
.custom-multiselect-wrapper {
    position: relative;
    width: 100%;
}

.custom-multiselect-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-multiselect-container {
    position: relative;
    width: 100%;
    padding: 8px 12px;
    background: white;
    border: none;
    box-shadow: 0 0 0 1px #d1d5db;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 30px;
    height: 30px;
}

    .custom-multiselect-container:hover {
        box-shadow: 0 0 0 1px #9ca3af;
    }

    .custom-multiselect-container.open {
        box-shadow: 0 0 0 2px #3a0099;
    }

.custom-multiselect-display {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .custom-multiselect-display .placeholder {
        color: #9ca3af;
    }

    .custom-multiselect-display .selected-count {
        color: #3a0099;
        font-weight: 500;
    }

    .custom-multiselect-display .selected-text {
        color: #374151;
        font-weight: 400;
    }

.dropdown-icon {
    color: #6b7280;
    font-size: 12px;
    transition: transform 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

    .dropdown-icon.open {
        transform: rotate(180deg);
    }

.custom-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999;
    animation: slideDownMultiSelect 0.2s ease;
}

@keyframes slideDownMultiSelect {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-multiselect-dropdown .dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
    background: white;
}

    .custom-multiselect-dropdown .dropdown-item:last-child {
        border-bottom: none;
    }

    .custom-multiselect-dropdown .dropdown-item:hover {
        background: #f8f9ff;
    }

    .custom-multiselect-dropdown .dropdown-item.select-all {
        font-weight: 600;
        color: #3a0099;
        background: #f0f0ff;
        border-bottom: 2px solid #e5e7eb;
    }

        .custom-multiselect-dropdown .dropdown-item.select-all:hover {
            background: #e8e8ff;
        }

    .custom-multiselect-dropdown .dropdown-item input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #3a0099;
        border-radius: 3px;
    }

    .custom-multiselect-dropdown .dropdown-item span {
        font-size: 14px;
        color: #374151;
        user-select: none;
        flex: 1;
    }

.custom-multiselect-dropdown .dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0;
}

/* ========================================
   GENERIC GRID COMPONENTS - REUSABLE
   ======================================== */

/* Grid Container */
.grid-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Grid Wrapper */
.grid-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* Grid Header */
.grid-header {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 16px;
    font-weight: 400;
    font-size: 12px;
    color: #6b7280;
    position: sticky;
    top: 0;
    z-index: 10;
}

.grid-header-cell {
    padding: 0 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 13px;
}

/* Grid Body */
.grid-body {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* Grid Row */
.grid-row {
    display: flex;
    padding: 8px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
    cursor: pointer;
    align-items: center;
    min-height: 40px;
}

    .grid-row:hover {
        background-color: #f9fafb;
    }

    .grid-row:last-child {
        border-bottom: none;
    }

/* Grid Cell */
.grid-cell {
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #2f4f4f;
}

.grid-cell-right {
    justify-content: flex-end;
}

.grid-cell-center {
    justify-content: center;
}

/* Cell Content */
.cell-content {
    color: #2f4f4f;
    font-size: 13px;
}

/* Status Components */
.status-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-indicator {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

.status-active {
    background-color: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Tags */
.tag-badge {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

.tag-owner {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Warning Icon */
.warning-icon {
    color: #f59e0b;
    font-size: 16px;
    cursor: help;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 18px;
}

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

input:checked + .toggle-slider {
    background-color: #4f46e5;
}

    input:checked + .toggle-slider:before {
        transform: translateX(18px);
    }

/* Switch Button Component */
.switch-button-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.switch-label {
    font-size: 0.95rem;
    font-weight: 400;
    color: #374151;
    margin: 0;
}

.switch-container {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

    .switch-container input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--com-gray-color);
    transition: 0.3s;
    border-radius: 26px;
}

    .switch-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: var(--com-white1-color);
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* SWITCH THEME: DEFAULT */
.switch-theme-default input:checked + .switch-slider {
    background-color: var(--com-blue2-color);
}

    .switch-theme-default input:checked + .switch-slider:before {
        transform: translateX(22px);
    }

.switch-theme-default .switch-slider:hover {
    background-color: #B0B0B0;
}

.switch-theme-default input:checked + .switch-slider:hover {
    background-color: var(--com-blue1-color);
}

/* SWITCH THEME: INVERSE */
.switch-theme-inverse input:checked + .switch-slider {
    background-color: var(--com-white1-color);
}

.switch-theme-inverse .switch-slider {
    background-color: var(--com-white2-color);
}

.switch-theme-inverse input:checked + .switch-slider:before {
    transform: translateX(22px);
    background-color: var(--com-blue2-color);
}

.switch-theme-inverse .switch-slider:before {
    background-color: var(--com-white1-color);
}

.switch-theme-inverse .switch-slider:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.switch-theme-inverse input:checked + .switch-slider:hover {
    background-color: var(--com-white1-color);
}

/* DISABLED STATE */
.switch-container.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

    .switch-container.disabled .switch-slider {
        cursor: not-allowed;
    }

/* Grid Responsive */
@media (max-width: 1200px) {
    .grid-wrapper {
        overflow-x: auto;
    }
}