/* =====================================================
   Tanglaw - FACILITATOR CSS (Dashboard, Chat, Settings)
   ===================================================== */

/* ----------------------------- */
/* DASHBOARD WIDGETS             */
/* ----------------------------- */
.dashboard-container {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.dashboard-widget {
    background: var(--bg-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-widget h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.dashboard-widget ul li {
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* ----------------------------- */
/* FACILITATOR CHAT WINDOW         */
/* ----------------------------- */
.chat-header {
    background: var(--bg-white);
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
}

.chat-header h3 {
    color: var(--text-main);
}

.message.received {
    background: var(--gray-200);
}

.message.sent {
    background: var(--primary);
    color: #fff;
}

/* Student list styling */
.student-list li {
    background: var(--gray-100);
}

.student-list li:hover {
    background: var(--gray-200);
}

/* ----------------------------- */
/* FACILITATOR AVAILABILITY UI   */
/* ----------------------------- */
.availability-control{
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.availability-pill{
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2, var(--bg-white));
    color: var(--text-main);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.availability-pill::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success);
}

.availability-pill:hover{
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: var(--shadow-sm);
}

.availability-pill:active{
    transform: translateY(1px);
}

.availability-pill.busy{
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, var(--surface-2, var(--bg-white)));
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

.availability-pill.busy::before{
    background: var(--warning);
}

.availability-menu{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2, var(--bg-white));
    box-shadow: 0 14px 38px rgba(0,0,0,0.18);
    display: none;
    z-index: 10000;
}

.availability-control.open .availability-menu{
    display: block;
}

.availability-menu-item{
    width: 100%;
    text-align: left;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.availability-menu-item:hover{
    background: var(--surface-3, var(--gray-100));
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.availability-menu-item[data-status="busy"]{
    color: color-mix(in srgb, var(--warning) 85%, var(--text-main));
}

/* Phase 2: Availability Sheet */
.availability-sheet .people-sheet-panel{
    width: min(520px, 100%);
    max-height: 86vh;
}

.availability-sheet-body{
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.availability-segment{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-3, rgba(0,0,0,0.03));
}

.availability-seg{
    height: 36px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

.availability-seg.active{
    background: var(--surface-2, var(--bg-white));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: var(--shadow-sm);
}

.availability-section-title{
    font-weight: 800;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.availability-presets{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.availability-preset{
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2, var(--bg-white));
    color: var(--text-main);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}

.availability-preset.active{
    border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
    background: color-mix(in srgb, var(--warning) 14%, var(--surface-2, var(--bg-white)));
    color: color-mix(in srgb, var(--warning) 80%, var(--text-main));
}

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

.availability-chip{
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-3, rgba(0,0,0,0.03));
    color: var(--text-main);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}

.availability-chip:hover{ filter: brightness(0.98); }

.availability-input-wrap{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.availability-label{
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
}

.availability-input{
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2, var(--bg-white));
    padding: 0 12px;
    color: var(--text-main);
    outline: none;
}

.availability-input:focus{
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.availability-hint{
    font-size: 12px;
    color: var(--text-dim);
}

.availability-actions{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.availability-apply{
    height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.10);
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

.availability-apply:active{ transform: translateY(1px); }

/* ----------------------------- */
/* SETTINGS PAGE                 */
/* ----------------------------- */
.settings-content h2 {
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.settings-form input,
.settings-form textarea {
    background: var(--gray-50);
}

/* Facilitator-only sections */
.settings-menu ul li {
    font-weight: 500;
}

.settings-menu ul li.active {
    background: var(--primary);
    color: #fff;
}

/* Danger zone */
.danger-zone {
    margin-top: 40px;
    padding: 15px;
    border-left: 4px solid var(--danger);
    background: var(--danger-soft);
    border-radius: var(--radius-md);
}

.danger-zone h3 {
    color: var(--danger);
    margin-bottom: 8px;
}

.danger-zone button {
    margin-top: 10px;
}

/* ----------------------------- */
/* APPOINTMENTS PAGE             */
/* ----------------------------- */
.appointments-container {
    padding: 30px;
}

.appointments-list li {
    background: var(--bg-white);
    padding: 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-placeholder {
    margin-top: 30px;
    background: var(--bg-white);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.calendar-box {
    width: 100%;
    height: 260px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray-600);
    font-size: 1rem;
}


/* Chat message actions (shared with user) */
.msg-reply-preview {
    border-left: 3px solid var(--primary);
    padding-left: 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    opacity: 0.9;
}

.msg-reply-author {
    font-weight: 600;
    margin-bottom: 2px;
}

.msg-reply-snippet {
    color: var(--gray-700);
    word-break: break-word;
}

.msg-actions {
    margin-top: 4px;
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
}

.msg-action-btn {
    background: none;
    border: none;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 0;
}

.msg-action-btn.danger {
    color: var(--danger);
}

.msg-action-btn:hover {
    text-decoration: underline;
}


/* Back button: hide on desktop, show on mobile */
.chat-window .back-btn {
    display: none;
    border: none;
    background: none;
    font-size: 0.95rem;
    cursor: pointer;
    margin-right: 0.75rem;
}

@media (max-width: 768px) {
    .chat-window .back-btn {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
    }
}


.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-white);
}

.chat-header h3#chatUserName {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
}

.chat-header .chat-options {
    cursor: pointer;
    padding-left: 0.75rem;
    font-size: 1.1rem;
}

.conversations-section,
.facilitators-section {
    padding: 0.75rem 1rem;
}

.section-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.conversation-list .student-item,
.user-list .student-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
}

.conversation-list .student-item:hover,
.user-list .student-item:hover {
    background: var(--surface-2);
}




/* Make sure the main layout sits below the topbar */
.topbar + .layout-container {
    margin-top: 0px; /* adjust kung iba ang height ng topbar mo */
}


/* Chat header layout */
.chat-window .chat-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-white);

    /* siguraduhin na di siya nai-justify space-between somewhere else */
    justify-content: flex-start;
}

/* Back button: hidden sa desktop, visible sa mobile */
.chat-window .back-btn {
    display: none;
    border: none;
    background: none;
    font-size: 0.95rem;
    cursor: pointer;
    margin-right: 0.5rem;
}

.chat-window #chatUserName {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    /* make it take leftover space between back button and options */
    flex: 1;
}

/* Options menu stays on the far right */
.chat-window .chat-options {
    margin-left: auto;
    cursor: pointer;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .chat-window .back-btn {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
    }
}


/* Make the chat panel a flex column, and only the messages area scrollable */
.chat-window {
    display: flex;
    flex-direction: column;
    /* Important: wag na siyang mag-scroll, hayaan si .chat-messages na mag-scroll */
    overflow: hidden;
}

/* Ito lang ang pwedeng mag-scroll vertically */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling sa iOS */
}




/* Online/Offline presence pill (shared by Active / All students) */
.presence-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid var(--border);
    background: var(--gray-50);
    color: var(--gray-500);
}

.presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

/* Default = offline */
.presence-pill.offline .presence-dot {
    background: var(--gray-300);
}

/* Online state */
.presence-pill.online {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-border-soft);
}

.presence-pill.online .presence-dot {
    background: var(--success);
}