.jp-tabs {
    position: fixed;
    top: 4.5rem;
    left: 0;
    z-index: 95;
    width: 100%;
    height: 3rem;
    border-bottom: 1px solid rgba(92, 225, 183, .14);
    background: #101b2e;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
}

.jp-tabs__inner {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    height: 100%;
}

.jp-tabs__list {
    display: flex;
    align-items: flex-end;
    flex: 1;
    gap: .3rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-color: #294057 transparent;
    scrollbar-width: thin;
}

.jp-tab {
    display: flex;
    align-items: center;
    flex: 0 1 210px;
    min-width: 115px;
    max-width: 230px;
    height: 2.55rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: #19273c;
    color: #aebed1;
}

.jp-tab:hover { background: #1d2c43; color: #e9fff8; }
.jp-tab[aria-selected="true"] {
    border-color: rgba(92, 225, 183, .24);
    background: #223149;
    color: #e9fff8;
    box-shadow: inset 0 2px #5ce1b7;
}

.jp-tab__open {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 .35rem 0 .7rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.jp-tab__icon {
    display: block;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    object-position: center;
}
.jp-tab__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-tab__close {
    display: grid;
    flex: none;
    width: 27px;
    height: 27px;
    margin-right: .25rem;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #7f91aa;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}
.jp-tab__close:hover { background: rgba(239, 68, 68, .14); color: #fb7185; }
.jp-tabs__new {
    flex: none;
    width: 38px;
    height: 2.25rem;
    margin-bottom: .15rem;
    border: 1px solid rgba(92, 225, 183, .2);
    border-radius: 9px;
    background: rgba(40, 197, 157, .09);
    color: #5ce1b7;
    cursor: pointer;
    font: 600 1.35rem/1 Montserrat, sans-serif;
}
.jp-tabs__new:hover,
.jp-tabs__tool:hover { background: rgba(40, 197, 157, .18); color: #5ce1b7; }

.jp-tabs__tool {
    display: grid;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .15rem;
    place-items: center;
    border: 1px solid rgba(92, 225, 183, .16);
    border-radius: 9px;
    background: #19273c;
    color: #aebed1;
    cursor: pointer;
    font-size: 1.05rem;
}
.jp-tabs__tool[hidden] { display: none; }
.jp-tabs__archive { position: relative; }
.jp-tabs__archive small {
    position: absolute;
    top: -.35rem;
    right: -.3rem;
    display: grid;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .2rem;
    place-items: center;
    border-radius: 999px;
    background: #28c59d;
    color: #0f172a;
    font-size: .62rem;
    font-weight: 800;
}

.jp-folder {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .42rem;
    max-width: 190px;
    height: 2.35rem;
    padding: 0 .65rem;
    border: 1px solid color-mix(in srgb, var(--folder-color, #fbbf24) 35%, transparent);
    border-radius: 8px 8px 0 0;
    background: color-mix(in srgb, var(--folder-color, #fbbf24) 10%, transparent);
    color: #d8e5f4;
    cursor: pointer;
    font: inherit;
}
.jp-folder i { color: var(--folder-color, #fbbf24); font-size: 1.05rem; }
.jp-folder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-folder small {
    display: grid;
    flex: none;
    min-width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--folder-color, #fbbf24) 17%, transparent);
    color: var(--folder-color, #fbbf24);
    font-size: .68rem;
    font-weight: 700;
}
.jp-folder:hover { border-color: var(--folder-color, #fbbf24); background: color-mix(in srgb, var(--folder-color, #fbbf24) 17%, transparent); }
.jp-folder.has-active-tab { border-color: var(--folder-color, #fbbf24); box-shadow: inset 0 2px var(--folder-color, #fbbf24); }
.jp-folder.is-drop-target { border-color: #5ce1b7; background: rgba(40, 197, 157, .2); }
.jp-folder.is-dragging,
.jp-tab.is-dragging { opacity: .42; }

/* Plads til den grønne header og fanebjælken. */
body { padding-top: 7.5rem; }
body > .jp-tabs ~ section { padding-top: 2rem; }

.jp-tab-menu {
    position: fixed;
    z-index: 1000;
    width: min(250px, calc(100vw - 24px));
    padding: .4rem;
    border: 1px solid #2b3d55;
    border-radius: 10px;
    background: #162238;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
}
.jp-tab-menu button {
    width: 100%;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #e9fff8;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.jp-tab-menu button:hover { background: rgba(40, 197, 157, .12); color: #5ce1b7; }
.jp-tab-menu button.is-danger { color: #fca5a5; }
.jp-tab-menu button.is-danger:hover { background: rgba(239, 68, 68, .12); color: #fb7185; }
.jp-tab-menu button.has-separator { margin-top:.35rem;padding-top:.8rem;border-top:1px solid rgba(148,163,184,.18); }

.jp-folder-popover {
    position: fixed;
    z-index: 1000;
    width: min(340px, calc(100vw - 24px));
    max-height: min(430px, calc(100vh - 150px));
    padding: .55rem;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--folder-color, #fbbf24) 40%, #2b3d55);
    border-radius: 11px;
    background: #121f33;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .42);
}
.jp-folder-popover__heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .45rem .65rem;
    color: #e9fff8;
}
.jp-folder-popover__heading i { color: var(--folder-color, #fbbf24); }
.jp-folder-popover__empty { margin: 0; padding: .8rem; color: #7f91aa; font-size: .8rem; }
.jp-tab--folder {
    width: 100%;
    max-width: none;
    height: 2.6rem;
    margin-top: .3rem;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 8px;
}
.jp-tab--folder[aria-selected="true"] { border-color: rgba(92, 225, 183, .35); }

.jp-color-picker { padding: .75rem; }
.jp-color-picker > strong { display: block; padding: 0 .15rem .65rem; color: #e9fff8; font-size: .82rem; }
.jp-color-picker__palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
    margin-bottom: .75rem;
    justify-items: center;
}
.jp-tab-menu .jp-color-picker__swatch {
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--swatch-color);
}
.jp-tab-menu .jp-color-picker__swatch:hover,
.jp-tab-menu .jp-color-picker__swatch[aria-pressed="true"] {
    border-color: #e9fff8;
    background: var(--swatch-color);
    transform: scale(1.08);
}
.jp-color-picker__custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #aebed1;
    font-size: .78rem;
}
.jp-color-picker__custom input {
    width: 2.6rem;
    height: 1.8rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.jp-folder-create {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.jp-folder-create__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 18, .76); backdrop-filter: blur(5px); }
.jp-folder-create__dialog {
    position: relative;
    width: min(430px, 100%);
    padding: 1.6rem;
    border: 1px solid rgba(92, 225, 183, .24);
    border-radius: 16px;
    background: #162238;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    color: #cbd5e1;
}
.jp-folder-create__dialog h2 { margin: .55rem 0 .3rem; font-size: 1.3rem; }
.jp-folder-create__dialog > p { margin: 0 0 1.2rem; color: #91a4bd; font-size: .83rem; }
.jp-folder-create__icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: 10px;
    background: rgba(40, 197, 157, .12);
    color: #5ce1b7;
    font-size: 1.35rem;
}
.jp-folder-create__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #91a4bd;
    cursor: pointer;
    font-size: 1.25rem;
}
.jp-folder-create__close:hover { background: rgba(239, 68, 68, .12); color: #fb7185; }
.jp-folder-create__label { display: block; margin: .85rem 0 .4rem; color: #d8e5f4; font-size: .78rem; font-weight: 700; }
.jp-folder-create__name {
    width: 100%;
    padding: .72rem .8rem;
    border: 1px solid #30445f;
    border-radius: 9px;
    outline: 0;
    background: #0f1a2c;
    color: #e9fff8;
    font: inherit;
}
.jp-folder-create__name:focus { border-color: #28c59d; box-shadow: 0 0 0 3px rgba(40, 197, 157, .1); }
.jp-folder-create__colors { display: grid; grid-template-columns: repeat(8, 1fr); gap: .55rem; }
.jp-folder-create__swatch {
    width: 1.8rem;
    height: 1.8rem;
    justify-self: center;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--swatch-color);
    cursor: pointer;
}
.jp-folder-create__swatch:hover,
.jp-folder-create__swatch[aria-pressed="true"] { border-color: #e9fff8; transform: scale(1.1); }
.jp-folder-create__custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .8rem;
    padding: .6rem .7rem;
    border-radius: 9px;
    background: #101b2e;
    color: #aebed1;
    font-size: .78rem;
}
.jp-folder-create__custom input { width: 2.8rem; height: 1.9rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.jp-folder-create__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.35rem; }
.jp-folder-create__actions button {
    padding: .6rem .9rem;
    border: 1px solid #30445f;
    border-radius: 8px;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
}
.jp-folder-create__actions button.is-primary { border-color: #28c59d; background: #28c59d; color: #06271f; }
.jp-folder-create__actions button:hover { filter: brightness(1.08); }

.jp-closed-folders { width: min(330px, calc(100vw - 24px)); padding: .65rem; }
.jp-closed-folders > strong { display: block; padding: .1rem .25rem .55rem; color: #e9fff8; }
.jp-closed-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .5rem;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
.jp-closed-folder > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 .45rem;
    min-width: 0;
    color: #d8e5f4;
}
.jp-closed-folder i { grid-row: 1 / 3; color: var(--folder-color, #fbbf24); font-size: 1.1rem; }
.jp-closed-folder > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-closed-folder small { color: #7f91aa; font-size: .67rem; }
.jp-tab-menu .jp-closed-folder > button {
    width: auto;
    padding: .35rem .55rem;
    background: rgba(40, 197, 157, .1);
    color: #5ce1b7;
    font-size: .72rem;
}
.jp-tabs-limit {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    padding: .7rem 1rem;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 9px;
    background: #162238;
    color: #fbbf24;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

@media (max-width: 700px) {
    .jp-tabs__inner { width: 100%; padding-left: .5rem; padding-right: .5rem; }
    .jp-tab { flex-basis: 165px; min-width: 105px; }
    .jp-tab__title { font-size: .78rem; }
    .jp-tabs__tool { width: 2rem; }
    .jp-folder { max-width: 135px; font-size: .75rem; }
    .jp-folder-create__colors { grid-template-columns: repeat(4, 1fr); }
}