/* ===== layout ===== */
.notice-wrapper{
    width:100%;
    margin:auto;
}

/* ช่องค้นหา */
.notice-tools{
    margin:10px 0;
}

#tableSearch{
    width:320px;
    max-width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:14px;
}

/* ===== responsive table ===== */
.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* table */
.notice-table{
    border-collapse:collapse;
    width:100%;
    font-size:14px;
}

/* header */
.notice-table th{
    background:#0d47a1;
    color:#fff;
    padding:12px;
    position:sticky;
    top:0;
    z-index:2;
    cursor:pointer;
    white-space:nowrap;
}

/* td */
.notice-table td{
    padding:10px;
    border-bottom:1px solid #eee;
    white-space:nowrap;
}

/* hover */
.notice-table tr:hover{
    background:#f1f7ff;
}

/* mobile */
@media screen and (max-width:768px){

.notice-table{
    font-size:13px;
}

.notice-table td{
    padding:8px;
}

}

.search-box{
    display:flex;
    gap:15px;
    align-items:end;
    flex-wrap:wrap;
    background:#f8f9fb;
    padding:18px;
    border-radius:12px;
    margin-bottom:15px;
}

/* ช่อง */
.search-item{
    display:flex;
    flex-direction:column;
    min-width:180px;
}

/* ช่องค้นหาใหญ่ */
.flex-grow{
    flex:1;
    min-width:250px;
}

/* label */
.search-item label{
    font-size:13px;
    margin-bottom:4px;
    color:#555;
}

/* input */
.search-box select,
.search-box input{
    height:42px;
    padding:0 12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:14px;
}

/* ปุ่ม */
.search-btn button{
    height:42px;
    padding:0 22px;
    background:#1a73e8;
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
    white-space:nowrap;
}

.search-btn button:hover{
    background:#0d5bd3;
}

/* 📱 mobile */
@media(max-width:768px){
.search-box{
    flex-direction:column;
    align-items:stretch;
}
.search-btn button{
    width:100%;
}
}

/* ===== MOBILE CARD MODE ===== */
@media(max-width:768px){

#noticeTable2 thead{
    display:none;
}

#noticeTable2,
#noticeTable2 tbody,
#noticeTable2 tr,
#noticeTable2 td{
    display:block;
    width:100%;
}

#noticeTable2 tr{
    background:#fff;
    margin-bottom:12px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    padding:10px;
}

#noticeTable2 td{
    border:none;
    padding:6px 8px;
    display:flex;
    justify-content:space-between;
    font-size:14px;
}

/* label ซ้าย */
#noticeTable2 td:before{
    font-weight:600;
    color:#0d47a1;
}

/* mapping ชื่อคอลัมน์ */
#noticeTable2 td:nth-child(1):before{content:"ลำดับ";}
#noticeTable2 td:nth-child(2):before{content:"เรื่องที่";}
#noticeTable2 td:nth-child(3):before{content:"เลขคดีแดง";}
#noticeTable2 td:nth-child(4):before{content:"ศาล";}
#noticeTable2 td:nth-child(5):before{content:"โจทก์";}
#noticeTable2 td:nth-child(6):before{content:"ลูกหนี้";}
#noticeTable2 td:nth-child(7):before{content:"หน่วยงาน";}
#noticeTable2 td:nth-child(8):before{content:"เจ้าของสำนวน";}
}

@media(max-width:768px){

/* ให้ข้อความขวาตัดบรรทัดได้ */
#noticeTable2 td{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:10px;
}

/* ฝั่งค่าข้อมูล (ด้านขวา) */
#noticeTable2 td > *{
 max-width:65%;
 word-break:break-word;
}

/* ถ้าเป็นลิงก์/ปุ่ม */
#noticeTable2 td a{
 display:inline-block;
 background:#1a73e8;
 color:#fff;
 padding:6px 10px;
 border-radius:6px;
 font-size:13px;
 text-decoration:none;
 white-space:normal;
 word-break:break-word;
 max-width:100%;
}

/* label ซ้าย */
#noticeTable2 td:before{
 flex-shrink:0;
}

}

@media(max-width:768px){

/* td หลัก */
#noticeTable2 td{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 padding:8px 6px;
 border:none;
 border-bottom:1px solid #eee;
 font-size:14px;
}

/* label */
#noticeTable2 td:before{
 content: attr(data-label);
 font-weight:600;
 color:#0d47a1;
 margin-bottom:3px;
}

/* ลิงก์ประกาศยาว */
#noticeTable2 td a{
 display:block;
 width:100%;
 background:#1a73e8;
 color:#fff;
 padding:8px 10px;
 border-radius:8px;
 font-size:14px;
 text-decoration:none;
 word-break:break-word;
 white-space:normal;
 line-height:1.4;
}

/* hover */
#noticeTable2 td a:hover{
 background:#0d5bd3;
}

}

/* ===== สลับสีตาราง desktop ===== */
#noticeTable2 tbody tr:nth-child(odd){
    background:#ffffff;
}

#noticeTable2 tbody tr:nth-child(even){
    background:#f5f7fb;
}

/* hover */
#noticeTable2 tbody tr:hover{
    background:#eaf2ff;
    transition:0.2s;
}

@media(max-width:768px){

#noticeTable2 tbody tr:nth-child(odd){
    background:#ffffff;
}

#noticeTable2 tbody tr:nth-child(even){
    background:#f2f6ff;
}

#noticeTable2 tbody tr:hover{
    background:#e3edff;
}

}

/* ===== ปุ่มมาตรฐาน ===== */
#noticeTable2 td a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:6px;
    font-size:14px;
    text-decoration:none;
    color:#fff;
    line-height:1.4;
    transition:0.15s;
    box-shadow:none;
    font-weight:500;
    border:1px solid rgba(0,0,0,0.08);
}

/* icon */
#noticeTable2 td a:before{
    content:"📄";
    font-size:13px;
}

/* ===== ประกาศ (น้ำเงินราชการ) ===== */
#noticeTable2 td a{
    background:#2f5f9e;
}
#noticeTable2 td a:hover{
    background:#244a7c;
}

/* ===== PDF (เทาเอกสาร) ===== */
#noticeTable2 td a[href*=".pdf"]{
    background:#6b7280;
}
#noticeTable2 td a[href*=".pdf"]:hover{
    background:#4b5563;
}

/* ===== คำสั่ง (เขียวราชการ) ===== */
#noticeTable2 td a[href*="cmd"],
#noticeTable2 td a[href*="order"]{
    background:#2e7d5b;
}
#noticeTable2 td a[href*="cmd"]:hover,
#noticeTable2 td a[href*="order"]:hover{
    background:#1f5e44;
}

/* ===== mobile ===== */
@media(max-width:768px){

#noticeTable2 td a{
    display:flex;
    justify-content:center;
    width:100%;
    padding:10px;
    font-size:15px;
    border-radius:8px;
}

}


.gov-search{
    background:#f5f6f8;
    padding:20px;
    border-radius:10px;
    max-width:1080px;
}

.gov-search h3{
    margin-bottom:15px;
    color:#1f3c66;
}

.gov-row{
    margin-bottom:14px;
    display:flex;
    flex-direction:column;
}

.gov-row label{
    font-size:14px;
    margin-bottom:4px;
    color:#333;
    font-weight:600;
}

.gov-search input,
.gov-search select{
    height:40px;
    padding:0 10px;
    border:1px solid #cfd6e0;
    border-radius:6px;
    font-size:14px;
    background:#fff;
}

/* เลขคดี */
.case-group{
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
}

.case-group input{
    width:200px;
}

/* ปุ่ม */
.gov-btns{
    margin-top:18px;
    display:flex;
    gap:10px;
}

.btn-search{
    background:#2f5f9e;
    color:#fff;
    border:none;
    padding:10px 26px;
    border-radius:6px;
    font-size:15px;
    cursor:pointer;
}

.btn-search:hover{
    background:#244a7c;
}

.btn-clear{
    background:#6b7280;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:6px;
    cursor:pointer;
}

/* ===== GOV COMPACT DESKTOP ===== */
@media(min-width:1024px){

.gov-search-box{
    max-width:1200px;
}

/* จัด 2 คอลัมน์ */
.gov-form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px 22px;
}

/* label */
.gov-form-grid label{
    font-size:14px;
    font-weight:600;
    color:#2c3e50;
    margin-bottom:3px;
}

/* input */
.gov-form-grid input,
.gov-form-grid select{
    height:38px;
    font-size:14px;
}

/* เลขคดี */
.case-group{
    display:flex;
    align-items:center;
    gap:8px;
}

/* ปุ่มอยู่กลาง */
.gov-btn-row{
    margin-top:10px;
    display:flex;
    gap:10px;
}

/* ลดช่องไฟ */
.gov-search-box .form-group{
    margin-bottom:8px;
}

}


/* ปุ่มออก */
.btn-exit{
    background:#D32F2F;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:6px;
    font-size:14px;
    cursor:pointer;
}

.btn-exit:hover{
    background:#B71C1C;
}

/* ===== ปุ่มล้างค่า ===== */
.btn-clear{
    background:#6b7280;      /* เทาราชการ */
    color:#ffffff;
    border:none;
    padding:10px 20px;
    height:42px;
    border-radius:6px;
    font-size:15px;
    cursor:pointer;
    transition:0.15s;
}

/* hover */
.btn-clear:hover{
    background:#4b5563;
}

/* ตอนกด */
.btn-clear:active{
    background:#374151;
}

/* ให้ขนาดเท่าปุ่มค้นหา */
.gov-btn-row .btn-clear{
    min-width:120px;
}


.gov-btn-row button{
    min-width:120px;
    height:42px;
    border-radius:6px;
    font-size:15px;
}

/* ===== ล็อคขนาด select ทุกช่อง ===== */
.gov-form-grid select{
    width:100%;
    max-width:420px;   /* ความยาวมาตรฐาน */
}

/* ช่องประกาศโดยเฉพาะ */
select[name="announce_type"],
#announce_type{
    width:100%;
    max-width:420px;
}

@media(min-width:1080px){

.gov-form-grid{
    display:grid;
    grid-template-columns: 360px 360px 360px; /* ล็อคขนาด */
    gap:14px 30px;
}

}

/* ===== MOBILE FIX UI ===== */
@media(max-width:768px){

/* container */
.gov-search-box{
    padding:14px;
}

/* label */
.gov-search-box label{
    font-size:14px;
    font-weight:600;
}

/* input / select */
.gov-search-box input,
.gov-search-box select{
    height:44px;
    font-size:16px;
    border-radius:8px;
}

/* เลขคดี */
.case-group{
    display:flex;
    gap:6px;
}

.case-group input{
    flex:1;
    min-width:0;
}

/* วันที่ */
.date-row{
    display:flex;
    gap:6px;
}

.date-row input{
    flex:1;
}

/* ปุ่ม calendar */
.date-row button{
    width:44px;
}

/* ===== ปุ่ม ===== */
.gov-btn-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:12px;
}

.gov-btn-row button{
    height:46px;
    font-size:16px;
    border-radius:10px;
}

/* ปุ่มออกเต็มบรรทัด */
.btn-exit{
    grid-column:1 / -1;
}

}


/* overlay */
.popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.35);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

/* กล่อง */
.popup-box{
    background:#fff;
    padding:28px 30px;
    border-radius:12px;
    width:320px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    animation:pop .25s ease;
}

@keyframes pop{
 from{transform:scale(.8);opacity:0}
 to{transform:scale(1);opacity:1}
}

.popup-title{
    font-size:20px;
    font-weight:600;
    color:#2f5f9e;
    margin-bottom:10px;
}

.popup-text{
    font-size:18px;
    margin-bottom:18px;
    color:#333;
}

.popup-btn{
    background:#2f5f9e;
    color:#fff;
    border:none;
    padding:10px 26px;
    border-radius:8px;
    font-size:16px;
    cursor:pointer;
}

.popup-btn:hover{
    background:#244a7c;
}

#noticeTable2 td:first-child{
    font-weight:600;
    text-align:center;
    width:60px;
}