/* PHIMAI HEALTH | ผู้พัฒนาระบบ : นายวิษณุ เสาะสาย | ตำแหน่ง : เจ้าพนักงานธุรการ */
.office-ui,.office-home{--office-ink:#173e39;--office-brand:#076f67;--office-line:#dbe8e2;color:var(--office-ink)}
.office-ui{max-width:1320px;margin:0 auto;padding-bottom:28px;min-width:0}
.office-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg,#075b55,#11877b);color:white;padding:32px;border-radius:22px;margin-bottom:24px;box-shadow:0 12px 30px #16433815}
.office-hero h1{color:white;font-size:clamp(1.5rem,3vw,2.1rem);margin:8px 0}.office-hero p{margin:0;color:#e0f3ed}.office-eyebrow{font-size:.75rem;letter-spacing:.12em;font-weight:700}.office-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.office-panel{background:white;border:1px solid var(--office-line);border-radius:18px;padding:26px;margin-bottom:20px;box-shadow:0 5px 22px #13382d06;min-width:0}
.office-form label{display:block;font-weight:600;margin-bottom:7px}.office-form .form-control,.office-form .form-select{border-radius:11px;min-height:44px}.office-form small{display:block;color:#59736a;margin-top:8px}.office-form textarea{resize:vertical}
.office-list{background:white;border:1px solid var(--office-line);border-radius:18px;overflow:hidden}.office-row{display:flex;align-items:center;gap:18px;padding:22px;border-bottom:1px solid #edf2ef;transition:background .2s}.office-row:last-child{border-bottom:0}.office-row:hover{background:#f4faf6}.office-number{display:grid;place-items:center;min-width:40px;height:40px;border-radius:12px;background:#e6f3ed;color:#096e5c;font-weight:700}.office-row-main{flex:1;min-width:0}.office-title{font-size:1.05rem;font-weight:700;color:#174c43;text-decoration:none;overflow-wrap:anywhere}.office-title:hover{text-decoration:underline}.office-row p{font-size:.85rem;margin:6px 0;color:#5f756c}.office-row small{color:#6a7f75}.office-detail-title{font-size:clamp(1.4rem,2.5vw,1.9rem);overflow-wrap:anywhere}.office-meta{color:#62776e;font-size:.9rem;line-height:1.9}.office-body{font-size:1rem;line-height:1.95;overflow-wrap:anywhere;padding:22px 0;border-top:1px solid var(--office-line);margin-top:22px}.office-metrics{display:flex;gap:12px;flex-wrap:wrap}.office-metrics span{background:#edf6f1;padding:10px 16px;border-radius:12px}.office-tag{background:#e1f2e9;color:#0a6f57;padding:7px 13px;border-radius:999px;font-size:.85rem}
.office-file{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid var(--office-line);border-radius:14px;margin:12px 0;min-width:0}.office-file strong{overflow-wrap:anywhere}.office-file small{display:block;color:#60796c;margin-top:5px}.office-file-icon{display:grid;place-items:center;background:#e9f3ef;color:#0a6f57;min-width:54px;height:54px;border-radius:12px;font-size:.75rem;font-weight:800}.office-filter{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.office-filter label{margin:0}.office-filter .form-control,.office-filter .form-select{margin-top:7px}.office-danger{border-color:#efd8d8}.office-danger summary{cursor:pointer;color:#aa3030;font-weight:600}.office-danger p{margin-top:12px}.office-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}.office-section-heading h2{font-size:clamp(1.5rem,3vw,2rem);margin:8px 0}.office-section-heading p{color:#62796d;margin:0}.office-home{background:#eff6f2}.office-ui .table{white-space:normal}.office-ui .table th{white-space:nowrap}.office-ui :focus-visible,.office-home :focus-visible{outline:3px solid #1e947a;outline-offset:3px}
@media(max-width:767.98px){.office-hero{padding:23px 18px;border-radius:17px}.office-panel{padding:20px 16px}.office-row{gap:12px;padding:17px 13px;flex-wrap:wrap}.office-row-main{flex-basis:calc(100% - 56px)}.office-row>.btn{margin-left:52px}.office-file{flex-wrap:wrap;padding:14px}.office-file>.flex-grow-1{flex-basis:calc(100% - 70px);min-width:0}.office-file form{margin-left:69px}.office-filter label{width:100%}.office-ui .table-responsive{max-width:100%;overflow:auto}.office-hero .office-actions{width:100%}.office-hero .btn{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){.office-row{transition:none}}