/* ===================================================
   KitCikgu Design System v2.0
   Clean Rewrite
=================================================== */

:root{
 --kc-primary:#2563eb;
 --kc-success:#16a34a;
 --kc-warning:#f59e0b;
 --kc-danger:#dc2626;
 --kc-info:#0ea5e9;
 --kc-dark:#1f2937;
 --kc-light:#f8fafc;
 --kc-border:#e5e7eb;
 --kc-radius:14px;
 --kc-shadow:0 8px 20px rgba(0,0,0,.08);
 --kc-transition:.25s;
}

*{box-sizing:border-box}
body{
 margin:0;
 background:var(--kc-light);
 color:var(--kc-dark);
 font-family:'Segoe UI',Tahoma,sans-serif;
 line-height:1.6;
}

.kc-container{max-width:1200px;margin:auto;padding:20px;}
.kc-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.kc-page-title{font-size:1.8rem;font-weight:700;margin:0;}
.kc-page-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}

.kc-card{
 background:#fff;
 border:1px solid var(--kc-border);
 border-radius:var(--kc-radius);
 box-shadow:var(--kc-shadow);
 overflow:hidden;
 transition:var(--kc-transition);
}
.kc-card:hover{transform:translateY(-3px);}
.kc-card-header{
 padding:16px 20px;
 font-weight:700;
 border-bottom:1px solid var(--kc-border);
}
.kc-card-body{padding:20px;}

.kc-btn{
 display:inline-block;
 padding:.6rem 1rem;
 border:none;
 border-radius:10px;
 cursor:pointer;
 text-decoration:none;
 transition:var(--kc-transition);
 color:#fff;
}
.kc-btn:hover{opacity:.9}
.kc-btn-primary{background:var(--kc-primary);}
.kc-btn-success{background:var(--kc-success);}
.kc-btn-warning{background:var(--kc-warning);}
.kc-btn-danger{background:var(--kc-danger);}
.kc-btn-info{background:var(--kc-info);}

.kc-form-control{
 width:100%;
 padding:.7rem .9rem;
 border:1px solid var(--kc-border);
 border-radius:10px;
}
.kc-form-control:focus{
 outline:none;
 border-color:var(--kc-primary);
 box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
}

.kc-table{
 width:100%;
 border-collapse:collapse;
}
.kc-table th,
.kc-table td{
 padding:12px;
 border-bottom:1px solid var(--kc-border);
}
.kc-table thead{
 background:#f3f4f6;
}
.kc-table tbody tr:hover{
 background:#fafafa;
}
.kc-link-actions{white-space:nowrap;}
.kc-link-actions .btn{margin:0 .15rem .15rem 0;}

.kc-qr-panel{
 max-width:280px;
 margin-left:auto;
 margin-right:auto;
 padding:1rem;
 background:#f8fafc;
 border:1px solid var(--kc-border);
 border-radius:12px;
}
.kc-qr-panel img{background:#fff;padding:.4rem;max-width:100%;height:auto;}

.kc-stat-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:20px;
}
.kc-stat-card{
 background:#fff;
 border:1px solid var(--kc-border);
 border-radius:var(--kc-radius);
 padding:20px;
 box-shadow:var(--kc-shadow);
}

.kc-toast{
 position:fixed;
 top:20px;
 right:20px;
 padding:12px 18px;
 border-radius:8px;
 color:#fff;
 z-index:9999;
}

.kc-search{
 position:relative;
}
.kc-search input{
 width:100%;
 padding:.7rem 1rem;
 border:1px solid var(--kc-border);
 border-radius:999px;
}

.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.p-1{padding:1rem}
.p-2{padding:2rem}
.text-center{text-align:center}
.w-100{width:100%}

@media(max-width:768px){
 .kc-page-header{
   flex-direction:column;
   align-items:flex-start;
   gap:12px;
 }
 .kc-btn{
   width:100%;
   text-align:center;
 }
 .kc-page-actions{width:100%;}
 .kc-page-actions .kc-btn,
 .kc-page-actions .btn{flex:1 1 180px;}
 .kc-table{
   display:block;
   overflow-x:auto;
 }
 .kc-table th,
 .kc-table td{white-space:nowrap;}
}