/* ui.css - interface refinements loaded after the main styles in pps-app.html / index.html (see ui.js for the behaviour).
   Only the chrome of the app: nothing here touches the report sheets (PDF / print copy the main <style> only). */

.unit-label{font-size:12.5px;}

/* the template menu is a drop-down: keep its arrow when it is the open page (.tab.active resets the background and hid it) */
select.tab-select.active{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23FFC400' d='M5 7l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
}

/* menu bar that can scroll sideways: fade the edge where more menus are hidden */
nav.tabs.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);}
nav.tabs.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);}
nav.tabs.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);}

/* show / hide password */
.pw-wrap{position:relative;}
.pw-wrap > input{padding-right:46px !important;box-sizing:border-box;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:#5B6066;cursor:pointer;padding:0;}
.pw-eye:hover{color:#0B2545;background:#F3F5F8;}
.pw-eye svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pw-eye .eye-off{display:none;}
.pw-eye[aria-pressed="true"] .eye-on{display:none;}
.pw-eye[aria-pressed="true"] .eye-off{display:block;}

/* progress bar of the evaluation form (phones / small tablets only; built by ui.js) */
.ui-progress{display:none;}
@media (max-width:900px){
  .ui-progress{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--hazard);padding:8px 10px;margin:0 0 12px;box-shadow:0 2px 8px rgba(0,0,0,.10);}
  .ui-progress .up-text{font-size:13.5px;font-weight:600;white-space:nowrap;}
  .ui-progress .up-track{flex:1;min-width:30px;height:8px;background:#E6E8EA;border-radius:4px;overflow:hidden;}
  .ui-progress .up-fill{display:block;height:100%;width:0;background:var(--pass,#1E7A3D);transition:width .25s;}
  .ui-progress .up-next{font-family:inherit;font-size:13px;font-weight:600;padding:6px 10px;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:6px;cursor:pointer;white-space:nowrap;}
  .ui-progress.is-done .up-next{background:var(--pass,#1E7A3D);border-color:var(--pass,#1E7A3D);}
}
.ui-flash{animation:uiFlash 1.6s ease-out;}
@keyframes uiFlash{0%,35%{box-shadow:inset 0 0 0 3px var(--hazard);background:#FFF7D1;}100%{box-shadow:inset 0 0 0 3px transparent;}}
@media (prefers-reduced-motion:reduce){.ui-flash{animation:none;box-shadow:inset 0 0 0 3px var(--hazard);}}

/* laws page */
details.laws-more{margin:0 0 12px;}
details.laws-more > summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--navy-2,#123564);padding:6px 0;list-style:revert;}
details.laws-more[open] > summary{margin-bottom:6px;}
/* status column is a fixed 118px: let its pills wrap instead of running past the edge of the table */
#lawsTableWrap td[data-label="สถานะ"] .act-pill{white-space:normal;max-width:100%;box-sizing:border-box;padding:2px 6px;}
@media (max-width:900px){
  td.is-dash{display:none !important;}
}
@media (max-width:820px){
  #lawsTopics,#lawsFilterChips{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  #lawsTopics::-webkit-scrollbar,#lawsFilterChips::-webkit-scrollbar{display:none;}
  #lawsTopics > *,#lawsFilterChips > *{flex:0 0 auto;white-space:nowrap;}
}

/* team and projects page (rendered by team.js) */
.tm-preview{background:#FFF8E1;border-left:4px solid var(--hazard);padding:10px 14px;margin-bottom:14px;}
.tm-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-3px;}
.tm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;}
.tm-tabs button{font:inherit;font-size:14.5px;padding:10px 16px;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px;}
.tm-tabs button:hover{color:var(--ink);}
.tm-tabs button.on{color:var(--navy);font-weight:600;border-bottom-color:var(--hazard);}
.tm-count{font-size:12px;background:#E3E5E8;color:#5B6066;border-radius:999px;padding:0 8px;font-weight:500;}
.tm-count.warn{background:#FFF4D6;color:#7A5A00;}
.tm-grid{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:16px;align-items:start;}
.tm-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;}
.tm-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.tm-side-head .btn.small{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;}
.tm-side input[type=search]{width:100%;box-sizing:border-box;margin-bottom:10px;font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;}
.tm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.tm-chip{font:inherit;font-size:12.5px;font-weight:500;padding:3px 11px;border-radius:999px;border:1px solid transparent;cursor:pointer;}
.tm-chip.c-all{background:#EEF0F2;color:#33363A;}
.tm-chip.c-PPS{background:#E3ECF8;color:#123F7C;}
.tm-chip.c-CPN{background:#E2F2E7;color:#14572B;}
.tm-chip.c-Lotus{background:#FBEFCF;color:#6B4A00;}
.tm-chip.c-none{background:#ECEEF0;color:#555;}
.tm-chip.on.c-all{background:var(--navy);color:#fff;}
.tm-chip.on.c-PPS{background:#1B4F9F;color:#fff;}
.tm-chip.on.c-CPN{background:#1E7A3D;color:#fff;}
.tm-chip.on.c-Lotus{background:#D99A06;color:#fff;}
.tm-chip.on.c-none{background:#5B6066;color:#fff;}
.tm-list{display:flex;flex-direction:column;gap:2px;}
.tm-pr{font:inherit;text-align:left;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:none;cursor:pointer;color:var(--ink);}
.tm-pr:hover{background:#F2F3F4;}
.tm-pr.on{background:#EAF0F8;border-color:#B8CBE6;}
.tm-pr.off{opacity:.62;}
.tm-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.tm-pt{display:flex;flex-direction:column;min-width:0;flex:1;}
.tm-pt b{font-size:14px;font-weight:600;overflow-wrap:anywhere;}
.tm-pt small{font-size:12px;color:var(--muted);}
.tm-warn{color:#B07A00;display:flex;}
.tm-empty,.tm-none{color:var(--muted);font-size:13.5px;padding:10px 4px;}
.tm-detail{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:140px;}
.tm-bar{height:4px;}
.tm-dbody{padding:16px 18px 18px;}
.tm-dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.tm-dt{min-width:0;flex:1;}
.tm-name{margin:0;font-size:18px;font-weight:600;overflow-wrap:anywhere;}
.tm-rn{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.tm-rn input{flex:1 1 220px;min-width:0;}
.tm-meta{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap;}
.tm-muted{font-size:12.5px;color:var(--muted);}
.tm-stdsel{width:auto;padding:4px 28px 4px 10px;font-size:13px;}
.tm-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;white-space:nowrap;background:#EEF0F2;color:#33363A;}
.tm-pill.s-PPS{background:#E3ECF8;color:#123F7C;}
.tm-pill.s-CPN{background:#E2F2E7;color:#14572B;}
.tm-pill.s-Lotus{background:#FBEFCF;color:#6B4A00;}
.tm-pill.s-ok{background:#E2F2E7;color:#14572B;}
.tm-pill.s-off{background:#ECEEF0;color:#555;}
.tm-pill.r-lead,.tm-pill.r-admin{background:#E3ECF8;color:#123F7C;}
.tm-pill.r-member{background:#E2F2E7;color:#14572B;}
.tm-pill.r-viewer,.tm-pill.r-executive{background:#EFEAF9;color:#4B3590;}
.tm-pill.r-contractor{background:#DDF1EA;color:#0B5B43;}
.tm-acts{display:flex;gap:6px;flex:0 0 auto;}
.tm-ib{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;padding:0;}
.tm-ib:hover{background:#F2F3F4;}
.tm-ib.danger:hover{background:#FDECEA;color:#8A1C1C;border-color:#F3B8B3;}
.tm-ib.locked{opacity:.5;}
.tm-alert{display:flex;gap:10px;align-items:center;background:#FFF4D6;border:1px solid #F0D98A;border-radius:10px;padding:10px 12px;margin-top:14px;color:#7A5A00;font-size:13.5px;}
.tm-sec{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin:16px 0 2px;}
.tm-sec i{flex:1;height:1px;background:var(--line);}
.tm-mrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #ECEEF0;flex-wrap:wrap;}
.tm-sec + .tm-mrow{border-top:0;}
.tm-av{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;flex:0 0 auto;background:#EEF0F2;color:#33363A;}
.tm-av.r-lead,.tm-av.r-admin{background:#0B2545;color:#FFC400;}
.tm-av.r-member{background:#E2F2E7;color:#14572B;}
.tm-av.r-viewer,.tm-av.r-executive{background:#EFEAF9;color:#4B3590;}
.tm-av.r-contractor{background:#DDF1EA;color:#0B5B43;}
.tm-mi{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;}
.tm-mi b{font-size:14px;font-weight:600;overflow-wrap:anywhere;}
.tm-mi small{font-size:12px;color:var(--muted);overflow-wrap:anywhere;}
.tm-ra{display:flex;gap:6px;align-items:center;margin-left:auto;}
.tm-ra .btn.small{padding:6px 10px;font-size:12.5px;box-shadow:none;}
.tm-add{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;}
.tm-add-t{font-size:13px;color:var(--muted);margin-bottom:8px;}
.tm-add textarea{width:100%;box-sizing:border-box;margin-bottom:8px;}
.tm-add-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tm-add-row .btn{display:inline-flex;align-items:center;gap:6px;}
.tm-con{flex:1 1 200px;min-width:0;}
.tm-con input{width:100%;box-sizing:border-box;}
.tm-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff;flex-wrap:wrap;}
.tm-seg button{font:inherit;font-size:13px;padding:7px 12px;border:0;border-left:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;}
.tm-seg button:first-child{border-left:0;}
.tm-seg button.on{background:var(--navy);color:#fff;}
.tm-cf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;}
.tm-cf .tm-wide{grid-column:1 / -1;}
.tm-cf input,.tm-cf select,.tm-cf textarea{width:100%;box-sizing:border-box;}
.tm-cfa{display:flex;gap:8px;margin-top:14px;}
.tm-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.tm-sum > div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;}
.tm-sum small{font-size:12.5px;color:var(--muted);}
.tm-sum b{font-size:22px;font-weight:600;}
.tm-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 18px 18px;}
.tm-hint{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);background:#F2F3F4;border-radius:8px;padding:8px 12px;margin:6px 0 0;}
.tm-list-admins .tm-mrow:first-child{border-top:0;}
@media (max-width:820px){
  .tm-grid{grid-template-columns:minmax(0,1fr);}
  .tm-list{max-height:300px;overflow-y:auto;}
  .tm-cf{grid-template-columns:minmax(0,1fr);}
  .tm-ra{margin-left:0;width:100%;justify-content:flex-end;}
  .tm-dbody{padding:14px;}
}