/* ==========================================================
   Mathescout Tutor
   tutor.css
   ========================================================== */


/* ----------------------------------------------------------
   Farbdefinitionen
---------------------------------------------------------- */

:root {

    --primary: #0d6efd;
    --primary-light: #eaf3ff;

    --success: #198754;
    --warning: #ffc107;
    --danger: #dc3545;

    --background: #f4f6f9;

    --card-radius: 14px;

    --shadow:
        0 4px 14px rgba(0,0,0,.08);

}


/* ----------------------------------------------------------
   Grundlayout (CSS Grid)
---------------------------------------------------------- */

html,
body {

    height: 100vh;
    margin: 0;
    overflow: hidden;

    background: var(--background);

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


body {

    display: flex;
    flex-direction: column;

}


/* Hauptbereich */

#mainLayout {

    flex: 1;

    display: grid;

    grid-template-rows:
        auto      /* Tutor + Whiteboard */
        1fr       /* Unterricht */
        auto;     /* Werkzeugleiste */

    gap: 1rem;

    overflow: hidden;

    padding-top: 1rem;
    padding-bottom: 1rem;

}


/* obere Kartenzeile */

#topRow {

    margin: 0;

    height: 420px;

}


#topRow .row {

    height: 100%;

}

#topRow [class*="col-"] {

    height: 100%;

}



/* Unterricht */

#lessonRow {

    margin: 0;

    min-height: 0;

}


#lessonRow .card {

    height: 100%;

}


#lessonRow .card-body {

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* Chatfenster */

#chatWindow {

    flex: 1;

    overflow-y: auto;

    padding: 10px;

}


/* Werkzeugleiste */

#toolbarRow {

    margin: 0;

}
/* ----------------------------------------------------------
   Header
---------------------------------------------------------- */

#appHeader{

    background:white;

    border-bottom:1px solid #dee2e6;

}


#appHeader h4{

    font-weight:600;

}



/* ----------------------------------------------------------
   Cards
---------------------------------------------------------- */

.card{

    border:none;

    border-radius:var(--card-radius);

    box-shadow:var(--shadow);

}


.card-header{

    background:white;

    font-weight:600;

    border-bottom:1px solid #ececec;

}


/* ----------------------------------------------------------
   Tutor
---------------------------------------------------------- */

#tutorCard{

    min-height:320px;

}


#tutorAvatar{

    color:var(--primary);

}


#tutorMessage{

    line-height:1.7;

}


/* ----------------------------------------------------------
   Whiteboard
---------------------------------------------------------- */

#photoCard {

    display:flex;

    flex-direction:column;

}

#photoCard .card-body {

    flex:1;

    display:flex;

    overflow:hidden;

    min-height:0;

}

#photoArea {

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    min-height:0;

}



#whiteboardCard{

    min-height:420px;

    display:flex;

    flex-direction:column;

}


#whiteboardCard .card-body{

    flex:1;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:0;

}


#whiteboard{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    border:2px dashed #d9d9d9;

    border-radius:10px;

    background:white;

    padding:25px;

    min-height:0;

}
/* ----------------------------------------------------------
   Unterricht
---------------------------------------------------------- */

#chatWindow{

    height:320px;

    overflow-y:auto;

    padding:10px;

}


/* ----------------------------------------------------------
   Chat-Bubbles
---------------------------------------------------------- */

.chat-message{

    margin-bottom:18px;

}


.chat-tutor{

    background:#eef5ff;

    border-left:4px solid var(--primary);

    padding:14px 18px;

    border-radius:10px;

}


.chat-student{

    background:#f8f9fa;

    border-left:4px solid #adb5bd;

    padding:14px 18px;

    border-radius:10px;

}



/* ----------------------------------------------------------
   Werkzeugleiste
---------------------------------------------------------- */

.btn{

    border-radius:10px;

    min-width:130px;

}


.btn i{

    margin-right:8px;

}



/* ----------------------------------------------------------
   Statusleiste
---------------------------------------------------------- */

#statusBar{

    background:white;

    font-size:.92rem;

}



/* ----------------------------------------------------------
   Statusfarben
---------------------------------------------------------- */

.status-ready{

    color:var(--success);

}


.status-busy{

    color:var(--warning);

}


.status-error{

    color:var(--danger);

}



/* ----------------------------------------------------------
   Animation
---------------------------------------------------------- */

.fade-in{

    animation:fadeIn .3s ease;

}


@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width:992px){

    #tutorCard,
    #whiteboardCard{

        min-height:300px;

    }

    #chatWindow{

        height:320px;

    }

}


@media (max-width:768px){

    .btn{

        width:100%;

    }

}

/* ----------------------------------------------------------
   Smartphone
---------------------------------------------------------- */

@media (max-width: 992px) {

    html,
    body {

        height: auto;
        overflow: auto;

    }

    #mainLayout {

        display: block;

        overflow: visible;

    }

    #chatWindow {

        height: 300px;

    }

}

#lessonPlaceholder{

    color:#555;

}

.chat-bubble{

    border-radius:14px;

    padding:16px 18px;

}

.chat-bubble.student{

    background:#eef5ff;

    border-left:4px solid #0d6efd;

}

.chat-bubble.tutor{

    background:#f8f9fa;

    border-left:4px solid #198754;

}