/*
 * Massar — teacher panel theme.
 * Plain CSS loaded after Filament's styles (TeacherPanelProvider, render hook HEAD_END),
 * so there is no build step. Filament's own CSS lives in cascade layers: these
 * unlayered rules win over it without !important.
 * Classes starting with m- are ours (resources/views/filament/teacher/**);
 * classes starting with fi- are Filament's.
 */

:root {
    --m-green-900: #17483a;
    --m-green: #1f5c46;
    --m-green-hover: #184b39;
    --m-gold: #c8a13a;
    --m-ground: #f5f3ec;
    --m-sand: #ece8dc;
    --m-line: #e6e2d6;
    --m-line-strong: #d9d4c6;
    --m-ink: #1b2a23;
    --m-muted: #5b6760;
    --m-tint: #e6f0ea;
    --m-danger: #a3261b;
    --m-star: #e8b23a;
    --m-star-stroke: #c99418;
    --m-star-empty: #efece3;
    --m-star-empty-stroke: #c9c3b2;
    --m-radius: 20px;
    --m-content: 56rem;
    --m-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.1'%3E%3Cpath stroke-width='1.2' d='M22 4l5 13 13 5-13 5-5 13-5-13-13-5 13-5z'/%3E%3Crect x='14' y='14' width='16' height='16' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E");
}

body.fi-body {
    background: var(--m-ground);
    color: var(--m-ink);
}

/* Inputs at 16px at least, or phones zoom in when they get focus. */
.fi-body input,
.fi-body select,
.fi-body textarea {
    font-size: 16px;
}

/* ---------- Layout: no topbar / sidebar, full-bleed header, centred content ---------- */

.fi-main {
    padding: 0;
}

.fi-page-header-main-ctn {
    padding: 0 0 40px;
    row-gap: 0;
}

.fi-page-main {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--m-content);
    margin-inline: auto;
    padding: 18px 16px 0;
}

.fi-page-content {
    row-gap: 0;
}

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

.m-hero {
    background: var(--m-green-900) var(--m-pattern);
    color: #fff;
    border-bottom: 3px solid var(--m-gold);
    border-radius: 0 0 28px 28px;
    padding: max(18px, env(safe-area-inset-top)) 12px 26px;
}

.m-hero-inner {
    max-width: var(--m-content);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-hero-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.m-hero-subtitle {
    margin: 0;
    font-size: 14px;
    color: #d9e7df;
}

.m-hero-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-inline-start: 4px;
    fill: none;
    stroke: var(--m-gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-hero-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.m-hero-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-hero-btn-ring {
    border: 1px solid rgb(255 255 255 / 0.35);
    background: rgb(255 255 255 / 0.08);
}

.m-hero-btn:hover {
    background: rgb(255 255 255 / 0.16);
}

.m-hero-btn:focus-visible,
.m-btn:focus-visible,
.m-chip:focus-visible,
.m-student-name:focus-visible {
    outline: 3px solid var(--m-gold);
    outline-offset: 2px;
}

/* ---------- Building blocks ---------- */

.m-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 28px;
}

.m-stack-lg {
    gap: 22px;
}

.m-card {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
}

.m-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 12px;
}

.m-muted {
    margin: 0;
    font-size: 14px;
    color: var(--m-muted);
}

.m-primary {
    color: var(--m-green);
}

.m-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.m-with-icon svg,
.m-total svg,
.m-search svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-section-title,
.m-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--m-green-900);
}

.m-card-title {
    font-size: 16px;
}

.m-greeting {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.m-empty {
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 15px;
    color: var(--m-muted);
}

.m-empty-card {
    gap: 4px;
    text-align: center;
    padding: 22px 16px;
}

.m-empty-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.m-note {
    margin: 0;
    font-size: 12px;
    color: var(--m-muted);
}

.m-badge {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.m-badge-now,
.m-status-active,
.m-type-hifz {
    background: #e3f1e8;
    color: #1f6b45;
}

.m-status-paused {
    background: #fcefd5;
    color: #7a4e00;
}

.m-status-not-started {
    background: #eceef0;
    color: #475059;
}

.m-type-muraja3a {
    background: #e3ecf7;
    color: #1f4c7a;
}

/* Initial of the student's first name */
.m-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    color: var(--m-green-900);
    background: #dcebe2;
}

.m-avatar-1 { background: #f3e7c9; }
.m-avatar-2 { background: #dde6f3; }
.m-avatar-3 { background: #f1ddd6; }
.m-avatar-4 { background: #e4e0f0; }
.m-avatar-5 { background: #ddefef; }

/* Links styled as buttons */
.m-btn {
    box-sizing: border-box;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.m-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-btn-primary {
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: var(--m-green);
    color: #fff;
    font-size: 17px;
}

.m-btn-primary:hover {
    background: var(--m-green-hover);
}

.m-btn-outline {
    border: 1.5px solid var(--m-green);
    background: #fff;
    color: var(--m-green);
}

.m-btn-outline:hover {
    background: var(--m-tint);
}

.m-btn-block {
    width: 100%;
}

/* Two small figures side by side */
.m-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.m-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--m-ground);
}

.m-tile-label {
    font-size: 13px;
    color: var(--m-muted);
}

.m-tile-value {
    font-size: 20px;
    font-weight: 700;
}

.m-tile-value small {
    font-size: 14px;
    font-weight: 500;
    color: var(--m-muted);
}

.m-tile-value-sm {
    font-size: 15px;
    font-weight: 600;
}

/* ---------- Today ---------- */

.m-halaqa {
    gap: 14px;
    padding: 18px;
}

.m-halaqa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.m-halaqa-id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-halaqa-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.m-halaqa-name-sm {
    font-size: 17px;
    font-weight: 600;
}

.m-halaqa-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
}

/* ---------- Halaqa session ---------- */

.m-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--m-tint);
}

.m-strip-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--m-green-900);
}

.m-strip-value {
    font-size: 15px;
    color: var(--m-green);
}

.m-strip-value strong {
    font-size: 20px;
}

.m-search {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 16px;
    color: var(--m-muted);
}

.m-search:focus-within {
    border-color: var(--m-green);
    box-shadow: 0 0 0 1px var(--m-green);
}

.m-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--m-ink);
    box-shadow: none;
}

.m-search input::placeholder {
    color: #7a857f;
}

.m-student-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.m-student-id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.m-student-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--m-ink);
    text-decoration: none;
    border-radius: 6px;
}

.m-student-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
/* رقم الطالب: quiet text under the status badge (space already free on every card), never a tap target. */
.m-code {
    color: var(--m-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    user-select: all;
}
.m-student-name:hover {
    color: var(--m-green);
    text-decoration: underline;
}

.m-today {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-block: 2px;
    padding-inline: 10px 2px;
    border-radius: 14px;
    background: var(--m-tint);
    font-size: 14px;
    color: var(--m-green-900);
}

.m-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--m-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-today-text {
    flex: 1;
    min-width: 0;
}

.m-today-actions,
.m-entry-actions {
    display: flex;
    flex-shrink: 0;
}

.m-today-actions .fi-icon-btn,
.m-entry-actions .fi-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.m-student-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.m-student-foot .fi-btn {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 14px;
    background: var(--m-green);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.m-student-foot .fi-btn:hover {
    background: var(--m-green-hover);
}

.m-student-foot .fi-btn .fi-icon {
    color: #fff;
}

.m-total {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    color: var(--m-muted);
}

/* ---------- Student history ---------- */

.m-progress {
    gap: 14px;
    padding: 16px;
}

.m-progress-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.m-progress-total strong {
    font-size: 18px;
}

.m-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--m-sand);
}

.m-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--m-green);
}

.m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.m-chip {
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--m-line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--m-green-900);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.m-chip-active {
    border-color: var(--m-green);
    background: var(--m-green);
    color: #fff;
}

.m-entry {
    gap: 8px;
}

.m-entry-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-entry-head .m-muted {
    flex: 1;
}

.m-entry-range {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.m-entry-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.m-entry-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.m-entry-note {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--m-ground);
    font-size: 14px;
    color: #3c4a43;
}

/* ---------- Stars (½ star = 1 point) ---------- */

.m-stars {
    display: inline-flex;
    gap: 2px;
}

.m-star {
    --m-star-size: 18px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--m-star-size);
    height: var(--m-star-size);
}

.m-star-lg {
    --m-star-size: 52px;
}

.m-star-shape {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: var(--m-star-size);
    height: var(--m-star-size);
    fill: var(--m-star-empty);
    stroke: var(--m-star-empty-stroke);
    stroke-width: 1.3;
    stroke-linejoin: round;
}

.m-star-shape-filled {
    fill: var(--m-star);
    stroke: var(--m-star-stroke);
}

/* Filled part, growing from the reading start (the right in Arabic) */
.m-star-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    overflow: hidden;
    pointer-events: none;
}

.m-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.m-rating-stars {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.m-star-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.m-star-half-first {
    inset-inline-start: 0;
}

.m-star-half-second {
    inset-inline-end: 0;
}

.m-star-half:focus-visible {
    outline: 3px solid var(--m-gold);
    outline-offset: -2px;
    border-radius: 6px;
}

.m-rating-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--m-green);
}

/* ---------- Recitation form (modal) ---------- */

.fi-modal-window.m-modal {
    border-radius: 24px;
}

.m-modal .fi-modal-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--m-green-900);
}

.m-modal .fi-modal-content {
    gap: 18px;
}

.m-modal .fi-fo-field-label-content,
.m-modal .fi-fo-field-wrp-label {
    font-size: 14px;
    color: var(--m-muted);
}

.m-modal .fi-input-wrp {
    min-height: 50px;
    border-radius: 14px;
}

.m-modal .fi-input {
    font-size: 18px;
    font-weight: 600;
}

.m-modal .fi-select-input-btn,
.m-modal .fi-select-input {
    min-height: 48px;
    font-size: 16px;
}

.m-modal textarea {
    font-size: 16px;
}

.m-modal .fi-fo-text-input .fi-input-wrp-content-ctn {
    display: flex;
    align-items: center;
}

.m-modal input.fi-input {
    padding-inline: 12px 4px;
}

/* Ayah numbers: no spinner, the keypad is enough */
.m-modal input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.m-modal input[type='number']::-webkit-inner-spin-button,
.m-modal input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.m-modal .fi-input-wrp-suffix .fi-input-wrp-label {
    font-size: 13px;
    color: var(--m-muted);
}

/* حفظ / مراجعة as a segmented control */
.m-modal .fi-fo-toggle-buttons.fi-btn-group {
    gap: 6px;
    padding: 5px;
    border-radius: 18px;
    background: #e9e6dc;
    box-shadow: none;
}

.m-modal .fi-fo-toggle-buttons.fi-btn-group > .fi-btn {
    min-height: 50px;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    color: var(--m-green-900);
    font-size: 17px;
    font-weight: 600;
}

.m-modal .fi-fo-toggle-buttons.fi-btn-group .fi-btn .fi-icon {
    color: currentColor;
}

.m-modal .fi-fo-toggle-buttons-input:checked + .fi-btn {
    background: var(--m-green);
    color: #fff;
}

.m-modal .fi-modal-footer-actions {
    display: grid;
}

.m-modal .fi-modal-footer-actions .fi-btn {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
}

/* ---------- Login ---------- */

.fi-simple-layout {
    position: relative;
}

.fi-simple-layout::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 240px;
    background: var(--m-green-900) var(--m-pattern);
    border-bottom: 3px solid var(--m-gold);
    border-radius: 0 0 28px 28px;
}

.fi-simple-main-ctn {
    position: relative;
}

.fi-simple-main {
    box-sizing: border-box;
    width: calc(100% - 32px);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgb(23 72 58 / 0.12);
}

.fi-simple-main .fi-btn {
    min-height: 50px;
    border-radius: 14px;
    font-size: 16px;
}

.fi-simple-main .fi-input-wrp {
    min-height: 48px;
    border-radius: 14px;
}

.m-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    font-weight: 700;
    color: var(--m-green-900);
}

.m-brand svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: var(--m-gold);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}