main{
width:1600px;
margin:0 auto;
}
.forms-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin:40px auto 60px auto;
max-width:1400px;
}
.form-card{
background:white;
border:1px solid var(--bc1);
border-radius:var(--br1);
overflow:hidden;
transition:all 0.2s ease;
position:relative;
min-height:220px;
}
.form-card:hover{
border-color:var(--btn);
box-shadow:0 8px 25px rgba(0,0,0,0.12);
transform:translateY(-2px);
}
.form-card.temp-form{
border-left:6px solid #f59e0b;
background:#fffbeb;
}
.form-card.temp-form:hover{
border-color:#f59e0b;
box-shadow:0 8px 25px rgba(245,158,11,0.25);
}
.form-card.temp-form::before{
content:'TEMP';
position:absolute;
top:12px;
right:12px;
background:#f59e0b;
color:white;
font-size:11px;
font-weight:700;
padding:4px 8px;
border-radius:4px;
letter-spacing:0.5px;
}
.form-card-header{
padding:30px 30px 20px 30px;
border-bottom:1px solid var(--bc1);
position:relative;
}
.form-title-display{
font-size:22px;
font-weight:600;
color:var(--tc1);
margin-bottom:16px;
line-height:1.3;
word-break:break-word;
}
.form-meta{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}
.form-status{
padding:6px 12px;
border-radius:16px;
font-size:13px;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}
.form-status.published{
background:#d1fae5;
color:#065f46;
}
.form-status.draft{
background:#fef3c7;
color:#92400e;
}
.form-status.temp{
background:#fee2e2;
color:#991b1b;
}
.form-date{
color:var(--tc2);
font-size:14px;
}
.form-fields-count{
color:var(--tc2);
font-size:14px;
font-weight:500;
}
.form-card-actions{
padding:24px 30px;
display:flex;
gap:12px;
justify-content:space-between;
align-items:center;
}
.form-actions-left{
display:flex;
gap:12px;
}
.btn-small{
padding:12px 20px;
font-size:16px;
border-radius:var(--br1);
border:1px solid var(--bc1);
background:white;
color:var(--tc1);
text-decoration:none;
cursor:pointer;
transition:all 0.2s ease;
font-weight:500;
display:flex;
align-items:center;
gap:8px;
}
.btn-small:hover{
background:var(--bgc);
border-color:var(--btn);
}
.btn-small.primary{
background:var(--btn);
color:white;
border-color:var(--btn);
}
.btn-small.primary:hover{
background:#1e40af;
}
.btn-small.danger{
background:#dc2626;
color:white;
border-color:#dc2626;
}
.btn-small.danger:hover{
background:#b91c1c;
}
.btn-small svg{
width:16px;
height:16px;
}
.btn-danger{
background:#dc2626;
color:white;
border:1px solid #dc2626;
padding:12px 20px;
font-size:16px;
font-weight:500;
cursor:pointer;
border-radius:var(--br1);
}
.btn-danger:hover{
background:#b91c1c;
}
.loading{
text-align:center;
padding:80px 20px;
color:var(--tc2);
font-size:20px;
grid-column:1/-1;
}
.empty-state{
display:flex;
align-items:center;
justify-content:center;
gap:24px;
padding:80px 20px;
grid-column:1/-1;
background:white;
border:1px solid var(--bc1);
border-radius:12px;
margin:20px;
}
.empty-icon{
font-size:48px;
opacity:0.4;
color:var(--tc2);
}
.empty-content h3{
font-size:24px;
color:var(--tc1);
margin-bottom:12px;
font-weight:600;
}
.empty-content p{
color:var(--tc2);
font-size:16px;
margin-bottom:24px;
}
@media (max-width:1600px){
main{
width:100%;
}
.forms-grid{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
}
@media (max-width:1200px){
.forms-grid{
max-width:900px;
gap:30px;
}
}
@media (max-width:768px){
.forms-grid{
grid-template-columns:repeat(2,1fr);
gap:24px;
margin:30px auto 40px auto;
}
.form-card-header{
padding:24px 24px 16px 24px;
}
.form-card-actions{
padding:20px 24px;
flex-direction:column;
gap:16px;
align-items:stretch;
}
.form-actions-left{
justify-content:center;
}
.empty-state{
flex-direction:column;
gap:16px;
text-align:center;
padding:60px 20px;
}
.empty-icon{
font-size:40px;
}
.empty-content h3{
font-size:20px;
}
.empty-content p{
font-size:16px;
}
}
@media (max-width:480px){
.forms-grid{
grid-template-columns:1fr;
gap:20px;
margin:20px auto 30px auto;
}
.container{
padding:0 16px;
}
.form-card-header{
padding:20px 20px 16px 20px;
}
.form-card-actions{
padding:16px 20px;
}
.empty-state{
flex-direction:column;
gap:12px;
padding:40px 20px;
margin:10px;
}
.empty-icon{
font-size:36px;
}
.empty-content h3{
font-size:18px;
margin-bottom:8px;
}
.empty-content p{
font-size:14px;
margin-bottom:16px;
}
}