/* D:\wamp64\www\ClipCAP2025\assets\css\kupaktervezo.css */

/* Custom pattern select display button */
#pattern-select-display {
    transition: all 0.2s;
}

#pattern-select-display:hover {
    background-color: var(--color-primary-input-bg-hover); /* Enyhe hover effekt */
}

#pattern-select-display.active {
    border-color: var(--color-clipcapBlue); /* Kiválasztott/aktív állapot szegélye */
}

/* Custom pattern dropdown panel */
#pattern-dropdown {
    top: 100%; /* Hogy a gomb alatt jelenjen meg */
    left: 0;
    z-index: 50; /* Biztosítja, hogy a többi tartalom felett jelenjen meg */
}

#pattern-selector-grid {
    /* A grid maga, ahol a görgetősávnak meg kell jelennie */
    max-height: 380px; /* Körülbelül 4 sornyi tartalom fér el ezen a magasságon */
    overflow-y: auto;  /* Görgetősáv megjelenítése, ha a tartalom meghaladja a max-height-t */
    -webkit-overflow-scrolling: touch; /* Simább görgetés iOS eszközökön */
}

/* Kupak megjelenítő konténer (ez már a canvas-ra vonatkozó stílus lesz, a régiek törölve) */
#cup-display-wrapper {
    /* Ezek a Tailwind CSS osztályokból jönnek: w-full max-w-xs aspect-[1/2] */
    /* De ha további fix méretet vagy hátteret szeretnél, itt adhatod meg. */
    width: 250px; /* Csak példa, ha fix méret kell a wrappernek */
    height: 500px; /* Csak példa, ha fix méret kell a wrappernek */
}

/* Base Cup Image és Pattern Overlay (ezek már nem DOM elemek, a canvasra rajzolódnak) */
/* Az ide tartozó korábbi CSS szabályok már nem szükségesek, mivel a canvas kezeli a grafikát */

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

::-webkit-scrollbar-track {
    background: var(--color-primary-input-bg);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-clipcapBlue);
}

/* Dark mode specific scrollbar */
.dark ::-webkit-scrollbar-thumb {
    background: var(--color-primary-border);
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--color-clipcapBlue);
}

/* Egyéb select stílusok (ha szükséges) */
select {
    /* Alap Tailwind stílusok */
    appearance: none; /* A natív nyíl eltávolítása, ha egyéni nyilat akarunk */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9l4-4 4 4m0 6l-4 4-4-4'%3e%3c/path%3e%3c/svg%3e"); /* Egyéni nyíl */
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}
.dark select {
    filter: invert(1) grayscale(1); /* Sötét módhoz invertálja a nyíl színét */
}
.text-primary-text-soft {
    color: var(--color-primary-text-soft); /* Ezt a színt definiálni kell a tailwind.config.js-ben */
}

/* ÚJ: Mappa és Minta opciók stílusa */
.folder-option {
    border: 2px solid var(--color-primary-border);
    /* Alapértelmezett mappa ikon szín */
}
.folder-option svg {
    width: 64px; /* Nagyobb ikon a mappákhoz */
    height: 64px;
}
.folder-option:hover {
    border-color: var(--color-clipcapBlue);
}
.pattern-option.selected {
    border-color: var(--color-clipcapBlue);
}