/**
 * สไตล์ของวิดเจ็ตระบบที่ stc-client.js วาดเอง (toast + หน้าต่างยืนยันตัวตนซ้ำ)
 *
 * วิดเจ็ตพวกนี้ไม่มีอยู่ใน template ของทีม frontend (siamtaco_dev) เพราะเป็น
 * กลไกเฉพาะของ backend — SDK ใช้ร่วมกันทุก layout (login, blank, siamtaco)
 * จึงแยกเป็นไฟล์กลางไฟล์เดียว ไม่ผูกกับ desktop_style.css ของหน้าใดหน้าหนึ่ง
 *
 * ใช้ตัวแปรคำนำหน้า --stc- ของตัวเอง ไม่ชนกับ --bg- และ --text- ของ template
 */

:root {
    --stc-green: #4a9b1f;
    --stc-green-dark: #3a7d18;
    --stc-green-soft: #eef6e8;

    --stc-gold: #c9b400;

    --stc-surface: #ffffff;
    --stc-surface-2: #f8faf5;
    --stc-border: #e2e6dd;
    --stc-text: #1c2416;
    --stc-text-muted: #6b7280;

    --stc-danger: #c0392f;
    --stc-danger-soft: #fdeceb;
    --stc-info: #1d6f8b;

    --stc-radius: 14px;
    --stc-radius-sm: 10px;
    --stc-shadow-lg: 0 16px 48px rgba(28, 46, 14, .2);
}

/* -------------------------------------------------------------
   แจ้งเตือนแบบ toast — มุมขวาบน หายไปเองหลังไม่กี่วินาที
   ------------------------------------------------------------- */
.stc-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: min(410px, calc(100vw - 32px));
}

.stc-toast {
    padding: 12px 16px;
    border-radius: var(--stc-radius-sm);
    background: var(--stc-surface);
    border-left: 4px solid var(--stc-info);
    box-shadow: var(--stc-shadow-lg);
    font-size: 13.5px;
    color: var(--stc-text);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .22s ease, transform .22s ease;
}

.stc-toast.is-visible { opacity: 1; transform: translateX(0); }
.stc-toast--success { border-left-color: var(--stc-green); }
.stc-toast--error   { border-left-color: var(--stc-danger); }
.stc-toast--warning { border-left-color: var(--stc-gold); }

/* -------------------------------------------------------------
   หน้าต่างยืนยันตัวตนซ้ำ
   ซ้อนทับหน้าเดิม — ไม่พาผู้ใช้ออกจากงานที่กรอกค้างไว้
   ------------------------------------------------------------- */
.stc-reauth {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    padding: 16px;
}

.stc-reauth[hidden] { display: none !important; }

.stc-reauth__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 12, .58);
    backdrop-filter: blur(3px);
}

.stc-reauth__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--stc-surface);
    border-radius: var(--stc-radius);
    box-shadow: var(--stc-shadow-lg);
    padding: 28px;
    text-align: center;
    font-family: 'IBM Plex Sans Thai', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--stc-text);
}

.stc-reauth__icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: var(--stc-green-soft);
    color: var(--stc-green);
    display: grid;
    place-items: center;
    font-size: 26px;
}

.stc-reauth__title { font-size: 18px; margin-bottom: 6px; }
.stc-reauth__message { color: var(--stc-text-muted); font-size: 13.5px; margin: 0 0 12px; }

.stc-reauth__assure {
    background: var(--stc-green-soft);
    color: var(--stc-green-dark);
    border-radius: var(--stc-radius-sm);
    padding: 10px 13px;
    font-size: 12.8px;
    line-height: 1.6;
    margin: 0 0 18px;
    text-align: left;
    display: flex;
    gap: 7px;
}

.stc-reauth__form { text-align: left; }

.stc-reauth__label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 5px;
}

.stc-reauth__input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--stc-border);
    border-radius: var(--stc-radius-sm);
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 13px;
    background: var(--stc-surface-2);
    color: var(--stc-text);
}

.stc-reauth__input:read-only { color: var(--stc-text-muted); }

.stc-reauth__input:focus {
    outline: none;
    background: #fff;
    border-color: var(--stc-green);
    box-shadow: 0 0 0 3px rgba(74, 155, 31, .13);
}

.stc-reauth__error {
    background: var(--stc-danger-soft);
    color: var(--stc-danger);
    border-radius: var(--stc-radius-sm);
    padding: 9px 12px;
    font-size: 12.8px;
    margin: 0 0 13px;
}

.stc-reauth__actions { display: flex; gap: 9px; }

.stc-reauth__btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: var(--stc-radius-sm);
    border: 1.5px solid var(--stc-border);
    background: var(--stc-surface);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    color: var(--stc-text);
}

.stc-reauth__btn--primary {
    background: var(--stc-green);
    border-color: var(--stc-green);
    color: #fff;
    flex: 1.7;
}

.stc-reauth__btn--primary:hover { background: var(--stc-green-dark); }
.stc-reauth__btn:not(.stc-reauth__btn--primary):hover { background: var(--stc-surface-2); }

body.stc-modal-open { overflow: hidden; }