/* blinker-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Blinker';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/blinker-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* blinker-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Blinker';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/blinker-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* blinker-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Blinker';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/blinker-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* blinker-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Blinker';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/blinker-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body {
    -webkit-user-drag: none;

}
/* width */
/* Scrollbar width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #1f2937;
    /* Remove top and bottom rounded corners */
    mask-image: linear-gradient(to bottom, transparent, black 4px, black calc(100% - 4px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 4px, black calc(100% - 4px), transparent);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
}

.simc-dropdown-menu {
    background: #212529;
    border: 1px solid #495057;
    max-height: 400px;
    overflow-y: auto;
    width: 300px;
    padding: 4px 0;
}
.simc-dropdown-menu .dropdown-item {
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
}
.simc-dropdown-menu .dropdown-item:hover {
    background: #495057;
}
.simc-dropdown-menu .dropdown-item.active {
    background: #0d6efd;
}

.class-menu-active{
    background-color: #c67605 !important;
}

.selected-spec{
    background: rgb(10,145,255);
    background: linear-gradient(90deg, rgba(10,145,255,1) 0%, rgba(10,145,255,1) 13%, rgba(50,56,62,1) 68%);
}

.spell-thumb{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: solid 1px #888;
    background-color: #FFF;
}
.dark-form input:not([type="checkbox"]):not([type="color"]), .dark-form select , .dark-form textarea, #spelltable_simc select, .darkz{
    background: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
    color: #fff;
}
.dark-form input:not([type="checkbox"]):not([type="color"]):focus, .dark-form select:focus , .dark-form textarea:focus, #spelltable_simc select:focus, .darkz:focus{
    background: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
    color: #fff;
    animation: borderColorCycle 2s infinite;
}
.cooldown-row { background: #214079 !important;}
.defensive-row { background: #0e7911!important;}
.disabled-row { background: #79030f !important;}

#spelltable_simc select{
    /* Remove the default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Add your custom arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 20px; /* Control size here */
}

#spelltable_simc a{ text-decoration: none; }
#spelltable_simc td {padding: 2px}
#spelltable_simc a span {vertical-align: middle}
.iconmedium{ margin-right: 10px}

.keybinder{
    background: none;
    color: #fff;
    cursor: pointer;
}
.keybinder:focus{
    background: none;
    color: #fff;
    animation: borderColorCycle 2s infinite;
}
.setting-input:focus{
    background: none;
    color: #fff;
    animation: borderColorCycle 2s infinite;
}

input.readonly, input.readonly:focus {
    border: none;
    background: none !important;
    color: #ffce15;
    padding-left: 0;
    font-size: 15px;
    font-weight: 600;
}

@keyframes borderColorCycle {
    0% {
        border-color: #1eb428; /* Green */
    }
    50% {
        border-color: #13E8E9; /* Blue */
    }
    100% {
        border-color: #1eb428; /* Purple */
    }

}

.spell-disabled td{
    background-color: #641200;
}

.spell-disabled td img, .spell-disabled td input{
    opacity: 0.5;
}

.spell-disabled .enable-spell{
    display: inline-block;
}
.spell-disabled .disable-spell{
    display: none;
}
.disable-spell{
    display: inline-block;
}
.enable-spell{
    display: none;
}

#main-preloader, #download-preloader{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.78);
    z-index: 100;
}
#profile-preloader{
    position: static;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-body-bg);
    z-index: 100;
}

.code-block {
    position: relative;
    margin: 8px 0;
}
.code-block pre {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 12px 48px 12px 16px;
    margin: 0;
    overflow-x: auto;
}
.code-block pre code {
    color: #e6edf3;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    white-space: pre;
}
.code-block .copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #8b949e;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}
.code-block .copy-btn:hover {
    color: #e6edf3;
    border-color: #8b949e;
}

/* ─── Cooldown Timeline ─── */
#cd-timeline-list tr:hover { background: rgba(255,255,255,0.05); }
#cd-timeline-list td { vertical-align: middle; padding: 6px 4px; }
#cd-timeline-list tr.cd-tl-disabled td { opacity: 0.4; }
#cd-timeline-list tr.cd-tl-disabled td:first-child { opacity: 1; }
#cd-editor-entries tr:hover { background: rgba(255,255,255,0.08); }
/* Potion/trinket icon in entry table — match wowhead iconmedium size */
.cd-entry-icon { display: inline-block; width: 44px; height: 44px; position: relative; vertical-align: middle; margin-right: 6px; }
.cd-entry-icon img { width: 36px; height: 36px; border-radius: 4px; position: absolute; left: 4px; top: 4px; }
.cd-entry-label { vertical-align: middle; }
.cd-time-input { border: 1px solid #495057; text-align: center; }
.cd-time-input:focus { border-color: #0d6efd; box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25); }
/* Import preview panel */
.cd-import-row { display: flex; align-items: center; gap: 6px; padding: 1px 10px; border-bottom: 1px solid #2a2d31; cursor: default; font-size: 0.75rem; min-height: 24px; }
.cd-import-row:hover { background: rgba(255,255,255,0.04); }
.cd-import-rank { color: #c41f3b; font-weight: bold; width: 28px; flex-shrink: 0; text-align: right; }
.cd-import-name { width: 90px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-import-count { width: 24px; flex-shrink: 0; color: #666; font-size: 0.7rem; }
.cd-import-mini { flex-grow: 1; min-width: 0; }
.cd-import-row .btn-xs { font-size: 0.7rem; padding: 2px 10px; flex-shrink: 0; }
#cd-toggle-import.active { background: rgba(13,202,240,0.15); }
/* ── Spell icon bar (grouped) ── */
#cd-spell-bar { display: flex; align-items: flex-end; gap: 2px; }
.cd-spell-group { display: flex; flex-direction: column; align-items: flex-start; border-right: 1px solid #495057; padding-right: 8px; margin-right: 4px; }
.cd-spell-group:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.cd-spell-group-label { font-size: 0.65rem; color: #c41f3b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; white-space: nowrap; }
.cd-spell-group-icons { display: flex; flex-wrap: nowrap; gap: 1px; align-items: center; min-height: 36px; }
.cd-spell-group-icons .iconmedium,
.cd-spell-group-icons .iconsmall,
.cd-spell-group-icons .icontiny { margin-right: 0 !important; }
#cd-spell-bar .cd-add-spell-icon { cursor: pointer; display: inline-block; opacity: 0.8; transition: opacity 0.15s, transform 0.15s; }
#cd-spell-bar .cd-add-spell-icon:hover { opacity: 1; transform: scale(1.1); }
/* Hide wowhead spell name text, keep icon only */
#cd-spell-bar a.cd-add-spell-icon { font-size: 0 !important; line-height: 0; color: transparent !important; text-decoration: none !important; }
#cd-spell-bar a.cd-add-spell-icon del,
#cd-spell-bar a.cd-add-spell-icon > span:not(.iconsmall):not(.iconmedium):not(.icontiny):not(.iconblizzard) { display: none !important; }
/* Match potion/trinket img to wowhead's native iconmedium (36px icon inside 44px box) */
.cd-spell-bar-img { width: 36px; height: 36px; border-radius: 4px; cursor: pointer; margin: 0 4px; }
.cd-trinket2-icon { filter: hue-rotate(180deg) brightness(1.1); }
/* Settings inputs in spell bar */
.cd-bar-input { width: 60px !important; font-size: 0.75rem !important; height: 26px !important; padding: 2px 4px !important; text-align: center; }
.cd-bar-unit { font-size: 0.65rem; color: #888; margin-left: 2px; }
.cd-bar-checkbox { width: 18px !important; height: 18px !important; margin-top: 4px; cursor: pointer; }
#cdTimelineEditorModal .modal-content { display: flex; flex-direction: column; }
#cdExportImportModal { z-index: 1060; }
#cdExportImportModal + .modal-backdrop { z-index: 1055; }
#cd-spell-bar-container { background: #1a1d21; flex-shrink: 0; }

/* ── Shared: hide wowhead text/del inside all our timelines ── */
.cd-tl-icons a .iconmedium del,
.cd-tl-icons a .iconmedium > span:last-child,
.cd-tl-icons a .iconsmall del,
.cd-tl-icons a .iconsmall > span:last-child,
.cd-mini-tl a .iconmedium del,
.cd-mini-tl a .iconmedium > span:last-child,
.cd-mini-tl a .iconsmall del,
.cd-mini-tl a .iconsmall > span:last-child { display: none !important; }
/* Kill margin-right wowhead adds to all icon spans */
.cd-tl-icons .iconmedium,
.cd-tl-icons .iconsmall,
.cd-tl-icons .icontiny,
.cd-mini-tl .iconmedium,
.cd-mini-tl .iconsmall,
.cd-mini-tl .icontiny { margin-right: 0 !important; }

/* ── Editor visual timeline — 24px icons ── */
#cd-visual-timeline { position: relative; overflow: visible; }
.cd-tl-ruler { position: relative; height: 14px; }
.cd-tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: #333; }
.cd-tl-tick.major { background: #555; }
.cd-tl-tick-label { position: absolute; top: 0; font-size: 9px; color: #777; transform: translateX(-50%); }
.cd-tl-icons { position: relative; height: 24px; }
.cd-tl-icon { position: absolute; top: 0; transform: translateX(-50%); z-index: 1; }
a.cd-tl-icon { font-size: 0 !important; line-height: 0; color: transparent !important; text-decoration: none !important; }
.cd-tl-icons .iconmedium,
.cd-tl-icons .iconsmall,
.cd-tl-icons .icontiny { width: 24px !important; height: 24px !important; }
.cd-tl-icons .iconmedium ins,
.cd-tl-icons .iconsmall ins,
.cd-tl-icons .icontiny ins { width: 24px !important; height: 24px !important; left: 0 !important; top: 0 !important; }
.cd-tl-icon-img { width: 24px; height: 24px; border-radius: 3px; }
/* Draggable icons */
.cd-tl-draggable { cursor: grab; }
.cd-tl-draggable:active, .cd-tl-dragging { cursor: grabbing; z-index: 10 !important; filter: brightness(1.3); }
.cd-tl-drag-tooltip { position: absolute; bottom: 100%; transform: translateX(-50%); background: #000; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; pointer-events: none; white-space: nowrap; font-family: monospace; }

/* ── Import preview mini timeline — 20px icons ── */
.cd-mini-tl { position: relative; width: 100%; background: #1a1d21; border-radius: 2px; }
.cd-mini-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: #2a2d31; }
.cd-mini-tick.major { background: #3a3d41; }
.cd-mini-tick-label { position: absolute; top: 0; font-size: 7px; color: #444; transform: translateX(-50%); }
.cd-mini-icon { position: absolute; top: 0; z-index: 1; transform: translateX(-50%); }
a.cd-mini-icon { font-size: 0 !important; line-height: 0; color: transparent !important; text-decoration: none !important; }
.cd-mini-tl .iconmedium,
.cd-mini-tl .iconsmall,
.cd-mini-tl .icontiny { width: 20px !important; height: 20px !important; }
.cd-mini-tl .iconmedium ins,
.cd-mini-tl .iconsmall ins,
.cd-mini-tl .icontiny ins { width: 20px !important; height: 20px !important; left: 0 !important; top: 0 !important; }
.cd-mini-icon-img { width: 20px; height: 20px; border-radius: 2px; }