/*
|--------------------------------------------------------------------------
| QLDT UI Kit - dùng chung cho các dự án Laravel của anh Phú
|--------------------------------------------------------------------------
| Mục tiêu: giao diện giống hệ thống quản lý dạy thêm:
| - Font Instrument Sans / system sans
| - Sidebar xanh tím đậm
| - Form card trắng, bo 2xl, shadow nhẹ
| - Input/select/textarea cao, padding rộng, không dính chữ vào border
| - Label rõ, grid 2 cột desktop, 1 cột mobile
*/

:root{
    --qldt-bg:#f9fafb;
    --qldt-card:#ffffff;
    --qldt-text:#111827;
    --qldt-muted:#6b7280;
    --qldt-border:#e5e7eb;
    --qldt-border-soft:#eef2f7;
    --qldt-primary:#4f46e5;
    --qldt-primary-hover:#4338ca;
    --qldt-sidebar:#1e1b4b;
    --qldt-ring:rgba(79,70,229,.16);
    --qldt-shadow:0 10px 25px rgba(15,23,42,.04);
    --qldt-shadow-card:0 14px 34px rgba(15,23,42,.06);
}

html,body{
    font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
    background:var(--qldt-bg);
    color:var(--qldt-text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Cards / sections */
.qldt-card,
.form-card,
.card,
.stat-card,
.modal-box{
    background:var(--qldt-card);
    border:1px solid var(--qldt-border-soft);
    border-radius:1rem;
    box-shadow:var(--qldt-shadow);
}

.form-card{
    width:100%;
    max-width:1080px;
    padding:28px 24px;
    display:grid;
    gap:22px;
}
.form-card.form-wide{max-width:1180px;}
.form-section{background:#fff;border:1px solid var(--qldt-border-soft);border-radius:1rem;box-shadow:var(--qldt-shadow);padding:24px;}
.form-title{margin:0 0 6px;font-size:16px;font-weight:700;color:#1f2937;line-height:1.35;}
.form-note{margin:0;color:var(--qldt-muted);font-size:13px;line-height:1.55;}

/* Grid */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px;}
.full-row,.form-grid .full-row,.form-grid-3 .full-row{grid-column:1/-1;}

/* Labels */
label,.qldt-label{
    display:grid;
    gap:8px;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    color:#374151;
}
label .required,.required{color:#ef4444;}

/* Inputs: tăng padding để chữ không sát border */
input:not([type='checkbox']):not([type='radio']):not([type='file']),
select,
textarea,
.qldt-input{
    width:100%;
    min-height:46px;
    padding:12px 16px !important;
    border:1px solid var(--qldt-border) !important;
    border-radius:12px !important;
    background:#fff;
    color:#111827;
    font:inherit;
    font-size:14px;
    font-weight:400;
    line-height:1.55;
    box-shadow:none;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

select{
    padding-right:42px !important;
    cursor:pointer;
}
textarea{
    min-height:104px;
    padding-top:13px !important;
    resize:vertical;
}
input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1;}
input:focus,select:focus,textarea:focus,.qldt-input:focus{
    border-color:#6366f1 !important;
    box-shadow:0 0 0 3px var(--qldt-ring) !important;
}
input:disabled,select:disabled,textarea:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;}

/* Checkbox / radio */
input[type='checkbox'],input[type='radio']{accent-color:var(--qldt-primary);}
.check{display:flex !important;align-items:center;gap:10px !important;font-weight:500;}
.check input{width:auto !important;min-height:auto !important;padding:0 !important;}

/* Buttons */
.btn{
    min-height:42px;
    padding:10px 16px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid var(--qldt-border);
    background:#fff;
    color:#374151;
    cursor:pointer;
    transition:.15s ease;
}
.btn-primary{background:var(--qldt-primary);border-color:var(--qldt-primary);color:#fff;}
.btn-primary:hover{background:var(--qldt-primary-hover);border-color:var(--qldt-primary-hover);}
.btn-light{background:#fff;color:#4b5563;border-color:var(--qldt-border);}
.btn-danger{background:#fee2e2;color:#b91c1c;border-color:#fecaca;}
.btn-sm{min-height:34px;padding:7px 11px;border-radius:10px;font-size:13px;}
.form-actions,.modal-actions{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding-top:2px;}
.form-actions .btn,.modal-actions .btn{min-width:112px;}

/* Tables / badges */
.table th,.table td{padding:14px 12px;border-bottom:1px solid var(--qldt-border-soft);}
.table th{background:#f9fafb;color:#6b7280;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:700;}

/* Special boxes */
.options-box{background:#fbfcff;border:1px dashed #dfe5ee;border-radius:1rem;padding:18px;display:grid;gap:15px;}
.options-box h4{margin:0 0 2px;font-size:16px;font-weight:700;color:#1f2937;}
.filter-bar{gap:12px;}
.question-item{border-color:var(--qldt-border-soft);border-radius:1rem;box-shadow:var(--qldt-shadow);}

/* Auth */
.auth-field input{min-height:48px;}

@media(max-width:760px){
    .form-card{padding:22px 18px;border-radius:1rem;}
    .form-grid,.form-grid-3{grid-template-columns:1fr;gap:16px;}
    input:not([type='checkbox']):not([type='radio']):not([type='file']),select,textarea,.qldt-input{min-height:48px;font-size:15px;}
    .form-actions,.modal-actions{flex-wrap:wrap;}
    .form-actions .btn,.modal-actions .btn{width:auto;}
}

/* Exam composer flow: upload/manual create share one screen */
.exam-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:20px;
    align-items:start;
}
.exam-workspace > .exam-main-card,
.exam-workspace > .exam-version-card{grid-column:1/2;}
.exam-picker-card{
    grid-column:2/3;
    grid-row:1 / span 3;
    position:sticky;
    top:16px;
    max-height:calc(100vh - 120px);
    display:flex;
    flex-direction:column;
}
.exam-info-form{gap:18px 16px;}
.exam-selected-list{gap:12px;}
.selected-question-card{align-items:flex-start;background:#fff;}
.selected-question-title{line-height:1.55;font-size:15px;color:#111827;}
.selected-question-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.selected-question-meta span{background:#eef2ff;color:#4338ca;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;}
.exam-bank-list{max-height:none;overflow:auto;padding-right:4px;}
.bank-question-row{grid-template-columns:1fr auto;align-items:center;background:#fff;}
.bank-question-content{display:grid;gap:5px;min-width:0;line-height:1.45;}
.bank-question-content b{font-size:14px;font-weight:650;color:#111827;}
.bank-question-content small{font-size:12px;color:#6b7280;}
.picker-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
@media(max-width:1024px){
    .exam-workspace{grid-template-columns:1fr;}
    .exam-workspace > .exam-main-card,
    .exam-workspace > .exam-version-card{grid-column:auto;}
    .exam-picker-card{grid-column:auto;grid-row:auto;position:fixed;right:12px;left:12px;bottom:12px;top:auto;z-index:60;max-height:80vh;transform:translateY(calc(100% + 20px));transition:.2s ease;box-shadow:0 24px 70px rgba(15,23,42,.22);}
    .exam-picker-card.picker-open{transform:translateY(0);}
}
@media(max-width:640px){.picker-filter-row{grid-template-columns:1fr}.selected-question-card{display:grid}}