/**
 * Tagify Custom Theme for Campus Data
 *
 * Integrates Tagify with Bootstrap 3 styling and Campus Data tag colors.
 * Uses Tagify's CSS variable system (--tag-bg, --tag-text-color, etc.)
 * rather than overriding internal elements directly.
 */

/* ============================================
   Main Tagify Container - Bootstrap 3 Integration
   ============================================ */

.tagify {
    --tags-border-color: #ccc;
    --tags-hover-border-color: #66afe9;
    --tags-focus-border-color: #66afe9;
    --tag-bg: #777;
    --tag-hover: #666;
    --tag-text-color: #fff;
    --tag-remove-btn-color: #fff;
    --tag-remove-btn-bg--hover: rgba(0, 0, 0, 0.2);
    --tag-border-radius: 4px;
    --tag-pad: 4px 10px;
    --tag-inset-shadow-size: 1.1em;
    --placeholder-color: #999;
    --input-color: #555;

    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    width: 100%;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #fff;
    min-height: 34px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.tagify.tagify--focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

/* ============================================
   Tag Elements
   ============================================ */

.tagify__tag {
    margin: 1px 5px 1px 0;
    border-radius: 8px;
}

/* ============================================
   Campus Data Tag Colors - A-Z Mapping
   Uses Tagify CSS variables so hover/animation still work
   ============================================ */

.tagify__tag.tag01 { --tag-bg: #677B75; --tag-hover: #586c66; }
.tagify__tag.tag02 { --tag-bg: #5B7F65; --tag-hover: #4d6f56; }
.tagify__tag.tag03 { --tag-bg: #9D719D; --tag-hover: #8e628e; }
.tagify__tag.tag04 { --tag-bg: #588643; --tag-hover: #4a7636; }
.tagify__tag.tag05 { --tag-bg: #50809B; --tag-hover: #43718b; }
.tagify__tag.tag06 { --tag-bg: #388A66; --tag-hover: #2d7a58; }
.tagify__tag.tag07 { --tag-bg: #676E4B; --tag-hover: #585f3e; }
.tagify__tag.tag08 { --tag-bg: #8B737E; --tag-hover: #7c646f; }
.tagify__tag.tag09 { --tag-bg: #2F8B82; --tag-hover: #257c73; }
.tagify__tag.tag10 { --tag-bg: #7C7294; --tag-hover: #6d6385; }
.tagify__tag.tag11 { --tag-bg: #8E7429; --tag-hover: #7e651e; }
.tagify__tag.tag12 { --tag-bg: #478991; --tag-hover: #3a7a82; }
.tagify__tag.tag13 { --tag-bg: #717B88; --tag-hover: #636c79; }
.tagify__tag.tag14 { --tag-bg: #80804B; --tag-hover: #71713e; }
.tagify__tag.tag15 { --tag-bg: #588458; --tag-hover: #4a744a; }
.tagify__tag.tag16 { --tag-bg: #477E72; --tag-hover: #3a6f63; }
.tagify__tag.tag17 { --tag-bg: #927B44; --tag-hover: #836c37; }
.tagify__tag.tag18 { --tag-bg: #7F617F; --tag-hover: #705270; }
.tagify__tag.tag19 { --tag-bg: #9C708B; --tag-hover: #8d617c; }
.tagify__tag.tag20 { --tag-bg: #4C757D; --tag-hover: #3f666e; }
.tagify__tag.tag21 { --tag-bg: #817D33; --tag-hover: #726e28; }
.tagify__tag.tag22 { --tag-bg: #6A7E3D; --tag-hover: #5c6f31; }
.tagify__tag.tag23 { --tag-bg: #6E7C9F; --tag-hover: #5f6d90; }
.tagify__tag.tag24 { --tag-bg: #746B3C; --tag-hover: #655c30; }
.tagify__tag.tag25 { --tag-bg: #237B8E; --tag-hover: #196c7f; }
.tagify__tag.tag26 { --tag-bg: #6F7C56; --tag-hover: #616d49; }

/* ============================================
   Reserved Special Tags
   ============================================ */

.tagify__tag.tag-black-and-gold {
    --tag-bg: #000;
    --tag-hover: #222;
    --tag-text-color: #FFCC00;
    --tag-remove-btn-color: #FFCC00;
}

.tagify__tag.tag-top10 {
    --tag-bg: #FFCC00;
    --tag-hover: #e6b800;
    --tag-text-color: #000;
    --tag-remove-btn-color: #000;
}

.tagify__tag.tag-top100 {
    --tag-bg: #f5e79e;
    --tag-hover: #f0de80;
    --tag-text-color: #000;
    --tag-remove-btn-color: #000;
}

/* ============================================
   Dropdown - Bootstrap 3 Style
   ============================================ */

.tagify__dropdown {
    --tagify-dd-bg-color: #fff;
    --tagify-dd-color-primary: #428bca;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    margin-top: 2px;
}

.tagify__dropdown__wrapper {
    border: none;
    border-radius: 4px;
}

.tagify__dropdown__item {
    padding: 6px 12px;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.tagify__dropdown__item:last-child {
    border-bottom: none;
}

/* ============================================
   Input Field Inside Tagify
   ============================================ */

.tagify__input {
    margin: 2px 0;
    padding: 4px 5px;
    min-width: 110px;
}

/* ============================================
   States
   ============================================ */

.tagify--invalid {
    --tags-border-color: #a94442;
}