/* /css/tickets/dashboard.css */

.tickets-main{

max-width:1200px;

margin:auto;

padding:
180px 20px 80px;

display:flex;

flex-direction:column;

gap:24px;
}

/* HERO */

.tickets-hero{

text-align:center;

display:flex;

flex-direction:column;

gap:24px;
}

.tickets-hero h1{

font-size:3.5rem;

color:#00ff99;

text-shadow:
0 0 30px rgba(0,255,153,0.2);
}

.tickets-hero p{

max-width:800px;

margin:auto;

color:#cfcfcf;

line-height:1.8;
}

.tickets-hero-buttons{

display:flex;

align-items:center;
justify-content:center;

gap:18px;

flex-wrap:wrap;
}

/* BUTTONS */

.tickets-create-button,
.tickets-staff-button,
.ticket-open-button{

display:inline-flex;

align-items:center;
justify-content:center;

padding:
14px 22px;

border-radius:18px;

text-decoration:none;

font-weight:700;

transition:0.25s;
}

.tickets-create-button{

background:
linear-gradient(
135deg,
#00ff99,
#00d47f
);

color:black;
}

.tickets-staff-button{

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:white;
}

.ticket-open-button{

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:#d0d0d0;
}

.tickets-create-button:hover,
.tickets-staff-button:hover,
.ticket-open-button:hover{

transform:
translateY(-2px);

box-shadow:
0 0 20px rgba(0,255,153,0.15);
}

/* TICKETS */

.tickets-container{

display:flex;

flex-direction:column;

gap:20px;
}

.ticket-card{

padding:
24px;

border-radius:24px;

background:
rgba(255,255,255,0.03);

border:
1px solid rgba(255,255,255,0.06);

display:flex;

flex-direction:column;

gap:18px;
}

.ticket-top{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

flex-wrap:wrap;
}

.ticket-title{

font-size:1.4rem;

font-weight:700;

color:white;
}

/* STATUS */

.ticket-status{

padding:
8px 14px;

border-radius:999px;

font-size:0.85rem;

font-weight:700;
}

.ticket-status.open{

background:
rgba(0,255,153,0.15);

color:#00ff99;
}

.ticket-status.claimed{

background:
rgba(59,130,246,0.15);

color:#60a5fa;
}

.ticket-status.waiting{

background:
rgba(251,191,36,0.15);

color:#fbbf24;
}

.ticket-status.closed{

background:
rgba(239,68,68,0.15);

color:#f87171;
}

/* DETAILS */

.ticket-details{

background:
rgba(255,255,255,0.02);

border:
1px solid rgba(255,255,255,0.06);

border-radius:18px;

padding:
18px;
}

.ticket-details summary{

cursor:pointer;

font-weight:700;

color:#00ff99;
}

.ticket-description{

margin-top:14px;

color:#cfcfcf;

line-height:1.7;

white-space:pre-wrap;
}

/* INFO */

.ticket-info{

display:flex;

flex-direction:column;

gap:8px;

color:#9f9f9f;

font-size:0.95rem;
}

.ticket-actions{

display:flex;

justify-content:flex-end;
}

.tickets-loading{

text-align:center;

padding:
40px;

color:#9f9f9f;
}

/* MOBILE */

.mobile-navbar-toggle{

display:none;
}

@media(max-width:768px){

.mobile-navbar-toggle{

position:fixed;

top:16px;
right:16px;

display:flex;

align-items:center;
justify-content:center;

padding:
14px 18px;

border:none;

border-radius:18px;

background:
rgba(0,0,0,0.82);

backdrop-filter:
blur(18px);

border:
1px solid rgba(255,255,255,0.08);

color:#00ff99;

font-size:1rem;

font-weight:700;

z-index:100000;
}

.dashboard-navbar.hidden-navbar{

opacity:0;

pointer-events:none;
}

.tickets-main{

padding:
120px 18px 70px;
}

.tickets-hero h1{

font-size:2.6rem;
}

.ticket-top{

flex-direction:column;

align-items:flex-start;
}

.ticket-actions{

justify-content:stretch;
}

.ticket-open-button{

width:100%;
}

}