/* ==========================================================================
   AYB Resort House — ระบบติดตามงานก่อสร้าง
   Stylesheet หลัก (เขียนใหม่ ใช้โทนสีจาก ayb template: Paper Dashboard)

   โครงสร้างไฟล์
     1. ตัวแปรสี/ระยะ        6. ตาราง
     2. รีเซ็ต + ตัวอักษร     7. ฟอร์ม
     3. เลย์เอาต์ (sidebar)   8. ป้ายสถานะ/แจ้งเตือน
     4. การ์ด                9. องค์ประกอบเฉพาะหน้า
     5. ปุ่ม                10. Responsive (PC / iPad / Mobile)
   ========================================================================== */

/* ============ 1. ตัวแปร ============ */
:root {
    /* โทนสีหลัก ดึงมาจาก ayb template/assets/sass/paper/_variables.scss */
    --ayb-primary:        #7A9E9F;
    --ayb-primary-dark:   #5E8384;
    --ayb-primary-light:  #E7EFEF;

    --ayb-default:        #66615B;   /* $default-color */
    --ayb-success:        #7AC29A;
    --ayb-info:           #68B3C8;
    --ayb-warning:        #F3BB45;
    --ayb-danger:         #EB5E28;

    --ayb-text:           #66615B;   /* $font-color */
    --ayb-text-muted:     #A49E93;   /* $muted-color */
    --ayb-heading:        #403D39;

    --ayb-bg:             #F9F7F3;   /* $pale-bg */
    --ayb-bg-alt:         #F1EAE0;   /* $medium-pale-bg */
    --ayb-surface:        #FFFFFF;
    --ayb-border:         #E3E3E3;   /* $light-gray */
    --ayb-border-strong:  #CCC5B9;   /* $table-line-color */
    --ayb-input-bg:       #FFFFFF;
    --ayb-input-border:   #DDD8D0;

    --ayb-sidebar-bg:     #FFFFFF;
    --ayb-sidebar-width:  260px;
    --ayb-topbar-height:  64px;

    --ayb-radius:         12px;
    --ayb-radius-sm:      8px;
    --ayb-shadow:         0 2px 10px rgba(102, 97, 91, .08);
    --ayb-shadow-sm:      0 1px 2px rgba(102, 97, 91, .07);
    --ayb-shadow-lg:      0 8px 28px rgba(102, 97, 91, .16);

    /* เฉดเสริมที่ใช้บ่อยในส่วนที่เพิ่มเวอร์ชัน 0.4.0 (แบ่งหน้า / ตัวเลือกแบบติ๊ก / การ์ดบนมือถือ) */
    --ayb-border-soft:    #EDEAE5;   /* เส้นคั่นภายในการ์ด บางกว่า --ayb-border */
    --ayb-surface-alt:    #F7F5F1;   /* พื้นรองภายในการ์ด */
    --ayb-primary-soft:   #E7EFEF;   /* = --ayb-primary-light ตั้งชื่อให้อ่านง่ายขึ้น */

    /* ฟอนต์หลัก: Kanit จาก Google Fonts (v0.2.1)
       ตัวสำรองไล่ลงมาเป็นฟอนต์ไทยที่มีติดเครื่องอยู่แล้ว เผื่อเซิร์ฟเวอร์ต่อเน็ตออกนอกไม่ได้ */
    --ayb-font: 'Kanit', 'Noto Sans Thai', 'Sarabun', -apple-system, BlinkMacSystemFont,
                'Segoe UI', 'Leelawadee UI', 'Tahoma', sans-serif;

    /* --------------------------------------------------------------
       สีสถานะของ step menu โครงการ
         ครบทุกขั้นตอนแล้ว          -> เขียวหม่น
         ร่าง / มีการแจ้งเตือน       -> ทอง
         ยังไม่ทำ / ยังไม่กรอกข้อมูล -> แดง (โทนเดียวกับ --ayb-danger ของ template)
       -------------------------------------------------------------- */
    --ayb-step-done:        #6F8F6A;   /* เขียวหม่น */
    --ayb-step-done-dark:   #55704F;
    --ayb-step-done-soft:   #EDF2EB;

    --ayb-step-warn:        #C2A02E;   /* ทอง */
    --ayb-step-warn-dark:   #9A7D18;
    --ayb-step-warn-soft:   #FBF3DC;

    --ayb-step-todo:        #C64A32;   /* แดง — เฉดเดียวกับ --ayb-danger #EB5E28 แต่เข้มลงให้อ่านง่าย */
    --ayb-step-todo-dark:   #9C3620;
    --ayb-step-todo-soft:   #FBEBE5;
}

/* ============ 2. รีเซ็ต + ตัวอักษร ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ayb-font);
    /* Kanit มีตัวอักษรสูงกว่า Sarabun เล็กน้อย จึงลดขนาดลง .5px และเพิ่มระยะบรรทัด
       เพื่อให้ความหนาแน่นของหน้าจอเท่าเดิม */
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ayb-text);
    background: var(--ayb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6rem;
    color: var(--ayb-heading);
    /* Kanit น้ำหนัก 600 หนากว่า Sarabun 600 มาก จึงใช้ 500 เป็นหลัก */
    font-weight: 500;
    line-height: 1.4;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.02rem; }
h5 { font-size: .95rem; }

p { margin: 0 0 .8rem; }

a { color: var(--ayb-primary-dark); text-decoration: none; }
a:hover { color: var(--ayb-primary); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--ayb-border); margin: 1.25rem 0; }

.text-muted   { color: var(--ayb-text-muted); }
.text-danger  { color: var(--ayb-danger); }
.text-success { color: #4E9D75; }
.text-warning { color: #C08D1F; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-small   { font-size: .85rem; }
.text-nowrap  { white-space: nowrap; }
.fw-600       { font-weight: 600; }
.mono         { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: .88em; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }

/* ============ 3. เลย์เอาต์ ============ */
.ayb-layout { min-height: 100vh; }

.ayb-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--ayb-sidebar-width);
    background: var(--ayb-sidebar-bg);
    border-right: 1px solid var(--ayb-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ayb-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--ayb-border);
}
.ayb-brand__mark {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: var(--ayb-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; letter-spacing: .5px;
}
.ayb-brand__text { min-width: 0; }
.ayb-brand__title { font-weight: 700; color: var(--ayb-heading); font-size: .98rem; line-height: 1.2; }
.ayb-brand__sub { font-size: .74rem; color: var(--ayb-text-muted); }

.ayb-nav { padding: .75rem .75rem 1.5rem; flex: 1; }
.ayb-nav__section {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ayb-text-muted);
    padding: 1rem .7rem .4rem;
    font-weight: 700;
}
.ayb-nav__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .62rem .75rem;
    border-radius: var(--ayb-radius-sm);
    color: var(--ayb-text);
    font-size: .93rem;
    margin-bottom: 2px;
    transition: background .15s, color .15s;
}
.ayb-nav__link:hover { background: var(--ayb-bg-alt); text-decoration: none; color: var(--ayb-heading); }
.ayb-nav__link.is-active { background: var(--ayb-primary); color: #fff; font-weight: 600; }
.ayb-nav__link.is-active:hover { background: var(--ayb-primary-dark); color: #fff; }
.ayb-nav__link i { font-size: 1.05rem; width: 20px; text-align: center; flex: 0 0 20px; }
.ayb-nav__badge {
    margin-left: auto;
    background: var(--ayb-bg-alt);
    color: var(--ayb-text);
    border-radius: 20px;
    padding: 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
}
.is-active .ayb-nav__badge { background: rgba(255,255,255,.25); color: #fff; }

.ayb-main {
    margin-left: var(--ayb-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s ease;
}

/* ---- ซ่อนเมนูหลัก (กดปุ่ม ☰ บนแถบด้านบน) ----
   คลาสนี้ถูกใส่ไว้ที่ <html> โดย assets/js/ayb-boot.js ตั้งแต่ก่อนวาดหน้า
   เพื่อไม่ให้เมนูกะพริบตอนโหลดหน้าใหม่ ค่าที่เลือกไว้จำไว้ใน localStorage */
@media (min-width: 901px) {
    .ayb-nav-hidden .ayb-sidebar {
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s .25s;
    }
    .ayb-nav-hidden .ayb-main { margin-left: 0; }
}

.ayb-topbar {
    height: var(--ayb-topbar-height);
    background: var(--ayb-surface);
    border-bottom: 1px solid var(--ayb-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.ayb-topbar__title { font-weight: 600; color: var(--ayb-heading); font-size: 1.05rem; margin: 0; }
.ayb-topbar__spacer { flex: 1; }

.ayb-burger {
    /* แสดงทุกขนาดจอ — จอใหญ่ใช้ซ่อน/แสดงเมนูหลัก จอเล็กใช้เลื่อนเมนูออกมา */
    display: inline-flex;
    background: none;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    width: 40px; height: 40px;
    font-size: 1.15rem;
    color: var(--ayb-text);
    cursor: pointer;
    align-items: center; justify-content: center;
}

.ayb-content { padding: 1.5rem; flex: 1; }
.ayb-content--narrow { max-width: 960px; }

.ayb-footer {
    padding: 1rem 1.5rem 1.75rem;
    color: var(--ayb-text-muted);
    font-size: .82rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    border-top: 1px solid var(--ayb-border);
}

.ayb-overlay {
    display: none;
    position: fixed;
    /* เขียนแบบเดิมไว้ก่อนเผื่อเบราว์เซอร์ที่ยังไม่รองรับ inset */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    background: rgba(64,61,57,.45);
    z-index: 1035;
}
.ayb-overlay.is-visible { display: block; }

/* เมนูผู้ใช้มุมขวาบน */
.ayb-user { position: relative; }
.ayb-user__button {
    display: flex; align-items: center; gap: .6rem;
    background: none; border: 1px solid var(--ayb-border);
    border-radius: 40px; padding: .3rem .8rem .3rem .3rem;
    cursor: pointer; font-family: inherit; font-size: .9rem; color: var(--ayb-text);
}
.ayb-user__button:hover { background: var(--ayb-bg-alt); }
.ayb-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; background: var(--ayb-primary-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--ayb-primary-dark); font-weight: 700; font-size: .85rem;
    flex: 0 0 34px; overflow: hidden;
}
.ayb-avatar--lg { width: 96px; height: 96px; flex-basis: 96px; font-size: 2rem; border-radius: 16px; }
.ayb-user__name { line-height: 1.15; text-align: left; }
.ayb-user__role { font-size: .74rem; color: var(--ayb-text-muted); }

.ayb-dropdown {
    position: absolute; right: 0; top: calc(100% + .5rem);
    background: #fff; border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius); box-shadow: var(--ayb-shadow-lg);
    min-width: 220px; padding: .4rem; display: none; z-index: 1050;
}
.ayb-dropdown.is-open { display: block; }
.ayb-dropdown__item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border-radius: var(--ayb-radius-sm);
    color: var(--ayb-text); width: 100%; background: none; border: 0;
    font-family: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.ayb-dropdown__item:hover { background: var(--ayb-bg-alt); text-decoration: none; }
.ayb-dropdown__divider { height: 1px; background: var(--ayb-border); margin: .35rem .2rem; }

/* ============ 4. การ์ด ============ */
.ayb-card {
    background: var(--ayb-surface);
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.ayb-card__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ayb-border);
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.ayb-card__title { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ayb-heading); }
.ayb-card__subtitle { margin: .15rem 0 0; font-size: .84rem; color: var(--ayb-text-muted); }
.ayb-card__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.ayb-card__body { padding: 1.25rem; }
.ayb-card__body--flush { padding: 0; }
.ayb-card__footer {
    padding: .9rem 1.25rem; border-top: 1px solid var(--ayb-border);
    background: #FCFBF9; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}

/* กริดสถิติ */
.ayb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ayb-stat {
    background: var(--ayb-surface); border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius); box-shadow: var(--ayb-shadow);
    padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.ayb-stat__icon {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; background: var(--ayb-primary-light); color: var(--ayb-primary-dark);
}
.ayb-stat__icon--info    { background: #E4F1F6; color: #3E8DA6; }
.ayb-stat__icon--warning { background: #FCF3DE; color: #B98B18; }
.ayb-stat__icon--success { background: #E5F5ED; color: #4E9D75; }
.ayb-stat__value { font-size: 1.5rem; font-weight: 700; color: var(--ayb-heading); line-height: 1.15; }
.ayb-stat__label { font-size: .84rem; color: var(--ayb-text-muted); }

/* ============ 5. ปุ่ม ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .52rem 1.1rem;
    border-radius: 30px;
    border: 1px solid transparent;
    font-family: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn i { font-size: 1rem; }

.btn--primary { background: var(--ayb-primary); color: #fff; }
.btn--primary:hover { background: var(--ayb-primary-dark); color: #fff; }

.btn--outline { background: transparent; color: var(--ayb-primary-dark); border-color: var(--ayb-primary); }
.btn--outline:hover { background: var(--ayb-primary-light); color: var(--ayb-primary-dark); }

.btn--neutral { background: #fff; color: var(--ayb-text); border-color: var(--ayb-border-strong); }
.btn--neutral:hover { background: var(--ayb-bg-alt); color: var(--ayb-heading); }

.btn--success { background: var(--ayb-success); color: #fff; }
.btn--success:hover { background: #63B189; color: #fff; }

.btn--danger { background: var(--ayb-danger); color: #fff; }
.btn--danger:hover { background: #D24E1D; color: #fff; }

.btn--warning { background: var(--ayb-warning); color: #5B4712; }
.btn--warning:hover { background: #E5AB2D; color: #5B4712; }

.btn--sm { padding: .34rem .8rem; font-size: .82rem; }
.btn--icon { padding: .4rem; width: 34px; height: 34px; border-radius: 50%; }
.btn--block { width: 100%; }

.ayb-btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============ 6. ตาราง ============ */
.ayb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ayb-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.ayb-table th, .ayb-table td { padding: .78rem 1rem; text-align: left; vertical-align: middle; }
.ayb-table thead th {
    background: #FCFBF9;
    border-bottom: 1px solid var(--ayb-border-strong);
    color: var(--ayb-text-muted);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    white-space: nowrap;
}
.ayb-table tbody tr { border-bottom: 1px solid var(--ayb-border); }
.ayb-table tbody tr:last-child { border-bottom: 0; }
.ayb-table tbody tr:hover { background: #FCFBF9; }
.ayb-table td.is-actions { white-space: nowrap; text-align: right; }

.ayb-empty { padding: 3rem 1.5rem; text-align: center; color: var(--ayb-text-muted); }
.ayb-empty i { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .5; }

/* รายการคู่ key-value ใช้ในหน้ารายละเอียด */
.ayb-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.75rem; }
.ayb-detail__label { font-size: .78rem; color: var(--ayb-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ayb-detail__value { font-size: .96rem; color: var(--ayb-heading); word-break: break-word; }

/* ============ 7. ฟอร์ม ============ */
/*
 * ตารางฟอร์ม 12 คอลัมน์
 *
 * ★ ต้องมีครบทุกเลข 1-12
 *   ถ้าใช้คลาสที่ไม่มีนิยาม (เช่น .col-5) เบราว์เซอร์จะตกไปใช้ grid-column: auto
 *   ช่องนั้นจะกว้างแค่ 1 ใน 12 แล้วช่องถัด ๆ ไปเลื่อนตามกันทั้งแถว
 *   เคยเกิดจริงในหน้าใบเสนอราคา v0.11.0 (ช่อง "หัวเรื่อง" แคบจนพิมพ์ไม่ได้)
 */
.ayb-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem 1.25rem; }
.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9  { grid-column: span 9; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-2  { grid-column: span 2; }

.ayb-field { display: flex; flex-direction: column; gap: .35rem; }
/* display:flex ชนะ [hidden] ของเบราว์เซอร์ ต้องสั่งซ่อนเองเมื่อโดนซ่อน (v0.10.0) */
.ayb-field[hidden] { display: none; }
.ayb-label { font-size: .87rem; font-weight: 600; color: var(--ayb-heading); }
.ayb-label .req { color: var(--ayb-danger); margin-left: .15rem; }
.ayb-hint { font-size: .8rem; color: var(--ayb-text-muted); }
.ayb-error { font-size: .82rem; color: var(--ayb-danger); }

.ayb-input, .ayb-select, .ayb-textarea {
    width: 100%;
    padding: .58rem .8rem;
    border: 1px solid var(--ayb-input-border);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-input-bg);
    font-family: inherit; font-size: .93rem; color: var(--ayb-text);
    transition: border-color .15s, box-shadow .15s;
    /* 16px ขึ้นไปกัน iOS ซูมเองตอนโฟกัส — ตั้งใน media query ด้านล่าง */
}
.ayb-textarea { min-height: 96px; resize: vertical; }
.ayb-select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23A49E93' d='M2 4.5l4 4 4-4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 12px; padding-right: 2rem; }

.ayb-input:focus, .ayb-select:focus, .ayb-textarea:focus {
    outline: none;
    border-color: var(--ayb-primary);
    box-shadow: 0 0 0 3px rgba(122,158,159,.18);
}
.ayb-input:disabled, .ayb-select:disabled, .ayb-textarea:disabled { background: #F3F2EE; color: var(--ayb-text-muted); }
.ayb-input.is-invalid, .ayb-select.is-invalid, .ayb-textarea.is-invalid { border-color: var(--ayb-danger); }

.ayb-input-group { display: flex; align-items: stretch; }
.ayb-input-group .ayb-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ayb-input-group__suffix {
    display: flex; align-items: center; padding: 0 .75rem;
    background: var(--ayb-bg-alt); border: 1px solid var(--ayb-input-border); border-left: 0;
    border-radius: 0 var(--ayb-radius-sm) var(--ayb-radius-sm) 0;
    font-size: .85rem; color: var(--ayb-text-muted); white-space: nowrap;
}

.ayb-check { display: flex; align-items: flex-start; gap: .55rem; padding: .3rem 0; cursor: pointer; }
.ayb-check input { margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--ayb-primary); flex: 0 0 17px; }
.ayb-check span { font-size: .92rem; }

.ayb-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .1rem 1.25rem; }

.ayb-fieldset {
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.25rem;
}
.ayb-fieldset > legend {
    padding: 0 .5rem; font-weight: 700; font-size: .95rem; color: var(--ayb-primary-dark);
}

.ayb-required-note { font-size: .82rem; color: var(--ayb-text-muted); }
.ayb-required-note::before { content: '*'; color: var(--ayb-danger); margin-right: .25rem; }

/* แถบ sticky ปุ่มบันทึกตอนใช้บนมือถือ */
.ayb-form-actions {
    display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ayb-border);
    background: #FCFBF9;
}

/* ============ 8. ป้ายสถานะ / แจ้งเตือน ============ */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .65rem; border-radius: 20px;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.badge--muted   { background: #EFEDE9; color: #7C766E; }
.badge--info    { background: #E4F1F6; color: #35798E; }
.badge--success { background: #E5F5ED; color: #3F8763; }
.badge--warning { background: #FCF3DE; color: #9C7414; }
.badge--danger  { background: #FDE7DE; color: #C24A1C; }
.badge--primary { background: var(--ayb-primary-light); color: var(--ayb-primary-dark); }

.alert {
    padding: .85rem 1.1rem;
    border-radius: var(--ayb-radius-sm);
    margin-bottom: 1rem;
    border-left: 4px solid;
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: .92rem;
}
.alert i { font-size: 1.05rem; margin-top: .12rem; }
.alert--success { background: #E9F7F0; border-color: var(--ayb-success); color: #3F8763; }
.alert--danger  { background: #FDECE4; border-color: var(--ayb-danger);  color: #B8461B; }
.alert--warning { background: #FDF6E6; border-color: var(--ayb-warning); color: #8C6812; }
.alert--info    { background: #E9F3F7; border-color: var(--ayb-info);    color: #35798E; }

/* ============ 9. องค์ประกอบเฉพาะหน้า ============ */
.ayb-toolbar {
    display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 1.25rem;
}
.ayb-toolbar .ayb-field { flex: 1 1 200px; min-width: 160px; }
.ayb-toolbar__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.ayb-breadcrumb { font-size: .84rem; color: var(--ayb-text-muted); margin-bottom: .8rem; }
.ayb-breadcrumb a { color: var(--ayb-text-muted); }
.ayb-breadcrumb span { margin: 0 .4rem; }

/* แกลเลอรีรูปแนบ */
.ayb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
.ayb-gallery__item {
    border: 1px solid var(--ayb-border); border-radius: var(--ayb-radius-sm);
    overflow: hidden; background: #fff; position: relative;
}
.ayb-gallery__item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.ayb-gallery__bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .4rem .55rem; font-size: .75rem; color: var(--ayb-text-muted);
    border-top: 1px solid var(--ayb-border);
}
.ayb-gallery__bar form { margin-left: auto; }

/* ไทม์ไลน์ประวัติการแก้ไข */
.ayb-timeline { position: relative; padding-left: 1.6rem; }
.ayb-timeline::before {
    content: ''; position: absolute; left: 7px; top: .4rem; bottom: .4rem;
    width: 2px; background: var(--ayb-border);
}
.ayb-timeline__item { position: relative; padding-bottom: 1.15rem; }
.ayb-timeline__item::before {
    content: ''; position: absolute; left: -1.6rem; top: .35rem;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--ayb-primary);
}
.ayb-timeline__item--created::before { border-color: var(--ayb-info); }
.ayb-timeline__item--approved::before,
.ayb-timeline__item--buildable::before { border-color: var(--ayb-success); }
.ayb-timeline__item--rejected::before,
.ayb-timeline__item--unbuildable::before,
.ayb-timeline__item--deleted::before { border-color: var(--ayb-danger); }
.ayb-timeline__meta { font-size: .8rem; color: var(--ayb-text-muted); }
.ayb-timeline__title { font-weight: 600; color: var(--ayb-heading); }

.ayb-diff { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.ayb-diff th, .ayb-diff td { padding: .4rem .6rem; border: 1px solid var(--ayb-border); vertical-align: top; }
.ayb-diff th { background: #FCFBF9; text-align: left; width: 26%; font-weight: 600; }
.ayb-diff__from { color: #B8461B; text-decoration: line-through; opacity: .8; }
.ayb-diff__to   { color: #3F8763; }

/* ขั้นตอนงาน (stepper) */
.ayb-steps { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ayb-step {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .9rem; border-radius: 30px;
    background: #fff; border: 1px solid var(--ayb-border);
    font-size: .85rem; color: var(--ayb-text-muted);
}
.ayb-step__num {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ayb-bg-alt); font-size: .75rem; font-weight: 700;
}
.ayb-step.is-done { border-color: var(--ayb-success); color: #3F8763; }
.ayb-step.is-done .ayb-step__num { background: var(--ayb-success); color: #fff; }
.ayb-step.is-current { border-color: var(--ayb-primary); color: var(--ayb-primary-dark); font-weight: 600; }
.ayb-step.is-current .ayb-step__num { background: var(--ayb-primary); color: #fff; }
.ayb-step.is-blocked { border-color: var(--ayb-danger); color: #B8461B; }
.ayb-step.is-blocked .ayb-step__num { background: var(--ayb-danger); color: #fff; }

/* หน้า login */
.ayb-auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(140deg, #7A9E9F 0%, #5E8384 45%, #403D39 100%);
}
.ayb-auth__card {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: 18px;
    box-shadow: 0 20px 60px rgba(40,38,35,.32);
    padding: 2.1rem 1.9rem;
}
.ayb-auth__brand { text-align: center; margin-bottom: 1.6rem; }
.ayb-auth__mark {
    width: 62px; height: 62px; margin: 0 auto .85rem;
    border-radius: 16px; background: var(--ayb-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.25rem; letter-spacing: .5px;
}
.ayb-auth__title { font-size: 1.2rem; margin-bottom: .15rem; }
.ayb-auth__sub { font-size: .87rem; color: var(--ayb-text-muted); margin: 0; }
.ayb-auth__footer { margin-top: 1.4rem; text-align: center; font-size: .8rem; color: var(--ayb-text-muted); }

.ayb-env-badge {
    display: inline-block; padding: .1rem .5rem; border-radius: 20px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ayb-env-badge--local { background: #E4F1F6; color: #35798E; }
.ayb-env-badge--uat { background: #FCF3DE; color: #9C7414; }
.ayb-env-badge--production { background: #E5F5ED; color: #3F8763; }

/* หน้า error */
.ayb-errorpage { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; }
.ayb-errorpage__code { font-size: 4.5rem; font-weight: 700; color: var(--ayb-primary); line-height: 1; }

/* กล่องเลือกแบบบ้าน */
.ayb-model-picker { display: flex; flex-direction: column; gap: .6rem; }
.ayb-model-row { display: flex; gap: .5rem; align-items: center; }
.ayb-model-row .ayb-select { flex: 1; }

/* ============ 10. Responsive ============ */

/* iPad / tablet */
@media (max-width: 1024px) {
    :root { --ayb-sidebar-width: 230px; }
    .ayb-content { padding: 1.25rem; }
    .col-2 { grid-column: span 4; }
    .col-3 { grid-column: span 6; }
    .col-4 { grid-column: span 6; }
    .col-5 { grid-column: span 6; }
    .col-7 { grid-column: span 12; }
}

/* iPad แนวตั้ง และเล็กกว่า -> sidebar ซ่อน เลื่อนออกมาได้ */
@media (max-width: 900px) {
    .ayb-sidebar { transform: translateX(-100%); box-shadow: var(--ayb-shadow-lg); }
    .ayb-sidebar.is-open { transform: translateX(0); }
    .ayb-main { margin-left: 0; }
    .ayb-burger { display: inline-flex; }
    .ayb-topbar__title { font-size: .98rem; }
}

/* มือถือ */
@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .ayb-content { padding: 1rem .85rem; }
    .ayb-card__body, .ayb-card__header, .ayb-form-actions, .ayb-card__footer { padding: 1rem; }

    /* 16px ป้องกัน iOS Safari ซูมอัตโนมัติตอนโฟกัสช่องกรอก */
    .ayb-input, .ayb-select, .ayb-textarea { font-size: 16px; }

    .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }

    .ayb-stats { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .ayb-stat { padding: .85rem; gap: .7rem; flex-direction: column; align-items: flex-start; }
    .ayb-stat__value { font-size: 1.25rem; }

    .ayb-user__name, .ayb-user__role { display: none; }
    .ayb-user__button { padding: .3rem; border: 0; }

    .ayb-toolbar__actions { margin-left: 0; width: 100%; }
    .ayb-toolbar__actions .btn { flex: 1; }

    .ayb-card__actions { margin-left: 0; width: 100%; }

    .ayb-form-actions { position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -4px 14px rgba(102,97,91,.08); }
    .ayb-form-actions .btn { flex: 1 1 auto; }

    .ayb-details { grid-template-columns: 1fr; gap: .85rem; }
    .ayb-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* พิมพ์เอกสาร */
@media print {
    .ayb-sidebar, .ayb-topbar, .ayb-footer, .ayb-form-actions, .ayb-card__actions, .ayb-burger { display: none !important; }
    .ayb-main { margin-left: 0; }
    .ayb-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    body { background: #fff; }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   11. โมดูลงานก่อสร้าง (ข้อ 5-8) — เพิ่มในเวอร์ชัน 0.2.0
   ========================================================================== */

/* รายการ WBS ในหน้า 8.3 และ 6.2 */
.ayb-wbs-list { display: flex; flex-direction: column; gap: .4rem; }

.ayb-wbs-row {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .7rem;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: #fff;
    font-size: .9rem;
}
.ayb-wbs-row:hover { background: #FCFBF9; }
.ayb-wbs-row__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

/* รายการที่ต้องตรวจสอบหลัง WBS เปลี่ยน — ข้อกำหนดระบุให้ขึ้นเป็นสีแดง */
.ayb-wbs-row.is-review {
    border-color: var(--ayb-danger);
    background: #FDECE4;
}
.ayb-wbs-row.is-review .ayb-wbs-row__label { color: #B8461B; font-weight: 600; }

.ayb-fieldset.is-review {
    border-color: var(--ayb-danger);
    border-width: 2px;
    background: #FEF7F4;
}
.ayb-fieldset.is-review > legend { color: #B8461B; }

/* แถบขั้นตอนของโครงการ (ใช้ ayb-step เดิม แต่เป็นลิงก์) */
.ayb-step[href]:hover { border-color: var(--ayb-primary); color: var(--ayb-primary-dark); text-decoration: none; }

/* select แบบเลือกหลายรายการ ให้สูงพอมองเห็นและกดง่ายบนจอสัมผัส */
select[multiple].ayb-select {
    background-image: none;
    padding: .4rem;
    min-height: 120px;
}
select[multiple].ayb-select option {
    padding: .35rem .5rem;
    border-radius: 4px;
}

/* ตารางกรอกค่าหลายแถว (หน้า mapping) ให้ช่องกรอกไม่กว้างเกิน */
.ayb-table input.ayb-input { padding: .35rem .5rem; font-size: .88rem; }

@media (max-width: 640px) {
    .ayb-wbs-row { flex-wrap: wrap; }
    .ayb-wbs-row__label { flex: 1 1 100%; }
    select[multiple].ayb-select { min-height: 150px; }
}

/* ==========================================================================
   12. เมนู 2 ระดับ — เพิ่มในเวอร์ชัน 0.2.1 · ปรับใหม่ในเวอร์ชัน 0.8.0

   โครงเมนูของระบบ
     เมนูซ้าย (.ayb-sidebar)  = หมวดหมู่หลัก
     แถบบนในหน้า (.ayb-tabbar) = หมวดหมู่ย่อย
     เมนูซ้ายจะกางกลุ่ม "ข้อมูลโครงการ" ที่ไล่สีตามสถานะเมื่อเลือกโครงการแล้ว
   ========================================================================== */

/* ---------- 12.1 แถบเมนูย่อยด้านบนของหน้า ---------- */
.ayb-tabbar {
    display: flex;
    gap: .35rem;
    margin-bottom: 1.25rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--ayb-border);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ayb-tabbar__item {
    display: inline-flex; align-items: center; gap: .45rem;
    flex: 0 0 auto;
    padding: .55rem .95rem;
    border-radius: var(--ayb-radius-sm) var(--ayb-radius-sm) 0 0;
    color: var(--ayb-text-muted);
    font-size: .9rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -.3rem;
    transition: background .15s ease, color .15s ease;
}
.ayb-tabbar__item:hover {
    background: var(--ayb-bg-alt);
    color: var(--ayb-heading);
    text-decoration: none;
}
.ayb-tabbar__item.is-current {
    color: var(--ayb-primary-dark);
    border-bottom-color: var(--ayb-primary);
    font-weight: 500;
    background: var(--ayb-primary-light);
}
.ayb-tabbar__item i { font-size: 1rem; }

/* ---------- 12.2 โครงหน้าโครงการ ----------
   v0.8.0 — เดิมเป็น 2 คอลัมน์ (rail ขั้นตอนซ้าย + เนื้อหาขวา)
   ตอนนี้ขั้นตอนย้ายไปอยู่ในเมนูหลักของทั้งระบบแล้ว หน้าจึงเหลือคอลัมน์เดียว
   ได้พื้นที่อ่านกว้างขึ้นบนทุกขนาดจอ */
.ayb-work { display: block; }
.ayb-work__body { min-width: 0; }


/* รายการขั้นตอนหนึ่งบรรทัด */


/* --- สีตามสถานะ (ข้อกำหนดข้อ 4) --- */
/* ทำครบแล้ว -> เขียวหม่น */

/* ร่าง หรือมีการแจ้งเตือน -> ทอง */

/* ยังไม่ได้ทำ / ยังไม่กรอกข้อมูล -> แดง */

/* หน้าที่กำลังเปิดอยู่ */

/* คำอธิบายสี */
.ayb-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: .3rem; vertical-align: baseline;
}
.ayb-dot--done { background: var(--ayb-step-done); }
.ayb-dot--warn { background: var(--ayb-step-warn); }
.ayb-dot--todo { background: var(--ayb-step-todo); }

/* จุดบอกสถานะในตารางรายการโครงการ */
.ayb-state-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: .4rem; vertical-align: middle;
}
.ayb-state-dot--done { background: var(--ayb-step-done); }
.ayb-state-dot--warn { background: var(--ayb-step-warn); }
.ayb-state-dot--todo { background: var(--ayb-step-todo); }

/* ---------- 12.3 แถบเตือนรหัสผ่านตั้งต้น ---------- */
.ayb-default-pass {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-radius: var(--ayb-radius-sm);
    border: 1px solid var(--ayb-step-todo);
    background: var(--ayb-step-todo-soft);
    color: var(--ayb-step-todo-dark);
    font-size: .88rem;
}
.ayb-default-pass .btn { margin-left: auto; }

/* ---------- 12.4 Responsive ---------- */
@media (max-width: 640px) {
    .ayb-tabbar__item { padding: .5rem .7rem; font-size: .85rem; }
    .ayb-default-pass .btn { margin-left: 0; width: 100%; }
}

@media print {
    .ayb-tabbar, .ayb-default-pass, .ayb-workhead { display: none !important; }
}

/* --------------------------------------------------------------------------
   ถ้าเซิร์ฟเวอร์ต่ออินเทอร์เน็ตออกนอกไม่ได้ (UAT/production ในวงปิด)
   Google Fonts จะโหลดไม่ได้ และระบบจะใช้ฟอนต์สำรองที่มีในเครื่องแทนโดยอัตโนมัติ

   ถ้าต้องการใช้ Kanit แบบไม่พึ่งอินเทอร์เน็ต ให้ทำ 2 ขั้นตอน
     1) ดาวน์โหลด Kanit จาก https://fonts.google.com/specimen/Kanit
        แล้ววางไฟล์ .woff2 ไว้ที่  public/assets/fonts/
     2) ลบเครื่องหมายคอมเมนต์ของบล็อกด้านล่างนี้
        แล้วตั้ง config/app.php -> ui.use_google_fonts = false

@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap;
             src: local('Kanit Light'),    url('../fonts/kanit-300.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap;
             src: local('Kanit'),          url('../fonts/kanit-400.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap;
             src: local('Kanit Medium'),   url('../fonts/kanit-500.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap;
             src: local('Kanit SemiBold'), url('../fonts/kanit-600.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap;
             src: local('Kanit Bold'),     url('../fonts/kanit-700.woff2') format('woff2'); }
   -------------------------------------------------------------------------- */

/* ==========================================================================
   13. รายงานประจำวัน (ข้อ 9) — เพิ่มในเวอร์ชัน 0.3.0

   ออกแบบให้กรอกด้วยมือถือเป็นหลัก ปุ่มทุกอันสูงอย่างน้อย 44px
   ========================================================================== */

/* ---------- 13.1 แถวเลือกวันที่ ---------- */
.ayb-dayline { display: flex; gap: .5rem; align-items: stretch; }
.ayb-dayline .ayb-input { flex: 1; min-width: 0; }
.ayb-dayline__nav {
    flex: 0 0 46px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}

/* ---------- 13.2 ปุ่มตัวเลือกแบบการ์ด (ประเภทวัน / ทีมงาน) ---------- */
.ayb-choice { display: grid; gap: .5rem; }
.ayb-choice--2 { grid-template-columns: 1fr 1fr; }

.ayb-choice__item { position: relative; display: block; cursor: pointer; }
.ayb-choice__item input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.ayb-choice__item > span {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 46px; padding: .5rem .7rem;
    border: 2px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: #fff;
    color: var(--ayb-text);
    font-size: .9rem;
    text-align: center;
    transition: border-color .15s, background .15s, color .15s;
}
.ayb-choice__item input:checked + span {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
    font-weight: 500;
}
.ayb-choice__item input:focus-visible + span { outline: 2px solid var(--ayb-primary-dark); outline-offset: 2px; }
.ayb-choice__item--sm > span { min-height: 38px; font-size: .85rem; }

/* ---------- 13.3 เลือกสภาพอากาศจากรูป ---------- */
.ayb-weather {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.ayb-weather__item { position: relative; display: block; cursor: pointer; }
.ayb-weather__item input { position: absolute; opacity: 0; width: 0; height: 0; }

.ayb-weather__box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    padding: .7rem .3rem .6rem;
    min-height: 88px;
    border: 2px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: #fff;
    color: var(--ayb-text-muted);
    text-align: center;
    transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.ayb-weather__icon { width: 34px; height: 34px; flex: 0 0 34px; }
.ayb-weather__label { font-size: .72rem; line-height: 1.25; font-weight: 400; }

.ayb-weather__item input:checked + .ayb-weather__box {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
    font-weight: 500;
}
.ayb-weather__item input:focus-visible + .ayb-weather__box { outline: 2px solid var(--ayb-primary-dark); outline-offset: 2px; }
.ayb-weather__item:active .ayb-weather__box { transform: scale(.97); }

/* สีเฉพาะของแต่ละสภาพอากาศเมื่อถูกเลือก ให้ดูออกไวขึ้น */
.ayb-weather__item--sun   input:checked + .ayb-weather__box { border-color: #E8A33D; background: #FDF3E3; color: #9A6A15; }
.ayb-weather__item--rain  input:checked + .ayb-weather__box { border-color: #68B3C8; background: #E8F3F7; color: #2F7288; }
.ayb-weather__item--storm input:checked + .ayb-weather__box { border-color: #6E7BA8; background: #ECEEF6; color: #3D477A; }
.ayb-weather__item--stop  input:checked + .ayb-weather__box {
    border-color: var(--ayb-step-todo);
    background: var(--ayb-step-todo-soft);
    color: var(--ayb-step-todo-dark);
}

#weatherGroups.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- 13.4 การ์ดงานแต่ละรายการ ---------- */
.ayb-tabbar--phase { margin-bottom: .75rem; }
.ayb-tabbar--phase .ayb-tabbar__item {
    border: 1px solid var(--ayb-border);
    border-bottom-width: 3px;
    border-radius: var(--ayb-radius-sm);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 0;
}
.ayb-tabbar--phase .ayb-tabbar__item.is-done {
    border-color: var(--ayb-step-done);
    color: var(--ayb-step-done-dark);
    background: var(--ayb-step-done-soft);
}
.ayb-tabbar--phase .ayb-tabbar__item.is-current {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
}
.ayb-tabbar__pct { font-size: .74rem; opacity: .8; }

.ayb-phase-title {
    margin: 0 0 .25rem;
    font-size: .85rem;
    color: var(--ayb-text-muted);
}

.ayb-task-group {
    padding: .5rem 1.25rem;
    background: var(--ayb-bg-alt);
    border-top: 1px solid var(--ayb-border);
    font-size: .82rem;
    font-weight: 500;
    color: var(--ayb-heading);
}
.ayb-task-group .mono { margin-right: .4rem; color: var(--ayb-primary-dark); }

.ayb-task {
    padding: .85rem 1.25rem 1rem;
    border-top: 1px solid var(--ayb-border);
}
.ayb-task.is-done { background: var(--ayb-step-done-soft); }

.ayb-task__head {
    display: flex; align-items: flex-start; gap: .5rem; justify-content: space-between;
    margin-bottom: .5rem;
}
.ayb-task__name { font-weight: 500; font-size: .92rem; line-height: 1.4; }
.ayb-task__prev { margin: .2rem 0 .5rem; }
.ayb-task__team { margin-top: .6rem; max-width: 320px; }

.ayb-task__more { margin-top: .7rem; }
.ayb-task__more > summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--ayb-primary-dark);
    padding: .35rem 0;
    list-style: none;
}
.ayb-task__more > summary::-webkit-details-marker { display: none; }
.ayb-task__more > summary::before { content: '＋ '; }
.ayb-task__more[open] > summary::before { content: '－ '; }

/* ---------- 13.5 แถบความคืบหน้า ---------- */
.ayb-progress {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--ayb-bg-alt);
    overflow: hidden;
}
.ayb-progress--sm { height: 8px; }
.ayb-progress__prev,
.ayb-progress__now {
    position: absolute; top: 0; left: 0; bottom: 0;
    border-radius: 6px;
    transition: width .18s ease;
}
.ayb-progress__prev { background: var(--ayb-border-strong); }
.ayb-progress__now  { background: var(--ayb-step-done); }

/* ---------- 13.6 ปุ่มเพิ่ม/ลดความคืบหน้า ---------- */
.ayb-stepper { display: flex; align-items: stretch; gap: .5rem; }
.ayb-stepper__btn {
    flex: 0 0 68px;
    min-height: 48px;
    border: 2px solid var(--ayb-primary);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.ayb-stepper__btn:hover  { background: var(--ayb-primary); color: #fff; }
.ayb-stepper__btn:active { transform: scale(.95); }

.ayb-stepper__value { flex: 1; display: flex; align-items: center; gap: .35rem; }
.ayb-stepper__value .ayb-input {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 500;
    min-height: 48px;
}
.ayb-stepper__value .ayb-input.is-below-prev { border-color: var(--ayb-step-todo); color: var(--ayb-step-todo-dark); }
.ayb-stepper__value > span { font-weight: 500; color: var(--ayb-text-muted); }

/* ---------- 13.7 รูปหน้างาน ---------- */
.ayb-photo-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ayb-photo {
    display: flex; flex-direction: column;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    overflow: hidden;
    background: #fff;
}
.ayb-photo img { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--ayb-bg-alt); }
.ayb-photo__body { padding: .6rem; display: flex; flex-direction: column; gap: .4rem; }

/* ---------- 13.8 แผนงานวันถัดไป ---------- */
.ayb-nextday {
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    padding: .8rem;
    margin-bottom: .7rem;
    background: #FCFBF9;
}

/* ---------- 13.9 ปฏิทิน ---------- */
.ayb-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .35rem;
}
.ayb-cal__head {
    text-align: center;
    font-size: .74rem;
    font-weight: 500;
    color: var(--ayb-text-muted);
    padding-bottom: .2rem;
}
.ayb-cal__cell {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 46px;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: #fff;
    color: var(--ayb-text);
    font-size: .85rem;
    text-decoration: none;
}
.ayb-cal__cell.is-empty { border: 0; background: transparent; }
.ayb-cal__cell:hover { text-decoration: none; }
.ayb-cal__cell.has-report {
    border-color: var(--ayb-step-done);
    background: var(--ayb-step-done-soft);
    color: var(--ayb-step-done-dark);
    font-weight: 500;
}
.ayb-cal__cell.no-report {
    border-color: var(--ayb-step-todo);
    background: var(--ayb-step-todo-soft);
    color: var(--ayb-step-todo-dark);
}
.ayb-cal__cell.is-future { color: var(--ayb-text-muted); background: #FCFBF9; }
/* วันหยุด หรือวันก่อนโครงการเริ่ม — ไม่นับว่าขาดรายงาน จึงเป็นสีเทา ไม่ใช่สีแดง */
.ayb-cal__cell.is-offday {
    color: var(--ayb-text-muted);
    background: var(--ayb-surface-alt);
    border-style: dashed;
    border-color: var(--ayb-border);
}
.ayb-cal__cell.is-today  { box-shadow: inset 0 0 0 2px var(--ayb-primary); }
.ayb-cal__mark { font-size: .65rem; margin-top: 1px; }

.ayb-cal__dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .25rem;
}
.ayb-cal__dot--has  { background: var(--ayb-step-done); }
.ayb-cal__dot--miss { background: var(--ayb-step-todo); }
.ayb-cal__dot--off  { background: var(--ayb-border-strong); }

.ayb-row-group {
    background: var(--ayb-bg-alt);
    font-weight: 500;
    font-size: .82rem;
}

/* ---------- 13.10 popup บันทึกสำเร็จ ---------- */
.ayb-modal {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 2000;
    background: rgba(40, 38, 35, .55);
    align-items: center; justify-content: center;
    padding: 1.25rem;
}
.ayb-modal.is-open { display: flex; }
.ayb-modal__box {
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow-lg);
    padding: 1.6rem 1.4rem 1.3rem;
    text-align: center;
}
.ayb-modal__icon {
    width: 62px; height: 62px; margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--ayb-step-done-soft);
    color: var(--ayb-step-done);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.ayb-modal__title { margin: 0 0 .4rem; font-size: 1.15rem; }
.ayb-modal__text  { color: var(--ayb-text-muted); font-size: .9rem; }
.ayb-modal__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.ayb-modal__actions .btn { justify-content: center; }

/* ---------- 13.11 Responsive ---------- */
@media (max-width: 640px) {
    .ayb-weather { gap: .35rem; }
    .ayb-weather__box { min-height: 78px; padding: .5rem .2rem; }
    .ayb-weather__icon { width: 28px; height: 28px; flex: 0 0 28px; }
    .ayb-weather__label { font-size: .66rem; }

    .ayb-task { padding: .8rem .85rem .9rem; }
    .ayb-task-group { padding: .45rem .85rem; }
    .ayb-stepper__btn { flex: 0 0 62px; }

    .ayb-cal { gap: .25rem; }
    .ayb-cal__cell { min-height: 40px; font-size: .8rem; }

    .ayb-photo-list { grid-template-columns: 1fr; }
    .ayb-dayline__nav { flex: 0 0 42px; }
}

@media print {
    .ayb-modal { display: none !important; }
}

/* รายการป้ายกำกับ เช่น งานย่อยที่ผูกกับ WBS หนึ่งรายการ (v0.3.1) */
.ayb-taglist { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ==========================================================================
   14. ตัวช่วยใช้งานง่าย — เพิ่มในเวอร์ชัน 0.4.0
   แบ่งหน้า · ตัวเลือกแบบติ๊ก · ช่องค้นหา · ตารางเป็นการ์ดบนมือถือ
   ========================================================================== */

/* ---------- 14.1 แถบแบ่งหน้า ---------- */
.ayb-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--ayb-border-soft);
}
.ayb-pager__count { margin: 0; font-size: .88rem; color: var(--ayb-text-muted); }
.ayb-pager__count strong { color: var(--ayb-text); font-weight: 600; }
.ayb-pager__links { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ayb-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: .38rem .7rem;
    border-radius: var(--ayb-radius-sm);
    border: 1px solid var(--ayb-border);
    background: var(--ayb-surface);
    color: var(--ayb-text);
    font-size: .88rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.ayb-pager__btn:hover { background: var(--ayb-surface-alt); border-color: var(--ayb-primary); }
.ayb-pager__btn.is-current {
    background: var(--ayb-primary);
    border-color: var(--ayb-primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.ayb-pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.ayb-pager__gap { color: var(--ayb-text-muted); padding: 0 .2rem; }

/* ---------- 14.2 ตัวเลือกหลายรายการแบบติ๊ก ---------- */
.ayb-picker {
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    overflow: hidden;
}
.ayb-picker__search-wrap { padding: .55rem .6rem; border-bottom: 1px solid var(--ayb-border-soft); }
.ayb-picker__search { width: 100%; }
.ayb-picker__list {
    max-height: 16rem;
    overflow-y: auto;
    padding: .4rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ayb-picker__opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border: 1px solid transparent;
    border-radius: var(--ayb-radius-sm);
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.45;
    /* นิ้วต้องแตะโดนแน่ ๆ บนมือถือ */
    min-height: 2.75rem;
}
/* display:flex ของ .ayb-picker__opt ชนะ [hidden] ของเบราว์เซอร์ ต้องสั่งซ่อนเอง */
.ayb-picker__opt[hidden] { display: none; }
.ayb-picker__opt:hover { background: var(--ayb-surface-alt); }
.ayb-picker__opt input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--ayb-primary); }
.ayb-picker__opt.is-on { background: var(--ayb-primary-soft); border-color: var(--ayb-primary); font-weight: 500; }
.ayb-picker__opt.is-locked { opacity: .45; cursor: not-allowed; }
.ayb-picker__meta { color: var(--ayb-text-muted); font-size: .82rem; font-weight: 400; }
.ayb-picker__count {
    margin: 0;
    padding: .5rem .75rem;
    border-top: 1px solid var(--ayb-border-soft);
    background: var(--ayb-surface-alt);
    font-size: .85rem;
    color: var(--ayb-text-muted);
}
.ayb-picker__count.is-full { color: var(--ayb-step-warn-dark); }
.ayb-picker__empty { padding: .9rem .75rem; text-align: center; color: var(--ayb-text-muted); font-size: .88rem; }

/* ---------- 14.3 ช่องเลือกแบบพิมพ์ค้นหาได้ ---------- */
.ayb-combo { position: relative; }
.ayb-combo__native { display: none; }
.ayb-combo__list {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + .25rem);
    max-height: 15rem;
    overflow-y: auto;
    background: var(--ayb-surface);
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow-lg, 0 12px 28px rgba(0,0,0,.14));
    padding: .3rem;
}
.ayb-combo__opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: .55rem .65rem;
    border: 0;
    border-radius: var(--ayb-radius-sm);
    background: transparent;
    color: var(--ayb-text);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    min-height: 2.6rem;
}
.ayb-combo__opt:hover,
.ayb-combo__opt.is-active { background: var(--ayb-primary-soft); color: var(--ayb-primary-dark); }
.ayb-combo__empty { padding: .7rem .65rem; color: var(--ayb-text-muted); font-size: .85rem; }

/* ---------- 14.4 แถบความคืบหน้า ---------- */
.ayb-progress {
    height: .5rem;
    border-radius: 999px;
    background: var(--ayb-border-soft);
    overflow: hidden;
    min-width: 4rem;
}
.ayb-progress__bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ayb-step-done);
    transition: width .3s ease;
}
.ayb-progress__bar.is-behind { background: var(--ayb-step-todo); }
.ayb-progress__bar.is-warn { background: var(--ayb-step-warn); }
.ayb-progress-cell { display: flex; flex-direction: column; gap: .25rem; min-width: 7rem; }
.ayb-progress-cell__label { font-size: .78rem; color: var(--ayb-text-muted); }

/* ---------- 14.5 ตารางกลายเป็นการ์ดบนจอเล็ก ---------- */
@media (max-width: 700px) {
    /*
     * ตารางที่ใส่ class ayb-table--cards จะแปลงร่างเป็นการ์ดบนมือถือ
     * เพราะการเลื่อนตารางไปทางขวาเพื่อกดปุ่ม "เปิด" ผู้ใช้แทบไม่มีทางรู้
     * ชื่อคอลัมน์มาจาก data-th ที่ฝั่ง PHP ใส่ให้ทุก <td>
     */
    .ayb-table--cards { min-width: 0; }
    .ayb-table--cards thead { display: none; }
    .ayb-table--cards,
    .ayb-table--cards tbody,
    .ayb-table--cards tr,
    .ayb-table--cards td { display: block; width: 100%; }

    .ayb-table--cards tr {
        border: 1px solid var(--ayb-border-soft);
        border-radius: var(--ayb-radius);
        background: var(--ayb-surface);
        margin: .45rem .7rem;
        padding: .6rem .75rem;
        box-shadow: var(--ayb-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    }
    .ayb-table--cards td {
        border: 0;
        padding: .18rem 0;
        display: flex;
        gap: .6rem;
        align-items: baseline;
        justify-content: space-between;
    }
    .ayb-table--cards td::before {
        content: attr(data-th);
        flex: 0 0 auto;
        color: var(--ayb-text-muted);
        font-size: .78rem;
        font-weight: 400;
    }
    .ayb-table--cards td:empty { display: none; }

    /* แถวแรกของการ์ดคือชื่อรายการ ให้เด่นและไม่ต้องมีป้ายกำกับ */
    .ayb-table--cards td.is-title {
        display: block;
        font-size: .98rem;
        font-weight: 600;
        line-height: 1.4;
        padding-bottom: .25rem;
        margin-bottom: .25rem;
        border-bottom: 1px solid var(--ayb-border-soft);
    }
    .ayb-table--cards td.is-title::before { content: none; }

    /* ปุ่มจัดการย้ายลงมาอยู่ท้ายการ์ด กดง่ายเต็มความกว้าง */
    .ayb-table--cards td.is-actions {
        display: flex;
        gap: .4rem;
        padding-top: .45rem;
        margin-top: .3rem;
        border-top: 1px solid var(--ayb-border-soft);
    }
    .ayb-table--cards td.is-actions::before { content: none; }
    .ayb-table--cards td.is-actions .btn { flex: 1 1 auto; justify-content: center; }

    .ayb-table--cards td.is-hide-mobile { display: none; }

    .ayb-pager { flex-direction: column; align-items: stretch; }
    .ayb-pager__links { justify-content: center; }
}

/* ---------- 14.6 แถบที่เลื่อนได้ ต้องบอกว่ายังมีต่อ ---------- */
.ayb-scroller { position: relative; }
.ayb-scroller::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    background: linear-gradient(to right, transparent, var(--ayb-bg));
}
.ayb-scroller.has-more::after { opacity: 1; }
.ayb-scroller__hint {
    display: none;
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--ayb-text-muted);
}
.ayb-scroller.has-more .ayb-scroller__hint { display: block; }

/* ---------- 14.7 แถบเตือนรหัสผ่านแบบย่อบนมือถือ ---------- */
.ayb-default-pass__short { display: none; }
@media (max-width: 700px) {
    /* บีบให้เหลือบรรทัดเดียว ไม่ให้ปุ่มตกไปอีกบรรทัดจนกินพื้นที่จอ */
    .ayb-default-pass {
        padding: .45rem .6rem;
        gap: .45rem;
        font-size: .85rem;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: .75rem;
    }
    .ayb-default-pass > div { min-width: 0; }
    .ayb-default-pass__long { display: none; }
    .ayb-default-pass__short { display: inline; }
    /* จอเล็ก: แตะที่แถบได้เลย ไม่ต้องมีปุ่มแยกที่กินอีกบรรทัด */
    .ayb-default-pass .btn { display: none; }
    .ayb-default-pass__short { color: inherit; text-decoration: underline; }
    .ayb-default-pass__close { margin-left: 0; padding: .2rem .25rem; }
}
.ayb-default-pass__close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .4rem;
}
.ayb-default-pass__close:hover { opacity: 1; }

/* ---------- 14.8 วันที่แบบ พ.ศ. กำกับใต้ช่อง ---------- */
.ayb-date-hint {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
    color: var(--ayb-primary-dark);
    min-height: 1.2em;
}

/* ---------- 14.9 ผลค้นหารวม ---------- */
.ayb-search { position: relative; flex: 1 1 320px; max-width: 420px; }
.ayb-search__input { width: 100%; }
.ayb-search__panel {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + .35rem);
    max-height: 24rem;
    overflow-y: auto;
    background: var(--ayb-surface);
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow-lg, 0 12px 28px rgba(0,0,0,.14));
    padding: .35rem;
}
.ayb-search__group {
    padding: .4rem .6rem .2rem;
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--ayb-text-muted);
}
.ayb-search__item {
    display: flex;
    gap: .55rem;
    align-items: baseline;
    padding: .5rem .6rem;
    border-radius: var(--ayb-radius-sm);
    color: var(--ayb-text);
    text-decoration: none;
    font-size: .9rem;
}
.ayb-search__item:hover,
.ayb-search__item.is-active { background: var(--ayb-primary-soft); }
.ayb-search__item small { color: var(--ayb-text-muted); }
.ayb-search__empty { padding: .8rem .6rem; color: var(--ayb-text-muted); font-size: .88rem; }
/* แท็บเล็ต: ยังใช้ได้แต่ย่อให้พอดีแถบบน */
@media (max-width: 1100px) {
    .ayb-search { flex: 1 1 180px; max-width: 260px; }
}
/* มือถือ: แถบบนแคบเกินกว่าจะใส่ช่องค้นหาได้ ใช้ช่องค้นหาในแต่ละหน้าแทน */
@media (max-width: 700px) {
    .ayb-search { display: none; }
}

/* ---------- 14.10 ย้าย WBS ข้ามงวด ---------- */
.ayb-select--sm { padding: .28rem .5rem; font-size: .82rem; width: auto; min-width: 8.5rem; }
.ayb-wbs-row__move { flex: 0 0 auto; }
.ayb-wbs-row.is-moved {
    animation: aybMoved 1.6s ease;
}
@keyframes aybMoved {
    0%   { background: var(--ayb-step-warn-soft); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .ayb-wbs-row.is-moved { animation: none; box-shadow: inset 0 0 0 2px var(--ayb-step-warn); }
}
@media (max-width: 700px) {
    /* จอเล็ก: แถว WBS เรียงลงมา ปุ่มไม่เบียดกันจนกดพลาด */
    .ayb-wbs-row { flex-wrap: wrap; }
    .ayb-wbs-row__label { flex: 1 1 100%; }
    .ayb-wbs-row__move { flex: 1 1 auto; min-width: 0; }
}

/* ---------- 14.11 หน้ารวมรายงานประจำวัน (เมนูหลัก) ---------- */
.ayb-daynav { display: flex; gap: .35rem; align-items: center; }
.ayb-daynav .ayb-input { flex: 1 1 auto; }

.ayb-daily-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ayb-daily-summary__item { display: flex; align-items: baseline; gap: .6rem; }
.ayb-daily-summary__num {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ayb-heading);
    font-variant-numeric: tabular-nums;
}
.ayb-daily-summary__item.is-warn .ayb-daily-summary__num { color: var(--ayb-step-todo); }
.ayb-daily-summary__item.is-done .ayb-daily-summary__num { color: var(--ayb-step-done); }
.ayb-daily-summary__label { color: var(--ayb-text-muted); font-size: .9rem; }

.ayb-sitelist { display: flex; flex-direction: column; }
.ayb-site {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--ayb-border-soft);
    color: var(--ayb-text);
    text-decoration: none;
    /* ทั้งแถวกดได้ ไม่ต้องเล็งปุ่มเล็ก ๆ บนมือถือ */
    min-height: 4rem;
    border-left: 4px solid transparent;
}
.ayb-site:last-child { border-bottom: 0; }
.ayb-site:hover { background: var(--ayb-surface-alt); text-decoration: none; }
.ayb-site.is-pending { border-left-color: var(--ayb-step-todo); }
.ayb-site.is-done { border-left-color: var(--ayb-step-done); }
.ayb-site__main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ayb-site__code { font-size: .76rem; color: var(--ayb-text-muted); }
.ayb-site__title { font-weight: 600; font-size: 1rem; }
.ayb-site__meta { font-size: .84rem; color: var(--ayb-text-muted); }
.ayb-site__state { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: 0 0 auto; }
.ayb-site__hint { font-size: .78rem; color: var(--ayb-text-muted); }
@media (max-width: 560px) {
    .ayb-site { flex-direction: column; align-items: stretch; gap: .5rem; }
    .ayb-site__state { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- 14.12 หัวข้อกลุ่มในหน้าแรก + การ์ดสถิติที่กดได้ ---------- */
.ayb-section-title {
    margin: 1.6rem 0 .75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ayb-heading);
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}
.ayb-section-title:first-child { margin-top: 0; }
.ayb-section-title span { font-size: .85rem; font-weight: 400; color: var(--ayb-text-muted); }

.ayb-stat--link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.ayb-stat--link:hover { text-decoration: none; border-color: var(--ayb-primary); box-shadow: var(--ayb-shadow); }
.ayb-stat--link.is-alert { border-color: var(--ayb-step-todo); background: var(--ayb-step-todo-soft); }
.ayb-stat--link.is-alert .ayb-stat__value { color: var(--ayb-step-todo-dark); }
.ayb-stat--link.is-warn { border-color: var(--ayb-step-warn); background: var(--ayb-step-warn-soft); }
.ayb-stat--link.is-warn .ayb-stat__value { color: var(--ayb-step-warn-dark); }
.ayb-stat__icon--danger { background: var(--ayb-step-todo-soft); color: var(--ayb-step-todo-dark); }

/* ---------- 14.13 ตัวช่วยกรอกแผนส่งงวดงาน ---------- */
.ayb-planhelp { border-color: var(--ayb-primary); }
.ayb-planhelp__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}
.ayb-planhelp__row:last-of-type { margin-bottom: 0; }
.ayb-planhelp__row .ayb-label { margin: 0; flex: 0 0 auto; }
.ayb-input--sm { padding: .3rem .55rem; font-size: .85rem; width: auto; max-width: 6rem; }
.ayb-plandur { margin-top: .5rem; }
.ayb-plandur .ayb-label { font-size: .8rem; color: var(--ayb-text-muted); }
input.is-autofilled {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-soft);
}

/* ---------- 14.14 แถบกู้ร่างของฟอร์มรายงานประจำวัน ---------- */
.ayb-draftbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}
.ayb-draftbar > div { flex: 1 1 240px; }

/* ==========================================================================
   15. รายงานประจำวันหน้างาน (/field) — เพิ่มในเวอร์ชัน 0.5.0

   หน้าชุดนี้ออกแบบสำหรับมือถือถือมือเดียวเป็นหลัก
   ปุ่มทุกปุ่มสูงอย่างน้อย 48px และเนื้อหากว้างไม่เกิน 560px แม้บนจอใหญ่
   ========================================================================== */

.ayb-fieldbody {
    background: var(--ayb-bg);
    min-height: 100dvh;
}
.ayb-fieldbody.is-locked { overflow: hidden; }

.ayb-field-shell {
    max-width: 560px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--ayb-bg);
}

/* ---------- แถบหัว + ขั้นตอน ---------- */
.ayb-fieldbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ayb-surface);
    border-bottom: 1px solid var(--ayb-border);
    padding: .55rem .9rem .4rem;
}
.ayb-fieldbar__row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ayb-fieldbar__brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; }
.ayb-fieldbar__mark {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--ayb-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.ayb-fieldbar__exit { display: flex; align-items: center; gap: .4rem; margin: 0; }
.ayb-fieldbar__who { font-size: .8rem; color: var(--ayb-text-muted); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ayb-fieldbar__out {
    border: 1px solid var(--ayb-border);
    background: var(--ayb-surface);
    color: var(--ayb-text-muted);
    border-radius: 8px;
    width: 36px; height: 36px;
    cursor: pointer;
}
.ayb-fieldbar__out:hover { color: var(--ayb-step-todo); border-color: var(--ayb-step-todo); }

.ayb-fieldsteps {
    display: flex;
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    gap: .2rem;
}
.ayb-fieldsteps__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    min-width: 0;
}
.ayb-fieldsteps__dot {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--ayb-border-strong);
    background: var(--ayb-surface);
    color: var(--ayb-text-muted);
    font-size: .72rem;
    font-weight: 600;
}
.ayb-fieldsteps__label {
    font-size: .66rem;
    color: var(--ayb-text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ayb-fieldsteps__item.is-current .ayb-fieldsteps__dot { background: var(--ayb-primary); border-color: var(--ayb-primary); color: #fff; }
.ayb-fieldsteps__item.is-current .ayb-fieldsteps__label { color: var(--ayb-primary-dark); font-weight: 500; }
.ayb-fieldsteps__item.is-done .ayb-fieldsteps__dot { background: var(--ayb-step-done); border-color: var(--ayb-step-done); color: #fff; }

.ayb-field-main { flex: 1; padding: 1rem .9rem 2.5rem; }

/* ---------- หัวข้อของแต่ละขั้น ---------- */
.ayb-field-hero { margin-bottom: 1.1rem; }
.ayb-field-hero h1 { margin: 0 0 .2rem; font-size: 1.28rem; font-weight: 600; line-height: 1.35; }
.ayb-field-hero p { margin: 0; color: var(--ayb-text-muted); font-size: .9rem; }

.ayb-fieldsec { margin-bottom: 1.35rem; }
.ayb-fieldsec__title {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 .55rem;
    font-size: .95rem;
    font-weight: 600;
}
.ayb-fieldsec__edit { margin-left: auto; font-size: .82rem; font-weight: 400; }
.ayb-fieldsub { margin-bottom: .9rem; }
.ayb-fieldsub__title { margin: 0 0 .4rem; font-size: .88rem; font-weight: 500; display: flex; gap: .4rem; align-items: baseline; }

/* ---------- การ์ดพนักงาน ---------- */
.ayb-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .7rem;
}
.ayb-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .85rem .5rem .7rem;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    cursor: pointer;
    font: inherit;
    color: var(--ayb-text);
    min-height: 8rem;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ayb-person:hover { border-color: var(--ayb-primary); box-shadow: var(--ayb-shadow); }
.ayb-person:active { transform: scale(.97); }
.ayb-person__avatar {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
    font-size: 1.5rem;
    font-weight: 600;
}
.ayb-person.is-admin .ayb-person__avatar { background: var(--ayb-bg-alt); color: var(--ayb-default); }
.ayb-person__name { font-weight: 600; font-size: .9rem; line-height: 1.25; text-align: center; }
.ayb-person__surname { font-size: .78rem; color: var(--ayb-text-muted); letter-spacing: .02em; }

.ayb-field-note {
    margin: 1.1rem 0 0;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .82rem;
    color: var(--ayb-text-muted);
}
.ayb-field-back { margin: 1.6rem 0 0; text-align: center; font-size: .85rem; }
.ayb-field-form { margin-top: .5rem; }

/* ---------- popup รหัสผ่าน ---------- */
/* display:grid ชนะ [hidden] ของเบราว์เซอร์ ต้องสั่งซ่อนเอง
   ไม่งั้นแผ่นทึบจะคลุมทั้งจอทั้งที่มองไม่เห็น แล้วกดอะไรไม่ได้เลย */
.ayb-pin[hidden] { display: none; }
.ayb-pin { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; }
.ayb-pin__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(38, 36, 33, .55); }
.ayb-pin__box {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: var(--ayb-surface);
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow-lg);
    padding: 1.2rem 1.1rem 1.1rem;
}
.ayb-pin__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.ayb-pin__avatar {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
    font-size: 1.2rem; font-weight: 600;
}
.ayb-pin__name { font-weight: 600; }
.ayb-pin__row { display: flex; gap: .4rem; }
.ayb-pin__input { flex: 1; font-size: 1.05rem; }
.ayb-pin__eye { flex: 0 0 auto; }
.ayb-pin__actions { display: grid; gap: .5rem; margin-top: 1rem; }

/* ---------- ปุ่มเลือกใหญ่ (โครงการ) ---------- */
.ayb-bigpick { display: grid; gap: .6rem; }
.ayb-bigpick form { margin: 0; }
.ayb-bigpick__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    text-align: left;
    padding: .85rem 1rem;
    border: 1px solid var(--ayb-border);
    border-left: 4px solid var(--ayb-step-todo);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    font: inherit;
    color: var(--ayb-text);
    cursor: pointer;
    min-height: 4.4rem;
}
.ayb-bigpick__item.is-done { border-left-color: var(--ayb-step-done); }
.ayb-bigpick__item:hover { border-color: var(--ayb-primary); }
.ayb-bigpick__item:active { transform: scale(.99); }
.ayb-bigpick__main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ayb-bigpick__code { font-size: .74rem; color: var(--ayb-text-muted); }
.ayb-bigpick__title { font-weight: 600; }
.ayb-bigpick__meta { font-size: .82rem; color: var(--ayb-text-muted); }
.ayb-bigpick__state { flex: 0 0 auto; }

/* ---------- ปุ่มเลือกแบบ radio การ์ด ---------- */
.ayb-pickrow { display: grid; gap: .5rem; }
.ayb-pickrow--2 { grid-template-columns: 1fr 1fr; }
.ayb-pick { position: relative; display: block; cursor: pointer; }
.ayb-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.ayb-pick__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: 4rem;
    padding: .7rem .6rem;
    border: 1.5px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    text-align: center;
    transition: border-color .15s, background .15s;
}
.ayb-pick__title { font-weight: 600; font-size: .95rem; }
.ayb-pick__sub { font-size: .78rem; color: var(--ayb-text-muted); }
.ayb-pick__flag {
    font-size: .7rem;
    color: var(--ayb-step-warn-dark);
    background: var(--ayb-step-warn-soft);
    border-radius: 999px;
    padding: .05rem .4rem;
}
.ayb-pick input:checked + .ayb-pick__box {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-light);
}
.ayb-pick input:focus-visible + .ayb-pick__box { outline: 2px solid var(--ayb-primary); outline-offset: 2px; }

/* ---------- สวิตช์ปิดสภาพอากาศ ---------- */
.ayb-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    margin-bottom: .8rem;
    cursor: pointer;
    font-size: .92rem;
    min-height: 3rem;
}
.ayb-toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--ayb-primary); }
.ayb-weather-groups.is-off { opacity: .4; pointer-events: none; }

/* ---------- รายการติ๊ก (งวด / WBS) ---------- */
.ayb-checklist { display: grid; gap: .5rem; }
.ayb-checkitem {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .9rem;
    border: 1.5px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    cursor: pointer;
    min-height: 3.6rem;
}
.ayb-checkitem input { position: absolute; opacity: 0; width: 0; height: 0; }
.ayb-checkitem__mark {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    margin-top: .1rem;
    border: 2px solid var(--ayb-border-strong);
    border-radius: 6px;
    background: var(--ayb-surface);
    position: relative;
}
.ayb-checkitem.is-on { border-color: var(--ayb-primary); background: var(--ayb-primary-light); }
.ayb-checkitem.is-on .ayb-checkitem__mark { background: var(--ayb-primary); border-color: var(--ayb-primary); }
.ayb-checkitem.is-on .ayb-checkitem__mark::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.ayb-checkitem__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ayb-checkitem__title { font-weight: 600; font-size: .95rem; }
.ayb-checkitem__sub { font-size: .84rem; color: var(--ayb-text); line-height: 1.5; }
.ayb-checkitem__meta { font-size: .76rem; color: var(--ayb-text-muted); }

/* ---------- หัวหน้างานย่อย ---------- */
.ayb-jobhead {
    margin: -.25rem -.9rem 1.1rem;
    padding: .8rem .9rem .9rem;
    background: var(--ayb-surface);
    border-bottom: 1px solid var(--ayb-border);
}
.ayb-jobhead__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.ayb-jobhead__count { font-size: .76rem; color: var(--ayb-text-muted); white-space: nowrap; }
.ayb-jobhead__track { flex: 1; height: 5px; border-radius: 999px; background: var(--ayb-border-soft); overflow: hidden; }
.ayb-jobhead__fill { display: block; height: 100%; background: var(--ayb-primary); border-radius: 999px; }
.ayb-jobhead__wbs { margin: 0 0 .2rem; font-size: .8rem; color: var(--ayb-text-muted); }
.ayb-jobhead__job { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; }

/* ---------- ปุ่มความคืบหน้า ---------- */
.ayb-progpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .4rem; }
.ayb-progpick__item { position: relative; cursor: pointer; }
.ayb-progpick__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.ayb-progpick__item span {
    display: grid;
    place-items: center;
    min-height: 3rem;
    border: 1.5px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-surface);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ayb-progpick__item input:checked + span {
    border-color: var(--ayb-step-done);
    background: var(--ayb-step-done-soft);
    color: var(--ayb-step-done-dark);
}

/* ---------- ตารางช่องกรอก ---------- */
.ayb-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ayb-fieldgrid .ayb-field { margin: 0; }
.ayb-field--full { grid-column: 1 / -1; }

.ayb-stepper { display: flex; gap: .4rem; align-items: center; }
.ayb-stepper__btn {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    border: 1.5px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-surface);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ayb-text);
}
.ayb-stepper__btn:active { background: var(--ayb-primary-light); }
.ayb-stepper__input { text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ---------- ปุ่มรูปถ่าย ---------- */
/*
 | ปุ่มถ่ายรูป / เลือกจากเครื่อง — แบ่งครึ่งเต็มความกว้างพอดี
 | เตี้ยกว่าเดิมเล็กน้อยเพื่อให้สมดุลกับภาพย่อที่อยู่ใต้ปุ่ม
 */
.ayb-photopick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ayb-photopick__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 4.25rem;
    border: 1.5px dashed var(--ayb-border-strong);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ayb-text);
    text-align: center;
    padding: .45rem .3rem;
}
.ayb-photopick__btn i { font-size: 1.25rem; color: var(--ayb-primary-dark); }
.ayb-photopick__btn:hover { border-color: var(--ayb-primary); }
/* แยกกฎออกจาก :hover เพราะเบราว์เซอร์เก่าจะทิ้งทั้งกฎถ้าไม่รู้จัก :focus-within */
.ayb-photopick__btn:focus-within { border-color: var(--ayb-primary); }

/* ---------- แถบปุ่มท้ายหน้า ---------- */
.ayb-fieldnav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    margin: 1.2rem -.9rem 0;
    /* พื้นทึบ ไม่งั้นตัวหนังสือด้านหลังทะลุขึ้นมาอ่านไม่ออกตอนเลื่อน */
    background: var(--ayb-surface);
    border-top: 1px solid var(--ayb-border);
    box-shadow: 0 -6px 16px -10px rgba(102, 97, 91, .35);
}
.ayb-fieldnav--3 { grid-template-columns: auto auto 1fr; }
.ayb-fieldnav .btn { min-height: 3rem; justify-content: center; }
.ayb-fieldnav .btn--lg { min-height: 3.4rem; font-size: 1rem; }

.ayb-hint--warn { color: var(--ayb-step-todo-dark); }

/* ---------- สรุปก่อนบันทึก ---------- */
.ayb-summary { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.ayb-summary li { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; }
.ayb-summary li span:first-child { color: var(--ayb-text-muted); }

.ayb-reviewlist { list-style: none; margin: 0; padding: 0; }
.ayb-reviewlist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--ayb-border-soft);
}
.ayb-reviewlist li:last-child { border-bottom: 0; }
.ayb-reviewlist__main { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.ayb-reviewlist__job { font-weight: 500; font-size: .9rem; }
.ayb-reviewlist__pct {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ayb-step-done-dark);
}

/* ---------- หน้าเสร็จสมบูรณ์ ---------- */
.ayb-done { text-align: center; padding: 2rem 0 1.5rem; }
.ayb-done__mark {
    display: grid;
    place-items: center;
    width: 78px; height: 78px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ayb-step-done-soft);
    color: var(--ayb-step-done-dark);
    font-size: 2.4rem;
    font-weight: 600;
}
.ayb-done--info .ayb-done__mark { background: var(--ayb-step-warn-soft); color: var(--ayb-step-warn-dark); }
.ayb-done h1 { margin: 0 0 .6rem; font-size: 1.35rem; font-weight: 600; }
.ayb-done p { margin: 0 0 .4rem; color: var(--ayb-text); line-height: 1.7; }
.ayb-done .btn { margin-bottom: .5rem; }

/* ---------- ปุ่มลัดในหน้า login ปกติ ---------- */
.ayb-login-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ayb-border-soft);
}

@media (min-width: 561px) {
    .ayb-field-shell { border-left: 1px solid var(--ayb-border); border-right: 1px solid var(--ayb-border); }
    .ayb-jobhead { margin-left: -.9rem; margin-right: -.9rem; }
}

/* ==========================================================================
   16. แบบบ้านและคลังเอกสาร (ข้อ 10)
   ========================================================================== */

/* แถบความคืบหน้าของสารบัญแบบ */
.ayb-docprog { display: flex; flex-direction: column; gap: .4rem; min-width: 190px; }
.ayb-docprog__num { font-size: .85rem; color: var(--ayb-text-muted); }
.ayb-docprog__num strong { font-size: 1.15rem; color: var(--ayb-heading); }
.ayb-docprog__track {
    display: block; height: 8px; border-radius: 99px;
    background: var(--ayb-border-soft); overflow: hidden;
}
.ayb-docprog__fill { display: block; height: 100%; background: var(--ayb-success); border-radius: 99px; }

/* กล่องเนื้อหาแบบไม่มีขอบใน (ให้รายการชิดขอบการ์ด) */
.ayb-card__body--flush { padding: 0; }
.ayb-card__body--tint { background: var(--ayb-bg-alt); border-bottom: 1px solid var(--ayb-border-soft); }

/* รายการแผ่นแบบตามสารบัญ */
.ayb-sheetlist { list-style: none; margin: 0; padding: 0; }
.ayb-sheet { border-bottom: 1px solid var(--ayb-border-soft); }
.ayb-sheet:last-child { border-bottom: 0; }

.ayb-sheet__row {
    display: grid;
    grid-template-columns: 76px 1fr auto auto;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
}
/* แผ่นที่ยังไม่มีไฟล์ ทำแถบซ้ายสีแดงจาง ๆ ให้กวาดตาเห็นได้ทันทีว่าขาดอะไร */
.ayb-sheet.is-empty  { box-shadow: inset 3px 0 0 var(--ayb-step-todo); }
.ayb-sheet.is-filled { box-shadow: inset 3px 0 0 var(--ayb-step-done); }
.ayb-sheet:hover { background: var(--ayb-bg-alt); }

.ayb-sheet__code { font-size: .82rem; font-weight: 600; color: var(--ayb-heading); }
.ayb-sheet__name { font-size: .9rem; }
.ayb-sheet__state { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.ayb-sheet__actions { display: flex; align-items: center; gap: .4rem; }

.ayb-sheet__panel {
    padding: .8rem .9rem 1rem;
    background: var(--ayb-bg-alt);
    border-top: 1px dashed var(--ayb-border);
}

/* แถวอัปโหลดในแผงพับ */
.ayb-uprow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ayb-uprow .ayb-input { flex: 1 1 220px; min-width: 0; }
.ayb-uprow .btn { flex: 0 0 auto; }

/* รายการเอกสารของหมวดที่อัปโหลดได้อิสระ */
.ayb-docitem { padding: .9rem 0; border-bottom: 1px solid var(--ayb-border-soft); }
.ayb-docitem:last-child { border-bottom: 0; padding-bottom: 0; }
.ayb-docitem__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ayb-docitem__title { font-size: .95rem; margin: 0; color: var(--ayb-heading); }
.ayb-docitem__count { font-size: .78rem; color: var(--ayb-text-muted); }

/* ประวัติเวอร์ชัน */
.ayb-verlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ayb-verlist__item {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .45rem .6rem;
    border: 1px solid var(--ayb-border-soft);
    border-radius: 8px;
    background: #fff;
}
.ayb-verlist__item.is-latest { border-color: var(--ayb-success); background: #F5FBF8; }
.ayb-verlist__item.is-removed { opacity: .6; }
.ayb-verlist__item.is-removed .ayb-verlist__name { text-decoration: line-through; }

.ayb-verlist__main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1 1 260px; min-width: 0; }
.ayb-verlist__tag { font-size: .8rem; font-weight: 600; color: var(--ayb-text-muted); }
.ayb-verlist__name { font-size: .87rem; overflow-wrap: anywhere; }
.ayb-verlist__meta { font-size: .75rem; color: var(--ayb-text-muted); }
.ayb-verlist__note { flex: 1 1 100%; margin: .15rem 0 0; font-size: .78rem; color: var(--ayb-text-muted); }
.ayb-verlist__actions { display: flex; gap: .35rem; margin-left: auto; }
.ayb-inline-form { display: inline; }

/* ---------- มือถือ / iPad ---------- */
@media (max-width: 900px) {
    /*
     | สารบัญมี 46 แถว ถ้าปล่อยให้แต่ละแถวซ้อนกัน 4 บรรทัด
     | หน้าจะยาวเกิน 8,000 พิกเซล เลื่อนหาแผ่นที่ต้องการแทบไม่ไหว
     | จึงบีบเหลือ 2 บรรทัด: บรรทัดบนคือรหัส+ชื่อ บรรทัดล่างคือสถานะ+ปุ่ม
     */
    .ayb-sheet__row {
        grid-template-columns: 62px 1fr;
        grid-template-areas:
            "code  name"
            "state actions";
        gap: .3rem .6rem;
        padding: .6rem .9rem;
    }
    .ayb-sheet__code    { grid-area: code; align-self: start; padding-top: .12rem; }
    .ayb-sheet__name    { grid-area: name; }
    .ayb-sheet__state   { grid-area: state; }
    .ayb-sheet__actions { grid-area: actions; justify-content: flex-end; flex-wrap: wrap; }
    /* ปุ่มบนมือถือต้องกดโดนง่าย จึงกำหนดความสูงขั้นต่ำไว้ */
    .ayb-sheet__actions .btn { min-height: 34px; }

    .ayb-docprog { min-width: 0; width: 100%; }
    .ayb-verlist__actions { margin-left: 0; width: 100%; }
    .ayb-verlist__actions .btn { flex: 1 1 auto; justify-content: center; }
    .ayb-uprow .ayb-input { flex: 1 1 100%; }
    .ayb-uprow .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   17. แนบรูปหน้างาน — ภาพย่อพร้อมปุ่มลบ (v0.7.0)
   ========================================================================== */

/* จัตุรัส เรียงแถวละ 4 ภาพ ขนาดใกล้เคียงการ์ดสภาพอากาศ */
.ayb-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: .6rem;
}
.ayb-thumb {
    position: relative;
    /* aspect-ratio รองรับตั้งแต่ Chrome/Edge รุ่น 88 — รุ่นเก่ากว่าใช้กฎสำรองด้านล่าง */
    aspect-ratio: 1 / 1;
    border-radius: var(--ayb-radius-sm);
    overflow: hidden;
    background: var(--ayb-bg-alt);
    border: 2px solid var(--ayb-border);
}
.ayb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 | เบราว์เซอร์ที่ยังไม่รองรับ aspect-ratio
 | ใช้วิธีดั้งเดิมคือดัน padding-top 100% ให้กล่องสูงเท่าความกว้าง
 | แล้ววางรูปทับแบบ absolute — ได้จัตุรัสเหมือนกัน
 */
@supports not (aspect-ratio: 1 / 1) {
    .ayb-thumb { height: 0; padding-top: 100%; }
    .ayb-thumb img { position: absolute; top: 0; left: 0; }
}

/* ปุ่มลบสีแดงมุมขวาบน มีขอบขาวรอบให้เห็นชัดบนภาพทุกสี */
.ayb-thumb__x {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ayb-danger);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
/* แยกสองกฎ ไม่จับกลุ่มกับ :focus-visible เพราะเบราว์เซอร์เก่าจะทิ้งทั้งกฎ */
.ayb-thumb__x:hover { background: #B8461B; }
.ayb-thumb__x:focus-visible { background: #B8461B; }

/* จอเล็กมากให้เหลือแถวละ 3 ภาพ จะได้ยังกดกากบาทโดน */
@media (max-width: 360px) {
    .ayb-thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   18. ปรับหน้าหน้างานตามที่ใช้จริง (v0.7.0)
   ========================================================================== */

/* ---------- ปุ่มเข้าหน้ารายงานประจำวันจากหน้า login ----------
   เดิมเป็นปุ่มโครงบาง ๆ กลืนไปกับหน้า ทั้งที่เป็นทางเข้าที่คนใช้บ่อยที่สุด */
/* เขียนทับกฎเดิมจาก v0.5.0 ที่เป็น flex แนวนอน — ตอนนี้เป็นบล็อกซ้อนกัน */
.ayb-login-shortcut {
    display: block;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ayb-border-soft);
}
.ayb-login-shortcut__or {
    display: block;
    text-align: center;
    font-size: .78rem;
    color: var(--ayb-text-muted);
    margin-bottom: .6rem;
}
.ayb-bigentry {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1rem;
    border-radius: var(--ayb-radius);
    border: 2px solid var(--ayb-primary);
    background: var(--ayb-primary-light);
    color: var(--ayb-primary-dark);
    text-decoration: none;
    min-height: 4.6rem;
}
/* แยกสองกฎ ไม่จับกลุ่มกับ :focus-visible เพราะเบราว์เซอร์เก่าจะทิ้งทั้งกฎ */
.ayb-bigentry:hover {
    background: var(--ayb-primary);
    color: #fff;
    border-color: var(--ayb-primary-dark);
}
.ayb-bigentry:focus-visible {
    background: var(--ayb-primary);
    color: #fff;
    border-color: var(--ayb-primary-dark);
}
.ayb-bigentry:active { transform: scale(.99); }
.ayb-bigentry__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--ayb-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.ayb-bigentry:hover .ayb-bigentry__icon { background: #fff; color: var(--ayb-primary-dark); }
.ayb-bigentry__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ayb-bigentry__body strong { font-size: 1.05rem; }
.ayb-bigentry__body span { font-size: .8rem; opacity: .85; }
.ayb-bigentry__go { margin-left: auto; font-size: 1.2rem; opacity: .7; }

/* ---------- การ์ดโครงการที่ส่งรายงานของวันนี้แล้ว ----------
   แตะแล้วเปิด PDF ของวันนี้เลย ไม่ต้องเดินซ้ำทั้ง 9 ขั้นตอน */
.ayb-bigpick__item.is-done {
    border: 2px solid var(--ayb-step-done);
    border-left-width: 6px;
    background: var(--ayb-step-done-soft);
    color: var(--ayb-step-done-dark);
    text-decoration: none;
    min-height: 5.6rem;
}
.ayb-bigpick__item.is-done:hover { border-color: var(--ayb-step-done-dark); }
.ayb-bigpick__item.is-done .ayb-bigpick__code { color: var(--ayb-step-done-dark); opacity: .75; }
.ayb-bigpick__item.is-done .ayb-bigpick__title { font-size: 1.05rem; }
.ayb-bigpick__done {
    font-size: .92rem;
    line-height: 1.55;
    margin-top: .2rem;
}
.ayb-bigpick__done strong { font-size: 1rem; text-decoration: underline; }
.ayb-bigpick__doc {
    flex: 0 0 auto;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--ayb-step-done);
    opacity: .85;
}

/* ---------- รายการ WBS แบบรวบบรรทัด ----------
   หนึ่งงวดมี WBS ได้หลายสิบรายการ ถ้าแยกเป็นบรรทัดละอย่างจะเลื่อนหาไม่ไหว */
.ayb-checklist--tight .ayb-checkitem { padding: .6rem .75rem; align-items: center; }
.ayb-checkitem__line {
    display: flex;
    flex-wrap: wrap;          /* ขึ้นบรรทัดใหม่เฉพาะตอนที่ยาวจนไม่พอจริง ๆ */
    align-items: baseline;
    gap: .1rem .45rem;
    min-width: 0;
    line-height: 1.5;
}
.ayb-checkitem__code { font-weight: 600; font-size: .9rem; flex: 0 0 auto; }
.ayb-checkitem__code::after { content: ' –'; color: var(--ayb-text-muted); }
.ayb-checkitem__name { font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
.ayb-checkitem__jobs {
    font-size: .74rem;
    color: var(--ayb-text-muted);
    white-space: nowrap;
    margin-left: auto;
    padding-left: .4rem;
}

/* ---------- ปุ่ม PDF คู่ในหน้าเสร็จสมบูรณ์ ---------- */
.ayb-pdfpick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: .6rem;
}
.ayb-pdfbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.1rem .75rem;
    border-radius: var(--ayb-radius);
    border: 2px solid transparent;
    text-decoration: none;
    text-align: center;
    min-height: 6.2rem;
}
.ayb-pdfbtn__icon { font-size: 1.9rem; line-height: 1; }
.ayb-pdfbtn__label { font-size: .95rem; font-weight: 600; }
.ayb-pdfbtn--view { background: var(--ayb-primary); color: #fff; border-color: var(--ayb-primary-dark); }
.ayb-pdfbtn--view:hover { background: var(--ayb-primary-dark); color: #fff; }
.ayb-pdfbtn--save { background: var(--ayb-surface); color: var(--ayb-primary-dark); border-color: var(--ayb-primary); }
.ayb-pdfbtn--save:hover { background: var(--ayb-primary-light); }
.ayb-pdfbtn:active { transform: scale(.98); }

/* ---------- 3 ทางเลือกหลังบันทึกเสร็จ ---------- */
.ayb-nextpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ayb-nextpick form { margin: 0; display: contents; }
.ayb-nextpick__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .9rem .4rem;
    border: 1px solid var(--ayb-border-strong);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    color: var(--ayb-text);
    font: inherit;
    font-size: .82rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    min-height: 5rem;
}
.ayb-nextpick__item i { font-size: 1.35rem; }
.ayb-nextpick__item:hover { border-color: var(--ayb-primary); color: var(--ayb-primary-dark); }
.ayb-nextpick__item:active { transform: scale(.98); }
.ayb-nextpick__item--out { color: var(--ayb-danger); }
.ayb-nextpick__item--out:hover { border-color: var(--ayb-danger); color: var(--ayb-danger); }

@media (max-width: 380px) {
    /* จอเล็กมาก ปุ่ม PDF วางซ้อนกันอ่านง่ายกว่าบีบให้อยู่ 2 คอลัมน์ */
    .ayb-pdfpick { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. การ์ดวันที่ที่ทำรายงานไปแล้ว (หน้าเลือกวัน)

   แทนที่ป้าย "ทำแล้ว" ตัวเล็ก ๆ ของเดิม
   คลิกแล้วเปิดไฟล์ PDF ของวันนั้นทันที ไม่ต้องกดถัดไปอีก
   ========================================================================== */
.ayb-daydone {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .8rem;
    min-height: 108px;
    border: 2px solid var(--ayb-step-done);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-step-done-soft);
    color: var(--ayb-step-done-dark);
    text-decoration: none;
    text-align: left;
    transition: border-color .15s, background .15s, transform .1s;
}
/* แยกกฎ ไม่จับกลุ่มกับ :focus-visible เพราะเบราว์เซอร์เก่าจะทิ้งทั้งกฎ */
.ayb-daydone:hover {
    border-color: var(--ayb-step-done-dark);
    background: #E3EDE1;
    color: var(--ayb-step-done-dark);
}
.ayb-daydone:focus-visible {
    border-color: var(--ayb-step-done-dark);
    background: #E3EDE1;
    color: var(--ayb-step-done-dark);
}
.ayb-daydone:active { transform: scale(.98); }

.ayb-daydone__body { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.ayb-daydone__when { font-size: .95rem; font-weight: 700; }
.ayb-daydone__text { font-size: .82rem; line-height: 1.4; }
.ayb-daydone__cta { font-size: .82rem; font-weight: 700; text-decoration: underline; }

/* ไอคอนเอกสารตัวใหญ่ทางขวาในการ์ด ขนาดพอ ๆ กับไอคอนสภาพอากาศ */
.ayb-daydone__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-left: auto;
    opacity: .9;
}

@media (max-width: 420px) {
    .ayb-daydone { min-height: 96px; padding: .65rem .6rem; gap: .4rem; }
    .ayb-daydone__icon { width: 32px; height: 32px; flex: 0 0 32px; }
    .ayb-daydone__text { font-size: .76rem; }
}

/* ============================================================================
 | 20. เมนูใหม่ + ภาพรวมโครงการ (v0.8.0)
 |
 | เมนูด้านซ้ายแบ่งเป็น 3 กลุ่ม กลุ่ม "ข้อมูลโครงการ" จะกางเฉพาะเมื่อเลือก
 | โครงการแล้ว และไล่สีตามสถานะแบบเดียวกับแถบขั้นตอนเดิมที่ถูกตัดออกไป
 * ========================================================================== */

/* ---------- 20.1 หัวกลุ่มโครงการในเมนู ---------- */
.ayb-nav__link--home { font-weight: 600; }

.ayb-nav__section--project {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.1rem .7rem .5rem;
    text-transform: none;
    letter-spacing: 0;
}
.ayb-nav__section-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ayb-text-muted);
    font-weight: 700;
}
.ayb-nav__project {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ayb-heading);
    line-height: 1.25;
    /* ชื่อโครงการยาวได้ ตัดที่ 2 บรรทัดพอ ไม่ให้ดันเมนูจนล้น */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ayb-nav__project-id { font-size: .72rem; color: var(--ayb-text-muted); }

/* ---------- 20.2 เมนูย่อยของโครงการ + สีสถานะ ---------- */
.ayb-nav__link--step {
    border-left: 3px solid transparent;
    /* ชดเชยเส้นซ้ายที่เพิ่มเข้ามา ตัวอักษรจะได้อยู่ตรงกับเมนูกลุ่มอื่น */
    padding-left: calc(.75rem - 3px);
}
.ayb-nav__link--step.is-done { border-left-color: var(--ayb-step-done); }
.ayb-nav__link--step.is-warn { border-left-color: var(--ayb-step-warn); }
.ayb-nav__link--step.is-todo { border-left-color: var(--ayb-step-todo); }

/* สถานะที่ต้องรีบทำ ให้ไอคอนเป็นสีเดียวกับเส้น จะได้สะดุดตาโดยไม่ต้องอ่าน */
.ayb-nav__link--step.is-warn i { color: var(--ayb-step-warn); }
.ayb-nav__link--step.is-todo i { color: var(--ayb-step-todo); }

/* หน้าที่เปิดอยู่ยังใช้พื้นเข้มเหมือนเมนูอื่น เส้นซ้ายเปลี่ยนเป็นสีขาวจะได้ยังเห็นสถานะ */
.ayb-nav__link--step.is-active i { color: inherit; }

.ayb-nav__badge {
    margin-left: auto;
    background: var(--ayb-step-todo);
    color: #fff;
    border-radius: 20px;
    padding: 0 .45rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5rem;
    min-width: 1.5rem;
    text-align: center;
}
.ayb-nav__link.is-active .ayb-nav__badge { background: rgba(255, 255, 255, .28); }

/* ---------- 20.3 เมนูที่ยังไม่เปิดใช้ (รอ requirement) ---------- */
.ayb-nav__link.is-soon {
    color: var(--ayb-text-muted);
    cursor: default;
    opacity: .72;
}
.ayb-nav__link.is-soon:hover { background: transparent; }
.ayb-nav__soon {
    margin-left: auto;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ayb-text-muted);
    background: var(--ayb-bg-alt);
    border-radius: 20px;
    padding: .1rem .4rem;
    white-space: nowrap;
}

/* ---------- 20.4 คำอธิบายสีท้ายกลุ่มเมนูโครงการ ---------- */
.ayb-nav__legend {
    display: flex; flex-direction: column; gap: .2rem;
    margin: .55rem .7rem 0;
    padding-top: .55rem;
    border-top: 1px solid var(--ayb-border);
    font-size: .72rem;
    color: var(--ayb-text-muted);
}

/* ---------- 20.5 หัวหน้าเพจ + ปุ่มมุมขวาบน ---------- */
.ayb-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ayb-pagehead__text { min-width: 0; }
.ayb-pagehead__title { margin: 0; font-size: 1.05rem; color: var(--ayb-heading); }
.ayb-pagehead__note { margin: .2rem 0 0; font-size: .82rem; color: var(--ayb-text-muted); }
.ayb-pagehead__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- 20.6 การ์ดโครงการในหน้าภาพรวม (ออกแบบใหม่ v0.9.0) ----------
   โครง: ภาพหน้าปก -> ทีมงาน -> แถบความคืบหน้า -> แถวข้อมูล
   ทั้งใบเป็นลิงก์เดียว จึงใช้ span ข้างในทั้งหมด (a ซ้อน a ไม่ได้) */
.ayb-projgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}

.ayb-pcard {
    display: flex;
    flex-direction: column;
    background: var(--ayb-surface);
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow-sm);
    color: var(--ayb-text);
    overflow: hidden;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.ayb-pcard:hover {
    text-decoration: none;
    color: var(--ayb-text);
    border-color: var(--ayb-primary);
    box-shadow: var(--ayb-shadow);
    transform: translateY(-2px);
}
.ayb-pcard:focus-visible {
    outline: 3px solid var(--ayb-primary);
    outline-offset: 2px;
    text-decoration: none;
}

/* ---- ภาพหน้าปก ---- */
.ayb-pcard__cover {
    position: relative;
    display: block;
    width: 100%;
    /* 16:10 กว้างพอให้เห็นบริบทหน้างาน แต่ไม่กินพื้นที่จนแถวข้อมูลหาย */
    aspect-ratio: 16 / 10;
    background: var(--ayb-bg-alt);
    overflow: hidden;
}
.ayb-pcard__cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* เอนจินที่ยังไม่รู้จัก aspect-ratio (Chrome/Edge ก่อนรุ่น 88) */
@supports not (aspect-ratio: 16 / 10) {
    .ayb-pcard__cover { height: 0; padding-top: 62.5%; }
    .ayb-pcard__cover img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
}

.ayb-pcard__cover.is-empty {
    /* ลายทแยงจาง ๆ บอกว่า "ตั้งใจให้ว่าง" ไม่ใช่รูปโหลดไม่ขึ้น */
    background-image: repeating-linear-gradient(
        45deg, var(--ayb-bg-alt) 0 10px, var(--ayb-surface-alt) 10px 20px);
}
.ayb-pcard__noimg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem;
    color: var(--ayb-text-muted);
    font-size: .82rem;
}
.ayb-pcard__noimg i { font-size: 1.6rem; }

.ayb-pcard__badge { position: absolute; top: .55rem; right: .55rem; }

/* ชื่อโครงการทับบนภาพ — มีแถบไล่สีดำรองไว้ให้อ่านออกทุกรูป */
.ayb-pcard__title {
    position: absolute; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; gap: .1rem;
    padding: 1.6rem .85rem .6rem;
    background: linear-gradient(to top, rgba(28, 26, 24, .82) 35%, rgba(28, 26, 24, 0));
    color: #fff;
}
.ayb-pcard__name {
    font-size: 1.02rem; font-weight: 700; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ayb-pcard__code { font-size: .72rem; opacity: .85; }

/* ---- ทีมงาน ---- */
.ayb-pcard__people {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .85rem .6rem;
}
/*
 * รูปโปรไฟล์ทีมงาน — วางตามตัวอย่างของบริษัท (ayb template/examples/home.php)
 * คือวงกลมอยู่ขวาของหัวการ์ด เกยขอบล่างของภาพหน้าปกขึ้นไป
 * ผู้ดูแลโครงการเป็นวงกลมใหญ่สุดและอยู่ขวาสุด คนอื่นเป็นวงเล็กเรียงต่อกันมา
 */
.ayb-pcard__avatars {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: -34px;
}
.ayb-pcard__avatar {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 50%;
    border: 2.5px solid var(--ayb-surface);
    background: var(--ayb-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
    object-fit: cover;
}
/* ผู้ดูแลโครงการ — ใหญ่กว่าคนอื่นให้เห็นชัดว่าใครรับผิดชอบการ์ดใบนี้ */
.ayb-pcard__avatar.is-lead {
    width: 58px; height: 58px; flex: 0 0 58px;
    font-size: 1.15rem;
    border-width: 3px;
    box-shadow: 0 2px 8px rgba(102, 97, 91, .18);
}
/* ซ้อนเหลื่อมกันเล็กน้อยเมื่อมีหลายคน จะได้ไม่กินความกว้างของชื่อ */
.ayb-pcard__avatar + .ayb-pcard__avatar { margin-left: -12px; }
.ayb-pcard__avatar.is-more { background: var(--ayb-bg-alt); color: var(--ayb-text-muted); font-size: .76rem; }
.ayb-pcard__avatar.is-empty { background: var(--ayb-bg-alt); color: var(--ayb-text-muted); }

.ayb-pcard__lead { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ayb-pcard__leadname {
    font-size: .88rem; font-weight: 600; color: var(--ayb-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ayb-pcard__leadrole {
    font-size: .74rem; color: var(--ayb-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- แถบความคืบหน้า ---- */
.ayb-pcard__progress { display: block; padding: 0 .85rem .55rem; }
.ayb-pcard__progress .ayb-progress { display: block; height: 10px; }
.ayb-pcard__progress .ayb-progress__now { background: var(--ayb-step-done); }
.ayb-pcard__progress .ayb-progress__now.is-behind { background: var(--ayb-step-todo); }
.ayb-pcard__progressrow {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    margin-top: .3rem;
    font-size: .76rem; color: var(--ayb-text-muted);
}
.ayb-pcard__percent { font-weight: 700; color: var(--ayb-heading); font-size: .88rem; }

/* ---- แถวข้อมูล ---- */
.ayb-pcard__rows { display: block; border-top: 1px solid var(--ayb-border); }
.ayb-pcard__row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
    /* ป้ายยาว ๆ ให้ตกลงบรรทัดใหม่แทนที่จะบีบหัวข้อจนคำแตก */
    flex-wrap: wrap;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--ayb-border);
}
.ayb-pcard__row:last-child { border-bottom: 0; }
.ayb-pcard__rowbody { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1 1 60%; }
.ayb-pcard__rowlabel { font-size: .84rem; font-weight: 600; color: var(--ayb-heading); }
.ayb-pcard__rowvalue { font-size: .78rem; color: var(--ayb-text-muted); line-height: 1.45; }
.ayb-pcard__job {
    display: flex; align-items: baseline; gap: .35rem;
    font-size: .76rem; color: var(--ayb-text-muted);
}
.ayb-pcard__job .mono { font-size: .72rem; color: var(--ayb-text); flex: 0 0 auto; }
.ayb-pcard__jobpct { margin-left: auto; font-weight: 700; color: var(--ayb-text); flex: 0 0 auto; }

/* ---------- 20.7 แถบหัวโครงการในหน้าเมนูย่อย ---------- */
.ayb-workhead {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .7rem .95rem;
    margin-bottom: 1rem;
    background: var(--ayb-surface);
    border: 1px solid var(--ayb-border);
    border-left: 4px solid var(--ayb-primary);
    border-radius: var(--ayb-radius);
}
.ayb-workhead__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ayb-workhead__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ayb-text-muted); font-weight: 700; }
.ayb-workhead__title { font-size: 1rem; font-weight: 700; color: var(--ayb-heading); line-height: 1.25; }
.ayb-workhead__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; }

/* ---------- 20.8 ขั้นตอนก่อนเปิดโครงการใหม่ ---------- */
.ayb-flowsteps { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ayb-flowsteps__item {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .85rem;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-bg-alt);
}
.ayb-flowsteps__item.is-now { background: var(--ayb-surface); border-color: var(--ayb-primary); }
.ayb-flowsteps__no {
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 50%;
    background: var(--ayb-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}
.ayb-flowsteps__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ayb-flowsteps__title { font-weight: 600; color: var(--ayb-heading); font-size: .92rem; }
.ayb-flowsteps__note { font-size: .78rem; color: var(--ayb-text-muted); }

@media (max-width: 600px) {
    .ayb-pagehead__actions { width: 100%; }
    .ayb-pagehead__actions .btn { flex: 1 1 auto; justify-content: center; }
    .ayb-projgrid { grid-template-columns: 1fr; }
}

/* ============================================================================
 | 21. รูปหน้างานในหน้ารายละเอียดโครงการ + อัลบั้มรูป (v0.9.0)
 * ========================================================================== */

/* ---------- 21.1 ส่วนหัวของหน้ารายละเอียดโครงการ ---------- */
.ayb-phero {
    background: var(--ayb-surface);
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    box-shadow: var(--ayb-shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
}

.ayb-phero__cover {
    position: relative;
    display: block;
    width: 100%;
    /* 21:9 กว้างแบบภาพหน้าปก ไม่กินความสูงจนต้องเลื่อนกว่าจะเจอเนื้อหา */
    aspect-ratio: 21 / 9;
    background: var(--ayb-bg-alt);
    overflow: hidden;
}
.ayb-phero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@supports not (aspect-ratio: 21 / 9) {
    .ayb-phero__cover { height: 0; padding-top: 42.85%; }
    .ayb-phero__cover img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
}

.ayb-phero__cover.is-empty {
    background-image: repeating-linear-gradient(
        45deg, var(--ayb-bg-alt) 0 12px, var(--ayb-surface-alt) 12px 24px);
}
.ayb-phero__noimg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem; text-align: center; padding: 1rem;
    color: var(--ayb-text-muted);
}
.ayb-phero__noimg i { font-size: 2rem; }

.ayb-phero__coverbar {
    position: absolute; right: 0; bottom: 0; left: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: 2rem .95rem .7rem;
    background: linear-gradient(to top, rgba(28, 26, 24, .8) 40%, rgba(28, 26, 24, 0));
    color: #fff;
    font-size: .84rem;
}
.ayb-phero__covertext { min-width: 0; }
.ayb-phero__coverbtn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    color: var(--ayb-primary-dark);
    font-weight: 600; font-size: .8rem;
    white-space: nowrap;
}
.ayb-phero__cover:hover { text-decoration: none; }
.ayb-phero__cover:hover .ayb-phero__coverbtn { background: #fff; }
.ayb-phero__cover:focus-visible { outline: 3px solid var(--ayb-primary); outline-offset: -3px; }

/* ---------- 21.2 แถวรูปเล็กใต้ภาพใหญ่ ---------- */
.ayb-phero__strip {
    display: flex; gap: .4rem;
    padding: .55rem .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--ayb-border);
}
.ayb-phero__thumb {
    position: relative;
    flex: 0 0 84px;
    width: 84px; height: 64px;
    border-radius: var(--ayb-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--ayb-bg-alt);
}
.ayb-phero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ayb-phero__thumb:hover { border-color: var(--ayb-primary); text-decoration: none; }
.ayb-phero__thumb:focus-visible { border-color: var(--ayb-primary); outline: 2px solid var(--ayb-primary); }
.ayb-phero__thumb--more {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1rem;
    background: var(--ayb-bg-alt);
    color: var(--ayb-text-muted);
    font-weight: 700;
}

/* ---------- 21.3 ความคืบหน้า + ทีมงาน ---------- */
.ayb-phero__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    padding: .85rem .95rem 1rem;
}
.ayb-phero__prog { min-width: 0; }
.ayb-phero__progtop {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .4rem;
}
.ayb-phero__proglabel { font-size: .84rem; font-weight: 600; color: var(--ayb-heading); }
.ayb-phero__progpct { font-size: 1.15rem; font-weight: 700; color: var(--ayb-heading); }
.ayb-phero__prog .ayb-progress { display: block; height: 12px; }
.ayb-phero__prog .ayb-progress__now { background: var(--ayb-step-done); }
.ayb-phero__prog .ayb-progress__now.is-behind { background: var(--ayb-step-todo); }
.ayb-phero__prognote { margin: .35rem 0 0; font-size: .78rem; color: var(--ayb-text-muted); }

.ayb-phero__team { min-width: 0; }
.ayb-phero__teamlabel {
    display: block;
    font-size: .84rem; font-weight: 600; color: var(--ayb-heading);
    margin-bottom: .4rem;
}
.ayb-phero__members { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.ayb-phero__member { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ayb-phero__face {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    background: var(--ayb-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem;
    object-fit: cover;
}
.ayb-phero__membertext { display: flex; flex-direction: column; min-width: 0; }
.ayb-phero__membername {
    font-size: .8rem; font-weight: 600; color: var(--ayb-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ayb-phero__memberrole {
    font-size: .72rem; color: var(--ayb-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 21.4 หน้าอัลบั้มรูป ---------- */
.ayb-album__day { margin-bottom: 1.5rem; }
.ayb-album__day:last-child { margin-bottom: 0; }
.ayb-album__date {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    margin: 0 0 .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--ayb-border);
    font-size: .95rem; color: var(--ayb-heading);
}
.ayb-album__date a { margin-left: auto; }

.ayb-album__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .7rem;
}
.ayb-album__item {
    margin: 0;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    overflow: hidden;
    background: var(--ayb-surface);
}
.ayb-album__item.is-focus {
    /* รูปที่กดมาจากแถบรูปเล็ก — ทำกรอบให้หาเจอทันทีว่าอยู่ตรงไหน */
    border-color: var(--ayb-primary);
    box-shadow: 0 0 0 3px var(--ayb-primary-light);
}
.ayb-album__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--ayb-bg-alt);
}
@supports not (aspect-ratio: 4 / 3) {
    .ayb-album__item img { height: 150px; }
}
.ayb-album__cap {
    display: flex; flex-direction: column; gap: .12rem;
    padding: .45rem .55rem .55rem;
    font-size: .76rem;
}
.ayb-album__job { color: var(--ayb-heading); font-weight: 600; }
.ayb-album__job .mono { font-weight: 400; color: var(--ayb-text-muted); margin-right: .25rem; }
.ayb-album__note { color: var(--ayb-text-muted); }

@media (max-width: 700px) {
    .ayb-phero__foot { grid-template-columns: 1fr; gap: .85rem; }
    .ayb-phero__coverbtn { font-size: .74rem; padding: .3rem .55rem; }
    .ayb-album__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================================
 | 22. ทีมงานภายในทำเอง + สรุปผู้รับเหมา (v0.10.0)
 * ========================================================================== */

/* ---------- 22.1 ช่องติ๊ก "ไม่ใช้ทีมผู้รับเหมา" ---------- */
.ayb-inhouse {
    margin-bottom: .7rem;
    padding: .5rem .7rem;
    border: 1px dashed var(--ayb-border-strong);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-surface-alt);
}
.ayb-inhouse:hover { border-color: var(--ayb-primary); }

/* WBS ที่ทีมภายในทำเอง — ทำให้ต่างจากที่ยังไม่ได้กำหนดอย่างชัดเจน */
.ayb-fieldset.is-inhouse {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-light);
}
.ayb-fieldset.is-inhouse .ayb-inhouse {
    border-style: solid;
    border-color: var(--ayb-primary);
    background: var(--ayb-surface);
}

/* ---------- 22.2 กล่องตัวเลขสรุป ---------- */
.ayb-sumgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}
.ayb-sumtile {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .7rem .85rem;
    border: 1px solid var(--ayb-border);
    border-left: 4px solid var(--ayb-primary);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-surface-alt);
}
.ayb-sumtile.is-warn { border-left-color: var(--ayb-step-todo); }
.ayb-sumtile__num { font-size: 1.5rem; font-weight: 700; color: var(--ayb-heading); line-height: 1.1; }
.ayb-sumtile__label { font-size: .76rem; color: var(--ayb-text-muted); }

/* ---------- 22.3 รายการ WBS ในตารางสรุป ---------- */
.ayb-sumlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.ayb-sumlist li { font-size: .8rem; line-height: 1.4; }
.ayb-sumlist .mono { font-size: .74rem; color: var(--ayb-text-muted); margin-right: .25rem; }

/* ============================================================================
 | 23. คลังวัสดุและราคา (v0.10.0)
 * ========================================================================== */

/* ---------- 23.1 แถบเลือกหมวดวัสดุ ---------- */
.ayb-matgroups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}
.ayb-matgroup {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius-sm);
    background: var(--ayb-surface);
    color: var(--ayb-text);
    font-size: .84rem;
    min-width: 0;
}
.ayb-matgroup:hover {
    text-decoration: none;
    color: var(--ayb-text);
    border-color: var(--ayb-primary);
    background: var(--ayb-primary-light);
}
.ayb-matgroup:focus-visible { outline: 2px solid var(--ayb-primary); outline-offset: 1px; }
.ayb-matgroup.is-on {
    border-color: var(--ayb-primary);
    background: var(--ayb-primary);
    color: #fff;
    font-weight: 600;
}
.ayb-matgroup i { font-size: 1rem; flex: 0 0 auto; }
.ayb-matgroup__title {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ayb-matgroup__count {
    margin-left: auto; flex: 0 0 auto;
    font-size: .72rem; font-weight: 700;
    background: var(--ayb-bg-alt);
    color: var(--ayb-text-muted);
    border-radius: 20px;
    padding: .05rem .4rem;
}
.ayb-matgroup.is-on .ayb-matgroup__count { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- 23.2 รายละเอียดวัสดุแบบ dl ---------- */
.ayb-detail {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: .45rem 1rem;
    margin: 0;
}
.ayb-detail dt { font-size: .8rem; color: var(--ayb-text-muted); }
.ayb-detail dd { margin: 0; font-size: .88rem; color: var(--ayb-text); }
.ayb-detail dd .badge { margin-right: .25rem; }

@media (max-width: 560px) {
    .ayb-detail { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .ayb-detail dd { margin-bottom: .5rem; }
}

/* หน่วยนับสั้น ๆ อย่าง "รถ(หกล้อ)" ไม่ควรถูกตัดกลางคำ (v0.10.0) */
.ayb-nowrap { white-space: nowrap; }

/* ============================================================================
   24. งานสัญญาและเอกสาร (v0.11.0)

   เอกสาร 7 ชนิดของโมดูล acontract เดิม — หน้ารวม แถบสลับเอกสาร
   ตารางรายการที่กรอกได้หลายแถว และรายการตรวจสอบเอกสารราชการ
   ============================================================================ */

/* ---------- 24.1 แถบสลับเอกสาร ---------- */
.ayb-doctabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}
.ayb-doctabs__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border: 1px solid var(--ayb-border);
    border-radius: 999px;
    background: var(--ayb-surface);
    color: var(--ayb-text-muted);
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
}
.ayb-doctabs__item:hover { border-color: var(--ayb-border-strong); color: var(--ayb-text); }
.ayb-doctabs__item.is-active {
    background: var(--ayb-primary-light);
    border-color: var(--ayb-primary);
    color: var(--ayb-primary-dark);
    font-weight: 600;
}

/* ---------- 24.2 การ์ดเอกสารในหน้ารวม ---------- */
.ayb-doccards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .75rem;
}
.ayb-doccard {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--ayb-border);
    border-radius: var(--ayb-radius);
    background: var(--ayb-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ayb-doccard:hover {
    border-color: var(--ayb-primary);
    box-shadow: 0 4px 12px rgba(102, 97, 91, .08);
}
.ayb-doccard__icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ayb-bg-alt);
    color: var(--ayb-primary-dark);
    font-size: 1.05rem;
}
.ayb-doccard__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1 1 auto; }
.ayb-doccard__title { font-weight: 600; }
.ayb-doccard__hint { font-size: .8rem; color: var(--ayb-text-muted); line-height: 1.45; }
.ayb-doccard__body .badge { align-self: flex-start; }
.ayb-doccard__go { flex: 0 0 auto; color: var(--ayb-text-muted); align-self: center; }
/* ทั้งการ์ดเป็นลิงก์ ข้อความข้างในจึงต้องไม่ขีดเส้นใต้ตอนชี้/โฟกัส
   แยกกฎ :focus-visible ออกมาต่างหาก เพราะเบราว์เซอร์ที่ไม่รู้จักตัวเลือกนี้
   จะทิ้งทั้งกฎถ้าเขียนรวมกับ :hover (ชุดทดสอบ smoke_test_field.sh ตรวจข้อนี้อยู่) */
.ayb-doccard:hover { text-decoration: none; }
.ayb-doccard:focus { text-decoration: none; }
.ayb-doccard:focus-visible { text-decoration: none; outline: 2px solid var(--ayb-primary); outline-offset: 2px; }

/* ---------- 24.3 ตารางรายการที่กรอกได้ ---------- */
/*
 * ★ ต้องมีคลาสช่องกรอกของตัวเอง ห้ามยืม .ayb-input--sm มาใช้
 *   .ayb-input--sm ถูกออกแบบไว้ให้ช่องจำนวนวันในหน้าแผนงวดงาน
 *   จึงมี max-width: 6rem ติดมาด้วย ถ้ายืมมาใช้ช่องกรอกในตารางนี้
 *   จะถูกบีบเหลือ 96px ทุกช่องไม่ว่าคอลัมน์จะกว้างแค่ไหน (บั๊กใน v0.11.0)
 */
.ayb-cellinput,
.ayb-cellselect {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: .42rem .6rem;
    font-size: .88rem;
}
.ayb-cellinput--num { text-align: right; }

/* ตารางกรอกข้อมูลใช้ความกว้างคงที่ตาม <col> จะได้ไม่ยืด-หดตามที่พิมพ์ */
.ayb-quotable { table-layout: fixed; width: 100%; }
.ayb-quotable td { vertical-align: top; padding-top: .55rem; padding-bottom: .55rem; }
.ayb-quotable th { white-space: nowrap; }

.ayb-quotable__no {
    text-align: center;
    font-size: .85rem;
    color: var(--ayb-text-muted);
    padding-top: 1.05rem;
}

/* บรรทัดที่สองของช่อง "รายการ" — ข้อมูลประกอบที่ไม่ต้องเด่นเท่าชื่อรายการ */
.ayb-cellsub {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}
.ayb-cellsub > * { flex: 1 1 8rem; min-width: 0; }
.ayb-cellsub .ayb-cellinput,
.ayb-cellsub .ayb-cellselect {
    padding: .3rem .5rem;
    font-size: .82rem;
    background: var(--ayb-surface-alt);
}

/* ยอดรวมของแถว — เป็นตัวเลขให้ดู ไม่ใช่ช่องกรอก จึงต้องอ่านง่ายกว่ารอบข้าง */
.ayb-quotable__amount {
    text-align: right;
    font-weight: 600;
    padding-top: 1.05rem;
    white-space: nowrap;
}

.ayb-rowdel { padding: .3rem .5rem; line-height: 1; margin-top: .3rem; }
.ayb-quotable tr.is-orphan { background: #FDF3EF; }

/* จอแคบกว่านี้ตารางกรอกจะอึดอัด ปล่อยให้เลื่อนในกรอบตัวเองแทนการบีบช่อง */
@media (min-width: 641px) {
    .ayb-quotable { min-width: 46rem; }
}

/* กล่องสรุปยอดที่ต้องเด่นกว่ากล่องอื่น และกล่องที่ยังไม่ลงตัว */
.ayb-sumtile.is-strong {
    background: var(--ayb-primary-light);
    border-color: var(--ayb-primary);
}
.ayb-sumtile.is-warn {
    background: #FDF6E6;
    border-color: var(--ayb-warning);
}

/* ---------- 24.4 รายการตรวจสอบเอกสารราชการ (v0.11.2) ----------
   ★ ชื่อคลาสต้องเป็น .ayb-checkrow ไม่ใช่ .ayb-check
     เพราะ .ayb-check เป็นคอมโพเนนต์ checkbox+label ที่มีอยู่แล้วในระบบ
     และมีกฎ ".ayb-check input { width: 17px; flex: 0 0 17px }" ครอบ input ทุกตัวข้างใน
     ถ้าใช้ชื่อซ้ำ ช่องหมายเหตุกับช่องจำนวนในรายการนี้จะถูกบีบเหลือ 17px ทันที */

/* แถบสรุปด้านบน — ตอบให้ได้ในแวบเดียวว่าเหลืออีกกี่รายการ */
.ayb-govhead__top {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ayb-govhead__ring {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 5px solid var(--ayb-primary-light);
    background: var(--ayb-surface);
}
.ayb-govhead__pct { font-size: 1.05rem; font-weight: 700; color: var(--ayb-primary-dark); }
.ayb-govhead__text { flex: 1 1 18rem; min-width: 0; }
.ayb-govhead__counts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ayb-govhead__tools {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
.ayb-govhead__filter { margin: 0; font-size: .87rem; white-space: nowrap; }

/* รายการตรวจสอบ */
.ayb-checklist { list-style: none; margin: 0; padding: 0; }

/* ---------- ตารางเอกสารราชการ (v0.11.3) ----------
   ★ ใช้โครงเดียวกับตารางงวดงานในหน้าบันทึกสัญญา ตามที่ผู้ใช้ขอ
     [ติ๊ก] [ลำดับ + ชื่อเอกสาร] [จำนวน] [หมายเหตุ] [ไฟล์แนบ]

   ★ ห้ามตั้งชื่อคลาสว่า .ayb-check
     .ayb-check เป็นคอมโพเนนต์ checkbox+label ที่มีอยู่แล้วในระบบ
     และมีกฎ ".ayb-check input { width: 17px; flex: 0 0 17px }" ครอบ input ทุกตัวข้างใน
     ถ้าใช้ชื่อซ้ำ ช่องหมายเหตุกับช่องจำนวนในตารางนี้จะถูกบีบเหลือ 17px ทันที */
.ayb-govtable { table-layout: fixed; }
.ayb-govtable__ck    { width: 3.6rem; text-align: center; }
.ayb-govtable__count { width: 11rem; }
.ayb-govtable__note  { width: 20rem; }
.ayb-govtable__file  { width: 9.5rem; }

.ayb-govrow { transition: background .15s ease; }
.ayb-govrow.is-done { background: #F4FAF6; }
.ayb-govrow[hidden] { display: none; }

.ayb-govbox {
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--ayb-step-done);
    cursor: pointer;
}

/* ทั้งชื่อเอกสารเป็นปุ่มกด จะได้ติ๊กง่ายบนจอสัมผัส */
.ayb-govrow__title {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.45;
}
.ayb-govrow__no {
    flex: 0 0 auto;
    min-width: 1.5rem;
    font-size: .8rem;
    color: var(--ayb-text-muted);
    font-variant-numeric: tabular-nums;
}
.ayb-govrow.is-done .ayb-govrow__title { color: var(--ayb-step-done-dark); }
.ayb-govrow.is-done .ayb-govrow__no { color: var(--ayb-step-done); font-weight: 700; }

.ayb-govrow__count { display: inline-flex; align-items: center; gap: .35rem; margin-right: .5rem; }
.ayb-govrow__count label { font-size: .78rem; color: var(--ayb-text-muted); white-space: nowrap; }
.ayb-govrow__count .ayb-cellinput { width: 3.6rem; }

.ayb-govrow__file {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    white-space: nowrap;
    color: var(--ayb-text-muted);
    text-decoration: none;
}
.ayb-govrow__file:hover { color: var(--ayb-primary-dark); }
.ayb-govrow__file.is-there { color: var(--ayb-step-done-dark); font-weight: 600; }
.ayb-govrow__file.is-muted { cursor: default; }

.ayb-card__title--sm { font-size: 1rem; }

@media (max-width: 700px) {
    /* ตารางพับเป็นการ์ดแล้ว ความกว้างคอลัมน์ที่ตั้งไว้ข้างบนใช้ไม่ได้อีก */
    .ayb-govtable__ck,
    .ayb-govtable__count,
    .ayb-govtable__note,
    .ayb-govtable__file { width: auto; text-align: left; }
    .ayb-govtable td.ayb-govtable__note .ayb-cellinput { max-width: 60%; }
    .ayb-govhead__tools { align-items: stretch; width: 100%; }
}

/* ---------- 24.5 หน้ามิเตอร์ ---------- */
.ayb-metergrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    align-items: start;
}
.ayb-subhead {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ayb-text-muted);
    margin: 0 0 .6rem;
    text-transform: none;
}
.ayb-block { display: block; }

@media (max-width: 700px) {
    .ayb-govitem__body { padding-left: 0; }
    .ayb-govitem__count { flex: 1 1 45%; }
    .ayb-doccards { grid-template-columns: 1fr; }
}

/* ============================================================================
   25. อัลบั้มรูปแบบ popup (v0.11.2)

   เปิดทับหน้าจอ เลื่อนดูรูปถัดไปได้ด้วยปุ่ม ลูกศรคีย์บอร์ด หรือปัดนิ้ว
   ============================================================================ */

/* กันหน้าเลื่อนตอน popup เปิดอยู่ ไม่งั้นเลื่อนทะลุไปหน้าข้างหลัง */
html.is-lb-open, html.is-lb-open body { overflow: hidden; }

.ayb-lb {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem 1rem;
    background: rgba(28, 26, 24, .92);
    animation: aybLbIn .16s ease;
}
.ayb-lb[hidden] { display: none; }

@keyframes aybLbIn { from { opacity: 0; } to { opacity: 1; } }

.ayb-lb__stage {
    margin: 0;
    max-width: min(100%, 1200px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
}
.ayb-lb__img {
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    object-fit: contain;
    border-radius: var(--ayb-radius);
    background: #000;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.ayb-lb__cap {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
    color: #F3EFE9;
    font-size: .9rem;
    text-align: center;
}
.ayb-lb__count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: .12rem .6rem;
}

/* ปุ่มควบคุม — วงกลมโปร่งให้เห็นรูปข้างหลัง แต่ยังกดโดนง่ายบนจอสัมผัส */
.ayb-lb__close,
.ayb-lb__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .15s ease;
}
.ayb-lb__close:hover,
.ayb-lb__nav:hover { background: rgba(255, 255, 255, .3); }
.ayb-lb__close:focus-visible,
.ayb-lb__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ayb-lb__close { top: 1rem; right: 1rem; }
.ayb-lb__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.ayb-lb__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.ayb-lb__nav[hidden] { display: none; }

@media (max-width: 640px) {
    .ayb-lb { padding: 3rem .5rem 1rem; }
    .ayb-lb__img { max-height: calc(100vh - 12rem); }
    .ayb-lb__nav { width: 2.4rem; height: 2.4rem; }
    .ayb-lb__nav--prev { left: .35rem; }
    .ayb-lb__nav--next { right: .35rem; }
}

/* จอเล็กมาก ปุ่มซ้าย-ขวาบังรูป ย้ายลงมาไว้ใต้คำบรรยายแทน */
@media (max-width: 380px) {
    .ayb-lb__nav--prev { left: 25%; top: auto; bottom: .75rem; transform: none; }
    .ayb-lb__nav--next { right: 25%; top: auto; bottom: .75rem; transform: none; }
}

/* ============================================================================
   26. ความคืบหน้ารายงวดงานในหน้ารายละเอียดโครงการ
       v0.11.2 เพิ่มเข้ามา · v0.11.3 ออกแบบการอ่านใหม่หลังผู้ใช้แจ้งว่าอ่านยาก

   หลักที่ใช้ตัดสินใจ
     - หนึ่งงวด = หนึ่งบรรทัด ข้อมูลย่อยต้องไม่ดันความสูงของแถว
     - แถบเปอร์เซ็นต์ทุกงวดอยู่ตำแหน่งเดียวกันเป๊ะ (ขวามือ กว้างคงที่)
       ตาจึงเทียบความยาวแถบข้ามงวดได้ทันทีโดยไม่ต้องอ่านตัวเลข
     - ของเดิมแถบอยู่ในกล่องเนื้อหาซึ่งกว้างไม่เท่ากันตามความยาวชื่องวด
       เลยเทียบด้วยตาไม่ได้เลย ต้องไล่อ่านตัวเลขทีละบรรทัด

   กาง-พับด้วย <details> ของ HTML แท้ ๆ จึงทำงานได้แม้ปิด JavaScript
   ============================================================================ */

/* ---------- 26.1 แถบสรุปหัวการ์ด ---------- */
.ayb-phsum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--ayb-border);
    border-bottom: 1px solid var(--ayb-border);
    background: var(--ayb-surface-alt);
}
.ayb-phsum__stat { flex: 0 0 auto; display: flex; flex-direction: column; gap: .1rem; }
.ayb-phsum__num {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ayb-primary-dark);
    font-variant-numeric: tabular-nums;
}
.ayb-phsum__of { font-size: .95rem; font-weight: 500; color: var(--ayb-text-muted); }
.ayb-phsum__label { font-size: .76rem; color: var(--ayb-text-muted); }
.ayb-phsum__now { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ayb-phsum__nowtext { font-size: .92rem; line-height: 1.4; }
.ayb-phsum__nowpct { font-weight: 700; color: var(--ayb-primary-dark); }
.ayb-phsum__filter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    cursor: pointer;
    white-space: nowrap;
}
.ayb-phsum__filter[hidden] { display: none; }

/* ---------- 26.2 แถวของแต่ละงวด ---------- */
.ayb-phlist { list-style: none; margin: 0; padding: 0; }

.ayb-phrow { border-bottom: 1px solid var(--ayb-border); }
.ayb-phrow:last-child { border-bottom: 0; }
.ayb-phrow[hidden] { display: none; }

.ayb-phrow summary { list-style: none; cursor: pointer; }
.ayb-phrow summary::-webkit-details-marker { display: none; }

.ayb-phrow__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.25rem;
    transition: background .15s ease;
}
.ayb-phrow__head:hover { background: var(--ayb-surface-alt); }
.ayb-phrow summary:focus-visible .ayb-phrow__head { outline: 2px solid var(--ayb-primary); outline-offset: -2px; }

/* ลูกศรกาง-พับ */
.ayb-phrow__head::before {
    content: "›";
    flex: 0 0 .8rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--ayb-text-muted);
    transition: transform .15s ease;
}
.ayb-phrow details[open] .ayb-phrow__head::before { transform: rotate(90deg); }

/* เลขงวดเป็นวงกลม เห็นสถานะจากสีได้โดยไม่ต้องอ่าน */
.ayb-phrow__no {
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--ayb-border);
    color: var(--ayb-text-muted);
}
.ayb-phrow.is-done .ayb-phrow__no  { background: var(--ayb-step-done); color: #fff; }
.ayb-phrow.is-doing .ayb-phrow__no { background: var(--ayb-primary); color: #fff; }

.ayb-phrow__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ayb-phrow__title { font-weight: 600; line-height: 1.35; }

/* คำว่า "งวดที่ N" ซ้ำกับวงกลมด้านซ้ายบนจอกว้าง ซ่อนไว้ให้เหลือแค่บนจอเล็ก
   ที่วงกลมถูกพับไป และให้โปรแกรมอ่านหน้าจออ่านได้เสมอ */
.ayb-phrow__nolabel { display: none; }

.ayb-phrow__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .45rem;
    font-size: .78rem;
    color: var(--ayb-text-muted);
}

/* ป้ายสถานะเล็ก — เตี้ยกว่า badge ปกติ จะได้ไม่ดันความสูงของแถว */
.ayb-phtag {
    display: inline-block;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.45;
    background: var(--ayb-border);
    color: var(--ayb-text-muted);
}
.ayb-phtag.is-done  { background: #E4F3E8; color: var(--ayb-step-done-dark); }
.ayb-phtag.is-doing { background: var(--ayb-primary-light); color: var(--ayb-primary-dark); }
.ayb-phtag.is-info  { background: #E8F1F8; color: #34698F; }

/* แถบและเปอร์เซ็นต์ กว้างคงที่ทุกแถว เพื่อให้เทียบกันด้วยตาได้ */
.ayb-phrow__gauge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 11rem;
}
.ayb-phrow__gauge .ayb-progress { flex: 1 1 auto; }
.ayb-phrow__pct {
    flex: 0 0 2.8rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ayb-text-muted);
}
.ayb-phrow.is-done .ayb-phrow__pct  { color: var(--ayb-step-done-dark); }
.ayb-phrow.is-doing .ayb-phrow__pct { color: var(--ayb-primary-dark); }

/* ---------- 26.3 รายละเอียดที่กางออกมา ---------- */
.ayb-phrow__detail {
    padding: .1rem 1.25rem 1rem 4.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ayb-wbsprog { display: flex; flex-direction: column; gap: .3rem; }
.ayb-wbsprog__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ayb-wbsprog__name { font-size: .88rem; font-weight: 500; flex: 1 1 auto; min-width: 0; }
.ayb-wbsprog__pct {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ayb-text-muted);
}

.ayb-joblist { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .25rem; }
.ayb-joblist__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .15rem 0;
    font-size: .82rem;
    color: var(--ayb-text-muted);
}
.ayb-joblist__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ayb-joblist__bar {
    flex: 0 0 5rem;
    height: 5px;
    border-radius: 999px;
    background: var(--ayb-border);
    overflow: hidden;
}
.ayb-joblist__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ayb-primary);
}
.ayb-joblist__pct { flex: 0 0 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.ayb-joblist__item.is-done { color: var(--ayb-step-done-dark); }
.ayb-joblist__item.is-done .ayb-joblist__bar > span { background: var(--ayb-step-done); }

@media (max-width: 820px) {
    /* จอแคบ — แถบเปอร์เซ็นต์ลงไปอยู่ใต้ชื่องวด ไม่งั้นชื่อจะเหลือที่นิดเดียว */
    .ayb-phrow__head { flex-wrap: wrap; gap: .5rem .7rem; padding: .75rem 1rem; }
    .ayb-phrow__no { display: none; }
    .ayb-phrow__nolabel { display: inline; color: var(--ayb-text-muted); font-weight: 600; margin-right: .3rem; }
    .ayb-phrow__gauge { width: 100%; padding-left: 1.5rem; }
    .ayb-phrow__detail { padding: .1rem 1rem 1rem 1.5rem; }
    .ayb-joblist__name { white-space: normal; }
    .ayb-joblist__bar { flex: 0 0 3.5rem; }
    .ayb-phsum { gap: .8rem 1.25rem; padding: .8rem 1rem; }
}

/* ============================================================================
   27. ข้อมูลย่อแบบแถวเดียว (v0.11.3)

   ใช้แทน .ayb-details ในที่ที่ค่าแต่ละช่องสั้นมาก เช่น "8 งวด" "8 รายการ"
   .ayb-details วางป้ายกำกับไว้เหนือค่าและบังคับเป็นตารางคอลัมน์เท่า ๆ กัน
   พอค่าสั้นจึงเหลือที่ว่างมหาศาลและกินความสูงเกินจำเป็น
   ที่นี่วางป้ายกำกับไว้หน้าค่าแล้วปล่อยไหลต่อกัน ใช้พื้นที่ราวครึ่งเดียว
   ============================================================================ */
.ayb-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1.5rem;
    margin: 0;
}
.ayb-facts__item {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    min-width: 0;
}
.ayb-facts__item--wide { flex: 1 1 100%; }
.ayb-facts dt {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--ayb-text-muted);
}
.ayb-facts dd {
    margin: 0;
    min-width: 0;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .ayb-facts { gap: .4rem 1rem; }
    .ayb-facts__item { flex: 1 1 100%; }
}