/* =========================
   GRID WRAPPER
========================= */
.ct-grid{
    display:flex;
    flex-direction:column;
    align-items:center; /* NEU */
    gap:12px;
}

/* =========================
   CARD (MAIN FIX)
========================= */
.ct-ach{

    cursor: pointer;
	display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;

    box-sizing:border-box;

    padding:12px 14px;

    width:375px;      /* feste Breite */
    height:80px;      /* feste Höhe */

    border-radius:12px;

    background:linear-gradient(90deg,#151515,#101010);
    color:#fff;

    position:relative;
    overflow:hidden;

    gap:12px;
	
	transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
	
	will-change: transform;
    transform: translateZ(0);

}

/* hover */
.ct-ach:hover{

    transform:translateY(-2px) scale(1.01);

    background:
        linear-gradient(
            90deg,
            #1b1b1b,
            #111
        );

    box-shadow:
        0 10px 25px rgba(0,0,0,0.35);

}
ct-ach,
.ct-ach *{
    cursor: pointer;
}
/* =========================
   LEFT SIDE (IMAGE + TEXT FIXED ROW)
========================= */
.ct-left{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:12px !important;

    flex:1 1 auto;
    min-width:0; /* 🔥 IMPORTANT: prevents text drop */
}

/* IMAGE */
.ct-img{
    flex-shrink:0;
}

.ct-img img{
    width:48px;
    height:48px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}

/* TEXT BLOCK */
.ct-content{
    display:flex !important;
    flex-direction:column !important;

    min-width:0;
	max-width:500px;
    overflow:hidden;
}

.ct-content h3{
    margin:0;
    font-size:15px;
    line-height:1.2;
	color:#fff;
}

.ct-content p{
    margin:2px 0 0;
    font-size:12px;
    opacity:0.7;
}

/* =========================
   RIGHT SIDE (POINTS STUCK RIGHT EDGE)
========================= */
.ct-right{
    flex:0 0 auto;
    margin-left:auto; /* 🔥 KEY FIX */
    text-align:right;
    min-width:70px;
}

.ct-points{
    font-weight:bold;
    color:#3b82f6;
    white-space:nowrap;
}

/* =========================
   RARITY STRIPE
========================= */
.ct-ach::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
}

/* COLORS */
.ct-rarity-common::before{background:gray;}
.ct-rarity-rare::before{background:#3b82f6;}
.ct-rarity-extreme::before{background:purple;}
.ct-rarity-hidden::before{background:gold;}
.ct-rarity-bonus::before{background:yellow;}

/* =========================
   ADMIN LAYOUT
========================= */

.ct-admin-wrap{
    max-width:900px;
    margin-top:20px;
}

/* =========================
   FORM ELEMENTS
========================= */

.ct-admin-wrap input,
.ct-admin-wrap textarea,
.ct-admin-wrap select{

    max-width:100%;

    padding:10px 12px;

    border-radius:10px;
    border:1px solid #333;

    background:#111;
    color:#fff;

    box-sizing:border-box;
}

/* textarea nicer */
.ct-admin-wrap textarea{
    min-height:120px;
    resize:vertical;
}

/* labels */
.ct-admin-wrap label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

/* spacing */
.ct-admin-wrap h2{
    margin-top:35px;
}

/* achievement list cards */
.ct-admin-wrap .ct-admin-card{

    background:#111;
    border:1px solid #222;

    border-radius:12px;

    padding:14px;
}

/* preview area */
#ct-live-preview{
    margin-top:20px;
}

/* buttons spacing */
.ct-admin-wrap .button{
    margin-top:5px;
}

/* =========================
   SMALL FIELD
========================= */

.ct-small-field{
    max-width:220px;
}

/* =========================
   PREVIEW WRAP
========================= */

.ct-preview-wrap{
    max-width:700px;
}

/* =========================
   EXISTING ACHIEVEMENTS
========================= */

.ct-admin-achievement-card{
    width:100%;
    max-width:700px;

    padding:12px;
    margin:12px 0;

    display:grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap:16px;
    align-items:center;

    background:#111;
    border:1px solid #222;
    border-radius:12px;

    box-sizing:border-box;
}

/* make buttons nicer */
.ct-admin-achievement-card .button{
    margin-top:0;
}

/* fix flex overflow */
.ct-admin-achievement-card > div{
    min-width:0;
    overflow:hidden;
}
/*Damit Titel nicht alles sprengt*/
.ct-admin-achievement-card b,
.ct-admin-achievement-card small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/*DISABLED ACHIVEMENT*/
.ct-rarity-disabled{
    background: linear-gradient(90deg, #2a0f0f, #120606) !important;
    opacity: 0.65;
    filter: grayscale(0.8);
}

/* linke Farb-Leiste rot */
.ct-rarity-disabled::before{
    background: #ef4444 !important;
}

/* Text grau */
.ct-rarity-disabled h3,
.ct-rarity-disabled p,
.ct-rarity-disabled{
    color: #9ca3af !important;
}

/* Punkte auch grau */
.ct-rarity-disabled .ct-points{
    color: #9ca3af !important;
}

.ct-rarity-disabled img{
    opacity: 0.4;
    filter: blur(0.5px) grayscale(1);
}

@media (max-width: 768px){

    .ct-ach{
        height:auto;
        min-height:90px;

        padding:12px;

        max-width:100%;
    }

}