*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;background:#f6f3ed;color:#2a2a26}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}aside{background:linear-gradient(#0f3d2e,#154c39);color:#fff;padding:20px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:10px;align-items:center;margin-bottom:14px}.logo{width:46px;height:46px;border:2px solid #d3b07a;border-radius:50%;display:grid;place-items:center;color:#d3b07a;font-weight:800}.brand small{display:block;opacity:.75}aside button{border:0;background:transparent;color:#fff;text-align:left;padding:12px;border-radius:10px;font-size:14px}aside button:hover{background:rgba(255,255,255,.1)}main{min-width:0}header{height:76px;background:#fff;border-bottom:1px solid #e5ded2;padding:12px 22px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}header h1{margin:0;font-size:22px}header small{color:#777}#menuBtn{display:none;border:0;background:none;font-size:22px}#addBtn{margin-left:auto;border:0;background:#0f3d2e;color:#fff;padding:11px 16px;border-radius:10px}.view{display:none;padding:22px}.view.active{display:block}.filters{display:grid;grid-template-columns:260px 260px;justify-content:space-between;gap:10px;margin-bottom:14px}select,input{padding:11px;border:1px solid #ddd2c3;border-radius:10px;background:#fff;width:100%}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpis>div,article,.cards>div{background:#fff;border:1px solid #e8e0d4;border-radius:16px;padding:16px;box-shadow:0 6px 18px rgba(50,40,20,.05)}.kpis span,.kpis small{display:block;color:#776f64}.kpis b{display:block;font-size:24px;color:#0f5137;margin:8px 0}.bad{color:#b3261e!important}.dashgrid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:14px;margin-top:14px}.dashgrid h3,article h3{margin-top:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cards button,.reportgrid button{margin-top:10px;padding:10px 12px;border:0;border-radius:9px;background:#0f3d2e;color:#fff}.reportgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reportgrid button{margin:0;background:#fff;color:#0f3d2e;border:1px solid #d9d1c4}.bottom{display:none}dialog{border:0;border-radius:16px;padding:18px;width:min(92vw,480px)}.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quickgrid button{padding:14px;border:1px solid #ddd2c3;border-radius:10px;background:#fff}
@media(max-width:1199px){.app{grid-template-columns:84px 1fr}aside{padding:16px 10px}.brand>div:last-child,aside button{font-size:0}.brand{justify-content:center}.logo{margin:auto}aside button::first-letter{font-size:20px}.kpis{grid-template-columns:repeat(2,1fr)}.dashgrid{grid-template-columns:1fr 1fr}.dashgrid article:last-child{grid-column:1/-1}.cards{grid-template-columns:repeat(2,1fr)}.reportgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}.app{display:block}aside{position:fixed;left:-270px;width:255px;z-index:30;transition:.2s;padding:20px}.brand{justify-content:flex-start}.brand>div:last-child{display:block}.brand>div:last-child b,.brand>div:last-child small{font-size:14px}aside button{font-size:14px}.open{left:0}#overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}#menuBtn{display:block}header{padding:10px 14px}header small{display:none}#addBtn{display:none}.view{padding:14px}.filters{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr;gap:9px}.kpis>div{padding:13px}.kpis b{font-size:21px}.dashgrid{grid-template-columns:1fr}.dashgrid article:last-child{grid-column:auto}.cards{grid-template-columns:1fr}.reportgrid{grid-template-columns:1fr}.bottom{display:grid;position:fixed;left:0;right:0;bottom:0;height:calc(72px + env(safe-area-inset-bottom));padding:6px 4px calc(6px + env(safe-area-inset-bottom));grid-template-columns:repeat(7,1fr);background:rgba(255,255,255,.97);border-top:1px solid #e5ded2;z-index:20}.bottom button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6c655b;font-size:18px}.bottom small{font-size:9px;white-space:nowrap}.bottom #quick{color:#fff;background:#0f3d2e;width:48px;height:48px;border-radius:50%;align-self:start;justify-self:center;margin-top:-15px}.bottom #quick small{color:#6c655b;position:absolute;margin-top:66px}}

.brand img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:50%;padding:4px}.toplogo{display:none;width:150px;max-height:50px;object-fit:contain}.hero{height:310px;border-radius:22px;overflow:hidden;position:relative;margin-bottom:20px;box-shadow:0 18px 40px rgba(40,30,18,.16)}.hero>img{width:100%;height:100%;object-fit:cover}.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,14,.82),rgba(8,20,14,.28) 58%,rgba(8,20,14,.03))}.heroText{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:#fff;max-width:430px}.heroText span{font-size:20px}.heroText h2{font-size:38px;margin:4px 0}.heroText p{font-size:20px;margin:0 0 14px}.heroText blockquote{margin:0 0 18px;line-height:1.5}.heroText button{border:0;background:#0f6245;color:#fff;padding:12px 18px;border-radius:10px}.overviewTitle{margin:0 0 12px}.kpis>div{transition:.2s}.kpis>div:hover{transform:translateY(-2px)}

@media(max-width:767px){.toplogo{display:block;margin:auto}.headtitle{display:none}.hero{height:360px}.heroText{left:18px;right:18px;top:auto;bottom:24px;transform:none}.heroText h2{font-size:32px}.heroText p{font-size:18px}.heroText blockquote{font-size:14px}.bottom{grid-template-columns:repeat(5,1fr)!important}.bottom #quick{width:54px;height:54px}.bottom #quick small{margin-top:76px}.dashgrid article:first-child{display:none}}
/* v3.1 premium refinements */
.heroFilters{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;z-index:3}.heroFilters select{width:auto;min-width:210px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.34)}.heroFilters option{color:#222}.heroAction{display:flex;gap:10px;align-items:center}.heroAction span{background:rgba(255,255,255,.17);padding:8px 10px;border-radius:999px;font-size:12px}.sectionHead{display:flex;align-items:center;justify-content:space-between}.sectionHead button{border:0;background:none;color:#0f5137}.kpis>div{position:relative}.kpis i{width:34px;height:34px;border-radius:10px;background:#f3eee6;display:grid;place-items:center;color:#84643b;font-style:normal;margin-bottom:8px}.kpis .alertIcon{background:#fff0eb;color:#c52f28}.followPanel{padding:16px}.panelTitle{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #eee7dd;padding-bottom:10px}.panelTitle small{color:#777}.taskline{display:flex;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #eee7dd}.taskline>span{width:10px;height:10px;border-radius:50%;background:#3c9b68}.taskline.urgent>span{background:#d93b32}.taskline.wait>span{background:#e59a3a}.taskline div{display:grid}.taskline small{color:#777}.taskline em{margin-left:auto;background:#e7f3e9;color:#2b6b43;padding:5px 8px;border-radius:999px;font-size:11px;font-style:normal}.taskline.urgent em{background:#fde9e6;color:#b83229}.taskline.wait em{background:#fff0df;color:#a96617}.pageHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.pageHead h2{margin:0}.pageHead p{margin:3px 0;color:#777}.primary{border:0;background:#0d513a;color:#fff;padding:11px 15px;border-radius:10px}.countCard,.profileCard{background:#fff;border:1px solid #e8e0d4;border-radius:18px;padding:18px;box-shadow:0 8px 20px rgba(50,40,25,.05);max-width:760px}.countCard h3{margin-bottom:4px}.countCard p{color:#777}.countStats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.countStats div{background:#faf8f4;padding:14px;border-radius:14px;text-align:center}.countStats span,.countStats b{display:block}.countStats b{font-size:26px}.progress{height:8px;background:#ebe6de;border-radius:999px;overflow:hidden;margin:12px 0}.progress span{display:block;width:83%;height:100%;background:#0d513a}.countBtns{display:flex;gap:8px;margin-top:14px}.countBtns button{padding:10px 13px;border-radius:10px;border:1px solid #ded5c8;background:#fff}.countBtns .primary{background:#0d513a;color:#fff;border-color:#0d513a}.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:14px}.tabs button{white-space:nowrap;border:1px solid #ded5c8;background:#fff;border-radius:999px;padding:8px 12px}.tabs button.active{background:#0d513a;color:#fff}.eventList{display:grid;gap:10px}.eventList article{background:#fff;border:1px solid #e8e0d4;border-radius:16px;padding:15px;display:flex;gap:12px;align-items:center}.eventList i{width:44px;height:44px;border-radius:12px;background:#e8f5ec;color:#2b6b43;display:grid;place-items:center;font-style:normal}.eventList i.orange{background:#fff0df;color:#a96617}.eventList div{display:grid}.eventList p{margin:4px 0;color:#777}.eventList span{margin-left:auto;background:#e7f3e9;color:#2b6b43;padding:5px 8px;border-radius:999px;font-size:11px}.eventList .orangeText{background:#fff0df;color:#a96617}.profileCard{text-align:center;margin:auto}.profileAvatar{width:82px;height:82px;border-radius:50%;background:#d7b782;color:#0c3a2c;display:grid;place-items:center;font-weight:800;font-size:24px;margin:auto}.profileStats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.profileStats div{background:#faf8f4;padding:12px;border-radius:14px}.profileStats b,.profileStats span{display:block}.profileCard>button{width:100%;padding:13px;margin-top:8px;border:1px solid #e8e0d4;background:#fff;border-radius:12px}
@media(max-width:767px){.filters{display:none!important}.heroFilters{top:12px;left:12px;right:12px}.heroFilters select{min-width:0;width:50%;font-size:12px}.heroAction{align-items:flex-start;flex-direction:column}.countBtns{display:grid}.pageHead{align-items:flex-start}.pageHead .primary{white-space:nowrap}.eventList article{align-items:flex-start}.eventList span{white-space:nowrap}.profileStats{grid-template-columns:1fr 1fr 1fr}}

/* v3.2 cleaner dashboard */
.hero-content{bottom:34px}.hero-content blockquote{margin-bottom:0}.filter-dialog{width:min(94vw,560px);padding:0;overflow:hidden}.filter-sheet{padding:20px;display:grid;gap:14px}.filter-sheet .sheet-head{margin-bottom:2px}.filter-sheet .sheet-head h3{margin:0}.filter-sheet .sheet-head p{margin:4px 0 0;color:#777065;font-size:13px}.filter-sheet label{display:grid;gap:6px;font-size:13px;font-weight:600;color:#4e4a43}.filter-sheet select,.filter-sheet input{width:100%;padding:12px;border:1px solid #ded5c8;border-radius:10px;background:#fff}.date-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{width:100%}
@media(max-width:767px){.header-action{margin-left:auto}.bell{margin-left:0}.filter-dialog{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;margin:0;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}.filter-sheet{padding:20px 16px 22px}.date-range{grid-template-columns:1fr}.hero{height:350px}.hero-content{bottom:22px}}

/* v3.3 verified filter relocation */
.heroFilters,.heroAction{display:none!important}
.headerFilter{margin-left:auto;border:1px solid #d9d1c5;background:#fff;color:#0f5137;border-radius:10px;padding:9px 12px;display:flex;gap:6px;align-items:center;font-weight:600}
.filterDialog{width:min(94vw,560px);border:0;border-radius:20px;padding:0;overflow:hidden}
.filterDialog::backdrop{background:rgba(10,31,23,.48);backdrop-filter:blur(2px)}
.filterSheet{padding:20px;display:grid;gap:14px;background:#fff}
.filterHead{display:flex;justify-content:space-between;align-items:flex-start}
.filterHead h3{margin:0;font-size:22px}.filterHead p{margin:4px 0 0;color:#777;font-size:13px}
.filterHead button{border:0;background:#f2eee8;border-radius:50%;width:36px;height:36px;font-size:18px}
.filterSheet label{display:grid;gap:6px;font-size:13px;font-weight:600;color:#4d4942}
.filterSheet select,.filterSheet input{width:100%;padding:12px;border:1px solid #ded5c8;border-radius:10px;background:#fff}
.dateRange{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.applyFilter{border:0;background:#0d513a;color:#fff;border-radius:10px;padding:13px;font-weight:700}
.resetFilter{border:1px solid #ded5c8;background:#fff;color:#555;border-radius:10px;padding:11px}
.heroText blockquote{margin-bottom:0}
@media(max-width:767px){
  .headerFilter{margin-left:auto;width:42px;height:42px;padding:0;justify-content:center;border-radius:50%;font-size:21px}
  .headerFilter span{display:none}
  .filterDialog{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;margin:0;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .filterSheet{padding:20px 16px 22px}.dateRange{grid-template-columns:1fr}
  .hero{height:350px}.heroText{bottom:28px}
}

.profileStats{grid-template-columns:repeat(2,1fr)!important}

/* v3.4: true mobile logo centering + clickable dashboard cards */
.kpiCard{font:inherit;color:inherit;text-align:left;width:100%;border:1px solid #e8e0d4;background:#fff;border-radius:16px;padding:16px;box-shadow:0 6px 18px rgba(50,40,20,.05);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.kpiCard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(50,40,20,.09)}
.kpiCard:focus-visible{outline:3px solid rgba(15,81,55,.25);outline-offset:2px;border-color:#0f5137}
.kpiCard span,.kpiCard small{display:block;color:#776f64}.kpiCard b{display:block;font-size:24px;color:#0f5137;margin:8px 0}.kpiCard i{width:34px;height:34px;border-radius:10px;background:#f3eee6;display:grid;place-items:center;color:#84643b;font-style:normal;margin-bottom:8px}.kpiCard .alertIcon{background:#fff0eb;color:#c52f28}
@media(max-width:767px){header{position:sticky}.toplogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;max-width:150px;pointer-events:none}#menuBtn,.headerFilter{position:relative;z-index:2}.kpiCard{padding:13px}.kpiCard b{font-size:21px}}

/* v3.5: match clean hero layout — no filters, CTA or shift badge inside hero */
.hero .heroFilters,
.hero .heroAction,
.hero .heroButton,
.hero .heroCta,
.hero .shiftBadge,
.hero [data-legacy-hero-control]{display:none!important}
@media(max-width:767px){
  .hero{height:350px}
  .heroText{left:28px;right:20px;bottom:28px;top:auto;transform:none}
  .heroText blockquote{margin-bottom:0}
}


/* v3.6: clean dashboard hero and header search/filter control */
#hero > .heroFilters,
#hero > .heroAction,
#hero > .heroButton,
#hero > .heroCta,
#hero > .shiftBadge,
#hero > [data-legacy-hero-control],
#hero > button,
#hero > select { display:none !important; }
.headerFilter svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block}
.headerFilter{min-height:42px}
@media(max-width:767px){
  .headerFilter{width:46px;height:46px;min-height:46px;border-radius:50%;padding:0;display:grid;place-items:center;background:#fff}
  .headerFilter svg{width:21px;height:21px}
}

/* v3.8: premium asset list with real thumbnails */
.assetsView{padding:22px}.assetsPanel{max-width:920px;margin:0 auto;padding:28px;border-radius:24px;background:#fff;box-shadow:0 8px 26px rgba(51,42,27,.06);border:1px solid #e8e0d4}.assetsPanel h2{margin:0 0 22px;font-size:28px}.assetSearch{height:60px;border:1px solid #d9d0c3;border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 18px;margin-bottom:28px;background:#fff}.assetSearch svg{width:24px;height:24px;fill:none;stroke:#6d665c;stroke-width:2;stroke-linecap:round}.assetSearch input{border:0!important;padding:0!important;border-radius:0!important;font-size:17px;outline:none;background:transparent}.assetSearch input::-webkit-search-cancel-button{display:none}.assetList{display:grid;gap:16px}.assetRow{width:100%;min-height:142px;border:1px solid #e3dbcf;background:#fff;border-radius:20px;padding:14px;display:grid;grid-template-columns:210px minmax(0,1fr) auto 28px;align-items:center;gap:20px;text-align:left;color:inherit;font:inherit;box-shadow:0 4px 14px rgba(50,40,20,.035);cursor:pointer}.assetRow:hover{border-color:#cbbda9;box-shadow:0 8px 22px rgba(50,40,20,.07)}.assetRow img{width:210px;height:114px;object-fit:cover;border-radius:14px;background:#f2f0ec}.assetInfo{min-width:0}.assetInfo b{display:block;font-size:21px;line-height:1.35;margin-bottom:8px}.assetInfo small{display:block;font-size:16px;color:#3f3b36}.assetRow .status{font-style:normal;border-radius:10px;padding:8px 12px;font-size:14px;white-space:nowrap}.activeStatus{background:#ecf7e9;color:#2e7c38}.maintenanceStatus{background:#fff0df;color:#d57018}.assetRow>i{font-style:normal;font-size:36px;font-weight:300;color:#4e4942}.assetEmpty{text-align:center;color:#777;padding:44px 0}.assetDetailDlg{border:0;padding:0;border-radius:22px;width:min(92vw,520px)}.assetDetailDlg::backdrop{background:rgba(10,31,23,.5);backdrop-filter:blur(3px)}.assetDetailSheet{position:relative;padding:20px;background:#fff}.assetDetailSheet>img{width:100%;height:250px;object-fit:cover;border-radius:16px;margin-bottom:18px}.detailClose{position:absolute;right:30px;top:30px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:18px}.assetDetailSheet h3{font-size:24px;margin:12px 0 18px}.assetDetailSheet .status{display:inline-block;font-style:normal;border-radius:10px;padding:7px 10px}.assetDetailSheet dl{margin:0 0 20px}.assetDetailSheet dl div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #eee8de}.assetDetailSheet dt{color:#777}.assetDetailSheet dd{margin:0;font-weight:600}.detailPrimary{width:100%;border:0;background:#0d513a;color:#fff;padding:14px;border-radius:12px;font-weight:700}
@media(max-width:767px){.assetsView{padding:24px 22px 110px}.assetsPanel{padding:24px 26px;border-radius:24px}.assetsPanel h2{font-size:27px;margin-bottom:24px}.assetSearch{height:58px;margin-bottom:28px}.assetSearch input{font-size:15px}.assetList{gap:14px}.assetRow{min-height:116px;grid-template-columns:110px minmax(0,1fr) auto 18px;gap:14px;padding:12px;border-radius:18px}.assetRow img{width:110px;height:92px;border-radius:13px}.assetInfo b{font-size:17px;margin-bottom:5px}.assetInfo small{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.assetRow .status{font-size:11px;padding:6px 8px}.assetRow>i{font-size:29px}.assetDetailDlg{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;margin:0;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}.assetDetailSheet>img{height:220px}}
@media(max-width:420px){.assetsView{padding-left:18px;padding-right:18px}.assetsPanel{padding:22px 16px}.assetRow{grid-template-columns:92px minmax(0,1fr) auto 14px;gap:10px}.assetRow img{width:92px;height:82px}.assetInfo b{font-size:16px}.assetRow .status{font-size:10px;padding:5px 6px}.assetRow>i{font-size:25px}}

/* v3.9: mobile asset cards — keep full asset name, code and location visible */
@media(max-width:767px){
  .assetRow{
    min-height:132px;
    grid-template-columns:110px minmax(0,1fr) 18px;
    grid-template-areas:
      "photo info arrow"
      "photo status arrow";
    grid-template-rows:auto auto;
    column-gap:14px;
    row-gap:8px;
    align-items:center;
  }
  .assetRow img{grid-area:photo}
  .assetInfo{grid-area:info;align-self:end;overflow:visible}
  .assetInfo b{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
    display:block;
  }
  .assetInfo small{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.35;
    word-break:break-word;
  }
  .assetRow .status{grid-area:status;justify-self:start;align-self:start}
  .assetRow>i{grid-area:arrow;align-self:center}
}
@media(max-width:420px){
  .assetRow{
    min-height:126px;
    grid-template-columns:92px minmax(0,1fr) 14px;
    grid-template-areas:
      "photo info arrow"
      "photo status arrow";
    column-gap:10px;
    row-gap:7px;
  }
  .assetInfo b{font-size:16px;line-height:1.28}
  .assetInfo small{font-size:12.5px;line-height:1.3}
}