:root {

    --kg-primary:       #1B6CA8;
    --kg-primary-subtle: #155A8A;

    --kg-teacher:       #0d6efd;
    --kg-teacher-light: #e7f0ff;
    --kg-teacher-border:#bfd5ff;

    --kg-learner:       #198754;
    --kg-learner-light: #e8f5ee;
    --kg-learner-border:#a3d4b9;

    --kg-admin:         #374151;
    --kg-admin-light:   #e5e7eb;
    --kg-admin-border:  #374151;

    --kg-text-dark:     #1f2937;
    --kg-text-mid:      #374151;
    --kg-text-muted:    #9ca3af;

    --kg-border:        #e5e7eb;
    --kg-border-focus:  #93c5fd;

    --kg-bg-page:       #f3f4f6;
    --kg-bg-card:       #ffffff;
    --kg-bg-item:       #f9fafb;
    --kg-bg-item-hover: #f0f4ff;

    --kg-radius-card:   16px;
    --kg-radius-item:   10px;
    --kg-radius-badge:  20px;
    --kg-radius-btn:    8px;
    --kg-radius-full:   50%;

    --kg-font: 'Segoe UI', system-ui, -apple-system, sans-serif;

    --bs-primary: var(--kg-primary);
    --bs-primary-rgb: 27, 108, 168;
}

/* BOOTSTRAP HELPERS OVERIDE */
.text-muted { color: var(--kg-text-muted) !important; }

.btn-primary {
    --bs-btn-bg:       var(--kg-primary);
    --bs-btn-hover-bg: var(--kg-primary-subtle);
}

.btn-outline-primary {
    --bs-btn-color: var(--kg-primary);
    --bs-btn-border-color: var(--kg-primary);
    --bs-btn-hover-bg: var(--kg-primary);

}

html,
body {
    height: 100%;
    font-family: var(--kg-font);
    background-color: var(--kg-bg-page);
    color: var(--kg-text-mid);
}

.kg-form-center {
    max-width: 420px;
}

.kg-context-card {
    text-decoration: none;
    color: #000000;
}

.sidebar { width: 240px; min-height: 100vh; background: #fff; border-right: 1px solid #e9ecef; position: fixed; top: 0; left: 0; }

.sidebar .nav-title {
    font-size:.7rem;
    letter-spacing:.08em;
}

.nav-link { color: #495057; border-radius: 8px; padding: .6rem 1rem; transition: all .15s; }
.nav-link:hover, .nav-link.active { background: rgba(27,108,168,.08); color: var(--sk-primary); }
.nav-link.active { font-weight: 600; }
.nav-link .bi { width: 20px; }

.nav-link.disabled { color: #cecece; }

.nav-link.small { font-size: smaller; }

.avatar { width:36px; height:36px; background: var(--kg-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }

.main-content { margin-left: 240px; }

.topbar { background:#fff; border-bottom: 1px solid #e9ecef; height: 60px; }

.counter-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: #6c757d; }

.kg-tabs .nav-link { border-radius: 0; padding: .75rem 1.25rem; color: #6c757d; font-size: .875rem; border-bottom: 2px solid transparent; }
.kg-tabs .nav-link.active { color: var(--kg-primary); font-weight: 600; border-bottom-color: var(--kg-primary); background: transparent; }
.kg-tabs .nav-link:hover:not(.active) { color: var(--kg-primary); background: rgba(27,108,168,.04); }

/* Icône brand dans la navbar */
.kg-brand-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.kg-border-teacher { 
    border: 1px solid var(--kg-teacher-border);
}

.kg-border-learner { 
    border: 1px solid var(--kg-learner-border);
}

.kg-border-admin {
    border: 1px solid var(--kg-admin-border);
}

.kg-bg-teacher {
    background-color: var(--kg-teacher-light);
    color: var(--kg-teacher);
}

.kg-bg-learner {
    background-color: var(--kg-learner-light); 
    color: var(--kg-learner);
}

.kg-bg-admin {
    background-color: var(--kg-admin-light); 
    color: var(--kg-admin);
}

.kg-ctx-item a span {
    font-size: .6rem;
}

.kg-ctx-item .kg-ctx-profile {
    font-size: .82rem;
}

.kg-ctx-item .kg-ctx-institution {
    font-size: .72rem;
}
.kg-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.kg-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: .68rem;
}

.kg-avatar-teacher  { background-color: var(--kg-teacher); }
.kg-avatar-learner  { background-color: var(--kg-learner); }
.kg-avatar-admin    { background-color: #6b7280; }
.kg-avatar-neutral  { background-color: #9ca3af; }

.kg-user-card .kg-admin {
    font-size: .68rem;
    color: var(--kg-text-muted);
}

.kg-user-card .kg-user-name {
    color:var(--kg-text-dark);
    font-size:.875rem;
}

.kg-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--kg-border) transparent;
    overflow-y: auto;
}
.kg-scroll::-webkit-scrollbar { width: 6px; }
.kg-scroll::-webkit-scrollbar-thumb { background: var(--kg-border); border-radius: 6px; }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot.active   { background: var(--kg-learner); }
.status-dot.inactive { background: #d1d5db; }
.status-dot.pending  { background: #f59e0b; }

.kg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--kg-radius-item);
    margin-bottom: 6px;
    background: var(--kg-bg-item);
    border: 1.5px solid var(--kg-border);
    transition: background .15s, border-color .15s;
}
.kg-item:hover {
    background: var(--kg-bg-item-hover);
    border-color: var(--kg-teacher-border);
}
.kg-item.current {
    background: var(--kg-teacher-light);
    border-color: var(--kg-teacher);
}
.kg-item.kg-item-learner:hover {
    background: var(--kg-learner-light);
    border-color: var(--kg-learner-border);
}
.kg-item.kg-item-learner.current {
    background: var(--kg-learner-light);
    border-color: var(--kg-learner);
}
.kg-item.kg-item-teacher:hover {
    background: var(--kg-teacher-light);
    border-color: var(--kg-teacher-border);
}
.kg-item.kg-item-teacher.current {
    background: var(--kg-teacher-light);
    border-color: var(--kg-teacher);
}
.kg-item.kg-item-admin:hover {
    background: var(--kg-admin-light);
    border-color: var(--kg-admin-border);
}
.kg-item.kg-item-admin.current {
    background: var(--kg-admin-light);
    border-color: var(--kg-admin);
}

.kg-form {
    max-width: 680px;
}

/* ===== Assessment builder ===== */
.kg-section-card {
    border: 1px solid var(--kg-border);
    border-radius: 12px;
    background: var(--kg-bg-card);
    transition: border-color .15s;
}
.kg-section-card.kg-section-active {
    border-color: var(--kg-primary);
}
.kg-section-header {
    background: var(--kg-bg-item);
    border-radius: 10px 10px 0 0;
    padding: .65rem 1rem;
    cursor: pointer;
    user-select: none;
}
.kg-question-row {
    border: 1px solid var(--kg-border);
    border-radius: 8px;
    background: var(--kg-bg-card);
    padding: .75rem 1rem;
}
.kg-criterion-row {
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    background: var(--kg-bg-item);
    padding: .45rem .75rem;
}
.kg-drag-handle {
    cursor: grab;
    color: #adb5bd;
    flex-shrink: 0;
}
.kg-step-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kg-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kg-add-section-btn {
    border-style: dashed !important;
}

/* ===== Teacher dashboard ===== */
.workspace-header { padding: 1.25rem 1.5rem .25rem 1.5rem; }
.workspace-header h4 { font-size: 1.15rem; }

.primary-icon { color: var(--kg-primary); background: rgba(27,108,168,.08); }

/* Session cards */
.session-card { border-left: 3px solid transparent; transition: border-color .15s; }
.session-card.session-overdue  { border-left-color: #fd7e14; }
.session-card.session-upcoming { border-left-color: #dee2e6; }
.session-card.session-today    { border-left-color: var(--kg-primary); }
.session-card:hover { border-left-width: 5px; }

.session-date-pill { font-size:.7rem; font-weight:600; color:#6c757d; background:#f4f7fb; border-radius:20px; padding:2px 8px; white-space:nowrap; }
.session-date-pill.today   { background:rgba(27,108,168,.08); color:var(--kg-primary); }
.session-date-pill.overdue { background:#fff3cd; color:#b45309; }

/* Alert learner widget */
.alert-learner-row { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; border-bottom:1px solid #f5f5f5; transition:background .1s; }
.alert-learner-row:last-of-type { border-bottom:none; }
.alert-learner-row:hover { background:#f8f9fa; }

.alert-tag { font-size:.65rem; font-weight:600; border-radius:10px; padding:2px 7px; white-space:nowrap; }
.alert-tag-absence { background:#fff0e6; color:#c04e00; }
.alert-tag-grade   { background:#fef3c7; color:#92400e; }
.alert-tag-low     { background:#fde8e8; color:#b91c1c; }

/* User info cells (tables & widget lists) */
.user-avatar { width:30px; height:30px; border-radius:50%; font-size:.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.user-name { font-size:.85rem; font-weight:500; }
.user-meta { font-size:.72rem; color:#adb5bd; }

/* Drag & drop states */
.kg-dragging {
    opacity: 0.35;
    cursor: grabbing;
}
.kg-drag-handle:active {
    cursor: grabbing;
}
.kg-drop-above {
    box-shadow: 0 -3px 0 0 var(--kg-primary) !important;
}
.kg-drop-below {
    box-shadow: 0 3px 0 0 var(--kg-primary) !important;
}