/* Homepage: teacher class dashboard in the device mockups (notebook + phone), a scaled-down copy of the new look of
   /app/teacher/class (colours from app/data/css/wocabee_new.css). Markup: makeTeacherDashboardHTML() in index-ntb-content.php.
   Sizes are in em, so the same rules work in the notebook (.ntb-app-screen) and in the smaller phone screen. */

.mk-t { text-align: left; color: #2e2a22; font-size: 1em; line-height: 1.3; }
.mk-t .try { cursor: pointer; }

/* header: home, flag, class name, validity, my notes */
.mk-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .5em; margin-bottom: .7em; }
.mk-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2em; height: 2.2em; border-radius: 50%;
    background: #fff; border: 1px solid #EDE4D2; font-size: .85em;
}
.mk-flag { width: 1.6em; height: 1.1em; border-radius: 2px; object-fit: cover; }
.mk-title { font-size: 1.35em; font-weight: 700; }
.mk-chip {
    padding: .1em .6em; border: 1px solid #EDE4D2; border-radius: 999px;
    background: #fff; color: #41484f; font-size: .75em; white-space: nowrap;
}
.mk-notes {
    margin-left: auto; padding: .25em .7em; border: 1px solid #dfe2e6; border-radius: 6px;
    background: #f1f2f4; font-size: .8em; font-weight: 700; white-space: nowrap;
}
.mk-notes i { color: #fba828; }

/* cards */
.mk-card {
    background: #fff; border: 1px solid #EDE4D2; border-radius: 10px;
    padding: .8em; margin-bottom: .8em;
    box-shadow: 0 1px 2px rgba(46, 42, 34, .06), 0 8px 20px -8px rgba(46, 42, 34, .12);
}
.mk-menuTitle {
    margin: 0 0 .45em .15em; color: #8A8272;
    font-size: .68em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.mk-menuTitle--sep { margin-top: .8em; padding-top: .7em; border-top: 1px solid #EDE4D2; }

/* "AI" corner tag */
.mk-tag {
    position: absolute; top: -1px; left: -1px; padding: 0 .4em;
    border-radius: 6px 0 6px 0; background: #28a745; color: #fff;
    font-size: .6em; font-weight: 700; line-height: 1.5;
}
.mk-tag i { font-size: .85em; }

/* packages = the hero */
.mk-hero {
    position: relative; display: flex; align-items: center; gap: .6em;
    padding: .9em .9em .8em; border: 1px solid #cdebd4; border-radius: 8px;
    background: #e9f6ec; color: #1e5e2e; font-size: 1.05em; font-weight: 700;
}
.mk-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; border-radius: 6px; background: #28a745; color: #fff; font-size: .9em;
}
.mk-badge { padding: 0 .5em; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: .7em; font-weight: 700; }

/* tests / games / stories - started from packages */
.mk-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; margin: .45em 0 .45em 2em; }
.mk-pill {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .35em;
    padding: .7em .3em; border: 1px solid; border-radius: 7px; font-size: .85em; font-weight: 600;
}
.mk-pill--blue   { background: #e8f1fd; border-color: #cfe0f8; color: #1d4f91; }
.mk-pill--blue i { color: #007bff; }
.mk-pill--purple { background: #f3eafa; border-color: #e2d0f0; color: #5b2a73; }
.mk-pill--purple i { color: #8e44ad; }
.mk-pill--orange { background: #fdf0e6; border-color: #f7d9c0; color: #8a4511; }
.mk-pill--orange i { color: #f0883e; }
.mk-pill--orange .mk-tag i { color: #fff; }

/* conversations + class management tiles */
.mk-tile {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .4em;
    padding: .75em .4em; border: 1px solid; border-radius: 7px; font-size: .88em; font-weight: 600;
}
.mk-tile--teal   { background: #e3f5f7; border-color: #c4e8ee; color: #0f5f6b; }
.mk-tile--teal > i { color: #17a2b8; }
.mk-tile--grey   { background: #f1f2f4; border-color: #dfe2e6; color: #3d3d3d; }
.mk-tile--grey i { color: #6c757d; }
.mk-tile--indigo { background: #eceefa; border-color: #d3d7f1; color: #2f3778; }
.mk-tile--indigo i { color: #4f5bb5; }
.mk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }

/* student list */
.mk-listHead { display: flex; align-items: center; gap: .4em; font-size: 1.15em; font-weight: 700; }
.mk-listHead > i { color: #fba828; }
.mk-listPills { display: flex; flex-wrap: wrap; gap: .35em; margin: .5em 0 .2em; }
.mk-smallPill {
    padding: .15em .6em; border: 1px solid #EDE4D2; border-radius: 6px;
    background: #fff; font-size: .72em; font-weight: 600; white-space: nowrap;
}
.mk-red { color: #dc3545; }
.mk-table { width: 100%; margin-top: .4em; border-collapse: collapse; font-size: .82em; }
.mk-table th {
    padding: .3em .25em; color: #8A8272; font-size: .72em; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.mk-table td { padding: .45em .25em; border-top: 1px solid #f0ebe0; vertical-align: middle; }
.mk-place { width: 1.6em; color: #8A8272; font-weight: 600; }
.mk-medal--1 { color: #e0a800; }
.mk-medal--2 { color: #9aa3ad; }
.mk-medal--3 { color: #c0773a; }
.mk-name { font-weight: 600; }
.mk-dot { font-size: .55em; vertical-align: .2em; }
.mk-dot--online  { color: #28a745; }
.mk-dot--offline { color: #dc3545; }
.mk-bee {
    display: inline-block; padding: 0 .5em; border-radius: 999px;
    background: #ececec; color: #8a8a8a; font-weight: 700; white-space: nowrap;
}
.mk-bee--on { background: #f08a24; color: #fff; }
.mk-wp {
    display: inline-block; padding: 0 .5em; border: 1px solid #f6e1b5; border-radius: 999px;
    background: #fff7e8; color: #8a5200; font-weight: 700;
}
.mk-done-txt { display: block; font-weight: 600; }
.mk-bar { display: block; width: 5em; height: .35em; margin-top: .15em; border-radius: 3px; background: #ececec; overflow: hidden; }
.mk-bar > span { display: block; height: 100%; background: #fba828; }
.mk-bar--done > span { background: #28a745; }
.mk-actions { white-space: nowrap; text-align: right; }
.mk-round {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9em; height: 1.9em; margin-left: .2em; border: 1px solid #dfe2e6; border-radius: 50%;
    background: #f1f2f4; color: #6c757d; font-size: .85em;
}
.mk-round--blue { background: #e8f1fd; border-color: #cfe0f8; color: #1d6fd6; }

/* phone: no validity chip, no "started from packages" indent, tighter table */
.mk-t--mobile .mk-chip { display: none; }
.mk-t--mobile .mk-pills { margin-left: 0; }
.mk-t--mobile .mk-card { padding: .6em; }
.mk-t--mobile .mk-table td, .mk-t--mobile .mk-table th { padding-left: .15em; padding-right: .15em; }
.mk-t--mobile .mk-bar { width: 3.5em; }

/* the homepage contact section enlarges every .fa-envelope (css/wocabee-new.css) - keep the mockup ones icon-sized */
.mk-t .fa-envelope { font-size: 1em; color: inherit; }

/* ---- student class page (makeStudentDashboardHTML(), as /app/student/class) ---- */
.mk-headPills { display: flex; align-items: center; gap: .4em; margin-left: auto; }
.mk-headPills .mk-notes { margin-left: 0; }
.mk-wpBadge {
    display: inline-flex; align-items: center; gap: .4em; padding: .15em .8em .15em .6em;
    border-radius: 999px; background: #3a2f1c; color: #fff; white-space: nowrap;
}
.mk-wpBadge > i { color: #fba828; }
.mk-wpBadge-txt { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mk-wpBadge-txt b { font-size: 1.05em; font-weight: 800; }
.mk-wpBadge-txt span { font-size: .55em; font-weight: 600; opacity: .85; }

/* menu tiles (Precvičovanie / Môj prehľad) */
.mk-s .mk-menuTitle { margin-top: .5em; }
.mk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35em; }
.mk-mi {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .35em;
    min-height: 3.4em; padding: .55em .3em .35em; border: 1px solid; border-radius: 6px;
    font-size: .8em; line-height: 1.1; text-align: center;
}
.mk-mi--blue   { background: #e8f1fd; border-color: #cfe0f8; color: #1d4f91; }
.mk-mi--blue > i { color: #1d6fd6; }
.mk-mi--orange { background: #fff1e6; border-color: #f7dcc4; color: #8a4511; }
.mk-mi--orange > i { color: #e07a1f; }
.mk-mi--red    { background: #fdecee; border-color: #f6d0d5; color: #8f1d2a; }
.mk-mi--red > i:first-child { color: #dc3545; }
.mk-mi--teal   { background: #e3f5f4; border-color: #c7e8e6; color: #0f5f5a; }
.mk-mi--teal > i { color: #14807a; }
.mk-mi--yellow { background: #fff8e1; border-color: #f6e7b4; color: #7a5c00; }
.mk-mi--yellow > i { color: #c79100; }
.mk-mi--purple { background: #f0ecfb; border-color: #ddd4f4; color: #4a2f8f; }
.mk-mi--purple > i { color: #6b46c1; }
.mk-mi--green  { background: #e9f6ec; border-color: #cdebd4; color: #1e5e2e; }
.mk-mi--green > i { color: #28a745; }
.mk-ok { color: #28a745; }
.mk-mi--bee { padding-bottom: 1.3em; }
.mk-beeToday {
    position: absolute; right: -1px; bottom: -1px; padding: 0 .45em;
    border-radius: 6px 0 6px 0; background: #f0a93c; color: #fff;
    font-size: .78em; font-weight: 700; line-height: 1.45; white-space: nowrap;
}

/* package list: tabs joined to the tinted panel, cards with honeycombs */
.mk-listHead--pkg { margin-top: .9em; padding-top: .7em; border-top: 1px solid #EDE4D2; font-size: 1.3em; }
.mk-listHead--pkg > i { color: #2e2a22; }
.mk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; margin-top: .5em; }
.mk-tab {
    display: flex; align-items: center; justify-content: center; gap: .35em; padding: .45em .3em;
    border: 1px solid #EDE4D2; border-bottom-color: transparent; border-radius: 8px 8px 0 0;
    background: #fff; font-size: .8em; font-weight: 600;
}
.mk-tab > i { color: #1d6fd6; }
.mk-tab--todo { background: #eaf7ee; border-color: #a8dcb4; border-bottom-color: #eaf7ee; color: #1d6b30; }
.mk-tab--todo > i { color: #28a745; }
.mk-tab--todo .mk-badge { background: #28a745; color: #fff; }
.mk-panel { padding: .5em; border: 1px solid #a8dcb4; border-top: 0; border-radius: 0 0 8px 8px; background: #eaf7ee; }
.mk-panelHint { margin-bottom: .5em; color: #1d6b30; font-size: .78em; font-weight: 600; }
.mk-pkg {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .6em;
    padding: .6em .7em; margin-bottom: .45em; border: 1px solid #EDE4D2; border-radius: 10px; background: #fff;
}
.mk-pkg--next { border: 2px solid #fba828; background: #fffdf8; }
.mk-pkg:has(.mk-cardTag) { margin-top: .9em; padding-top: .85em; }
.mk-cardTag {
    position: absolute; top: -.75em; right: .9em; padding: 0 .6em;
    border: 1px solid #fba828; border-radius: 999px; background: #fff4dc; color: #8a5200;
    font-size: .68em; font-weight: 700; line-height: 1.6;
}
.mk-cardTag--new { background: #fff; }
.mk-pkg-main { display: flex; flex-direction: column; align-items: flex-start; gap: .3em; min-width: 0; }
.mk-pkg-name { display: flex; align-items: center; gap: .3em; font-size: 1em; font-weight: 700; }
.mk-pkg-name .mk-round { margin-left: 0; width: 1.7em; height: 1.7em; font-size: .7em; }
.mk-deadline { padding: .05em .5em; border: 1px solid #EDE4D2; border-radius: 999px; background: #fff; font-size: .72em; }
.mk-pkg-hex { display: flex; gap: .15em; }
.mk-hex {
    display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.65em;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: #d6d1c4; color: #fff; font-size: .78em;
}
.mk-hex--todo    { background: #e6e2d8; }
.mk-hex--current { background: #fba828; }
.mk-hex--done    { background: #28a745; }
.mk-hex--missed  { background: #dc3545; }
.mk-hex i { font-size: .75em; }
.mk-pkgBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-width: 6.2em;
    padding: .45em .7em; border-radius: 8px; background: #28a745; color: #fff; font-size: .85em; font-weight: 700;
}
.mk-practiceMore {
    display: flex; align-items: center; justify-content: center; gap: .4em; width: 70%; margin: .7em auto 0;
    padding: .55em; border-radius: 8px; background: #007bff; color: #fff; font-size: .85em; font-weight: 700;
}

/* class ranking: my place + podium */
.mk-rankHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em; margin-top: .9em; padding-top: .7em; border-top: 1px solid #EDE4D2; }
.mk-rankHead .mk-listHead > i { color: #2e2a22; }
.mk-rankSummary {
    display: flex; align-items: center; gap: .5em; padding: .35em .7em .35em .4em;
    border: 1px solid #EDE4D2; border-radius: 12px; background: #fff; font-size: .78em;
}
.mk-rankPlace {
    display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em;
    border-radius: 50%; background: #fba828; color: #fff; font-weight: 800;
}
.mk-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .5em; margin: .6em 0 .3em; text-align: center; }
.mk-podium-col { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.mk-podium-name { font-size: .78em; font-weight: 600; }
.mk-podium-wp { color: #8A8272; font-size: .68em; }
.mk-podium-bar {
    display: flex; align-items: center; justify-content: center; width: 100%; margin-top: .2em;
    border-radius: 4px 4px 0 0; color: #fff; font-size: 1em; font-weight: 800;
}
.mk-podium-col--1 .mk-podium-bar { height: 3.2em; background: #d9a441; border: 2px solid #fba828; }
.mk-podium-col--2 .mk-podium-bar { height: 2.4em; background: #a9a9a9; }
.mk-podium-col--3 .mk-podium-bar { height: 1.8em; background: #9a5b32; }

/* student page on the phone: 3 tiles per row, card = name + honeycombs / deadline + button */
.mk-s.mk-t--mobile .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-s.mk-t--mobile .mk-headPills { flex-basis: 100%; justify-content: center; margin-left: 0; }   /* phone: own row under the class name */
.mk-s.mk-t--mobile .mk-pkg { grid-template-columns: minmax(0, 1fr) auto; }
.mk-s.mk-t--mobile .mk-pkgBtn { grid-column: 2; min-width: 0; }
.mk-s.mk-t--mobile .mk-pkg-hex { grid-row: 1; grid-column: 2; justify-self: center; }
.mk-s.mk-t--mobile .mk-pkg-main { grid-row: 1 / span 2; }
.mk-s.mk-t--mobile .mk-practiceMore { width: 100%; }