/* =============================================
   AML Lesson Manager — Frontend Styles
   ============================================= */

:root {
    --aml-primary:   #1a5276;
    --aml-accent:    #c0392b;
    --aml-success:   #27ae60;
    --aml-warning:   #e67e22;
    --aml-light:     #f4f6f7;
    --aml-border:    #dee2e6;
    --aml-text:      #2c3e50;
    --aml-muted:     #7f8c8d;
    --aml-radius:    10px;
    --aml-shadow:    0 2px 12px rgba(0,0,0,0.08);
}

.aml-dashboard, .aml-booking, .aml-practice-log, .aml-my-students {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 15px;
    color: var(--aml-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Header ---- */
.aml-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}
.aml-dashboard__header h2 { margin: 0; }

/* ---- Sections ---- */
.aml-section {
    margin-bottom: 35px;
}
.aml-section h3 {
    font-size: 1.1rem;
    color: var(--aml-primary);
    border-bottom: 2px solid var(--aml-border);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* ---- Cards ---- */
.aml-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}
.aml-card {
    background: #fff;
    border: 1px solid var(--aml-border);
    border-radius: var(--aml-radius);
    padding: 18px;
    box-shadow: var(--aml-shadow);
}
.aml-card__title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 10px;
}
.aml-card--add {
    border-style: dashed;
    background: var(--aml-light);
}

/* ---- Buttons ---- */
.aml-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 6px;
    border: 2px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    line-height: 1.4;
}
.aml-btn--primary {
    background: var(--aml-primary);
    color: #fff;
}
.aml-btn--primary:hover { background: #154360; color: #fff; }
.aml-btn--outline {
    background: transparent;
    border-color: var(--aml-primary);
    color: var(--aml-primary);
}
.aml-btn--outline:hover { background: var(--aml-primary); color: #fff; }
.aml-btn--danger {
    background: var(--aml-accent);
    color: #fff;
}
.aml-btn--danger:hover { background: #a93226; color: #fff; }
.aml-btn--sm { padding: 5px 12px; font-size: 0.82rem; }
.aml-btn--lg { padding: 13px 28px; font-size: 1.05rem; }

/* ---- Notices ---- */
.aml-notice {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.aml-notice--info    { background: #d6eaf8; border-left: 4px solid #2e86c1; }
.aml-notice--success { background: #d5f5e3; border-left: 4px solid var(--aml-success); }
.aml-notice--warning { background: #fef9e7; border-left: 4px solid var(--aml-warning); }
.aml-notice--error   { background: #fadbd8; border-left: 4px solid var(--aml-accent); }

/* ---- Credit pills ---- */
.aml-credit-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aml-pill {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.aml-pill--active { background: #d5f5e3; color: #1e8449; }
.aml-pill--empty  { background: #f2f3f4; color: #aaa; }

/* ---- Lesson list ---- */
.aml-lesson-list { display: flex; flex-direction: column; gap: 10px; }
.aml-lesson-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid var(--aml-border);
    border-radius: var(--aml-radius);
    padding: 14px;
    box-shadow: var(--aml-shadow);
}
.aml-lesson-item--upcoming { border-left: 4px solid var(--aml-primary); }
.aml-lesson-item--past     { border-left: 4px solid var(--aml-muted); opacity: 0.85; }

.aml-lesson-item__date {
    text-align: center;
    min-width: 50px;
}
.aml-date-day { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--aml-muted); }
.aml-date-num { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.aml-date-mon { display: block; font-size: 0.75rem; color: var(--aml-muted); }

.aml-lesson-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.aml-lesson-item__info strong { font-size: 1rem; }
.aml-lesson-item__info span   { font-size: 0.85rem; color: var(--aml-muted); }

/* ---- Notes panel ---- */
.aml-notes-panel {
    background: #fafafa;
    border: 1px solid var(--aml-border);
    border-top: none;
    border-radius: 0 0 var(--aml-radius) var(--aml-radius);
    padding: 15px 20px;
    margin-top: -10px;
}
.aml-notes-content { line-height: 1.7; }
.aml-practice-prompt {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--aml-border);
    font-size: 0.9rem;
    color: var(--aml-muted);
}

/* ---- Stats ---- */
.aml-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.aml-stat-box {
    background: #fff;
    border: 1px solid var(--aml-border);
    border-radius: var(--aml-radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--aml-shadow);
}
.aml-stat-box__num {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--aml-primary);
    line-height: 1.1;
}
.aml-stat-box__label {
    display: block;
    font-size: 0.78rem;
    color: var(--aml-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Booking ---- */
.aml-booking-step { margin-bottom: 30px; }
.aml-booking-step h3 {
    font-size: 1rem;
    color: var(--aml-primary);
    margin-bottom: 12px;
}

.aml-student-picker { display: flex; flex-wrap: wrap; gap: 12px; }
.aml-student-choice { cursor: pointer; }
.aml-student-choice input { display: none; }
.aml-student-choice__inner {
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    border: 2px solid var(--aml-border);
    border-radius: var(--aml-radius);
    background: #fff;
    transition: all 0.2s;
    min-width: 180px;
}
.aml-student-choice input:checked ~ .aml-student-choice__inner {
    border-color: var(--aml-primary);
    background: #eaf3fb;
}
.aml-student-choice--nocredits .aml-student-choice__inner {
    opacity: 0.6;
    cursor: not-allowed;
}
.aml-student-choice__name { font-weight: 700; margin-bottom: 6px; }
.aml-no-credits { font-size: 0.8rem; color: var(--aml-accent); margin-top: 6px; }

.aml-duration-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.aml-duration-option {
    padding: 12px 20px;
    border: 2px solid var(--aml-border);
    border-radius: var(--aml-radius);
    cursor: pointer;
    font-weight: 700;
    background: #fff;
    transition: all 0.2s;
    font-size: 1rem;
}
.aml-duration-option:hover,
.aml-duration-option.aml-active {
    border-color: var(--aml-primary);
    background: #eaf3fb;
    color: var(--aml-primary);
}

/* ---- Slot calendar ---- */
.aml-slot-nav { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.aml-slot-calendar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.aml-slot-item {
    background: #fff;
    border: 2px solid var(--aml-border);
    border-radius: var(--aml-radius);
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.aml-slot-item:hover, .aml-slot-item.aml-selected {
    border-color: var(--aml-primary);
    background: #eaf3fb;
}
.aml-slot-item--taken {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}
.aml-slot-date { font-size: 0.8rem; color: var(--aml-muted); }
.aml-slot-time { font-size: 1.1rem; font-weight: 700; }
.aml-slot-dur  { font-size: 0.8rem; color: var(--aml-muted); }

.aml-confirm-box {
    background: #fff;
    border: 1px solid var(--aml-border);
    border-radius: var(--aml-radius);
    padding: 20px;
    margin-bottom: 20px;
    max-width: 400px;
}
.aml-confirm-box p { margin: 6px 0; }

/* ---- Practice log ---- */
.aml-mood-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.aml-mood-option { cursor: pointer; }
.aml-mood-option input { display: none; }
.aml-mood-option span.aml-mood-emoji {
    display: block;
    font-size: 2rem;
    text-align: center;
    transition: transform 0.2s;
}
.aml-mood-option input:checked ~ .aml-mood-emoji { transform: scale(1.3); }
.aml-mood-label { display: block; font-size: 0.75rem; text-align: center; color: var(--aml-muted); margin-top: 2px; }

.aml-practice-entry {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    border: 1px solid var(--aml-border);
    border-radius: var(--aml-radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--aml-shadow);
}
.aml-practice-entry__date {
    text-align: center;
    min-width: 50px;
    font-size: 0.85rem;
    color: var(--aml-muted);
    font-weight: 700;
}
.aml-practice-entry__info { flex: 1; }
.aml-practice-entry__duration { font-weight: 700; font-size: 1rem; }
.aml-practice-entry__mood { margin-left: 10px; }
.aml-practice-entry__notes { margin: 6px 0 0; font-size: 0.9rem; color: var(--aml-muted); }

/* ---- Form rows ---- */
.aml-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.aml-form-row label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.9rem; }
.aml-form-row input, .aml-form-row select, .aml-form-row textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--aml-border);
    border-radius: 6px;
    font-size: 0.95rem;
}

/* ---- Modal ---- */
.aml-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aml-modal__inner {
    background: #fff;
    border-radius: var(--aml-radius);
    padding: 30px;
    max-width: 500px;
    width: 90%;
}

/* ---- Misc ---- */
.aml-muted   { color: var(--aml-muted); font-size: 0.9rem; }
.aml-loading { padding: 30px; text-align: center; color: var(--aml-muted); }
.aml-low-warning { font-size: 0.85rem; color: var(--aml-warning); margin-top: 8px; }

@media (max-width: 600px) {
    .aml-form-row { grid-template-columns: 1fr; }
    .aml-stats-row { grid-template-columns: 1fr 1fr; }
    .aml-dashboard__header { flex-direction: column; align-items: flex-start; }
}