/* Final compact activity metrics layout */
.featured-activity{grid-template-columns:300px minmax(0,1fr);min-height:0!important;height:auto;align-self:start}
.featured-thumb{align-self:start;margin:8px}
.featured-main{align-self:start;padding:15px 20px 8px}
.featured-main h3{margin:6px 0 2px;font-size:20px;font-weight:650;line-height:1.3}
.featured-time{font-size:9px;font-weight:700}
.featured-description{display:-webkit-box;margin:5px 0 7px;color:#7b8880;font-size:9px;font-weight:400;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.featured-info{margin-top:8px;gap:8px;font-size:9px;font-weight:400}
.featured-more{width:32px;height:32px;border:0!important;border-radius:8px;background:transparent!important;box-shadow:none!important;color:#438537;font-size:18px;letter-spacing:1px}
.featured-more:hover{background:#f1f8ee!important}
.featured-info,.featured-info span{color:#7d8982}
.featured-info svg,.featured-info span:last-child svg{color:#7d8982}
.featured-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 0}
.featured-metrics .featured-stat{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;min-width:0;min-height:66px;padding:8px 8px 7px;gap:6px;border-radius:10px}
.featured-metrics .featured-stat>svg{display:block;width:17px;height:17px;flex-basis:17px;margin-top:1px}
.featured-metrics .featured-stat>span{min-width:0}
.featured-metrics .featured-stat small{font-size:7px;font-weight:400;line-height:1.25;white-space:normal}
.featured-metrics .featured-stat b{font-size:17px;font-weight:650;line-height:1.1;white-space:nowrap}
.featured-metrics .featured-stat em{font-size:6px;margin-left:2px}
.featured-metrics .featured-stat progress{display:block;height:3px;margin-top:7px}
.featured-metrics .booked{order:1}
.featured-metrics .total{order:2}
.featured-metrics .assessed{order:3}
.featured-metrics .rating{order:4}
.featured-metrics .assessed progress::-webkit-progress-value{background:#76c85d}
.featured-metrics .booked{background:#f1f8ed;border-color:#e8f1e3}
.featured-metrics .booked>svg{color:#36a94b}
.featured-metrics .total{background:#eef4fc;border-color:#e4edf9}
.featured-metrics .total>svg{color:#4f86df}
.featured-metrics .total progress::-webkit-progress-value{background:#6d9be3}
.featured-metrics .assessed{background:#fff9e9;border-color:#f8efd4}
.featured-metrics .assessed>svg{color:#e1a000}
.featured-metrics .assessed progress::-webkit-progress-value{background:#e4b43c}
.featured-metrics .rating{background:#f3f8ef;border-color:#e8f0e3}
.featured-metrics .rating>svg{color:#67a949}
.rating-stars{font-size:8px;letter-spacing:0;margin-top:4px}

@media(max-width:1300px){
  .featured-activity{grid-template-columns:240px minmax(0,1fr);min-height:0!important}
  .featured-main{padding:14px 16px 7px}
  .featured-metrics .featured-stat{grid-template-columns:15px minmax(0,1fr);padding:9px 7px;gap:5px}
  .featured-metrics .featured-stat>svg{width:15px;height:15px;flex-basis:15px}
  .featured-metrics .featured-stat b{font-size:16px}
}

@media(max-width:1050px){
  .featured-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .featured-metrics .featured-stat{min-height:65px;padding:9px 11px}
  .featured-metrics .featured-stat small{font-size:8px}
  .featured-metrics .featured-stat b{font-size:18px}
}

@media(max-width:760px){
  .featured-activity{grid-template-columns:1fr;min-height:0}
  .featured-thumb{width:calc(100% - 20px);margin:10px}
  .featured-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .featured-metrics .featured-stat{min-height:64px;padding:8px}
  .featured-metrics .featured-stat:last-child{grid-column:auto}
  .featured-metrics .featured-stat b{font-size:17px}
}

/* Project overview dashboard */
.overview-dashboard{background:#fbfdfb!important;color:#18251f!important}
.overview-dashboard>:not(#overviewMount){display:none!important}
#overviewMount{display:block;width:100%;max-width:1700px;margin:0 auto;padding:22px 26px 36px}
.overview-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;z-index:5;margin-bottom:17px}
.project-picker{position:relative}.project-picker-button,.range-button,.report-button{height:44px;border:1px solid #dce8de;border-radius:10px;background:#fff;color:#385244;display:flex;align-items:center;gap:9px;padding:0 15px;font:500 13px inherit;cursor:pointer}.project-picker-button{background:#f5fbf5;min-width:270px;justify-content:flex-start}.project-picker-button svg{width:17px}.project-picker-button svg:last-child{margin-left:auto}.project-picker-button b{color:#16852c}
.app-header .header-project-picker{margin-left:18px;margin-right:auto;z-index:40}.app-header .header-project-picker .project-menu{top:48px}.app-header .header-project-picker .project-picker-button{height:42px;min-width:270px}
.project-menu{position:absolute;top:51px;left:0;width:285px;background:#fff;border:1px solid #e2e9e3;border-radius:12px;box-shadow:0 16px 34px rgba(25,58,36,.13);padding:8px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s}.project-menu.show{opacity:1;visibility:visible;transform:none}.project-menu small{display:block;padding:7px 10px;color:#8a978f}.project-option,.project-menu-action{width:100%;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:9px 10px;color:#34483d;font:500 12px inherit;cursor:pointer;text-align:left}.project-option svg{display:none;width:15px;color:#22a33b}.project-option.active{background:#f1f9f1;font-weight:700}.project-option.active svg{display:block}.project-menu-action{justify-content:flex-start;gap:8px;color:#16852c}.project-menu-action svg{width:15px}.project-menu-divider{height:1px;background:#edf1ee;margin:5px}
.overview-actions{display:flex;align-items:center;gap:14px}.overview-actions svg{width:16px}.overview-snapshot{font-size:12px;color:#718078;white-space:nowrap}.report-button{border-color:#a9d5af;color:#16852c;font-weight:700}.overview-heading{flex:1;min-width:0;margin:0}.overview-heading span{font-size:18px;font-weight:800}.overview-heading h1{font-size:20px;line-height:1.2;color:#179232;margin:4px 0}.overview-heading p{font-size:12px;color:#829087;margin:0}
body:has(.overview-dashboard #overviewMount) .app-breadcrumb{display:none!important}
.overview-card{background:#fff;border:1px solid #e1e9e3;border-radius:15px;box-shadow:0 5px 18px rgba(32,65,42,.035)}
.overview-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.kpi-card{min-height:128px;padding:16px;display:flex;gap:11px;align-items:flex-start}.kpi-icon{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#eff8ec;color:#179b32;display:grid;place-items:center}.kpi-icon svg{width:20px}.kpi-card span{display:block;font-size:11px;color:#596a60;margin-bottom:7px}.kpi-card strong{font-size:25px;line-height:1;color:#101820}.kpi-card small{font-size:10px;color:#66746b;margin-left:4px}.kpi-card em{display:block;font-size:9px;font-style:normal;color:#718078;margin-top:13px}.kpi-card em:after{content:"";display:block;height:4px;border-radius:8px;background:linear-gradient(90deg,#2e9c36 70%,#e7ece8 70%);margin-top:7px}.kpi-stars{color:#189b31;letter-spacing:2px;font-size:14px;margin-top:10px}
.overview-main-grid{display:grid;grid-template-columns:1.25fr 1fr .95fr;gap:14px;margin-top:14px}.overview-main-grid>article{min-height:292px;padding:18px}.overview-card h3{font-size:14px;margin:0 0 14px}.chart-legend{display:flex;gap:24px;font-size:10px;margin-bottom:3px}.chart-legend span:before{content:"";display:inline-block;width:18px;height:3px;margin-right:7px;vertical-align:middle}.chart-legend .green:before{background:#42a641}.chart-legend .blue:before{background:#4f79d8}.chart-card svg{width:100%;height:220px;overflow:visible}.grid-lines line{stroke:#e9eeea;stroke-width:1}.line-green,.line-blue{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.line-green{stroke:#42a641}.line-blue{stroke:#4f79d8}.month-labels{font-size:10px;fill:#748278}
.donut-content{display:flex;align-items:center;justify-content:center;gap:25px;height:220px}.donut{width:155px;height:155px;border-radius:50%;background:conic-gradient(#54a92c 0 85%,#f6b918 85% 97%,#ef5a3b 97%);display:grid;place-items:center}.donut:before{content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:#fff}.donut>div{position:relative;z-index:1;text-align:center}.donut span,.donut small{display:block;font-size:10px}.donut strong{font-size:27px}.donut-content ul{list-style:none;padding:0;margin:0;font-size:10px}.donut-content li{margin:15px 0;white-space:nowrap}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.dot.complete{background:#54a92c}.dot.partial{background:#f6b918}.dot.missing{background:#ef5a3b}
.panel-title{display:flex;align-items:center;justify-content:space-between}.panel-title button{border:0;background:none;color:#18932e;font:600 10px inherit;cursor:pointer}.upcoming-row{display:grid;grid-template-columns:58px 1fr 42px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #eef2ef}.event-thumb{width:58px;height:50px;border-radius:8px;background:linear-gradient(135deg,#87ba5c,#e5b95a)}.event-2{background:linear-gradient(135deg,#8bbd68,#cfdfbc)}.event-3{background:linear-gradient(135deg,#86b693,#c3d7cc)}.upcoming-row b,.upcoming-row small,.upcoming-row em{display:block}.upcoming-row b{font-size:11px}.upcoming-row small,.upcoming-row em{font-size:9px;color:#6f7d75;font-style:normal}.upcoming-row time{border:1px solid #d7e8d8;border-radius:8px;text-align:center;padding:6px 2px;color:#179332;font:bold 18px inherit}.upcoming-row time small{color:#179332}
.overview-bottom-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:14px}.overview-bottom-grid>article{padding:18px}.recent-table{font-size:10px}.recent-head,.recent-row{display:grid;grid-template-columns:1.45fr .9fr .65fr .9fr .65fr;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #edf1ee}.recent-head{font-weight:700;color:#718078}.recent-name{font-weight:700}.recent-row span:last-child{color:#178c2e}.score-row{display:grid;grid-template-columns:1.2fr 1fr 70px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #edf1ee;font-size:10px}.score-row span{display:flex;align-items:center;gap:8px}.score-row svg{width:14px;color:#179b31}.score-row i{height:4px;background:#edf0ed;border-radius:5px;overflow:hidden}.score-row i b{display:block;height:100%;background:#239c35}.score-row strong{text-align:right}
@media(max-width:1350px){.overview-main-grid{grid-template-columns:1fr 1fr}.upcoming-card{grid-column:1/-1}.upcoming-card{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upcoming-card .panel-title{grid-column:1/-1}.upcoming-row{border:1px solid #eef2ef;border-radius:10px;padding:10px}}
@media(max-width:1000px){#overviewMount{padding:18px}.overview-main-grid,.overview-bottom-grid{grid-template-columns:1fr}.upcoming-card{display:block}.overview-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){#overviewMount{padding:14px 12px}.overview-toolbar{align-items:stretch;flex-direction:column;gap:12px}.overview-actions{align-items:stretch;flex-direction:column;gap:8px}.report-button{width:100%}.project-menu{width:100%}.app-header .header-project-picker{margin-left:auto;margin-right:8px}.app-header .header-project-picker .project-picker-button{min-width:44px;width:44px;padding:0 12px}.app-header .header-project-picker .project-picker-button span,.app-header .header-project-picker .project-picker-button svg:last-child{display:none}.overview-snapshot{text-align:right}.overview-heading{margin:0}.overview-heading span{font-size:16px}.overview-heading h1{font-size:18px}.overview-kpis{gap:9px}.kpi-card{padding:14px;min-height:120px}.kpi-icon{width:38px;height:38px;flex-basis:38px}.kpi-card strong{font-size:22px}.donut-content{gap:14px}.recent-card{overflow-x:auto}.recent-table{min-width:620px}}
@media(max-width:480px){.overview-kpis{grid-template-columns:1fr}.kpi-card{min-height:100px}.overview-main-grid>article{padding:14px}.donut-content{flex-direction:column;height:auto}.donut-card{padding-bottom:24px!important}.score-row{grid-template-columns:1fr 90px 55px}}

/* System-centered dashboard */
#overviewMount{max-width:none;padding:0}.system-dashboard{min-height:calc(100vh - 94px);padding:28px 34px 48px;background:#f7f9f7;color:#24342a}.sd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}.sd-eyebrow{color:#47934c;font-size:8px;font-weight:900;letter-spacing:1.5px}.sd-head h1{margin:4px 0 4px;font-size:25px;letter-spacing:-.4px}.sd-head p{margin:0;color:#7a887f;font-size:10px}.sd-head-actions{display:flex;gap:9px}.sd-head-actions button{height:42px;padding:0 14px;display:flex;align-items:center;gap:7px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer}.sd-head-actions svg{width:15px}.sd-primary{border:1px solid #28a841;background:#28a841;color:#fff}.sd-secondary{border:1px solid #dbe5dd;background:#fff;color:#405147}
.sd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.sd-kpis>button{min-height:116px;padding:17px;display:grid;grid-template-columns:46px 1fr;gap:12px;border:1px solid #e0e7e1;border-radius:14px;background:#fff;text-align:left;box-shadow:0 4px 14px rgba(30,54,37,.03);cursor:pointer}.sd-kpis>button:hover{border-color:#b9d8bc;transform:translateY(-1px)}.sd-kpi-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#edf7eb;color:#449b48}.sd-kpi-icon.urgent{background:#fff0ee;color:#cc554d}.sd-kpi-icon svg{width:21px}.sd-kpis small{display:block;color:#708077;font-size:9px}.sd-kpis b{display:inline-block;margin-top:7px;color:#1d3025;font-size:26px;line-height:1}.sd-kpis em{margin-left:5px;color:#748279;font-size:9px;font-style:normal}.sd-kpis i{display:block;margin-top:12px;color:#718078;font-size:8px;font-style:normal}.sd-kpis i strong{color:#2f963e}.sd-kpis i.danger,.sd-kpis i.danger strong{color:#bd514b}
.sd-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(310px,.75fr);gap:14px;margin-top:14px}.sd-main,.sd-side{display:grid;align-content:start;gap:14px}.sd-card{overflow:hidden;border:1px solid #e0e7e1;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(30,54,37,.03)}.sd-card-head{min-height:66px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #e8ede9}.sd-card-head h2,.sd-card-head p{margin:0}.sd-card-head h2{font-size:14px}.sd-card-head p{margin-top:4px;color:#7a877f;font-size:9px}.sd-card-head>button{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#348f40;font-size:9px;font-weight:700;cursor:pointer}.sd-card-head>button svg{width:13px}
.sd-target-list{display:grid;grid-template-columns:1fr 1fr;gap:0}.sd-target-row{padding:16px 18px;display:grid;grid-template-columns:38px 1fr 42px;align-items:center;gap:10px;border-bottom:1px solid #edf1ee}.sd-target-row:nth-child(odd){border-right:1px solid #edf1ee}.sd-target-row:nth-last-child(-n+2){border-bottom:0}.sd-target-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eef7ec;color:#4a9a47}.sd-target-icon svg{width:17px}.sd-target-row b,.sd-target-row small{display:block}.sd-target-row b{font-size:10px}.sd-target-row small{margin-top:3px;color:#718078;font-size:8px}.sd-target-row>div>i{height:5px;display:block;margin-top:9px;overflow:hidden;border-radius:99px;background:#e9eeea}.sd-target-row>div>i span{display:block;height:100%;border-radius:inherit;background:#55a951}.sd-target-row>strong{color:#388f40;font-size:14px;text-align:right}
.sd-activity-table{padding:0 18px 10px}.sd-activity-th,.sd-activity-tr{display:grid;grid-template-columns:1.3fr 1fr 75px 105px;gap:10px;align-items:center}.sd-activity-th{padding:11px 0;color:#78867e;font-size:8px;font-weight:700}.sd-activity-tr{min-height:62px;border-top:1px solid #edf1ee;font-size:9px}.sd-activity-tr>b{font-size:10px}.sd-activity-tr>span strong,.sd-activity-tr>span small{display:block}.sd-activity-tr>span strong{font-size:9px;font-weight:500}.sd-activity-tr>span small{margin-top:3px;color:#87928b;font-size:8px}.sd-activity-tr>em{justify-self:start;padding:6px 8px;border-radius:8px;font-size:8px;font-style:normal;font-weight:700}.sd-activity-tr>em.done{background:#e7f5e5;color:#358f3e}.sd-activity-tr>em.active{background:#e7eefb;color:#4673b6}.sd-activity-tr>em.closed{background:#fff1d9;color:#a16e1e}
.sd-assessment-body{display:grid;grid-template-columns:1fr 165px;gap:18px;padding:16px 18px}.sd-positive{display:flex;align-items:center;gap:5px;color:#338f40;font-size:9px;font-weight:700}.sd-positive svg{width:14px}.sd-chart{position:relative;padding:0 5px 0 34px}.sd-chart svg{width:100%;height:190px;overflow:visible}.sd-chart .sd-grid line{stroke:#e4eae5;stroke-width:1;stroke-dasharray:4 5}.sd-chart path{fill:none;stroke:#42a34e;stroke-width:3;stroke-linecap:round}.sd-chart circle{fill:#42a34e;stroke:#fff;stroke-width:2}.sd-chart text{fill:#348f40;font-size:9px;font-weight:800}.sd-chart-y{position:absolute;left:0;top:2px;bottom:22px;display:flex;flex-direction:column;justify-content:space-between;color:#89958d;font-size:8px}.sd-chart-x{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-8px;color:#75827a;font-size:8px;text-align:center}.sd-assessment-summary{display:grid;align-content:center;gap:9px}.sd-assessment-summary>span{padding:12px;border-left:3px solid #50a558;background:#f7faf7;border-radius:4px 9px 9px 4px}.sd-assessment-summary small{display:block;color:#748179;font-size:8px}.sd-assessment-summary b{font-size:18px}.sd-assessment-summary em{margin-left:4px;color:#748179;font-size:8px;font-style:normal}
.sd-alert-list{padding:8px}.sd-alert-list button{width:100%;padding:11px 9px;display:grid;grid-template-columns:34px 34px 1fr 15px;align-items:center;gap:8px;border:0;border-radius:10px;background:#fff;text-align:left;cursor:pointer}.sd-alert-list button:hover{background:#f7faf7}.sd-alert-list button>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px}.sd-alert-list button>span svg{width:16px}.sd-alert-list button>b{font-size:18px}.sd-alert-list button strong,.sd-alert-list button small{display:block}.sd-alert-list button strong{font-size:9px}.sd-alert-list button small{margin-top:3px;color:#7d8981;font-size:8px}.sd-alert-list button>svg{width:14px;color:#87928b}.sd-alert-list .red>span{background:#fff0ee;color:#c8514b}.sd-alert-list .red>b{color:#b94c47}.sd-alert-list .amber>span{background:#fff5de;color:#b97d1b}.sd-alert-list .amber>b{color:#a96f17}.sd-alert-list .blue>span{background:#eaf1fb;color:#4a76b5}.sd-alert-list .blue>b{color:#416da9}
.sd-followup-list{padding:14px 17px}.sd-followup-list>div{display:grid;grid-template-columns:85px 1fr 35px;align-items:center;gap:8px;padding:9px 0}.sd-followup-list span b,.sd-followup-list span small{display:block}.sd-followup-list span b{font-size:9px}.sd-followup-list span small{color:#829087;font-size:8px}.sd-followup-list i{height:6px;overflow:hidden;border-radius:99px;background:#e8ede9}.sd-followup-list i strong{display:block;height:100%;border-radius:inherit;background:#50a657}.sd-followup-list em{color:#388f40;font-size:9px;font-style:normal;font-weight:700;text-align:right}.sd-wide-link{width:calc(100% - 34px);height:38px;margin:0 17px 17px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #b9dabb;border-radius:9px;background:#fff;color:#358f41;font-size:9px;font-weight:700;cursor:pointer}.sd-wide-link svg{width:13px}
.sd-system-flow{padding:18px 14px;display:flex;align-items:center;justify-content:space-between;gap:5px}.sd-system-flow>span{min-width:52px;text-align:center}.sd-system-flow>span svg{width:17px;color:#529a50}.sd-system-flow b,.sd-system-flow small{display:block}.sd-system-flow b{margin-top:5px;font-size:14px}.sd-system-flow small{color:#7c8981;font-size:7px}.sd-system-flow>i svg{width:12px;color:#a5afa8}
@media(max-width:1100px){.sd-layout{grid-template-columns:1fr}.sd-side{grid-template-columns:1fr 1fr}.sd-system-card{grid-column:1/-1}}
@media(max-width:760px){.system-dashboard{padding:20px 14px 40px}.sd-head{align-items:flex-start;flex-direction:column}.sd-head-actions{width:100%}.sd-head-actions button{flex:1;justify-content:center}.sd-kpis{grid-template-columns:1fr 1fr}.sd-target-list{grid-template-columns:1fr}.sd-target-row:nth-child(odd){border-right:0}.sd-target-row:nth-last-child(2){border-bottom:1px solid #edf1ee}.sd-assessment-body{grid-template-columns:1fr}.sd-assessment-summary{grid-template-columns:repeat(3,1fr)}.sd-side{grid-template-columns:1fr}.sd-system-card{grid-column:auto}.sd-activity-table{overflow-x:auto}.sd-activity-th,.sd-activity-tr{min-width:620px}}
@media(max-width:480px){.sd-head h1{font-size:21px}.sd-kpis{grid-template-columns:1fr}.sd-kpis>button{min-height:100px}.sd-assessment-summary{grid-template-columns:1fr}.sd-card-head{align-items:flex-start}.sd-card-head>button,.sd-positive{white-space:nowrap}}

/* Target-group table: keep labels and interactions specific to participant data. */
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .setting-status{gap:0!important}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .setting-status i{display:none!important}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .usage-count.in-use{
  color:#52635a!important;
  font-weight:500!important;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:#b9c8bd;
  text-underline-offset:3px;
}

/* Compact master-data form without making the touch targets too small. */
.setting-modal-box form{gap:7px!important}
.setting-modal-box form>label{gap:3px!important}
.setting-modal-box .setting-form-grid{gap:8px!important}
.setting-modal-box input,.setting-modal-box select{min-height:40px!important}
.setting-modal-box textarea{min-height:66px!important;max-height:86px!important}
.setting-modal-box .setting-form-actions{margin-top:1px!important;padding-top:7px!important}

/* Prioritize activity content when browser zoom reduces available width */
@media(max-width:1600px) and (min-width:1051px){
  .activity-workspace{grid-template-columns:minmax(0,1fr) clamp(230px,18vw,270px);gap:16px}
  .mini-calendar,.next-activity,.month-summary{padding:15px}
  .calendar-head{margin-bottom:11px}
  .calendar-head b{font-size:14px}
  .calendar-head button{width:32px;height:32px}
  .days i{height:31px;font-size:9px}
  .week span{font-size:8px}
  .activity-side{gap:12px}
}

@media(max-width:1250px) and (min-width:1051px){
  .activity-workspace{grid-template-columns:minmax(0,1fr) 210px;gap:12px}
  .mini-calendar,.next-activity,.month-summary{padding:12px}
  .calendar-head b{font-size:13px}
  .calendar-head button{width:28px;height:28px}
  .days i{height:27px;font-size:8px}
  .activity-side h3{font-size:13px}
  .month-summary .summary-grid>div{padding:9px;min-height:78px}
  .month-summary .summary-grid b{font-size:16px}
}

/* Unified compact card layout */
.featured-activity{grid-template-columns:250px minmax(0,1fr);align-items:stretch;padding:8px!important;gap:0;border-radius:16px}
.featured-thumb{width:100%;height:220px;min-height:220px;margin:0;align-self:stretch;aspect-ratio:auto;background-size:contain;background-position:center;border:0;border-radius:12px;box-shadow:none}
.featured-activity:hover .featured-thumb{background-size:contain;filter:none}
.featured-main{align-self:stretch;justify-content:center;padding:10px 16px 6px}
.featured-time{font-size:8px}
.featured-main h3{margin:4px 0 1px;font-size:19px}
.featured-info{margin-top:7px;padding-bottom:2px}
.featured-info span{padding-right:9px}
.featured-metrics{margin-top:8px;gap:6px}
.featured-metrics .featured-stat{min-height:61px;padding:7px 8px 6px}
.featured-metrics .featured-stat b{font-size:16px}
.featured-metrics .featured-stat progress{margin-top:5px}
.featured-more{right:10px;top:9px}

@media(max-width:1300px){
  .featured-activity{grid-template-columns:210px minmax(0,1fr)}
  .featured-thumb{height:190px;min-height:190px}
  .featured-main{padding:8px 13px 5px}
  .featured-main h3{font-size:18px}
  .featured-info{gap:5px;font-size:8px}
  .featured-metrics .featured-stat{min-height:58px;padding:6px}
  .featured-metrics .featured-stat b{font-size:15px}
}

@media(max-width:760px){
  .featured-activity{grid-template-columns:1fr;padding:8px!important}
  .featured-thumb{width:100%;height:auto;min-height:0;margin:0;aspect-ratio:3/2}
  .featured-main{padding:13px 10px 6px}
  .featured-metrics .featured-stat{min-height:62px}
}

/* Settings master data extensions */
.nav-settings-group.open .nav-settings-submenu{max-height:300px}
.setting-dynamic-fields{display:grid;gap:13px}
.map-picker-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;margin-top:12px;border:1px solid #cfe0c9;border-radius:11px;background:#f5faf2;color:#4d8c38;font:inherit;font-weight:700;cursor:pointer}
.map-picker-button svg{width:18px;height:18px}
.map-picker-preview{display:none;position:relative;place-items:center;align-content:center;gap:6px;min-height:170px;margin-top:10px;overflow:hidden;border:1px solid #dbe6d7;border-radius:12px;background-color:#eef5eb;background-image:linear-gradient(rgba(112,153,102,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(112,153,102,.12) 1px,transparent 1px);background-size:26px 26px;color:#5d765f;text-align:center;cursor:crosshair}
.map-picker-preview.open{display:grid}
.map-picker-preview:before,.map-picker-preview:after{content:"";position:absolute;background:#b9d0b4;opacity:.6}.map-picker-preview:before{width:130%;height:2px;transform:rotate(-15deg)}.map-picker-preview:after{width:2px;height:130%;transform:rotate(22deg)}
.map-picker-preview>*{position:relative;z-index:1}.map-picker-preview svg{width:28px;height:28px;color:#58a33d}.map-picker-preview span{font-size:12px}

/* User and role management */
.settings-page{padding-top:26px!important}
.settings-table-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.settings-table-tools .settings-search{min-width:290px}
.settings-table-tools .settings-add{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 17px;border-radius:10px}
.settings-table-tools .settings-add svg{width:17px;height:17px}
.masked-password{color:#7c8981;font-size:16px;letter-spacing:2px}
.role-pill{display:inline-flex;padding:5px 9px;border:1px solid #dce8d8;border-radius:999px;background:#f3f8f1;color:#417e36;font-size:11px;font-weight:700;white-space:nowrap}
.role-description{display:block;margin-top:3px;color:#88938d;font-size:10px;font-weight:400}
.permission-tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:390px}
.permission-tags span,.permission-tags em{padding:4px 7px;border-radius:6px;background:#f2f6f2;color:#627068;font-size:9px;font-style:normal;white-space:nowrap}
.permission-tags em{background:#eaf6e6;color:#408436;font-weight:700}
.setting-row-actions.user-actions{flex-wrap:nowrap}
.icon-action.suspend{color:#c47a2a}.icon-action.resume{color:#39953a}
.password-hint{display:block;margin-top:-3px;color:#829087;font-size:10px}
.permission-field>span{font-size:12px;font-weight:700;color:#334239}
.permission-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.permission-checklist label{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid #dde8d9;border-radius:9px;background:#fafcf9;cursor:pointer}
.permission-checklist input{width:16px;height:16px;accent-color:#58b83e}
.permission-checklist span{font-size:11px;color:#45544b}
.nav-settings-group.open .nav-settings-submenu{max-height:360px}

@media(max-width:900px){
  .settings-table-head{align-items:stretch!important;gap:14px}.settings-table-tools{width:100%;margin-left:0}.settings-table-tools .settings-search{min-width:0;flex:1}.permission-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .settings-table-tools{display:grid;grid-template-columns:1fr}.settings-table-tools .settings-add{justify-content:center}.permission-checklist{grid-template-columns:1fr}
}

/* Shared application shell — clean navigation and header */
:root{--shell-sidebar:210px;--shell-header:68px;--shell-line:#e8ede9;--shell-ink:#17231d;--shell-muted:#738079;--shell-green:#59b83c;--shell-green-soft:#edf8e9}
body{background:#fff;color:var(--shell-ink)}
.app-shell{display:grid!important;grid-template-columns:var(--shell-sidebar) minmax(0,1fr)!important;min-height:100vh;background:#fff}
.app-shell>main{min-width:0;margin:0!important;padding:0!important;background:#fff}
.sidebar{position:sticky!important;inset:0 auto auto 0!important;z-index:40;width:var(--shell-sidebar)!important;height:100vh;padding:0 14px 16px!important;overflow:hidden auto;border-right:1px solid var(--shell-line);background:#fff;box-shadow:none!important;transition:width .22s ease,transform .22s ease}
.sidebar .brand{position:relative;display:flex;align-items:center;min-height:94px;padding:0;border-bottom:0!important;overflow:hidden}
.wellness-logo{position:absolute;left:-5px;top:-39px;display:block!important;width:178px!important;height:178px!important;max-width:none!important;max-height:none!important;object-fit:contain;object-position:center;transform:none!important}
.sidebar-collapse{right:7px!important;top:30px!important;width:30px!important;height:30px!important;border:1px solid #dfe7e0!important;border-radius:8px!important;background:#fff!important;color:#617068!important;font-size:0!important;box-shadow:none!important}
.sidebar-collapse:after{content:'‹';font-size:22px;line-height:1}
.sidebar nav{display:grid;gap:5px;margin-top:7px;padding-bottom:96px}
.nav-item,.nav-settings-title{display:flex!important;align-items:center!important;gap:13px!important;width:100%;min-height:46px;padding:0 14px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#38463f!important;font-size:14px!important;font-weight:560!important;text-align:left;box-shadow:none!important;transition:background .16s,color .16s}
.nav-item svg,.nav-settings-title>svg:first-child{width:19px!important;height:19px!important;stroke-width:1.8;color:#59675f!important;flex:0 0 19px}
.nav-item:hover,.nav-settings-title:hover{background:#f6f8f6!important;color:#26352d!important}
.nav-item.active{background:linear-gradient(90deg,#eaf7e6,#f1f8ee)!important;color:#2d8d25!important;font-weight:700!important}
.nav-item.active svg{color:#38a72e!important}
.nav-settings-group{margin-top:3px;padding-top:7px;border-top:1px solid #eef1ee}
.nav-settings-submenu{padding:2px 0 0 12px!important}
.nav-subitem{min-height:40px!important;padding-left:17px!important;font-size:12px!important}
.nav-subitem svg{width:16px!important;height:16px!important}

/* Compact nested navigation without pushing labels too far right. */
.nav-settings-submenu{padding-left:3px!important}
.nav-subitem{width:calc(100% - 10px)!important;margin-left:10px!important;padding-left:9px!important;column-gap:8px!important}
.nav-subitem:before{left:-4px!important}
.nav-subitem.active:after{left:-6px!important}

/* Activity-type table refinements. */
#addSetting{background:#58bd39!important;border-color:#58bd39!important;color:#fff!important;box-shadow:0 8px 18px rgba(71,166,48,.18)!important}
#addSetting:hover{background:#49aa2f!important;border-color:#49aa2f!important;box-shadow:0 10px 22px rgba(71,166,48,.25)!important}
#addSetting[data-mode="targetGroups"]{background:#22c55e!important;border-color:#22c55e!important;box-shadow:0 8px 18px rgba(34,197,94,.22)!important}
#addSetting[data-mode="targetGroups"]:hover{background:#16a34a!important;border-color:#16a34a!important;box-shadow:0 10px 22px rgba(34,197,94,.28)!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(2),#settingsTableHead[data-mode="activityTypes"] th:nth-child(6){font-size:0}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(2):after{content:"ตัวย่อ";font-size:12px}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(3){font-size:0}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(3):after{content:"ชื่อประเภทกิจกรรม";font-size:12px}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(6):after{content:"จำนวนจัดกิจกรรม";font-size:12px}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-code{padding:0;border-radius:0;background:transparent;color:#546159;font-weight:400;letter-spacing:0}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td:nth-child(3) strong{font-weight:400}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td:nth-child(3) strong{font-size:inherit!important;line-height:inherit!important;color:inherit!important}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-status{gap:0}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-status i{display:none}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .usage-count{font-weight:400!important;color:#607068;cursor:pointer;text-decoration:underline;text-decoration-color:#b9c8bd;text-underline-offset:3px}
.settings-search input{color:#69776f!important;font-size:13px!important}
.settings-search input::placeholder{color:#9aa59f!important;opacity:1}
.usage-detail-box{width:min(590px,calc(100vw - 28px));padding:22px!important}
.usage-detail-box .form-kicker{display:none!important}.usage-detail-box h2{margin:0 38px 12px 0!important;font-size:19px!important;font-weight:650!important}
.usage-detail-wrap{margin-top:10px;overflow:hidden;border:1px solid #e4ebe1;border-radius:10px}
.usage-detail-table{width:100%;min-width:0!important;border-collapse:collapse;table-layout:fixed}
.usage-detail-table th,.usage-detail-table td{padding:9px 11px;border-bottom:1px solid #edf1eb;text-align:left;font-size:11px;line-height:1.35}
.usage-detail-table th{background:#f8fbf7;color:#718078;font-weight:600}
.usage-detail-table th:first-child,.usage-detail-table td:first-child{width:70px;text-align:center}
.usage-detail-table th:last-child,.usage-detail-table td:last-child{width:145px;white-space:nowrap}
.usage-detail-table tbody tr:last-child td{border-bottom:0}.usage-empty{text-align:center!important;color:#8a9790}
.usage-pager{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:#829087;font-size:10px}.usage-pager>div{display:flex;align-items:center;gap:8px}.usage-pager b{font-weight:500;color:#5f6d65}.usage-pager button{width:28px;height:28px;border:1px solid #dfe7dc;border-radius:7px;background:#fff;color:#53635a;cursor:pointer}.usage-pager button:disabled{opacity:.35;cursor:default}
.usage-detail-box>.setting-form-actions{margin-top:10px!important;padding-top:0!important}.usage-detail-box>.setting-form-actions button{min-height:36px!important;font-size:11px!important}
.settings-table .icon-action.edit:hover{border-color:#e2b53b!important;background:#fff4c7!important;color:#9d6b00!important;box-shadow:0 4px 12px rgba(202,151,19,.18)!important}

/* Keep every settings/user table inside its content column. */
.settings-page,.settings-table-card,.settings-table-head,.table-wrap{min-width:0!important;max-width:100%!important}
.settings-table-card{width:100%!important}
.table-wrap{overflow-x:hidden!important}
.settings-table{width:100%!important;min-width:0!important;table-layout:fixed!important}
.settings-table th,.settings-table td{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
.settings-table th:nth-child(1){width:6%}
.settings-table th:nth-child(2){width:10%}
.settings-table th:nth-child(3){width:17%}
.settings-table th:nth-child(4){width:27%}
.settings-table th:nth-child(5){width:10%}
.settings-table th:nth-child(6){width:12%}
.settings-table th:nth-child(7){width:11%}
.settings-table th:nth-child(8){width:7%}
.setting-row-actions{flex-wrap:wrap;justify-content:center!important}
.settings-table .table-actions-title{text-align:center!important}
.settings-table td:last-child{padding-left:8px!important;padding-right:8px!important}
.settings-table .setting-description{max-width:none!important}

@media(max-width:1100px){
  .settings-table th,.settings-table td{padding:12px 9px!important;font-size:12px!important}
  .settings-table td strong{font-size:13px!important}
  .settings-table th:nth-child(1){width:5%}.settings-table th:nth-child(2){width:9%}.settings-table th:nth-child(3){width:17%}.settings-table th:nth-child(4){width:25%}.settings-table th:nth-child(5){width:11%}.settings-table th:nth-child(6){width:12%}.settings-table th:nth-child(7){width:12%}.settings-table th:nth-child(8){width:9%}
  .icon-action{width:30px!important;height:30px!important}
}

@media(max-width:760px){
  .table-wrap{overflow-x:auto!important;overscroll-behavior-inline:contain}
  .settings-table{min-width:760px!important}
  .settings-table-tools{width:100%!important}
}
.settings-chevron{margin-left:auto!important;width:16px!important;height:16px!important}
.sidebar-account{left:14px!important;right:14px!important;bottom:12px!important;padding:8px 0 0!important;border-top:1px solid var(--shell-line);background:#fff!important}
.account-trigger{min-height:52px!important;padding:6px!important;border-radius:10px!important}
.account-trigger .activity-avatar{width:34px!important;height:34px!important;flex:0 0 34px}
.account-copy b{font-size:11px!important}.account-copy small{font-size:9px!important}

.topbar.app-header{position:sticky!important;top:0;z-index:30;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px;width:100%;height:var(--shell-header)!important;min-height:var(--shell-header)!important;padding:0 24px!important;border-bottom:1px solid var(--shell-line)!important;background:rgba(255,255,255,.96)!important;box-shadow:none!important;backdrop-filter:blur(12px)}
.topbar .menu{display:none;width:36px;height:36px;border:1px solid var(--shell-line)!important;border-radius:9px;background:#fff!important;color:#526159!important}
.topbar .menu svg{width:19px;height:19px}
.app-breadcrumb{display:flex;align-items:center;min-width:0;gap:8px;color:#738079;font-size:12px;white-space:nowrap}
.app-breadcrumb>svg{width:14px;height:14px;color:#a0aaa4}
.app-breadcrumb strong{overflow:hidden;color:#26342d;font-weight:700;text-overflow:ellipsis}
.breadcrumb-back{display:grid;place-items:center;width:28px;height:28px;margin-right:2px;border:0;border-radius:7px;background:transparent;color:#47564e;cursor:pointer}
.breadcrumb-back:hover{background:#f2f5f2}.breadcrumb-back svg{width:16px;height:16px}
.header-account{display:flex;align-items:center;gap:16px;margin-left:auto}
.header-account{position:relative}
.header-account-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:40;width:170px;padding:6px;border:1px solid #e2e9e3;border-radius:11px;background:#fff;box-shadow:0 14px 34px rgba(31,55,37,.13);display:none}
.header-account-menu.show{display:grid}
.header-account-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:7px;background:#fff;color:#344039;font-size:11px;text-align:left;cursor:pointer}
.header-account-menu button:hover{background:#f3f8f2;color:#269743}.header-account-menu button:last-child:hover{background:#fff4f3;color:#c64b45}
.header-account-menu svg{width:15px;height:15px;flex:0 0 15px}
.header-notification{position:relative;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#35433c;cursor:pointer}
.header-notification:hover{background:#f3f6f3}.header-notification svg{width:19px;height:19px}
.header-notification span{position:absolute;right:4px;top:3px;display:grid;place-items:center;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:#e53220;color:#fff;font-size:7px;font-weight:800}
.header-profile{display:flex;align-items:center;gap:9px;padding:4px 2px;border:0;background:transparent;color:#202d26;text-align:left;cursor:pointer}
.header-profile>.activity-avatar{width:34px!important;height:34px!important;flex:0 0 34px}
.header-profile>.profile-photo:before,
.header-profile>.profile-photo:after{display:none!important}
.header-profile>.profile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 31%;border-radius:inherit}
.header-profile>span:nth-child(2){display:grid;line-height:1.25}.header-profile b{font-size:11px}.header-profile small{margin-top:2px;color:#7b8780;font-size:9px}.header-profile>svg{width:15px;height:15px;margin-left:3px}

.page{width:100%!important;max-width:none!important;margin:0!important;padding:26px clamp(22px,2.4vw,42px) 48px!important;background:#fff}
.page.active{display:block}
.activity-mode .topbar{display:flex!important}
.activity-mode #activities{padding-top:26px!important}
.page-lead{margin-top:0}
.activity-lead{margin-bottom:18px}

.sidebar.collapsed{width:76px!important;padding-inline:10px!important}
.sidebar.collapsed .brand{justify-content:center}.sidebar.collapsed .wellness-logo{left:-17px;top:-15px;width:118px!important;height:118px!important;max-height:none!important;object-position:center;clip-path:inset(0 43px 0 0)}
.sidebar.collapsed .sidebar-collapse{right:22px;top:72px;transform:translateY(-50%)}
.sidebar.collapsed .sidebar-collapse:after{content:'›'}
.sidebar.collapsed .nav-item,.sidebar.collapsed .nav-settings-title{justify-content:center;padding-inline:0!important;font-size:0!important;gap:0!important}
.sidebar.collapsed .nav-settings-submenu{display:none!important}
.sidebar.collapsed .settings-chevron{display:none}
.sidebar.collapsed .sidebar-account{left:10px!important;right:10px!important}.sidebar.collapsed .account-trigger{justify-content:center}.sidebar.collapsed .account-copy,.sidebar.collapsed .account-more{display:none!important}
.app-shell.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)!important}

@media(max-width:900px){
  :root{--shell-header:62px}
  .app-shell,.app-shell.sidebar-collapsed{display:block!important}
  .sidebar,.sidebar.collapsed{position:fixed!important;top:0!important;left:0!important;width:230px!important;transform:translateX(-102%);box-shadow:12px 0 30px rgba(31,49,38,.09)!important}
  .sidebar.open{transform:translateX(0)}
  .sidebar.collapsed .wellness-logo{left:-5px;top:-39px;width:178px!important;height:178px!important;clip-path:none}.sidebar.collapsed .nav-item,.sidebar.collapsed .nav-settings-title{justify-content:flex-start;padding:0 14px!important;font-size:14px!important;gap:13px!important}.sidebar.collapsed .settings-chevron{display:block}.sidebar.collapsed .account-copy,.sidebar.collapsed .account-more{display:block!important}
  .sidebar-collapse{display:none!important}
  .topbar.app-header{padding:0 16px!important}.topbar .menu{display:grid;place-items:center;flex:0 0 36px}
  .app-breadcrumb>span,.app-breadcrumb>svg{display:none}.breadcrumb-back{display:none}
  .header-account{gap:6px}.header-profile small,.header-profile>svg{display:none}.header-profile b{display:none}.header-profile>.activity-avatar{width:32px!important;height:32px!important;flex-basis:32px}
  .page,.activity-mode #activities{padding:20px 16px 38px!important}
}

@media(max-width:520px){
  .app-breadcrumb{font-size:11px}.header-notification{width:32px;height:32px}.topbar.app-header{gap:9px;padding-inline:12px!important}
  .page,.activity-mode #activities{padding-inline:12px!important}
}

/* Compact master-data tables while keeping every action on one line. */
.settings-table-head{padding:18px 20px!important}
.settings-table-head h3{font-size:18px!important}
.settings-table-tools .settings-search{height:40px!important}
.settings-table-tools .settings-add{min-height:40px!important;padding-inline:15px!important;font-size:13px!important}
.settings-table th{padding:11px 12px!important;font-size:11px!important;line-height:1.3!important}
.settings-table td{padding:11px 12px!important;font-size:12px!important;line-height:1.4!important}
.settings-table td strong{font-size:13px!important;font-weight:500!important}
.settings-table tbody tr{height:60px}
.setting-status{padding:5px 8px!important;font-size:11px!important}
.setting-code,.usage-count{font-size:11px!important}
.setting-row-actions,.setting-row-actions.user-actions{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-end!important;gap:5px!important;white-space:nowrap}
.icon-action{flex:0 0 30px!important;width:30px!important;height:30px!important;border-radius:8px!important}
.icon-action svg{width:14px!important;height:14px!important}
.settings-table .table-actions-title{text-align:right!important}
.settings-table th:nth-child(1){width:5%}.settings-table th:nth-child(2){width:10%}.settings-table th:nth-child(3){width:17%}.settings-table th:nth-child(4){width:27%}.settings-table th:nth-child(5){width:9%}.settings-table th:nth-child(6){width:11%}.settings-table th:nth-child(7){width:12%}.settings-table th:nth-child(8){width:9%}
#settingsTableHead[data-mode="users"] th:nth-child(1){width:4%}
#settingsTableHead[data-mode="users"] th:nth-child(2){width:10%}
#settingsTableHead[data-mode="users"] th:nth-child(3){width:15%}
#settingsTableHead[data-mode="users"] th:nth-child(4){width:10%}
#settingsTableHead[data-mode="users"] th:nth-child(5){width:11%}
#settingsTableHead[data-mode="users"] th:nth-child(6){width:9%}
#settingsTableHead[data-mode="users"] th:nth-child(7){width:19%}
#settingsTableHead[data-mode="users"] th:nth-child(8){width:22%}
#settingsTableHead[data-mode="roles"] th:nth-child(1){width:4%}
#settingsTableHead[data-mode="roles"] th:nth-child(2){width:8%}
#settingsTableHead[data-mode="roles"] th:nth-child(3){width:14%}
#settingsTableHead[data-mode="roles"] th:nth-child(4){width:28%}
#settingsTableHead[data-mode="roles"] th:nth-child(5){width:10%}
#settingsTableHead[data-mode="roles"] th:nth-child(6){width:9%}
#settingsTableHead[data-mode="roles"] th:nth-child(7){width:15%}
#settingsTableHead[data-mode="roles"] th:nth-child(8){width:12%}

@media(max-width:1100px){
  .settings-table th{padding:10px 8px!important;font-size:10px!important}
  .settings-table td{padding:10px 8px!important;font-size:11px!important}
  .settings-table td strong{font-size:12px!important}
  .icon-action{flex-basis:28px!important;width:28px!important;height:28px!important}
}

/* Dense directory-style layout inspired by business management systems. */
.settings-page{padding-top:20px!important}
.settings-table-card{border:1px solid #dfe8df!important;border-radius:12px!important;background:#fff!important;box-shadow:0 8px 24px rgba(38,70,43,.05)!important}
.settings-table-head{min-height:72px!important;padding:14px 18px!important;border-bottom:0!important;background:#fff!important}
.settings-table-head h3{margin:0!important;font-size:17px!important;font-weight:700!important}
.settings-search{width:min(330px,32vw)!important;border-radius:9px!important;background:#fbfcfb!important}
.settings-search input{height:36px!important;font-size:12px!important}
.settings-table-tools .settings-add{border-radius:9px!important;font-size:12px!important;font-weight:700!important;box-shadow:0 7px 16px rgba(73,170,47,.16)!important}
.settings-table thead{border-top:1px solid #e4ece3}
.settings-table th{height:38px!important;padding:8px 12px!important;background:#f7faf7!important;color:#748179!important;font-size:10px!important;font-weight:700!important;letter-spacing:.01em!important}
.settings-table td{height:52px!important;padding:8px 12px!important;border-top:1px solid #e7ede7!important;background:#fff!important;color:#4f5e56!important;font-size:11px!important}
.settings-table tbody tr{height:52px!important;transition:background .15s ease}
.settings-table tbody tr:hover td{background:#f8fbf7!important}
.settings-table td strong{color:#25352c!important;font-size:12px!important;font-weight:500!important}
.settings-table .row-number{color:#87938c!important}
.setting-status{padding:4px 8px!important;border-radius:7px!important}
.usage-count{font-size:11px!important}
.setting-row-actions,.setting-row-actions.user-actions{align-items:center!important}
.icon-action{border-color:#d8e3d7!important;background:#fff!important;color:#65766c!important;box-shadow:none!important}
.icon-action:hover{transform:none!important}

@media(max-width:760px){
  .settings-table-head{align-items:stretch!important;min-height:0!important;padding:14px!important}
  .settings-table-tools{gap:8px!important}
  .settings-search{width:100%!important}
  .settings-table th{background:#f7faf7!important;color:#748179!important}
}

/* Compact setting form: field names mirror the selected table. */
.setting-modal-box{width:min(600px,calc(100vw - 28px))!important;padding:24px 26px 20px!important;border-radius:18px!important}
.setting-modal-box .form-kicker,.setting-modal-box .setting-form-note{display:none!important}
.setting-modal-box h2{margin:0 0 18px!important;font-size:22px!important;line-height:1.25!important}
.setting-modal-box form{gap:13px!important}
.setting-modal-box label>span,.permission-field>span{margin-bottom:6px!important;color:#46554d!important;font-size:12px!important;font-weight:650!important}
.setting-modal-box input,.setting-modal-box select,.setting-modal-box textarea{min-height:42px!important;padding:10px 12px!important;border-radius:10px!important;font-size:13px!important}
.setting-modal-box textarea{min-height:78px!important;max-height:110px!important;resize:vertical}
.setting-modal-box .setting-form-grid{gap:12px!important}
.setting-modal-box .setting-form-actions{margin-top:3px!important;padding-top:12px!important;gap:8px!important}
.setting-modal-box .setting-form-actions button{min-height:40px!important;padding:0 17px!important;border-radius:9px!important;font-size:12px!important}
.setting-modal-box .setting-form-actions button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.setting-modal-box .setting-form-actions button svg{width:15px!important;height:15px!important;flex:0 0 15px!important}
.setting-modal-box .setting-form-actions .primary{border-color:#53b934!important;background:#53b934!important;color:#fff!important;box-shadow:0 7px 16px rgba(69,164,42,.2)!important}
.setting-modal-box .setting-form-actions .primary:hover{border-color:#45a62b!important;background:#45a62b!important}
.setting-modal-box .close{right:18px!important;top:16px!important;width:30px!important;height:30px!important;font-size:22px!important}
.setting-modal-box form{display:grid!important;gap:10px!important}
.setting-modal-box form>label{margin:0!important;gap:5px!important}
.setting-modal-box .setting-form-grid{gap:10px!important;margin:0!important}
.setting-modal-box input,.setting-modal-box select,.setting-modal-box textarea{font-weight:400!important}
.setting-modal-box input::placeholder,.setting-modal-box textarea::placeholder{color:#9aa39e!important;font-weight:300!important;opacity:1!important}
.setting-modal-box .status-select-hidden{display:none!important}
.setting-status-switch{width:100%;height:42px;padding:4px 0;border:0;border-radius:0;background:transparent;color:#758078;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left}
.setting-status-switch i{position:relative;width:34px;height:20px;flex:0 0 34px;border-radius:999px;background:#cfd8d1;transition:.2s}
.setting-status-switch i:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(25,50,32,.2);transition:.2s}
.setting-status-switch b{font-size:11px;font-weight:500}
.setting-status-switch.is-on{border:0;background:transparent;color:#168a3d}
.setting-status-switch.is-on i{background:#22c55e}
.setting-status-switch.is-on i:after{transform:translateX(14px)}

@media(max-width:560px){
  .setting-modal-box{padding:20px 17px 16px!important}
  .setting-modal-box h2{padding-right:34px;font-size:19px!important}
  .setting-modal-box .setting-form-grid{grid-template-columns:1fr!important}
}

/* Exact activity-type column labels; suppress the generic labels completely. */
#settingsTableHead[data-mode="activityTypes"] th:nth-child(2),
#settingsTableHead[data-mode="activityTypes"] th:nth-child(3),
#settingsTableHead[data-mode="activityTypes"] th:nth-child(6){font-size:0!important;color:transparent!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(2):after,
#settingsTableHead[data-mode="activityTypes"] th:nth-child(3):after,
#settingsTableHead[data-mode="activityTypes"] th:nth-child(6):after{display:block;color:#748179!important;font-size:10px!important;line-height:1.3}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(2):after{content:"ตัวย่อ"}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(3):after{content:"ประเภทกิจกรรม"}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(6):after{content:"จำนวนจัดกิจกรรม"}
#settingsTableHead:not([data-mode="users"])~#settingsTable td:nth-child(7):after{content:none}
.updated-meta{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.updated-meta>span{font-size:10px;color:#65726b;white-space:nowrap}

/* Compact feedback dialogs */
.delete-confirm-box{width:min(410px,calc(100vw - 28px))!important;padding:25px 24px!important}
.delete-confirm-box .delete-dialog-icon{width:46px;height:46px;margin-bottom:12px}
.delete-confirm-box h2{font-size:19px!important;line-height:1.3!important;margin:4px 0 7px!important}
.delete-confirm-box>p{max-width:330px!important;margin:0 auto 16px!important;font-size:12px!important;line-height:1.6!important}
.delete-confirm-box .setting-form-actions button{min-height:37px!important;font-size:11px!important;padding:0 16px!important}
.usage-detail-box>.setting-form-actions .usage-detail-close{background:#eef1ef!important;border:1px solid #dce2de!important;border-radius:12px!important;color:#53615a!important;box-shadow:none!important;cursor:pointer!important}
.usage-detail-box>.setting-form-actions .usage-detail-close:hover{background:#e3e8e5!important;border-color:#d4dcd7!important;color:#35423b!important}

/* Compact activity-usage dialog and keep its close action centered. */
.usage-detail-box{padding:18px 20px!important}
.usage-detail-box h2{margin-bottom:8px!important;font-size:16px!important;line-height:1.25!important}
.usage-detail-wrap{margin-top:6px!important}
.usage-detail-table th,.usage-detail-table td{padding:7px 10px!important;line-height:1.25!important}
.usage-pager{margin-top:7px!important}
.usage-detail-box>.setting-form-actions{display:flex!important;justify-content:center!important;margin-top:7px!important}
.usage-detail-box>.setting-form-actions .usage-detail-close{width:auto!important;min-width:170px!important}
@media(max-width:640px){
  .usage-detail-box{padding:16px!important}
  .usage-detail-box h2{font-size:15px!important;margin-bottom:7px!important}
  .usage-detail-table th,.usage-detail-table td{padding:6px 8px!important;font-size:10.5px!important}
  .usage-detail-box>.setting-form-actions .usage-detail-close{min-width:160px!important}
}

/* One visual system for every Settings and User Management screen */
#addSetting,#addSetting[data-mode]{min-height:40px!important;padding:0 16px!important;border:1px solid #16a34a!important;border-radius:9px!important;background:#16a34a!important;color:#fff!important;font-size:12px!important;font-weight:700!important;box-shadow:0 7px 16px rgba(22,163,74,.17)!important}
#addSetting:hover,#addSetting[data-mode]:hover{border-color:#15803d!important;background:#15803d!important;box-shadow:0 9px 19px rgba(22,163,74,.23)!important}
.settings-table-head{min-height:72px!important;padding:14px 18px!important;background:#fff!important}
.settings-table-head h3{margin:0!important;color:#1f2e26!important;font-size:17px!important;font-weight:700!important;line-height:1.3!important}
.settings-table-head p{display:none!important}
.settings-table-tools{gap:10px!important}
.settings-search{height:40px!important;border:1px solid #dce5d9!important;border-radius:9px!important;background:#fbfcfb!important}
.settings-search input{height:38px!important;color:#69776f!important;font-size:12px!important;font-weight:400!important}
.settings-search input::placeholder{color:#9aa59f!important;font-weight:300!important}
.settings-table thead{border-top:1px solid #e4ece3!important}
.settings-table th{height:38px!important;padding:8px 12px!important;background:#f7faf7!important;color:#748179!important;font-size:10px!important;font-weight:700!important;line-height:1.3!important}
.settings-table td{height:52px!important;padding:8px 12px!important;color:#4f5e56!important;font-size:11px!important;line-height:1.4!important}
.settings-table td strong{color:#25352c!important;font-size:12px!important;font-weight:500!important}
.settings-table .setting-code{padding:0!important;border-radius:0!important;background:transparent!important;color:#546159!important;font-size:11px!important;font-weight:400!important;letter-spacing:0!important}
.settings-table .setting-status{padding:5px 9px!important;font-size:10px!important;font-weight:600!important}
.settings-table .setting-row-actions{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-end!important;gap:6px!important;white-space:nowrap!important}
.settings-table .icon-action{flex:0 0 32px!important;width:32px!important;height:32px!important;border-radius:8px!important}
.settings-table .icon-action svg{width:15px!important;height:15px!important}
.setting-modal-box{width:min(600px,calc(100vw - 28px))!important;padding:24px 26px 20px!important;border-radius:18px!important}
.setting-modal-box h2{margin:0 0 18px!important;font-size:22px!important;font-weight:700!important;line-height:1.25!important}
.setting-modal-box form{display:grid!important;gap:10px!important}
.setting-modal-box label>span,.setting-modal-box .permission-field>span{margin-bottom:5px!important;color:#46554d!important;font-size:12px!important;font-weight:650!important}
.setting-modal-box input,.setting-modal-box select,.setting-modal-box textarea{min-height:42px!important;padding:10px 12px!important;border-radius:10px!important;color:#34423a!important;font-size:13px!important;font-weight:400!important}
.setting-modal-box textarea{min-height:78px!important;max-height:110px!important}
.setting-modal-box .setting-form-actions{margin-top:3px!important;padding-top:12px!important;gap:8px!important}
.setting-modal-box .setting-form-actions .primary{border-color:#16a34a!important;background:#16a34a!important;color:#fff!important;box-shadow:0 7px 16px rgba(22,163,74,.17)!important}
.setting-modal-box .setting-form-actions .primary:hover{border-color:#15803d!important;background:#15803d!important}

/* Compact action dropdown */
.settings-table .setting-row-actions{position:relative!important;overflow:visible!important}
.setting-more{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #d8e2db;border-radius:8px;background:#fff;color:#64736b;cursor:pointer;transition:.15s}
.setting-more:hover,.setting-more[aria-expanded="true"]{border-color:#9fc9a8;background:#f2f8f3;color:#257a3e}
.setting-more svg{width:16px;height:16px}
.setting-actions-dropdown{position:absolute;z-index:80;top:38px;right:0;display:none;min-width:176px;padding:5px;border:1px solid #dce4df;border-radius:10px;background:#fff;box-shadow:0 12px 30px rgba(28,48,36,.14)}
.setting-actions-dropdown.show{display:grid}
.setting-actions-dropdown.open-up{top:auto;bottom:38px}
.setting-actions-dropdown button{display:flex;align-items:center;gap:9px;width:100%;min-height:35px;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:#34443b;font:inherit;font-size:11px;text-align:left;white-space:nowrap;cursor:pointer}
.setting-actions-dropdown button:hover{background:#f2f7f2;color:#176b33}
.setting-actions-dropdown button svg{width:15px;height:15px;flex:0 0 15px}
.setting-actions-dropdown .danger-item{color:#b44740}
.setting-actions-dropdown .danger-item:hover{background:#fff2f1;color:#a23832}
.setting-actions-dropdown .locked-item{color:#8c9690}
.setting-actions-dropdown .locked-item:hover{background:#f3f5f4;color:#68736d}
@media(max-width:640px){.settings-table-head{padding:14px!important}.settings-table-tools{display:grid!important;grid-template-columns:1fr!important;width:100%!important}.settings-table-tools #addSetting{width:100%!important;justify-content:center!important}.setting-modal-box{padding:20px 17px 16px!important}.setting-modal-box h2{font-size:19px!important}}

/* Settings list header: title and add action on top, search on its own row. */
.settings-table-head{
 display:grid!important;
 grid-template-columns:minmax(220px,1fr) minmax(280px,360px) auto!important;
 align-items:center!important;
 gap:12px!important
}
.settings-table-tools{
 display:contents!important
}
.settings-table-tools .settings-add{
 grid-column:3!important;
 grid-row:1!important;
 justify-self:end!important;
 width:auto!important;
 min-width:142px!important
}
.settings-table-tools .settings-search{
 grid-column:2!important;
 grid-row:1!important;
 justify-self:end!important;
 display:flex!important;
 align-items:center!important;
 width:min(360px,100%)!important;
 max-width:360px!important;
 min-width:0!important;
 height:44px!important;
 padding:0 14px!important;
 border:1px solid #dce5d9!important;
 border-radius:10px!important;
 background:#fff!important
}
.settings-table-tools .settings-search>svg{
 display:block!important;
 flex:0 0 auto;
 width:18px!important;
 height:18px!important;
 color:#159447
}
.settings-table-tools .settings-search input{
 display:block!important;
 position:static!important;
 width:100%!important;
 max-width:none!important;
 height:42px!important;
 padding:0 10px!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important
}

.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search{
 justify-self:end!important;
 width:300px!important;
 max-width:300px!important;
 height:38px!important;
 padding:0 11px!important;
 gap:8px!important;
 border:1px solid #dbe5dd!important;
 border-radius:9px!important;
 background:#fff!important;
 box-shadow:none!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search>svg{
 width:16px!important;
 height:16px!important;
 color:#829088!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search input{
 height:36px!important;
 padding:0!important;
 border:0!important;
 outline:0!important;
 color:#52625b!important;
 font-size:12px!important;
 box-shadow:none!important;
 appearance:none!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search input::placeholder{
 color:#7f8b85!important;
 opacity:1!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search:focus-within{
 border-color:#91c99d!important;
 box-shadow:0 0 0 3px rgba(72,165,92,.1)!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search input:focus,
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search input:focus-visible{
 border:0!important;
 outline:0!important;
 box-shadow:none!important
}
.settings-table-head #addSetting[data-mode="activityTypes"]{
 width:94px!important;
 min-width:94px!important;
 height:34px!important;
 min-height:34px!important;
 padding-inline:14px!important;
 cursor:pointer!important
}
.settings-table-card:has(#addSetting[data-mode="activityTypes"]){
 border-radius:13px!important;
 box-shadow:0 6px 20px rgba(31,62,42,.045)!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]){
 min-height:64px!important;
 padding:10px 14px!important;
 gap:8px 10px!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) #settingsTableTitle{
 font-size:18px!important
}
.settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search{
 height:38px!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td{
 height:46px!important;
 padding:7px 9px!important;
 font-size:10.5px!important;
 line-height:1.35!important
}
#settingsTableHead[data-mode="activityTypes"] th{
 height:36px!important;
 padding:7px 9px!important;
 font-size:9.5px!important;
 line-height:1.25!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td strong{
 font-size:11.5px!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-description{
 max-width:260px!important
}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(1){width:5%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(2){width:9%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(3){width:18%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(4){width:28%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(5){width:9%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(6){width:11%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(7){width:13%!important}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(8){width:7%!important}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row td{
 height:42px!important;
 padding-top:4px!important;
 padding-bottom:4px!important;
 border-top:1px solid #dce9df!important;
 border-bottom:0!important;
 background:#f7fbf7!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row strong{
 color:#20372b!important;
 font-size:12px!important;
 font-weight:700!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row small{
 display:block!important;
 margin-top:2px!important;
 color:#7d8b83!important;
 font-size:9px!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row b{
 color:#607068!important;
 font-size:inherit!important;
 font-weight:400!important;
 line-height:inherit!important;
 text-decoration:underline;
 text-decoration-color:#b9c8bd;
 text-underline-offset:3px;
 white-space:nowrap
}

@media(max-width:1000px){
 .settings-table-head{
  grid-template-columns:minmax(0,1fr) auto!important
 }
 .settings-table-tools .settings-add{
  grid-column:2!important;
  grid-row:1!important
 }
 .settings-table-tools .settings-search{
  grid-column:1 / -1!important;
  grid-row:2!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:none!important
 }
 .settings-table:has(#settingsTableHead[data-mode="activityTypes"]){
  min-width:740px!important
 }
}

/* Final operation-area sizing overrides. */
#areas .areas-heading h2{font-size:20px!important}
#areas .area-table-wrap table{min-width:820px!important}
#areas .area-table-wrap th{font-size:11.5px!important}
#areas .area-table-wrap td,
#areas .area-name-link,
#areas .area-contact>b{font-size:12px!important}
#areas .area-table-wrap th:nth-child(1){width:6%!important}
#areas .area-table-wrap th:nth-child(2){width:34%!important}
#areas .area-table-wrap th:nth-child(3){width:16%!important}
#areas .area-table-wrap th:nth-child(4){width:13%!important}
#areas .area-table-wrap th:nth-child(5){width:23%!important}
#areas .area-table-wrap th:nth-child(6){width:8%!important}
#areaModal .area-modal-box{
 width:min(900px,calc(100vw - 32px))!important;
 padding:26px 30px 22px!important
}
#areaModal #areaModalTitle{
 margin-bottom:16px!important;
 font-size:20px!important
}
#areaModal .area-form-main{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:12px 14px!important
}
#areaModal .area-name-field{grid-column:span 2!important}
#areaModal #areaForm input:not([type="file"]),
#areaModal #areaForm select{height:40px!important}
#areaModal .area-description-field textarea{
 min-height:70px!important;
 height:70px!important
}
@media(max-width:700px){
 #areaModal .area-modal-box{padding:22px 20px 18px!important}
 #areaModal .area-form-main{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #areaModal .area-name-field{grid-column:1/-1!important}
}

/* Final activity-page scrolling behavior: header scrolls, steps and actions stay visible. */
#activityModal.show{display:block!important}
#activityModal .activity-form-box{
 position:relative!important;
 display:block!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 overscroll-behavior:contain!important;
 scrollbar-gutter:stable!important
}
#activityModal .activity-wizard-head{position:relative!important;top:auto!important}
#activityModal .activity-wizard-steps{
 position:sticky!important;
 top:0!important;
 z-index:20!important;
 min-height:92px!important;
 padding-top:14px!important;
 padding-bottom:12px!important;
 background:rgba(242,250,241,.98)!important;
 backdrop-filter:blur(10px)!important;
 box-shadow:0 7px 20px rgba(31,54,38,.09)!important
}
#activityModal #activityForm{height:auto!important;min-height:calc(100% - 184px)!important;overflow:visible!important}
#activityModal .activity-step-panel{height:auto!important;max-height:none!important;overflow:visible!important}
#activityModal .activity-wizard-actions{
 position:sticky!important;
 right:0!important;
 bottom:0!important;
 left:0!important;
 z-index:21!important;
 background:rgba(255,255,255,.98)!important;
 backdrop-filter:blur(10px)!important
}
@media(max-width:760px){
 #activityModal .activity-form-box{scrollbar-gutter:auto!important}
 #activityModal .activity-wizard-steps{min-height:82px!important}
}

/* Final participant overrides — keep after all legacy responsive rules. */
#all-participants .target-overview-list article.target-vulnerable{
 --target-accent:#d04f8b!important;
 --target-soft:#fdeef5!important
}
#all-participants .target-overview-list article b{font-size:15px!important}
#all-participants .target-overview-list article b em{font-size:11px!important}
#all-participants .all-participant-name{font-weight:800!important;color:#20392b!important}
#all-participants .all-participants-table-wrap table{min-width:900px!important}
#all-participants .all-participants-table-wrap th:nth-child(1){width:4%!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:14%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:14%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:13%!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:11%!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:11%!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:9%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(9){width:15%!important;text-align:left!important}
.all-participant-detail-box{width:min(1050px,calc(100vw - 28px))!important}
.all-participant-detail-table table{min-width:880px}
.all-participant-detail-table th{white-space:nowrap}

/* All-participants table: compact eight-column information layout. */
#all-participants .all-participants-table-wrap table{min-width:760px!important}
#all-participants .all-participants-table-wrap th:nth-child(1){width:5%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:17%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:16%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:15%!important;text-align:left!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:10%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:12%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:12%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:13%!important;text-align:left!important}
#all-participants .all-participant-name{color:#263c30!important;font-weight:750!important}
#all-participants .all-participant-code{color:#849188!important;font-size:9.5px!important;font-weight:400!important}
#all-participants .all-participant-contact-via,
#all-participants .all-participant-target-stack{
 display:flex;
 align-items:flex-start;
 flex-direction:column;
 gap:4px
}
#all-participants .all-participant-contact-via b{color:#405449;font-size:10.5px;font-weight:600}
#all-participants .all-participant-contact-via small{color:#829088;font-size:9px;line-height:1.35;overflow-wrap:anywhere}
#all-participants .all-participant-target-stack small{color:#76857c;font-size:9px;font-weight:500}

/* Latest participant-summary refinements. */
#all-participants .target-overview-list article.target-vulnerable{
 --target-accent:#d04f8b!important;
 --target-soft:#fdeef5!important
}
#all-participants .target-overview-list article b{font-size:15px!important}
#all-participants .target-overview-list article b em{font-size:11px!important}
#all-participants .all-participant-name{font-weight:800!important;color:#20392b!important}
#all-participants .all-participants-table-wrap table{min-width:900px!important}
#all-participants .all-participants-table-wrap th:nth-child(1){width:4%!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:14%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:14%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:13%!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:11%!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:11%!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:9%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(9){width:15%!important;text-align:left!important}
.all-participant-detail-box{width:min(1050px,calc(100vw - 28px))}
.all-participant-detail-table table{min-width:880px}
.all-participant-detail-table th{white-space:nowrap}

@media(max-width:700px){
 #all-participants .all-participants-tools{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important
 }
 #all-participants .all-participants-analysis,
 #all-participants .all-participants-export{
  width:100%!important;
  min-width:0!important;
  justify-content:center!important
 }
 .participant-analysis-content{padding:14px 12px!important}
 .participant-analysis-summary{grid-template-columns:1fr!important}
 .participant-analysis-table{min-width:620px}
}

/* Balanced all-participants table: compact, readable, and aligned to its content. */
#all-participants .all-participants-table-wrap table{
 width:100%!important;
 min-width:940px!important;
 table-layout:fixed!important
}
#all-participants .all-participants-table-wrap th,
#all-participants .all-participants-table-wrap td{
 height:auto!important;
 padding:10px 8px!important;
 line-height:1.45!important;
 vertical-align:middle!important
}
#all-participants .all-participants-table-wrap th{white-space:normal!important}
#all-participants .all-participants-table-wrap th:nth-child(1){width:5%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:23%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:11%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:9%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:11%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:12%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:10%!important}
#all-participants .all-participants-table-wrap th:nth-child(9){width:7%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(10){width:3%!important;text-align:center!important}
#all-participants .all-participants-table-wrap td:nth-child(5),
#all-participants .all-participants-table-wrap td:nth-child(6),
#all-participants .all-participants-table-wrap td:nth-child(7),
#all-participants .all-participants-table-wrap td:nth-child(9),
#all-participants .all-participants-table-wrap td:nth-child(10){text-align:center!important}
.all-participant-view-button{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:4px;
 min-width:34px;
 min-height:34px;
 padding:5px 7px;
 border:1px solid #d8e5db;
 border-radius:9px;
 background:#fff;
 color:#347b45;
 cursor:pointer
}
.all-participant-view-button svg{width:15px;height:15px}
.all-participant-view-button span{display:none}
.all-participant-view-button:hover{background:#eef8ef;border-color:#83bf8d}

/* Compact participant summary and keep contact details with the participant. */
#all-participants .target-overview-list article h4{
 font-size:10px!important;
 font-weight:400!important;
 line-height:1.35!important
}
#all-participants .target-overview-list article b{
 font-size:14px!important;
 font-weight:600!important;
 line-height:1.1!important
}
#all-participants .target-overview-list article b em{
 font-size:10px!important;
 font-weight:400!important
}
#all-participants .all-participant-name-row{
 display:flex!important;
 align-items:baseline!important;
 gap:4px!important;
 flex-wrap:wrap!important
}
#all-participants .all-participant-name{
 font-weight:700!important
}
#all-participants .all-participant-code{
 color:#7d8982!important;
 font-size:9px!important;
 font-weight:400!important;
 white-space:nowrap!important
}
#all-participants .all-participant-phone{
 display:block!important;
 margin-top:3px!important;
 color:#536159!important;
 font-size:9.5px!important;
 font-weight:400!important
}
#all-participants .all-participant-email{
 display:block!important;
 margin-top:2px!important;
 color:#87928c!important;
 font-size:9px!important;
 font-weight:400!important;
 line-height:1.3!important;
 overflow-wrap:anywhere!important
}
#all-participants .all-participants-table-wrap table{
 min-width:1080px!important
}
#all-participants .all-participants-table-wrap th:nth-child(1){width:4%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:22%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:10%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:9%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:11%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:9%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:11%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(9){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(10){width:6%!important;text-align:center!important}

/* All participants: compact overview and balanced extended columns */
#all-participants .target-overview-list{gap:8px!important}
#all-participants .target-overview-list article{
 padding:10px 12px!important;
 min-height:92px!important
}
#all-participants .target-overview-title{
 gap:8px!important;
 min-width:0
}
#all-participants .target-overview-title>span{
 width:34px!important;
 height:34px!important;
 flex:0 0 34px!important
}
#all-participants .target-overview-title>span svg{
 width:17px!important;
 height:17px!important
}
#all-participants .target-overview-list article h4{
 font-size:10px!important;
 font-weight:500!important;
 line-height:1.35!important
}
#all-participants .target-overview-list article b{
 font-size:16px!important;
 font-weight:600!important;
 line-height:1.2!important;
 white-space:nowrap
}
#all-participants .target-overview-list article b em{
 font-size:8px!important;
 font-weight:400!important
}
#all-participants .all-participant-identity small{
 color:#7d8982!important;
 font-size:9px!important;
 font-weight:400!important;
 letter-spacing:0!important
}
#all-participants .all-participant-source,
#all-participants .all-participant-channel{
 color:#58675f;
 font-size:10px;
 line-height:1.35
}
#all-participants .all-participants-table-wrap table{
 min-width:1160px!important;
 table-layout:fixed!important
}
#all-participants .all-participants-table-wrap th:nth-child(1){width:4%!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:12%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:15%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:8%!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:9%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:10%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:8%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(9){width:10%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(10){width:9%!important}
#all-participants .all-participants-table-wrap th:nth-child(11){width:6%!important;text-align:center!important}

#all-participants .all-participant-activity-count button,
#all-participants .all-participant-assessment-count button,
#all-participants .all-participant-purchase-count button,
#all-participants .all-participant-change-count button{
 border-bottom:0!important;
 text-decoration:none!important
}

/* Keep compact participant target cards last in the cascade. */
#all-participants .target-overview-head{display:none!important}
#all-participants .target-overview-list article{
 display:grid!important;
 grid-template-columns:52px minmax(0,1fr)!important;
 grid-template-rows:auto auto!important;
 align-content:center!important;
 column-gap:12px!important;
 row-gap:3px!important;
 min-height:94px!important;
 padding:16px!important;
 border:1px solid #dfe9e1!important;
 border-top:1px solid #dfe9e1!important;
 border-radius:14px!important;
 background:#fff!important;
 box-shadow:0 7px 22px rgba(42,76,51,.04)!important
}
#all-participants .target-overview-title{display:contents!important}
#all-participants .target-overview-title>span{
 grid-column:1!important;
 grid-row:1 / 3!important;
 width:46px!important;
 height:46px!important;
 border-radius:12px!important
}
#all-participants .target-overview-title svg{width:22px!important;height:22px!important}
#all-participants .target-overview-list h4{
 grid-column:2!important;
 grid-row:1!important;
 align-self:end!important;
 margin:0!important;
 font-size:11px!important;
 font-weight:650!important
}
#all-participants .target-overview-sample{
 grid-column:2!important;
 grid-row:2!important;
 align-self:start!important
}
#all-participants .target-overview-sample b{
 color:#183428!important;
 font-size:21px!important;
 font-weight:700!important;
 line-height:1.15!important;
 white-space:nowrap!important
}
#all-participants .target-overview-sample b em{
 color:#87958d!important;
 font-size:9px!important;
 font-style:normal!important;
 font-weight:400!important
}

/* Compact horizontal metrics, matching the sample-group summary cards. */
#all-participants .target-overview-head{display:none!important}
#all-participants .target-overview-list article{
 display:grid!important;
 grid-template-columns:52px minmax(0,1fr)!important;
 grid-template-rows:auto auto!important;
 align-content:center!important;
 column-gap:12px!important;
 row-gap:3px!important;
 min-height:94px!important;
 padding:16px!important;
 border:1px solid #dfe9e1!important;
 border-top:1px solid #dfe9e1!important;
 border-radius:14px!important;
 background:#fff!important;
 box-shadow:0 7px 22px rgba(42,76,51,.04)!important
}
#all-participants .target-overview-title{display:contents!important}
#all-participants .target-overview-title>span{
 grid-column:1!important;
 grid-row:1 / 3!important;
 width:46px!important;
 height:46px!important;
 border-radius:12px!important
}
#all-participants .target-overview-title svg{
 width:22px!important;
 height:22px!important
}
#all-participants .target-overview-list h4{
 grid-column:2!important;
 grid-row:1!important;
 align-self:end!important;
 margin:0!important;
 font-size:11px!important;
 font-weight:650!important
}
#all-participants .target-overview-sample{
 grid-column:2!important;
 grid-row:2!important;
 align-self:start!important
}
#all-participants .target-overview-sample b{
 color:#183428!important;
 font-size:21px!important;
 font-weight:700!important;
 line-height:1.15!important;
 white-space:nowrap!important
}
#all-participants .target-overview-sample b em{
 color:#87958d!important;
 font-size:9px!important;
 font-style:normal!important;
 font-weight:400!important
}

/* Activity participant breakdown tooltip */
.activity-participant-total{position:relative;display:inline-flex;align-items:center;min-height:42px;cursor:help;outline:none}
.activity-participant-total>b{font-weight:800;color:#30473a;white-space:nowrap}
.activity-participant-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:40;display:grid;grid-template-columns:repeat(2,minmax(92px,1fr));gap:6px;width:218px;padding:9px;border:1px solid #dbe8dd;border-radius:12px;background:#fff;box-shadow:0 12px 30px rgba(33,64,43,.16);opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:.16s ease;pointer-events:none}
.activity-participant-tooltip:after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid #dbe8dd;border-bottom:1px solid #dbe8dd;transform:translateX(-50%) rotate(45deg)}
.activity-participant-tooltip em{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border-radius:8px;background:#f5f8f5;font-style:normal}
.activity-participant-tooltip em:last-child{background:#eaf7ea}
.activity-participant-tooltip small{font-size:10px;color:#718078}
.activity-participant-tooltip strong{font-size:12px;color:#294735}
.activity-participant-total:hover .activity-participant-tooltip,.activity-participant-total:focus .activity-participant-tooltip,.activity-participant-total:focus-within .activity-participant-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Operation-area group column */
#areas .area-table-wrap table{min-width:900px!important}
#areas .area-table-wrap th:nth-child(1){width:6%!important}
#areas .area-table-wrap th:nth-child(2){width:28%!important}
#areas .area-table-wrap th:nth-child(3){width:12%!important}
#areas .area-table-wrap th:nth-child(4){width:14%!important}
#areas .area-table-wrap th:nth-child(5){width:22%!important}
#areas .area-table-wrap th:nth-child(6){width:12%!important}
#areas .area-table-wrap th:nth-child(7){width:6%!important}
.area-group-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;font-size:9px;font-weight:750;line-height:1.2;white-space:nowrap}
.area-group-badge.prototype{background:#e4f6e6;color:#218c3a}
.area-group-badge.extension{background:#f0e8fb;color:#7850ad}
.area-group-badge.activity{background:#fff2cd;color:#9b711d}
#areas .area-name-cell{display:flex;align-items:flex-start;flex-direction:column;gap:5px}
#areas .area-name-cell .area-group-badge{min-height:20px;padding:3px 8px;font-size:8px}
#areas .area-table-wrap th{height:44px!important;padding-top:8px!important;padding-bottom:8px!important}
#areas .area-table-wrap td{height:54px!important;padding-top:8px!important;padding-bottom:8px!important;vertical-align:middle}
#areas .area-contact{gap:2px!important}
#areas .area-operation-status{padding:5px 9px!important;font-size:9px!important;white-space:nowrap}

/* All participants page */
.all-participants-page{padding:30px 34px 48px!important;background:#f8faf8!important}
.all-participants-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.all-participants-heading h2{margin:4px 0;font-size:25px;color:#23362a}
.all-participants-heading p{margin:0;color:#7c8b81;font-size:10px}
.all-participants-heading>button{height:42px;padding:0 15px;display:flex;align-items:center;gap:7px;border-radius:10px}
.all-participants-heading>button svg{width:15px}
.all-participants-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.all-participants-summary article{min-height:102px;display:flex;align-items:center;gap:13px;padding:18px;border:1px solid #deeadf;border-radius:16px;background:#fff}
.all-participants-summary article>span{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:#eaf7e8;color:#3ca34a}
.all-participants-summary svg{width:22px}
.all-participants-summary small{display:block;margin-bottom:4px;color:#77867d;font-size:9px}
.all-participants-summary b{font-size:23px;color:#183225}
.all-participants-summary b em{font-size:9px;font-style:normal;font-weight:500;color:#849189}
.all-participants-panel{overflow:hidden;border:1px solid #dce8de;border-radius:17px;background:#fff}
.all-participants-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 180px 200px;gap:10px;padding:14px;border-bottom:1px solid #e4ece5}
.all-participants-toolbar label{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #d9e5db;border-radius:10px}
.all-participants-toolbar label svg{width:15px;color:#668073}
.all-participants-toolbar input{width:100%;border:0;outline:0;background:transparent;font:inherit}
.all-participants-toolbar select{height:40px;padding:0 12px;border:1px solid #d9e5db;border-radius:10px;background:#fff;color:#485b50}
.all-participants-table-wrap{overflow-x:auto}
.all-participants-table-wrap table{width:100%;min-width:880px;table-layout:fixed;border-collapse:collapse}
.all-participants-table-wrap th{height:48px;padding:10px 12px;background:#f5f9f6;color:#687c70;font-size:9px;text-align:left}
.all-participants-table-wrap td{height:64px;padding:11px 12px;border-bottom:1px solid #e8eee9;color:#42544a;font-size:10px}
.all-participants-table-wrap th:nth-child(1){width:7%;text-align:center}.all-participants-table-wrap td:nth-child(1){text-align:center;color:#84958b}
.all-participants-table-wrap th:nth-child(2){width:22%}.all-participants-table-wrap th:nth-child(3){width:15%}.all-participants-table-wrap th:nth-child(4){width:15%}.all-participants-table-wrap th:nth-child(5){width:17%}.all-participants-table-wrap th:nth-child(6){width:24%}
.all-participant-name{padding:0;border:0;background:none;color:#294a36;font:inherit;font-weight:750;cursor:pointer}
.all-participant-type{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:9px;font-weight:700}.all-participant-type.sample{background:#e5f6e5;color:#258c38}.all-participant-type.general{background:#edf1ef;color:#63736a}
.all-participant-contact{display:flex;flex-direction:column;gap:4px}.all-participant-contact span,.all-participant-contact small{display:flex;align-items:center;gap:6px}.all-participant-contact small{color:#839188}.all-participant-contact svg{width:13px;height:13px}
.all-participants-foot{display:flex;justify-content:space-between;padding:12px 16px;color:#8a978f;font-size:9px}
@media(max-width:760px){.all-participants-page{padding:22px 14px 42px!important}.all-participants-heading{align-items:flex-start;flex-direction:column}.all-participants-summary{grid-template-columns:1fr}.all-participants-toolbar{grid-template-columns:1fr}.all-participants-foot{align-items:flex-start;flex-direction:column;gap:4px}}

/* All participants index follows the compact Activity Types settings layout. */
#all-participants.all-participants-page{
 padding:28px 34px 48px!important;
 background:#f8faf8!important
}
#all-participants .all-participants-panel{
 overflow:hidden!important;
 margin:0!important;
 border:1px solid #e0e9e2!important;
 border-radius:13px!important;
 background:#fff!important;
 box-shadow:0 6px 20px rgba(31,62,42,.045)!important
}
#all-participants .all-participants-heading{
 display:grid!important;
 grid-template-columns:minmax(220px,1fr) minmax(360px,520px)!important;
 align-items:center!important;
 gap:14px!important;
 min-height:64px!important;
 margin:0!important;
 padding:10px 14px!important;
 border-bottom:1px solid #e5ece7!important
}
#all-participants .all-participants-heading h3{
 margin:0!important;
 color:#1f2e26!important;
 font-size:18px!important;
 font-weight:700!important;
 line-height:1.3!important
}
#all-participants .all-participants-heading p{
 display:block!important;
 margin:2px 0 0!important;
 color:#87938c!important;
 font-size:10px!important
}
#all-participants .all-participants-target-cards{
 padding:14px;
 border-bottom:1px solid #e5ece7;
 background:#fbfdfb
}
#all-participants .target-overview-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:2px 2px 12px
}
#all-participants .target-overview-head h3{
 margin:0;
 color:#26392e;
 font-size:14px;
 font-weight:700;
}
#all-participants .target-overview-head p{
 margin:2px 0 0;
 color:#8a978f;
 font-size:9px
}
#all-participants .target-overview-head>span{
 flex:0 0 auto;
 padding:5px 9px;
 border-radius:999px;
 background:#fff7e8;
 color:#9a641a;
 font-size:9px;
 font-weight:650
}
#all-participants .target-overview-columns,
#all-participants .target-overview-list article{
 display:grid;
 grid-template-columns:1.25fr .9fr 1.15fr 1.4fr .7fr;
 align-items:center;
 gap:12px
}
#all-participants .target-overview-columns{
 padding:8px 12px;
 border:1px solid #e3ebe5;
 border-radius:9px 9px 0 0;
 background:#f5f8f6;
 color:#758279;
 font-size:8.5px;
 font-weight:600
}
#all-participants .target-overview-list{
 overflow:hidden;
 border:1px solid #e3ebe5;
 border-top:0;
 border-radius:0 0 9px 9px;
 background:#fff
}
#all-participants .target-overview-list article{
 min-height:54px;
 padding:9px 12px;
 border-bottom:1px solid #edf1ee
}
#all-participants .target-overview-list article:last-child{border-bottom:0}
#all-participants .target-overview-list h4{margin:0;color:#34473b;font-size:10.5px;font-weight:650}
#all-participants .target-overview-list small{display:none}
#all-participants .target-overview-list b{color:#3f5047;font-size:11px;font-weight:600}
#all-participants .target-overview-list b em{color:#89948e;font-size:8px;font-style:normal;font-weight:400}
#all-participants .target-overview-progress{
 display:grid;
 grid-template-columns:minmax(60px,1fr) 30px;
 align-items:center;
 gap:7px
}
#all-participants .target-overview-progress>span{height:5px;overflow:hidden;border-radius:999px;background:#e8eee9}
#all-participants .target-overview-progress i{display:block;height:100%;border-radius:inherit;background:#4aa653}
#all-participants .target-overview-progress>b{color:#3f9749;font-size:9.5px}
#all-participants .target-overview-gap{
 justify-self:start;
 padding:4px 7px;
 border-radius:999px;
 background:#fff7e8;
 color:#9e681c;
 font-size:8.5px;
 font-weight:650
}
#all-participants .target-overview-list{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
 overflow:visible;
 border:0;
 border-radius:0;
 background:transparent
}
#all-participants .target-overview-list article{
 --target-accent:#4ca65a;
 --target-soft:#eef8ef;
 display:grid;
 grid-template-columns:1fr auto;
 gap:8px 12px;
 min-height:0;
 padding:13px;
 border:1px solid #e3ebe5!important;
 border-top:1px solid #dfe9e1!important;
 border-radius:11px;
 background:#fff
}
#all-participants .target-overview-list article.target-youth{--target-accent:#55a66b;--target-soft:#edf8f0}
#all-participants .target-overview-list article.target-working{--target-accent:#5688c8;--target-soft:#eef4fb}
#all-participants .target-overview-list article.target-senior{--target-accent:#8b6bc2;--target-soft:#f4f0fa}
#all-participants .target-overview-list article.target-vulnerable{--target-accent:#d49a42;--target-soft:#fff7e9}
#all-participants .target-overview-list article.target-overall{--target-accent:#3f9850;--target-soft:#edf7ee}
#all-participants .target-overview-title{
 grid-column:1 / -1;
 display:flex;
 align-items:center;
 gap:8px
}
#all-participants .target-overview-title>span{
 display:grid;
 place-items:center;
 width:30px;
 height:30px;
 flex:0 0 30px;
 border-radius:9px;
 background:var(--target-soft);
 color:var(--target-accent)
}
#all-participants .target-overview-title svg{width:15px;height:15px}
#all-participants .target-overview-list h4{
 color:#304239;
 font-size:11px
}
#all-participants .target-overview-list small{
 display:block;
 margin-bottom:2px;
 color:#8a968f;
 font-size:8px;
 font-weight:400
}
#all-participants .target-overview-total,
#all-participants .target-overview-sample{min-width:0}
#all-participants .target-overview-progress{
 grid-column:1 / -1;
 grid-template-columns:minmax(80px,1fr) 32px
}
#all-participants .target-overview-progress i{background:var(--target-accent)}
#all-participants .target-overview-progress>b{color:var(--target-accent)}
#all-participants .target-overview-gap{
 grid-column:1 / -1;
 justify-self:start;
 background:var(--target-soft);
 color:var(--target-accent)
}
#all-participants .all-participant-name-row{
 display:flex;
 align-items:center;
 gap:5px
}
#all-participants .all-participant-consent{
 display:inline-grid;
 place-items:center;
 width:18px;
 height:18px;
 flex:0 0 18px;
 border-radius:50%;
 background:#e7f7e9;
 color:#35a04a
}
#all-participants .all-participant-consent svg{width:11px;height:11px}
#all-participants .all-participant-target{
 display:inline-flex;
 align-items:center;
 padding:5px 8px;
 border-radius:999px;
 font-size:9px;
 font-weight:600;
 white-space:nowrap
}
#all-participants .all-participant-target.youth{background:#edf8f0;color:#3f8f55}
#all-participants .all-participant-target.working{background:#eef4fb;color:#4778b5}
#all-participants .all-participant-target.senior{background:#f4f0fa;color:#7656ad}
#all-participants .all-participant-target.vulnerable{background:#fff7e9;color:#ad7524}
#all-participants .all-participant-type{
 padding:0;
 border-radius:0;
 background:transparent!important;
 color:#56665d!important;
 font-size:10px;
 font-weight:400
}
#all-participants .all-participants-tools{
 display:flex!important;
 align-items:center!important;
 justify-content:flex-end!important;
 gap:10px!important;
 width:100%!important;
 margin:0!important
}
#all-participants .all-participants-tools .settings-search{
 display:flex!important;
 align-items:center!important;
 width:100%!important;
 min-width:0!important;
 height:38px!important;
 padding:0 11px!important;
 gap:8px!important;
 border:1px solid #dbe5dd!important;
 border-radius:9px!important;
 background:#fff!important
}
#all-participants .all-participants-tools .settings-search svg{
 width:16px!important;
 height:16px!important;
 color:#829088!important
}
#all-participants .all-participants-tools .settings-search input{
 width:100%!important;
 height:36px!important;
 padding:0!important;
 border:0!important;
 outline:0!important;
 background:transparent!important;
 color:#52625b!important;
 font-size:12px!important
}
#all-participants .all-participants-export{
 justify-content:center!important;
 width:112px!important;
 min-width:112px!important;
 height:36px!important;
 min-height:36px!important;
 padding:0 12px!important;
 border-radius:9px!important;
 border-color:#43ae48!important;
 background:#43ae48!important;
 color:#fff!important;
 font-size:11px!important;
 box-shadow:0 7px 16px rgba(67,174,72,.18)!important;
 cursor:pointer!important
}
#all-participants .all-participants-export svg{width:15px!important;height:15px!important}
#all-participants .all-participants-analysis{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 width:102px;
 min-width:102px;
 height:36px;
 padding:0 12px;
 border:1px solid #43ae48;
 border-radius:9px;
 background:#fff;
 color:#31923c;
 font-size:11px;
 font-weight:600;
 cursor:pointer;
 transition:background .2s ease,color .2s ease,transform .2s ease
}
#all-participants .all-participants-analysis:hover{background:#eff9f0;transform:translateY(-1px)}
#all-participants .all-participants-analysis svg{width:15px;height:15px}
#all-participants .all-participants-toolbar{
 display:grid!important;
 grid-template-columns:minmax(120px,1fr) 180px 200px 200px!important;
 justify-content:end!important;
 gap:8px!important;
 padding:10px 14px!important;
 border-bottom:1px solid #e5ece7!important;
 background:#fbfdfb!important
}
#all-participants .all-participants-filter-count{
 align-self:center;
 color:#728078;
 font-size:11px;
 font-weight:500
}
#all-participants .all-participants-toolbar select{
 width:100%!important;
 height:36px!important;
 padding:0 10px!important;
 border-radius:9px!important;
 font-size:11px!important
}
#all-participants .all-participants-toolbar label{
 width:100%!important;
 height:36px!important;
 padding:0 11px!important;
 border-radius:9px!important
}
#all-participants .all-participants-toolbar label svg{width:15px!important;height:15px!important}
#all-participants .all-participants-toolbar input{
 font-size:11px!important;
 font-weight:400!important
}
#all-participants .all-participant-name{
 color:#42544a!important;
 font-size:10.5px!important;
 font-weight:400!important
}
#all-participants .all-participant-identity{
 display:flex;
 align-items:flex-start;
 flex-direction:column;
 gap:2px
}
#all-participants .all-participant-identity small{
 color:#3f9850;
 font-size:9px;
 font-weight:600;
 letter-spacing:.02em
}
#all-participants .all-participant-contact span,
#all-participants .all-participant-contact small{
 font-size:10.5px!important;
 font-weight:400!important
}
#all-participants .all-participants-table-wrap th:nth-child(1){width:5%!important}
#all-participants .all-participants-table-wrap th:nth-child(2){width:13%!important}
#all-participants .all-participants-table-wrap th:nth-child(3){width:17%!important}
#all-participants .all-participants-table-wrap th:nth-child(4){width:10%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(5){width:10%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(6){width:10%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(7){width:14%!important;text-align:center!important}
#all-participants .all-participants-table-wrap th:nth-child(8){width:11%!important}
#all-participants .all-participants-table-wrap th:nth-child(9){width:10%!important;text-align:center!important}
#all-participants .all-participant-activity-count,
#all-participants .all-participant-assessment-count,
#all-participants .all-participant-purchase-count,
#all-participants .all-participant-change-count{text-align:center!important}
#all-participants .all-participant-activity-count button,
#all-participants .all-participant-assessment-count button,
#all-participants .all-participant-purchase-count button,
#all-participants .all-participant-change-count button{
 padding:2px 0 3px;
 border:0;
 border-bottom:1px solid currentColor;
 background:transparent;
 color:#42544a;
 font:inherit;
 cursor:pointer
}
#all-participants .all-participant-activity-count button:hover,
#all-participants .all-participant-assessment-count button:hover,
#all-participants .all-participant-purchase-count button:hover,
#all-participants .all-participant-change-count button:hover{color:#2f9345}
#all-participants .all-participant-change-count>span{
 color:#8b9690;
 font-size:8.5px;
 white-space:nowrap
}
.all-participant-detail-modal{
 position:fixed;
 inset:0;
 z-index:5000;
 display:none;
 align-items:center;
 justify-content:center;
 padding:20px;
 background:rgba(24,42,31,.48)
}
.all-participant-detail-modal.show{display:flex}
.all-participant-detail-box{
 width:min(680px,calc(100vw - 28px));
 overflow:hidden;
 border-radius:18px;
 background:#fff;
 box-shadow:0 24px 70px rgba(15,35,22,.24)
}
.all-participant-detail-box header{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:20px 22px 16px;
 border-bottom:1px solid #e4ece6
}
.all-participant-detail-box header small{display:block;color:#3c9e4c;font-size:10px;font-weight:700}
.all-participant-detail-box header h2{margin:3px 0 0;color:#213329;font-size:21px}
.all-participant-detail-box header button{
 width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:#f2f6f3;color:#53635a;cursor:pointer
}
.all-participant-detail-box header button svg{width:17px}
.all-participant-detail-table{max-height:430px;overflow:auto;padding:0 20px}
.all-participant-detail-table table{width:100%;border-collapse:collapse}
.all-participant-detail-table th{padding:11px 10px;background:#f5f9f6;color:#718078;font-size:10px;text-align:left}
.all-participant-detail-table td{padding:12px 10px;border-bottom:1px solid #e8eee9;color:#485a50;font-size:11px}
.all-participant-detail-table th:first-child,.all-participant-detail-table td:first-child{width:60px;text-align:center}
.all-participant-detail-table th:last-child,.all-participant-detail-table td:last-child{width:150px}
.all-participant-detail-box footer{display:flex;justify-content:flex-end;padding:14px 20px;border-top:1px solid #e8eee9}
.all-participant-detail-box footer button{min-width:88px;height:36px;border-radius:9px}
.all-participant-analysis-box{width:min(820px,calc(100vw - 28px))}
.participant-analysis-content{padding:18px 20px 20px}
.participant-analysis-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.participant-analysis-summary article{padding:14px 16px;border:1px solid #e0e9e2;border-radius:12px;background:#f8fbf8}
.participant-analysis-summary span{display:block;color:#708078;font-size:10px}
.participant-analysis-summary b{display:inline-block;margin-top:4px;color:#20372a;font-size:24px;line-height:1}
.participant-analysis-summary small{margin-left:4px;color:#819087;font-size:10px}
.participant-analysis-summary .needs-action{border-color:#f0dcc2;background:#fffaf2}
.participant-analysis-summary .needs-action b{color:#b56b2f}
.participant-analysis-table{overflow-x:auto;border:1px solid #e4ece6;border-radius:12px}
.participant-analysis-table table{width:100%;border-collapse:collapse}
.participant-analysis-table th{padding:11px 12px;background:#f4f8f5;color:#6e7e75;font-size:10px;text-align:left;white-space:nowrap}
.participant-analysis-table td{padding:12px;border-bottom:1px solid #e8eee9;color:#42544a;font-size:11px}
.participant-analysis-table tr:last-child td{border-bottom:0}
.participant-analysis-table td:nth-child(n+2){text-align:center}
.participant-analysis-table strong{color:#b56b2f}
.analysis-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:600;white-space:nowrap}
.analysis-status.pending{background:#fff1df;color:#a96027}
.analysis-status.complete{background:#e9f7eb;color:#278b39}
.participant-analysis-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:11px 12px;border-radius:10px;background:#f2f7f3;color:#52645a;font-size:10px;line-height:1.5}
.participant-analysis-note svg{flex:0 0 auto;width:15px;height:15px;color:#3b9f49}
#all-participants .all-participants-table-wrap table{
 min-width:0!important;
 table-layout:fixed!important
}
#all-participants .all-participants-table-wrap th{
 height:36px!important;
 padding:7px 9px!important;
 font-size:9.5px!important;
 font-weight:600!important
}
#all-participants .all-participants-table-wrap td{
 height:50px!important;
 padding:7px 9px!important;
 font-size:10.5px!important
}
#all-participants .all-participants-foot{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:14px!important;
 padding:10px 14px!important;
 border-top:1px solid #edf1ee!important
}
#all-participants .all-participants-foot>div:first-child{
 display:flex!important;
 flex-direction:column!important;
 gap:2px!important
}
#all-participants .all-participants-pagination{
 display:flex;
 align-items:center;
 gap:5px
}
#all-participants .all-participants-pagination button{
 width:30px;
 height:30px;
 padding:0;
 border:1px solid #dce7de;
 border-radius:8px;
 background:#fff;
 color:#64766b;
 font-size:11px;
 cursor:pointer
}
#all-participants .all-participants-pagination button.active{
 border-color:#43ae48;
 background:#43ae48;
 color:#fff;
 font-weight:700
}
#all-participants .all-participants-pagination button:disabled{
 opacity:.4;
 cursor:default
}
@media(max-width:800px){
 #all-participants.all-participants-page{padding:22px 14px 42px!important}
 #all-participants .all-participants-heading{
  grid-template-columns:1fr!important;
  align-items:stretch!important
 }
 #all-participants .all-participants-toolbar{grid-template-columns:1fr 150px 180px 180px!important}
 #all-participants .target-overview-columns{display:none}
 #all-participants .target-overview-list{grid-template-columns:repeat(2,minmax(0,1fr));border:0;border-radius:0}
 #all-participants .target-overview-list article{
  grid-template-columns:1fr auto;
  gap:8px;
  padding:11px 12px
 }
 #all-participants .target-overview-total{display:block}
 #all-participants .target-overview-progress{grid-column:1 / -1;grid-row:auto}
 #all-participants .target-overview-gap{grid-column:1 / -1;grid-row:auto;align-self:auto}
}
@media(max-width:560px){
 #all-participants .all-participants-export{width:100%!important}
 #all-participants .all-participants-toolbar{display:grid!important;grid-template-columns:1fr!important}
 #all-participants .all-participants-toolbar select{width:100%!important}
 #all-participants .target-overview-head{align-items:flex-start;flex-direction:column}
 #all-participants .target-overview-list{grid-template-columns:1fr}
 #all-participants .target-overview-list article{grid-template-columns:1fr auto}
 #all-participants .all-participants-foot{align-items:flex-start!important;flex-direction:column!important}
 #all-participants .all-participants-table-wrap{overflow-x:auto!important}
 #all-participants .all-participants-table-wrap table{min-width:760px!important}
}

/* Target summary: fit every card in the page without horizontal scrolling. */
#all-participants .target-overview-list{
 display:grid!important;
 grid-template-columns:repeat(5,minmax(0,1fr))!important;
 gap:10px!important;
 overflow:visible!important;
 padding:2px!important
}
#all-participants .target-overview-list article{
 min-width:0!important;
 width:auto!important;
 padding:14px!important;
 border:1px solid #e1e9e4!important;
 border-top:1px solid #e1e9e4!important;
 border-radius:14px!important;
 background:#fff!important;
 box-shadow:0 7px 22px rgba(28,54,38,.045)!important
}
#all-participants .target-overview-list article.target-overall{
 --target-accent:#168777!important;
 --target-soft:#e8f7f4!important;
 border-color:#e1e9e4!important;
 background:#fff!important;
 box-shadow:0 7px 22px rgba(28,54,38,.045)!important
}
#all-participants .target-overview-list article.target-youth{
 --target-accent:#3f8f55!important;
 --target-soft:#edf8f0!important
}
#all-participants .target-overview-list article.target-working{
 --target-accent:#4778b5!important;
 --target-soft:#eef4fb!important
}
#all-participants .target-overview-list article.target-senior{
 --target-accent:#7656ad!important;
 --target-soft:#f4f0fa!important
}
#all-participants .target-overview-list article.target-vulnerable{
 --target-accent:#ad7524!important;
 --target-soft:#fff7e9!important
}
/* Keep the target-summary frame neutral; category colors belong to icons only. */
#all-participants .all-participants-target-cards,
#all-participants .target-overview-list{
 background:#fff!important;
 background-image:none!important
}
#all-participants .target-overview-title>span{
 width:42px!important;
 height:42px!important;
 flex-basis:42px!important;
 border-radius:12px!important;
 background:var(--target-soft)!important;
 color:var(--target-accent)!important
}
#all-participants .target-overview-title svg{
 width:20px!important;
 height:20px!important
}
#all-participants .target-overview-list article h4{
 color:#34453b!important;
 font-size:11.5px!important;
 font-weight:400!important
}
#all-participants .target-overview-list article b{
 color:#1f3328!important;
 font-size:17px!important;
 font-weight:650!important;
 line-height:1.1!important
}
#all-participants .target-overview-list article b em{
 color:#87948c!important;
 font-size:9px!important;
 font-weight:400!important
}
@media(max-width:1200px){
 #all-participants .target-overview-list{
  grid-template-columns:repeat(3,minmax(0,1fr))!important
 }
}
@media(max-width:800px){
 #all-participants .target-overview-list{
  grid-template-columns:repeat(2,minmax(0,1fr))!important
 }
}
@media(max-width:560px){
 #all-participants .target-overview-list{
  grid-template-columns:1fr!important
 }
 #all-participants .target-overview-list article{
  min-width:0!important
 }
}

/* Activity wizard — structured government-form inspired layout */
#activityModal{padding:18px!important;background:rgba(31,45,36,.52)!important}
#activityModal .activity-form-box{
 width:min(1120px,calc(100vw - 36px))!important;
 height:min(92vh,900px)!important;
 max-height:92vh!important;
 padding:0!important;
 overflow:hidden!important;
 border:0!important;
 border-radius:18px!important;
 background:#fff!important;
 box-shadow:0 24px 70px rgba(23,45,30,.22)!important
}
#activityModal .activity-close{
 top:20px!important;right:22px!important;
 width:42px!important;height:42px!important;
 border-radius:10px!important;
 background:#f2f6f2!important;color:#425248!important;
 z-index:8!important
}
#activityModal .activity-wizard-head{
 min-height:108px!important;
 padding:25px 76px 20px!important;
 text-align:center!important;
 border-bottom:0!important;
 background:#fff!important
}
#activityModal .activity-wizard-head .form-kicker,
#activityModal .activity-wizard-head p{display:none!important}
#activityModal .activity-wizard-head h2{
 margin:0!important;
 color:#26372d!important;
 font-size:25px!important;
 font-weight:750!important;
 letter-spacing:0!important
}
#activityModal .activity-wizard-steps{
 min-height:112px!important;
 margin:0!important;
 padding:20px max(70px,10%) 18px!important;
 display:grid!important;
 grid-template-columns:auto 1fr auto 1fr auto!important;
 align-items:start!important;
 border-top:1px solid #edf2ed!important;
 border-bottom:1px solid #deeadf!important;
 border-radius:0!important;
 background:#f2faf1!important
}
#activityModal .activity-wizard-steps button{
 width:128px!important;
 min-width:0!important;
 display:flex!important;
 align-items:center!important;
 flex-direction:column!important;
 gap:7px!important;
 border:0!important;
 background:transparent!important;
 color:#9aa69e!important;
 font-size:10px!important
}
#activityModal .activity-wizard-steps button b{
 width:34px!important;height:34px!important;
 display:grid!important;place-items:center!important;
 border:2px solid #dce6dd!important;
 border-radius:50%!important;
 background:#fff!important;color:#a5afa8!important;
 font-size:15px!important
}
#activityModal .activity-wizard-steps button span{display:block!important;white-space:nowrap!important}
#activityModal .activity-wizard-steps button.active,
#activityModal .activity-wizard-steps button:has(~ button.active){color:#33463a!important;font-weight:700!important}
#activityModal .activity-wizard-steps button.active b,
#activityModal .activity-wizard-steps button:has(~ button.active) b{border-color:#43ad4d!important;background:#43ad4d!important;color:#fff!important}
#activityModal .activity-wizard-steps>i{
 width:100%!important;height:2px!important;
 margin-top:16px!important;
 background:#dfe8e0!important
}
#activityModal #activityForm{
 height:calc(100% - 220px)!important;
 display:flex!important;
 flex-direction:column!important;
 min-height:0!important
}
#activityModal .activity-step-panel{
 flex:1 1 auto!important;
 min-height:0!important;
 overflow-y:auto!important;
 padding:28px clamp(28px,6vw,74px) 34px!important;
 background:#fff!important
}
#activityModal .activity-section-title{
 max-width:900px!important;
 margin:0 auto 16px!important;
 padding:0!important;
 display:flex!important;
 align-items:center!important;
 gap:10px!important;
 border:0!important
}
#activityModal .activity-section-title>span{
 min-width:42px!important;height:34px!important;
 display:grid!important;place-items:center!important;
 border-radius:8px!important;
 background:#e9f7e7!important;color:#319640!important;
 font-size:12px!important;font-weight:800!important
}
#activityModal .activity-section-title h3{margin:0!important;font-size:18px!important;color:#293b30!important}
#activityModal .activity-section-title p{margin:2px 0 0!important;color:#829087!important;font-size:9px!important}
#activityModal .activity-general-grid,
#activityModal .activity-assessment-list,
#activityModal .activity-preview-card{
 max-width:900px!important;
 margin:0 auto!important;
 padding:22px 26px!important;
 border:1px solid #dde6df!important;
 border-radius:12px!important;
 background:#fff!important;
 box-shadow:none!important
}
#activityModal .activity-general-grid{
 display:flex!important;
 flex-direction:column!important;
 gap:0!important
}
#activityModal .activity-general-grid>label,
#activityModal .activity-core-fields>label{
 min-height:60px!important;
 margin:0!important;
 padding:9px 0!important;
 display:grid!important;
 grid-template-columns:210px minmax(0,1fr)!important;
 align-items:center!important;
 gap:16px!important;
 border-bottom:1px solid #edf1ee!important
}
#activityModal .activity-general-grid>label>span:first-child,
#activityModal .activity-core-fields>label>span:first-child{
 margin:0!important;color:#5d6c63!important;font-size:10px!important;font-weight:650!important
}
#activityModal .activity-core-fields{display:contents!important}
#activityModal .activity-general-grid input:not([type=file]),
#activityModal .activity-general-grid select,
#activityModal .activity-general-grid textarea{
 width:100%!important;
 min-height:40px!important;
 padding:9px 12px!important;
 border:1px solid #dbe4dd!important;
 border-radius:9px!important;
 background:#fff!important;
 color:#35483c!important;
 font-size:10px!important;
 box-shadow:none!important
}
#activityModal .activity-general-grid textarea{min-height:72px!important;resize:vertical!important}
#activityModal .activity-image-field{align-items:start!important}
#activityModal .activity-image-drop{
 min-height:86px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 flex-direction:column!important;
 border:1px dashed #b9d8bd!important;
 border-radius:10px!important;
 background:#f7fbf7!important;color:#41974a!important
}
#activityModal .activity-image-drop svg{width:20px!important}
#activityModal .activity-image-drop small{color:#859189!important}
#activityModal .activity-date-range{
 padding:9px 0!important;
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:10px 16px!important;
 border-bottom:1px solid #edf1ee!important
}
#activityModal .activity-date-range label{
 display:grid!important;
 grid-template-columns:194px minmax(0,1fr)!important;
 align-items:center!important;
 gap:16px!important
}
#activityModal .activity-date-range label span{font-size:10px!important;color:#5d6c63!important;font-weight:650!important}
#activityModal .activity-inline-add{justify-self:end!important;margin-top:0!important;border-color:#8dcc93!important;color:#2f963d!important;background:#fff!important}
#activityModal .activity-assessment-list{display:flex!important;flex-direction:column!important;gap:10px!important}
#activityModal .activity-assessment-list article{min-height:72px!important;padding:14px 16px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 220px!important;align-items:center!important;gap:18px!important;border:1px solid #e1e8e2!important;border-radius:10px!important}
#activityModal .activity-assessment-list article b{font-weight:500!important}
#activityModal .activity-preview-card{overflow:hidden!important;padding:0!important}
#activityModal .activity-preview-cover{min-height:150px!important}
#activityModal .activity-preview-content{padding:20px 24px!important}
#activityModal .activity-wizard-actions{
 flex:0 0 68px!important;
 min-height:68px!important;
 padding:11px clamp(28px,6vw,74px)!important;
 display:flex!important;
 align-items:center!important;
 gap:10px!important;
 border-top:1px solid #e0e7e1!important;
 background:#fff!important;
 box-shadow:0 -8px 24px rgba(37,61,44,.04)!important
}
#activityModal .activity-wizard-actions button{
 min-width:130px!important;height:42px!important;
 border-radius:9px!important;font-size:11px!important;font-weight:700!important
}
#activityModal .activity-wizard-actions .primary{
 border-color:#45b74e!important;background:#45b74e!important;color:#fff!important
}
@media(max-width:760px){
 #activityModal{padding:0!important}
 #activityModal .activity-form-box{width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important}
 #activityModal .activity-wizard-head{min-height:82px!important;padding:24px 58px 16px!important;text-align:left!important}
 #activityModal .activity-wizard-head h2{font-size:21px!important}
 #activityModal .activity-wizard-steps{min-height:88px!important;padding:14px 18px 12px!important}
 #activityModal .activity-wizard-steps button{width:82px!important;font-size:8px!important}
 #activityModal #activityForm{height:calc(100% - 170px)!important}
 #activityModal .activity-step-panel{padding:18px 14px 24px!important}
 #activityModal .activity-general-grid,#activityModal .activity-assessment-list,#activityModal .activity-preview-card{padding:15px!important}
 #activityModal .activity-general-grid>label,#activityModal .activity-core-fields>label{grid-template-columns:1fr!important;gap:6px!important}
 #activityModal .activity-date-range{grid-template-columns:1fr!important}
 #activityModal .activity-date-range label{grid-template-columns:1fr!important;gap:6px!important}
 #activityModal .activity-assessment-list article{grid-template-columns:1fr!important}
 #activityModal .activity-wizard-actions{padding:10px 14px!important}
 #activityModal .activity-wizard-actions button{min-width:100px!important}
}

/* Activity creation uses a full-page workspace, not a popup. */
#activityModal{
 top:var(--shell-header)!important;
 right:0!important;
 bottom:0!important;
 left:var(--shell-sidebar)!important;
 width:calc(100vw - var(--shell-sidebar))!important;
 height:calc(100vh - var(--shell-header))!important;
 padding:0!important;
 align-items:stretch!important;
 justify-content:stretch!important;
 background:#f7faf7!important;
 backdrop-filter:none!important;
 z-index:45!important
}
#activityModal .activity-form-box{
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 max-height:none!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 border-radius:0!important;
 box-shadow:none!important
}
#activityModal .activity-close{
 top:22px!important;
 left:clamp(18px,3vw,44px)!important;
 right:auto!important;
 width:auto!important;
 min-width:82px!important;
 padding:0 13px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 border:1px solid #d8e3da!important;
 background:#fff!important;
 color:transparent!important;
 font-size:0!important
}
#activityModal .activity-close:before{
 content:"←  กลับ";
 color:#405148!important;
 font-size:11px!important;
 font-weight:700!important
}
#activityModal .activity-wizard-head{
 min-height:92px!important;
 padding:26px 140px 18px!important;
 background:#fff!important
}
#activityModal .activity-wizard-steps{
 min-height:104px!important;
 padding-left:max(16%,120px)!important;
 padding-right:max(16%,120px)!important;
 position:sticky!important;
 top:0!important;
 z-index:7!important;
 box-shadow:0 7px 18px rgba(31,54,38,.07)!important
}
#activityModal #activityForm{height:auto!important;min-height:calc(100% - 196px)!important}
#activityModal .activity-step-panel{
 overflow:visible!important;
 padding-top:24px!important;
 padding-bottom:30px!important;
 background:#fbfcfb!important
}
#activityModal .activity-section-title,
#activityModal .activity-general-grid,
#activityModal .activity-assessment-list,
#activityModal .activity-preview-card{max-width:1080px!important}
#activityModal .activity-general-grid,
#activityModal .activity-assessment-list,
#activityModal .activity-preview-card{padding-left:34px!important;padding-right:34px!important}
#activityModal .activity-wizard-actions{position:sticky!important;bottom:0!important;z-index:8!important}
@media(max-width:760px){
 #activityModal{inset:0!important;width:100vw!important;height:100vh!important}
 #activityModal .activity-close{top:17px!important;left:14px!important;min-width:70px!important;height:38px!important}
 #activityModal .activity-wizard-head{padding:23px 72px 14px!important;text-align:center!important}
 #activityModal .activity-wizard-steps{padding-left:12px!important;padding-right:12px!important}
 #activityModal #activityForm{height:auto!important;min-height:calc(100% - 170px)!important}
 #activityModal .activity-general-grid,
 #activityModal .activity-assessment-list,
 #activityModal .activity-preview-card{padding-left:15px!important;padding-right:15px!important}
}

/* Target-group participant split and achievement presentation. */
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(1){width:6%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(2){width:18%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(3){width:13%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(4){width:22%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(5){width:12%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(6){width:16%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(7){width:7%!important}
#settings .participant-split{
 display:inline-grid;
 grid-template-columns:minmax(64px,1fr) 1px minmax(64px,1fr);
 align-items:center;
 gap:10px;
 min-width:158px
}
#settings .participant-split>span{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:2px
}
#settings .participant-split small{
 color:#87938c;
 font-size:9px;
 font-weight:500;
 line-height:1.2;
 white-space:nowrap
}
#settings .participant-split b{
 color:#43544b;
 font-size:11px;
 font-weight:500
}
#settings .participant-split>span:last-child b{color:#21843f}
#settings .participant-split>i{
 width:1px;
 height:28px;
 background:#e2ebe4
}
#settings .target-achievement{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:52px;
 padding:5px 10px;
 border-radius:999px;
 background:#e7f7e9;
 color:#21843f;
 font-size:11px;
 font-weight:600
}
#settings .participant-split.total small{display:none}
#settings .target-total-row .participant-split b{font-size:11px!important}
#settings .target-total-row .target-achievement{font-size:11px!important}

/* Final operation-area presentation. */
#areas.areas-page{
 margin:0!important;
 padding:28px 34px 55px!important;
 min-height:calc(100vh - 94px)!important;
 background:#f7f8f7!important
}
#areas .areas-heading{margin:0 0 14px!important;padding:0 2px!important}
#areas .area-toolbar{
 margin:0!important;
 padding:14px!important;
 border-bottom:1px solid #e4ebe5!important
}
#areas .area-model.extension{color:#7652a5!important;background:#f0eafa!important}
#areas .area-name-cell small{color:#8a958e!important}
@media(max-width:900px){
 #areas.areas-page{padding:22px 24px 45px!important}
 #areas .area-toolbar{grid-template-columns:1fr!important}
}
@media(max-width:700px){
 #areas.areas-page{padding:18px 14px 40px!important}
}

/* Operation areas — align visual language with the sample-group system. */
#areas.areas-page{
 margin:0!important;
 padding:28px 34px 55px!important;
 min-height:calc(100vh - 94px)!important;
 background:#f7f8f7!important
}
#areas .areas-heading{
 margin:0 0 14px!important;
 padding:0 2px!important
}
#areas .area-data-panel{
 overflow:hidden;
 background:#fff;
 border:1px solid #dfe8e0;
 border-radius:17px;
 box-shadow:0 10px 30px rgba(31,61,40,.035)
}
#areas .area-toolbar{
 margin:0!important;
 padding:14px!important;
 border-bottom:1px solid #e4ebe5!important
}
#areas .area-grid{background:#fff!important}
#areas .area-table-wrap{padding:0 14px 12px!important}
#areas .area-name-meta{
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:7px;
 margin-top:5px
}
#areas .area-name-cell small{
 margin:0!important;
 color:#8a958e!important;
 font-size:10.5px!important;
 font-weight:400!important
}
#areas .area-model{
 display:inline-flex!important;
 align-items:center!important;
 min-height:24px!important;
 padding:3px 10px!important;
 border-radius:999px!important;
 font-size:10px!important;
 font-weight:500!important
}
#areas .area-model.main{
 color:#258b45!important;
 background:#e7f6eb!important
}
#areas .area-model.extension{
 color:#7652a5!important;
 background:#f0eafa!important
}
#areas .area-sample-summary{
 display:flex;
 align-items:flex-end;
 justify-content:center;
 gap:12px;
 white-space:nowrap
}
#areas .area-sample-summary b,
#areas .area-sample-summary span{
 display:grid;
 gap:2px;
 text-align:center;
 line-height:1.1
}
#areas .area-sample-summary b{
 color:#2357a6;
 font-size:15px;
 font-weight:600
}
#areas .area-sample-summary span{
 color:#26934a;
 font-size:12px;
 font-weight:500
}
#areas .area-sample-summary small{
 color:#8a958e;
 font-size:8px;
 font-weight:400
}
#areas .area-activity-count{
 color:#31473a!important;
 font-weight:400!important;
 cursor:pointer!important
}
#areas .area-row-actions button{
 width:34px!important;
 height:34px!important;
 border-radius:10px!important;
 color:#607269!important
}
#areas .area-row-actions button svg{width:16px!important;height:16px!important}
@media(max-width:900px){
 #areas.areas-page{padding:22px 24px 45px!important}
 #areas .area-toolbar{grid-template-columns:1fr!important}
}
@media(max-width:700px){
 #areas.areas-page{padding:18px 14px 40px!important}
 #areas .area-data-panel{border-radius:15px}
}

/* Operation-area table and compact form refinements. */
#areas .areas-heading h2{
 font-size:20px!important
}
#areas .area-table-wrap table{
 min-width:820px!important
}
#areas .area-table-wrap th{
 font-size:11.5px!important
}
#areas .area-table-wrap td,
#areas .area-name-link,
#areas .area-contact>b{
 font-size:12px!important
}
#areas .area-table-wrap th:nth-child(1){width:6%!important}
#areas .area-table-wrap th:nth-child(2){width:34%!important}
#areas .area-table-wrap th:nth-child(3){width:16%!important}
#areas .area-table-wrap th:nth-child(4){width:13%!important}
#areas .area-table-wrap th:nth-child(5){width:23%!important}
#areas .area-table-wrap th:nth-child(6){width:8%!important}
#areas .area-name-cell{
 display:grid!important;
 grid-template-columns:auto 1fr!important;
 align-items:center!important;
 justify-content:start!important;
 gap:3px 8px!important
}
#areas .area-name-cell .area-name-link{
 grid-column:1/-1!important;
 justify-self:start!important
}
#areas .area-name-cell small{
 display:inline-flex!important;
 align-items:center!important;
 gap:4px!important;
 color:#748279!important;
 font-size:10.5px!important
}
#areas .area-name-cell small svg{
 width:13px!important;
 height:13px!important;
 color:#4aa960!important
}
#areas .area-name-cell .area-model{
 position:static!important;
 display:inline-flex!important;
 justify-self:start!important;
 width:max-content!important;
 margin:0!important;
 padding:3px 8px!important;
 border-radius:999px!important;
 font-size:9px!important
}
#areas .area-activity-count{
 padding:0!important;
 border:0!important;
 border-bottom:1px solid #aebbb2!important;
 background:transparent!important;
 color:#31443a!important;
 font:400 12px inherit!important;
 cursor:pointer!important
}

#areaModal .area-modal-box{
 width:min(900px,calc(100vw - 32px))!important;
 padding:26px 30px 22px!important
}
#areaModal #areaModalTitle{
 margin-bottom:16px!important;
 font-size:20px!important
}
#areaModal #areaForm{
 gap:13px!important
}
#areaModal .area-image-fields{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:14px!important
}
#areaModal .area-image-fields label{
 position:relative!important
}
#areaModal .area-image-preview{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 flex-direction:column!important;
 gap:5px!important;
 min-height:88px!important;
 border:1px dashed #b9d1be!important;
 border-radius:10px!important;
 background:#f4f8f5 center/cover no-repeat!important;
 color:#77917e!important;
 overflow:hidden!important
}
#areaModal .area-image-preview svg{width:20px!important;height:20px!important}
#areaModal .area-image-preview em{font-size:10px!important;font-style:normal!important}
#areaModal .area-image-preview.has-image:before{
 content:""!important;
 position:absolute!important;
 inset:24px 0 0!important;
 background:rgba(20,39,27,.18)!important
}
#areaModal .area-image-preview.has-image svg{display:none!important}
#areaModal .area-image-preview.has-image em{
 position:relative!important;
 z-index:1!important;
 max-width:90%!important;
 padding:4px 8px!important;
 border-radius:7px!important;
 background:rgba(255,255,255,.88)!important;
 color:#34473a!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important
}
#areaModal .area-image-fields input[type="file"]{
 position:absolute!important;
 inset:24px 0 0!important;
 width:100%!important;
 height:auto!important;
 opacity:0!important;
 cursor:pointer!important
}
#areaModal .area-form-main{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:12px 14px!important
}
#areaModal .area-name-field{
 grid-column:span 2!important
}
#areaModal #areaForm input:not([type="file"]),
#areaModal #areaForm select{
 height:40px!important;
 padding:0 11px!important;
 font-size:11.5px!important
}
#areaModal .area-description-field textarea{
 min-height:70px!important;
 height:70px!important
}
#areaModal .modal-actions{
 padding-top:14px!important
}
#areaModal .modal-actions button{
 height:40px!important
}
@media(max-width:700px){
 #areaModal .area-modal-box{
  padding:22px 20px 18px!important
 }
 #areaModal .area-form-main{
  grid-template-columns:repeat(2,minmax(0,1fr))!important
 }
 #areaModal .area-name-field{grid-column:1/-1!important}
}

/* Learning program — follows the compact settings table standard. */
.nav-settings-group.open .nav-settings-submenu{
 max-height:540px!important
}
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) .table-wrap{
 overflow-x:auto
}
.settings-table-card table:has(#settingsTableHead[data-mode="learningPrograms"]){
 width:100%!important;
 min-width:760px!important;
 table-layout:fixed!important
}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(1){width:6%}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(2){width:23%}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(3){width:29%}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(4){width:12%;text-align:center}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(5){width:10%;text-align:center}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(6){width:15%;text-align:center}
#settingsTableHead[data-mode="learningPrograms"] th:nth-child(7){width:5%;text-align:center}
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) tbody td{
 padding-top:13px!important;
 padding-bottom:13px!important;
 font-weight:400!important
}
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) tbody td:nth-child(4),
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) tbody td:nth-child(5),
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) tbody td:nth-child(6),
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) tbody td:nth-child(7){
 text-align:center
}
.learning-program-count{
 appearance:none;
 padding:2px 3px;
 border:0;
 border-bottom:1px solid #91a79a;
 border-radius:0;
 background:transparent;
 color:#526158;
 font-weight:400;
 font-variant-numeric:tabular-nums
}
.learning-program-count:hover{
 border-bottom-color:#526158;
 color:#26372d;
 cursor:pointer
}
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) .setting-status.active{
 min-width:72px!important;
 padding:7px 14px!important;
 border:0!important;
 border-radius:999px!important;
 background:#e4f6e9!important;
 color:#168b3d!important;
 font-weight:400!important
}
.settings-table-card:has(#settingsTableHead[data-mode="learningPrograms"]) .setting-status.inactive{
 min-width:72px!important;
 padding:7px 14px!important;
 border:0!important;
 border-radius:999px!important;
 background:#fde8e8!important;
 color:#d63d3d!important;
 font-weight:400!important
}
#settingModal .setting-modal-box:has(#settingForm input[name="name"][placeholder*="โปรแกรมการเรียนรู้"]){
 max-width:680px!important
}
#settingModal .setting-modal-box:has(#settingForm input[name="name"][placeholder*="โปรแกรมการเรียนรู้"]) .setting-form-grid{
 grid-template-columns:1fr 150px!important;
 gap:16px!important
}
#settingModal .learning-program-form-grid>label:first-of-type{
 grid-column:1!important
}
#settingModal .learning-program-form-grid>label:has(select[name="status"]){
 grid-column:2!important
}

/* Operation areas — use the same compact master-data layout. */
#areas.areas-page{
 width:auto!important;
 max-width:none!important;
 min-height:0!important;
 margin:28px!important;
 padding:34px 26px 28px!important;
 border:1px solid #d9e7dc!important;
 border-radius:18px!important;
 background:#fff!important;
 box-shadow:0 10px 30px rgba(38,70,47,.04)!important
}
#areas .areas-heading{
 align-items:center!important;
 margin:0 20px 18px!important
}
#areas .areas-kicker,
#areas .areas-heading p,
#areas .area-stats{
 display:none!important
}
#areas .areas-heading h2{
 margin:0!important;
 color:#1f3127!important;
 font-size:24px!important;
 font-weight:700!important;
 letter-spacing:0!important
}
#areas .area-add-button{
 width:auto!important;
 min-width:116px!important;
 height:46px!important;
 justify-content:center!important;
 padding:0 22px!important;
 border-radius:12px!important;
 font-size:13px!important;
 cursor:pointer!important
}
#areas .area-toolbar{
 grid-template-columns:minmax(260px,1fr) 220px 165px!important;
 gap:10px!important;
 margin:0 20px!important;
 padding:0 0 16px!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important
}
#areas .area-search,
#areas .area-toolbar select{
 height:46px!important;
 border:1px solid #d7e5da!important;
 border-radius:11px!important;
 background:#fff!important
}
#areas .area-view-switch{display:none!important}
#areas .area-grid{
 margin:0!important
}
#areas .area-table-wrap{
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important
}
#areas .area-table-wrap table{
 width:100%!important;
 min-width:960px!important;
 table-layout:fixed!important
}
#areas .area-table-wrap th{
 height:50px!important;
 padding:10px 12px!important;
 background:#f5f9f6!important;
 border-bottom:1px solid #dfe9e1!important;
 font-size:10px!important;
 font-weight:600!important
}
#areas .area-table-wrap td{
 height:58px!important;
 padding:10px 12px!important;
 border-bottom:1px solid #e8eee9!important;
 font-size:10.5px!important;
 font-weight:400!important
}
#areas .area-name-link,
#areas .area-contact>b,
#areas .area-type-name{
 font-size:10.5px!important;
 font-weight:400!important
}
#areas .area-progress b{
 font-size:11px!important;
 font-weight:400!important
}
#areas .area-row-actions button{
 width:38px!important;
 height:38px!important;
 border:1px solid #d8e5da!important;
 border-radius:10px!important;
 background:#fff!important;
 cursor:pointer!important
}

/* Operation-area form — clean two-column form. */
#areaModal{
 padding:20px!important
}
#areaModal .area-modal-box{
 width:min(760px,calc(100vw - 32px))!important;
 max-height:calc(100vh - 40px)!important;
 padding:30px 34px 26px!important;
 overflow:auto!important;
 border:1px solid #dce7de!important;
 border-radius:20px!important;
 background:#fff!important
}
#areaModal .form-kicker{display:none!important}
#areaModal #areaModalTitle{
 margin:0 0 22px!important;
 color:#1f3127!important;
 font-size:23px!important;
 font-weight:700!important
}
#areaModal #areaForm{
 display:grid!important;
 gap:16px!important
}
#areaModal #areaForm>.form-grid{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:15px 16px!important
}
#areaModal #areaForm label{
 display:grid!important;
 gap:7px!important;
 min-width:0!important;
 margin:0!important;
 color:#45554b!important
}
#areaModal #areaForm label>span{
 display:block!important;
 font-size:11px!important;
 font-weight:600!important
}
#areaModal #areaForm input:not([type="file"]),
#areaModal #areaForm select,
#areaModal #areaForm textarea{
 display:block!important;
 box-sizing:border-box!important;
 width:100%!important;
 min-width:0!important;
 height:44px!important;
 margin:0!important;
 padding:0 13px!important;
 border:1px solid #d6e3d9!important;
 border-radius:10px!important;
 background:#fff!important;
 color:#314238!important;
 font:400 12px inherit!important;
 outline:0!important
}
#areaModal #areaForm textarea{
 min-height:88px!important;
 height:88px!important;
 padding:11px 13px!important;
 line-height:1.5!important;
 resize:vertical!important
}
#areaModal #areaForm input:focus,
#areaModal #areaForm select:focus,
#areaModal #areaForm textarea:focus{
 border-color:#62b878!important;
 box-shadow:0 0 0 3px rgba(54,165,84,.1)!important
}
#areaModal #areaForm input[type="file"]{
 box-sizing:border-box!important;
 width:100%!important;
 padding:9px 11px!important;
 border:1px dashed #bcd3c1!important;
 border-radius:10px!important;
 background:#f7faf7!important;
 font-size:11px!important
}
#areaModal .modal-actions{
 display:flex!important;
 justify-content:flex-end!important;
 gap:10px!important;
 margin-top:2px!important;
 padding-top:18px!important;
 border-top:1px solid #e5ece6!important
}
#areaModal .modal-actions button{
 min-width:112px!important;
 height:43px!important;
 border-radius:11px!important;
 cursor:pointer!important
}
@media(max-width:700px){
 #areas.areas-page{
  margin:18px 16px!important;
  padding:26px 18px 22px!important
 }
 #areas .areas-heading{margin:0 0 16px!important}
 #areas .area-toolbar{
  grid-template-columns:1fr!important;
  margin:0!important
 }
 #areaModal .area-modal-box{padding:26px 22px 22px!important}
 #areaModal #areaForm>.form-grid{grid-template-columns:1fr!important}
}
#settingModal .setting-modal-box:has(#settingForm input[name="name"][placeholder*="โปรแกรมการเรียนรู้"]) textarea{
 min-height:92px!important
}

/* Area-type master data. */
#settings .settings-table:has(#settingsTableHead[data-mode="areaTypes"]){
 width:100%!important;
 min-width:0!important;
 table-layout:fixed!important
}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(1){width:5%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(2){width:11%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(3){width:28%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(4){width:8%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(5){width:11%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(6){width:10%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(7){width:20%!important}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(8){width:7%!important}

/* Operation areas — align with the participant list screen. */
#areas .areas-heading{
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:18px!important;
 margin:0 20px 18px!important;
 text-align:left!important
}
#areas .area-toolbar{
 display:grid!important;
 grid-template-columns:minmax(260px,1fr) 220px 165px!important;
 align-items:center!important
}
#areas .area-search{
 position:relative!important;
 display:flex!important;
 align-items:center!important;
 width:100%!important;
 min-width:0!important;
 padding:0 15px!important
}
#areas .area-search>svg,
#areas .area-search>i{
 display:block!important;
 flex:0 0 auto!important;
 width:19px!important;
 height:19px!important;
 margin-right:10px!important;
 color:#82968a!important
}
#areas .area-search input{
 display:block!important;
 position:static!important;
 width:100%!important;
 min-width:0!important;
 height:44px!important;
 padding:0!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important;
 outline:0!important;
 font-size:12px!important
}
#areas .area-search .compact-search-trigger{display:none!important}
@media(max-width:760px){
 #areas.areas-page{
  margin:18px 16px!important;
  padding:26px 18px 22px!important
 }
 #areas .areas-heading{
  flex-direction:row!important;
  align-items:center!important;
  margin:0 0 18px!important
 }
 #areas .areas-heading h2{font-size:22px!important}
 #areas .area-add-button{
  min-width:104px!important;
  height:44px!important;
  padding:0 18px!important
 }
 #areas .area-toolbar{
  grid-template-columns:minmax(0,1fr)!important;
  margin:0!important
 }
}
#settings .settings-table:has(#settingsTableHead[data-mode="areaTypes"]) th,
#settings .settings-table:has(#settingsTableHead[data-mode="areaTypes"]) td{
 padding-left:6px!important;
 padding-right:6px!important;
 font-size:10px!important;
 overflow-wrap:anywhere
}
#settingsTableHead[data-mode="areaTypes"]~#settingsTable .updated-meta{
 align-items:center!important;
 text-align:center!important;
 white-space:normal!important
}
#settingsTableHead[data-mode="areaTypes"]~#settingsTable .setting-more{
 width:34px!important;
 height:34px!important
}
#settingsTableHead[data-mode="areaTypes"] th:nth-child(n+4),
#settingsTableHead[data-mode="areaTypes"]~#settingsTable td:nth-child(n+4){
 text-align:center!important
}
.area-type-category{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:62px;
 padding:4px 10px;
 border:0;
 border-radius:999px;
 font-size:10px;
 font-weight:400
}
.area-type-category.prototype{background:#e6f6e9!important;color:#187d39!important}
.area-type-category.expansion{background:#f0e9fb!important;color:#7446a8!important}
.area-type-number{font-size:10.5px;font-weight:500}
.area-type-number.target{color:#2563a8}
.area-type-number.completed{color:#21843f}
.area-type-number.remaining{color:#b47a12}
.area-completed-link{
 appearance:none;
 padding:0;
 border:0;
 border-bottom:1px solid #9fc7a9;
 background:transparent;
 color:#21843f;
 font:inherit;
 font-weight:500;
 line-height:1.3;
 cursor:pointer
}
.area-completed-link:hover{color:#126d2f;border-bottom-color:#21843f}
.area-completed-link:focus-visible{outline:2px solid #7bc98d;outline-offset:3px;border-radius:2px}
.area-usage-modal .usage-detail-box{width:min(880px,calc(100vw - 28px))!important}
.area-usage-modal .usage-detail-table th:nth-child(1),
.area-usage-modal .usage-detail-table td:nth-child(1){width:6%!important;text-align:center!important}
.area-usage-modal .usage-detail-table th:nth-child(2),
.area-usage-modal .usage-detail-table td:nth-child(2){width:23%!important}
.area-usage-modal .usage-detail-table th:nth-child(3),
.area-usage-modal .usage-detail-table td:nth-child(3){width:24%!important;white-space:normal!important}
.area-usage-modal .usage-detail-table th:nth-child(4),
.area-usage-modal .usage-detail-table td:nth-child(4){width:12%!important;text-align:center!important}
.area-usage-modal .usage-detail-table th:nth-child(5),
.area-usage-modal .usage-detail-table td:nth-child(5){width:15%!important;text-align:center!important}
.area-usage-modal .usage-detail-table th:nth-child(6),
.area-usage-modal .usage-detail-table td:nth-child(6){width:20%!important;text-align:center!important}
.area-usage-number{color:#315b48;font-variant-numeric:tabular-nums}
.area-usage-status{
 display:inline-flex;
 padding:4px 9px;
 border-radius:999px;
 background:#e8f7eb;
 color:#16833b;
 font-size:10px;
 font-weight:400
}
#settingsTableHead[data-mode="areaTypes"]~#settingsTable .setting-status{
 display:inline-flex!important;
 justify-content:center!important;
 min-width:62px!important;
 padding:5px 10px!important;
 border-radius:999px!important;
 font-size:10.5px!important;
 font-weight:400!important
}
#settingsTableHead[data-mode="areaTypes"]~#settingsTable .setting-status.active{background:#e8f7eb!important;color:#16833b!important}
#settingsTableHead[data-mode="areaTypes"]~#settingsTable .setting-status.inactive{background:#fdecec!important;color:#c74646!important}
.area-type-total-row,
.area-type-total-row td{
 height:36px!important;
 min-height:36px!important;
 padding-top:0!important;
 padding-bottom:0!important;
 background:#f7fbf7!important
}
.area-type-total-row td:nth-child(4) b{color:#2563a8}
.area-type-total-row td:nth-child(5) b{color:#21843f}
.area-type-total-row td:nth-child(6) b{color:#b47a12}
#settingModal .area-type-fields{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:12px!important;
 margin-top:10px!important
}
#settingModal .area-type-fields>label{
 display:grid!important;
 gap:5px!important;
 margin:0!important
}
#settingModal .area-type-fields input:disabled{
 border-color:#d9dfda!important;
 background:#eef1ee!important;
 color:#667168!important;
 opacity:1!important;
 -webkit-text-fill-color:#667168!important
}
#settingModal .area-type-category-field{
 display:grid!important
}
@media(max-width:560px){
 #settingModal .area-type-fields{grid-template-columns:1fr!important}
}

/* Venue master data. */
#settings .settings-table:has(#settingsTableHead[data-mode="venues"]){
 width:100%!important;
 min-width:760px!important;
 table-layout:fixed!important
}
#settingsTableHead[data-mode="venues"] th:nth-child(1){width:6%!important}
#settingsTableHead[data-mode="venues"] th:nth-child(2){width:11%!important}
#settingsTableHead[data-mode="venues"] th:nth-child(3){width:30%!important}
#settingsTableHead[data-mode="venues"] th:nth-child(4){width:12%!important}
#settingsTableHead[data-mode="venues"] th:nth-child(5){width:14%!important}
#settingsTableHead[data-mode="venues"] th:nth-child(6){width:20%!important}
#settingsTableHead[data-mode="venues"] th:nth-child(7){width:7%!important}
#settingsTableHead[data-mode="venues"] th,
#settingsTableHead[data-mode="venues"]~#settingsTable td{padding-left:8px!important;padding-right:8px!important}
#settingsTableHead[data-mode="venues"] th:not(:nth-child(3)),
#settingsTableHead[data-mode="venues"]~#settingsTable td:not(:nth-child(3)){text-align:center!important}
.venue-thumb{
 display:block;
 width:54px;
 height:40px;
 margin:auto;
 border-radius:8px;
 object-fit:cover;
 background:#edf3ed
}
.venue-thumb[src*="activity-small-space-garden"]{object-position:78% center}
.venue-name-cell{display:flex;align-items:center;gap:7px}
.venue-map-link{
 display:inline-grid;
 place-items:center;
 flex:0 0 22px;
 width:22px;
 height:22px;
 border:0;
 border-radius:0;
 background:transparent;
 color:#318c46;
 cursor:pointer
}
.venue-map-link:hover{background:transparent;color:#126d2f}
.venue-map-link svg{width:14px;height:14px}
#settingsTableHead[data-mode="venues"]~#settingsTable .setting-status{
 display:inline-flex!important;
 justify-content:center!important;
 min-width:62px!important;
 padding:5px 10px!important;
 border-radius:999px!important;
 font-weight:400!important
}
#settingsTableHead[data-mode="venues"]~#settingsTable .setting-status.active{background:#e8f7eb!important;color:#16833b!important}
#settingsTableHead[data-mode="venues"]~#settingsTable .setting-status.inactive{background:#fdecec!important;color:#c74646!important}
.venue-usage-link{
 appearance:none;
 padding:0;
 border:0;
 border-bottom:1px solid #9fb7a7;
 background:transparent;
 color:#52675c;
 font:inherit;
 cursor:pointer
}
.venue-usage-link:hover{color:#16833b;border-bottom-color:#16833b}
#settingModal .venue-image-field{
 display:block!important;
 margin:0 0 12px!important
}
.venue-image-upload{
 display:grid;
 grid-template-columns:92px 1fr;
 align-items:center;
 gap:12px;
 margin-top:6px;
 padding:9px;
 border:1px dashed #cbd9ce;
 border-radius:12px;
 background:#fafcf9
}
.venue-image-upload img{
 width:92px;
 height:62px;
 border-radius:9px;
 object-fit:cover;
 background:#eaf0ea
}
.venue-image-upload>div{display:grid;gap:3px}
.venue-image-upload b{font-size:11px;font-weight:600;color:#33483b}
.venue-image-upload small{font-size:9px;color:#859188}
.venue-image-upload input{
 width:100%!important;
 height:auto!important;
 margin-top:4px!important;
 padding:5px!important;
 border:0!important;
 background:transparent!important;
 font-size:9px!important
}
.setting-modal-box:has(.venue-image-field) .setting-form-grid:first-of-type>label:first-child{
 display:none!important
}

/* Speaker master data. */
#settings .settings-table:has(#settingsTableHead[data-mode="speakers"]){
 width:100%!important;
 min-width:820px!important;
 table-layout:fixed!important
}
#settingsTableHead[data-mode="speakers"] th:nth-child(1){width:5%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(2){width:22%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(3){width:14%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(4){width:22%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(5){width:11%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(6){width:10%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(7){width:11%!important}
#settingsTableHead[data-mode="speakers"] th:nth-child(8){width:5%!important}
#settingsTableHead[data-mode="speakers"]~#settingsTable .setting-status{
 display:inline-flex!important;
 justify-content:center!important;
 min-width:62px!important;
 padding:5px 10px!important;
 border-radius:999px!important;
 font-weight:400!important
}
#settingsTableHead[data-mode="speakers"]~#settingsTable .setting-status.active{background:#e8f7eb!important;color:#16833b!important}
#settingsTableHead[data-mode="speakers"]~#settingsTable .setting-status.inactive{background:#fdecec!important;color:#c74646!important}
#settingsTableHead[data-mode="speakers"]~#settingsTable .usage-count{
 color:#52675c!important;
 font-weight:400!important;
 text-decoration:underline!important;
 text-decoration-color:#9fb7a7!important;
 text-underline-offset:3px!important;
 cursor:pointer!important
}

/* Shared delete / blocked-delete dialog for every settings module. */
#deleteSettingModal .delete-confirm-box{
 position:relative!important;
 width:min(440px,calc(100vw - 28px))!important;
 padding:30px 30px 26px!important;
 overflow:hidden!important;
 border:1px solid #e4ebe5!important;
 border-radius:20px!important;
 background:#fff!important;
 text-align:center!important;
 box-shadow:0 28px 80px rgba(21,39,28,.24)!important
}
#deleteSettingModal .delete-confirm-box::before{
 content:"";
 position:absolute;
 inset:0 0 auto;
 height:5px;
 background:linear-gradient(90deg,#e65c5c,#f2a3a3)
}
#deleteSettingModal .delete-confirm-box:has(.delete-dialog-icon.blocked)::before{
 background:linear-gradient(90deg,#d89b31,#f2cf7a)
}
#deleteSettingModal .delete-dialog-icon{
 display:grid!important;
 place-items:center!important;
 width:58px!important;
 height:58px!important;
 margin:0 auto 16px!important;
 border-radius:50%!important;
 background:#fff0f0!important;
 color:#d84b4b!important
}
#deleteSettingModal .delete-dialog-icon.blocked{
 background:#fff7e6!important;
 color:#b87916!important
}
#deleteSettingModal .delete-dialog-icon svg{width:25px!important;height:25px!important}
#deleteSettingModal h2{
 margin:0 0 9px!important;
 color:#1c2d23!important;
 font-size:20px!important;
 font-weight:650!important;
 line-height:1.3!important
}
#deleteSettingModal #deleteSettingMessage{
 max-width:none!important;
 margin:0 0 18px!important;
 padding:13px 15px!important;
 border:1px solid #e8eee9!important;
 border-radius:12px!important;
 background:#f8faf8!important;
 color:#5d6b63!important;
 font-size:11.5px!important;
 line-height:1.65!important;
 text-align:left!important
}
#deleteSettingModal .setting-form-actions{
 display:flex!important;
 justify-content:center!important;
 gap:10px!important;
 margin:0!important;
 padding:0!important;
 border:0!important
}
#deleteSettingModal .setting-form-actions button{
 min-width:112px!important;
 min-height:40px!important;
 padding:0 18px!important;
 border-radius:11px!important;
 font-size:11px!important;
 font-weight:550!important;
 cursor:pointer!important
}
#deleteSettingModal .delete-setting-close{
 border:1px solid #dbe3dd!important;
 background:#f4f7f5!important;
 color:#46564d!important
}
#deleteSettingModal .delete-setting-close:hover{background:#e9efeb!important}
#deleteSettingModal #confirmDeleteSetting{
 border:1px solid #d94c4c!important;
 background:#d94c4c!important;
 color:#fff!important;
 box-shadow:0 8px 20px rgba(217,76,76,.2)!important
}
#deleteSettingModal #confirmDeleteSetting:hover{background:#c63e3e!important}
#deleteSettingModal .delete-confirm-box:has(.delete-dialog-icon.blocked) .delete-setting-close{
 min-width:132px!important;
 border-color:#2f9d4b!important;
 background:#38a852!important;
 color:#fff!important;
 box-shadow:0 8px 20px rgba(56,168,82,.18)!important
}
@media(max-width:480px){
 #deleteSettingModal .delete-confirm-box{padding:26px 20px 22px!important}
 #deleteSettingModal h2{font-size:18px!important}
 #deleteSettingModal .setting-form-actions{flex-direction:column-reverse!important}
 #deleteSettingModal .setting-form-actions button{width:100%!important}
}

/* Match the activity-type table canvas and row width. */
#settings .settings-table:has(#settingsTableHead[data-mode="targetGroups"]){
 width:100%!important;
 min-width:900px!important;
 table-layout:fixed!important
}
#settings .settings-table:has(#settingsTableHead[data-mode="targetGroups"]) th,
#settings .settings-table:has(#settingsTableHead[data-mode="targetGroups"]) td{
 box-sizing:border-box!important
}

#settingsTableHead[data-mode="targetGroups"]~#settingsTable .age-condition{
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 color:inherit!important;
 font-size:inherit!important
}

@media(max-width:520px){
 .settings-table-head:has(#addSetting[data-mode="activityTypes"]) .settings-search{
  justify-self:stretch!important;
  width:100%!important;
  max-width:none!important
 }
}

@media(max-width:640px){
 .settings-table-head{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px 10px!important
 }
 .settings-table-tools .settings-add{
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  padding-inline:13px!important
 }
 .settings-table-tools .settings-search{
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important
 }
}

/* Master-data form: restore a predictable field layout after the compact UI rules. */
#settingModal .setting-modal-box{
 width:min(560px,calc(100vw - 32px))!important;
 padding:22px 24px 18px!important
}
#settingModal .setting-modal-box h2{
 margin:0 42px 16px 0!important;
 font-size:20px!important;
 line-height:1.3!important
}
#settingModal #settingForm{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 gap:12px!important;
 width:100%!important
}
#settingModal #settingForm>.setting-form-grid{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 132px!important;
 gap:12px!important;
 width:100%!important
}
#settingModal #settingForm label,
#settingModal #settingForm>.setting-form-grid>label{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 align-items:start!important;
 gap:5px!important;
 width:100%!important;
 margin:0!important
}
#settingModal #settingForm label>span{
 display:block!important;
 width:100%!important;
 margin:0!important;
 font-size:11px!important;
 line-height:1.4!important
}
#settingModal #settingForm input,
#settingModal #settingForm select,
#settingModal #settingForm textarea{
 display:block!important;
 width:100%!important;
 min-width:0!important;
 max-width:none!important;
 margin:0!important;
 border:1px solid #d8e2db!important;
 min-height:38px!important;
 padding:8px 10px!important;
 border-radius:9px!important;
 font-size:12px!important;
 outline:0!important;
 box-shadow:none!important
}
#settingModal #settingForm textarea{
 min-height:68px!important;
 max-height:90px!important
}
#settingModal #settingForm input:focus,
#settingModal #settingForm select:focus,
#settingModal #settingForm textarea:focus{
 border-color:#22a552!important;
 box-shadow:0 0 0 3px rgba(34,165,82,.11)!important
}
#settingModal #settingForm select.status-select-hidden{
 display:none!important
}
#settingModal .setting-status-switch{
 align-self:start!important;
 width:auto!important;
 min-height:38px!important;
 font-size:11px!important
}
#settingModal .setting-form-actions{
 display:flex!important;
 align-items:center!important;
 justify-content:flex-end!important;
 gap:8px!important;
 width:100%!important;
 margin:2px 0 0!important;
 padding:12px 0 0!important;
 border-top:1px solid #e8eee9!important
}
#settingModal .setting-form-actions button{
 min-height:36px!important;
 padding:0 14px!important;
 border-radius:10px!important;
 font-size:11px!important
}
#settingModal .close{
 top:14px!important;
 right:14px!important;
 width:28px!important;
 height:28px!important;
 font-size:19px!important
}

@media(max-width:640px){
 #settingModal{
  align-items:flex-end!important;
  padding:0!important
 }
 #settingModal .setting-modal-box{
  width:100%!important;
  max-height:92dvh!important;
  padding:24px 18px 18px!important;
  border-radius:18px 18px 0 0!important
 }
 #settingModal .setting-modal-box h2{
  margin-bottom:20px!important;
  font-size:21px!important
 }
 #settingModal #settingForm>.setting-form-grid{
  grid-template-columns:1fr!important
 }
 #settingModal .setting-form-actions{
  position:sticky;
  bottom:0;
  padding-top:14px!important;
  background:#fff
 }
 #settingModal .setting-form-actions button{
  flex:1!important
 }
}

/* Settings table: use one quiet horizontal separator per row. */
.settings-table-card>.table-wrap{
 border:0!important;
 border-radius:0 0 12px 12px!important
}
.settings-table{
 border-collapse:collapse!important;
 border-spacing:0!important
}
.settings-table thead{
 border:0!important
}
.settings-table th{
 border:0!important;
 border-bottom:1px solid #e4ebe5!important;
 background:#f7faf7!important
}
.settings-table td{
 border:0!important;
 background:#fff!important
}
.settings-table tbody tr:not(:last-child) td{
 border-bottom:1px solid #edf1ee!important
}
.settings-table tbody tr:hover td{
 background:#fafcfb!important
}

/* Target groups: match the two-level list header used by the reference. */
.settings-table-head:has(#addSetting[data-mode="targetGroups"]){
 grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-rows:auto auto!important;
 row-gap:8px!important;
 min-height:122px!important;
 padding:16px 18px 14px!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"])>div:first-child{
 grid-column:1!important;
 grid-row:1 / 3!important;
 align-self:stretch!important;
 display:flex!important;
 flex-direction:column;
 justify-content:space-between;
 padding:5px 0 3px
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) #settingsTableDescription{
 display:block!important;
 margin:0!important;
 color:#26362d!important;
 font-size:12px!important;
 font-weight:650!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) .settings-add{
 grid-column:2!important;
 grid-row:1!important;
 min-width:158px!important;
 height:44px!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) .settings-search{
 grid-column:2!important;
 grid-row:2!important;
 width:228px!important;
 max-width:228px!important;
 height:40px!important
}

@media(max-width:700px){
 .settings-table-head:has(#addSetting[data-mode="targetGroups"]){
  grid-template-columns:1fr auto!important;
  min-height:0!important
 }
 .settings-table-head:has(#addSetting[data-mode="targetGroups"])>div:first-child{
  grid-column:1!important;
  grid-row:1!important;
  gap:7px
 }
 .settings-table-head:has(#addSetting[data-mode="targetGroups"]) .settings-add{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important
 }
 .settings-table-head:has(#addSetting[data-mode="targetGroups"]) .settings-search{
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important
 }
}

/* Target groups: same table and form language as activity types. */
#settings .settings-table-head:has(#addSetting[data-mode="targetGroups"]) #settingsTableDescription{
 display:none!important
}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(1){width:6%!important;text-align:center!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(2){width:18%!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(3){width:18%!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(4){width:18%!important;text-align:center!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(5){width:12%!important;text-align:center!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(6){width:18%!important;text-align:center!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(7){width:10%!important;text-align:center!important}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td{
 height:46px!important;
 padding:7px 9px!important;
 font-size:10.5px!important;
 font-weight:400!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(1),
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(4),
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(5),
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(6),
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(7){
 text-align:center!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(6) .updated-meta{
 align-items:center!important;
 text-align:center!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td strong,
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-progress b{
 font-size:inherit!important;
 font-weight:400!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row,
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row td{
 height:36px!important;
 min-height:36px!important;
 padding-top:0!important;
 padding-bottom:0!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row strong,
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row .target-progress b{
 font-size:11px!important;
 font-weight:700!important
}

#settingModal .setting-modal-box:has(.target-group-fields){
 width:min(600px,calc(100vw - 32px))!important;
 max-height:92vh!important;
 padding:22px 24px 0!important;
 overflow:hidden!important;
 border-radius:18px!important
}
#settingModal .setting-modal-box:has(.target-group-fields)>h2{
 margin:0 42px 16px 0!important;
 font-size:20px!important
}
#settingModal .setting-modal-box:has(.target-group-fields)>form{
 display:grid!important;
 gap:12px!important;
 max-height:calc(92vh - 72px)!important;
 padding:0 5px 0 0!important;
 overflow-y:auto!important
}
#settingModal .setting-modal-box:has(.target-group-fields) #settingForm>.setting-form-grid{
 grid-template-columns:minmax(0,1fr) 132px!important;
 gap:12px!important
}
#settingModal .target-group-fields{
 display:grid!important;
 grid-template-columns:1fr 1fr!important;
 column-gap:12px!important;
 row-gap:10px!important;
 margin:0!important
}
#settingModal .target-group-fields>.condition-label,
#settingModal .target-group-fields>.target-age-range,
#settingModal .target-group-fields>.target-check,
#settingModal .target-group-fields>.target-full-field{
 grid-column:1 / -1!important
}
#settingModal .target-age-range{
 min-height:58px!important;
 padding:8px 10px!important;
 gap:8px!important;
 border-radius:10px!important
}
#settingModal .target-age-range select{
 height:38px!important;
 min-height:38px!important;
 font-size:12px!important
}
#settingModal .target-group-fields input[type="checkbox"],
#settingModal .target-group-fields input[type="radio"]{
 width:auto!important;
 min-width:0!important;
 height:auto!important;
 min-height:0!important;
 padding:0!important
}
#settingModal .target-check{
 display:flex!important;
 grid-template-columns:auto 1fr!important;
 align-items:center!important;
 gap:7px!important;
 margin:0!important;
 font-size:11px!important
}
#settingModal .target-gender-field{
 min-height:58px!important;
 padding:9px 11px!important;
 border:1px solid #e4ebe5!important;
 border-radius:10px!important;
 background:#fafcf9!important
}
#settingModal .target-gender-field label{
 display:inline-flex!important;
 align-items:center!important;
 width:auto!important;
 margin:4px 16px 0 0!important;
 font-size:11px!important
}
#settingModal .target-group-fields textarea{
 min-height:58px!important;
 max-height:78px!important
}
#settingModal .setting-modal-box:has(.target-group-fields) .setting-form-actions{
 position:sticky!important;
 bottom:0!important;
 margin:2px -5px 0!important;
 padding:12px 5px 14px!important;
 background:#fff!important;
 border-top:1px solid #e8eee9!important
}
#settingModal .setting-modal-box:has(.target-group-fields) .setting-form-actions button{
 height:36px!important;
 min-height:36px!important;
 border-radius:10px!important;
 font-size:11px!important
}

@media(max-width:640px){
 #settingModal .setting-modal-box:has(.target-group-fields){
  width:100%!important;
  padding:20px 17px 0!important
 }
 #settingModal .setting-modal-box:has(.target-group-fields) #settingForm>.setting-form-grid,
 #settingModal .target-group-fields{
  grid-template-columns:1fr!important
 }
 #settingModal .target-group-fields>*{
  grid-column:1!important
 }
}

/* Target-group visual polish. */
.settings-table-card:has(#addSetting[data-mode="targetGroups"]){
 overflow:hidden!important;
 border:1px solid #e0e9e2!important;
 border-radius:16px!important;
 box-shadow:0 10px 30px rgba(30,68,43,.055)!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) #settingsTableTitle{
 color:#182b22!important;
 font-size:20px!important;
 line-height:1.35!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) #settingsTableDescription{
 color:#5f7067!important;
 font-size:11px!important;
 font-weight:600!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) .settings-search{
 padding-inline:12px!important;
 border-color:#dde6df!important;
 border-radius:9px!important;
 background:#fbfcfb!important;
 box-shadow:0 2px 8px rgba(32,63,44,.025)!important
}
.settings-table-head:has(#addSetting[data-mode="targetGroups"]) .settings-search:focus-within{
 border-color:#66bd78!important;
 background:#fff!important;
 box-shadow:0 0 0 3px rgba(66,189,120,.1)!important
}
#settingsTableHead[data-mode="targetGroups"] th{
 height:44px!important;
 padding:10px 14px!important;
 color:#68786f!important;
 font-size:10px!important;
 font-weight:700!important
}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(1){width:7%!important;text-align:center}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(2){width:22%!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(3){width:22%!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(4){width:23%!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(5){width:18%!important}
#settingsTableHead[data-mode="targetGroups"] th:nth-child(6){width:8%!important;text-align:center}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td{
 height:58px!important;
 padding:10px 14px!important;
 color:#4c5c53!important;
 font-size:11px!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td:first-child{
 text-align:center;
 color:#839087!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable td strong{
 color:#263a2f!important;
 font-size:12px!important;
 font-weight:650!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .age-condition{
 padding:6px 10px!important;
 border-color:#dfe9e1!important;
 border-radius:9px!important;
 background:#fbfdfb!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-progress b{
 font-size:12px!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row td{
 height:64px!important;
 border-top:1px solid #dce9df!important;
 background:#f7fbf7!important
}
#settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row .target-progress b{
 color:#07963a!important;
 font-size:15px!important
}

/* Sidebar category accordions: closed by default, expanded on demand. */
.sidebar .nav-settings-submenu{
 display:grid!important;
 max-height:0!important;
 padding-top:0!important;
 overflow:hidden!important;
 opacity:0;
 visibility:hidden;
 transition:max-height .24s ease,opacity .18s ease,padding-top .18s ease
}
.sidebar .nav-settings-group.open .nav-settings-submenu{
 max-height:360px!important;
 padding-top:4px!important;
 opacity:1;
 visibility:visible
}
.sidebar .nav-settings-title .settings-chevron{
 margin-left:auto;
 transition:transform .2s ease
}
.sidebar .nav-settings-group.open>.nav-settings-title .settings-chevron{
 transform:rotate(180deg)
}
.sidebar.collapsed .nav-settings-submenu{
 display:none!important
}

/* Keep the system identity visible while the sidebar menu scrolls. */
.sidebar .brand{
  position:sticky!important;
  top:0!important;
  z-index:12!important;
  min-height:84px!important;
  margin:0 -2px 5px!important;
  padding:0 2px!important;
  background:#fff!important;
}
.sidebar nav{gap:2px!important;margin-top:3px!important;padding-bottom:78px!important}
.sidebar .nav-item{min-height:40px!important;padding:8px 12px!important;gap:11px!important;font-size:12px!important;line-height:1.25!important}
.sidebar .nav-item svg{width:17px!important;height:17px!important;flex:0 0 17px!important}
.sidebar .nav-settings-group{margin-top:3px!important;padding-top:5px!important}
.sidebar .nav-settings-group{border-top:0!important}
.sidebar .sidebar-account{display:none!important}
.sidebar .nav-settings-title{min-height:40px!important;padding:8px 12px!important;gap:11px!important;font-size:12px!important;line-height:1.25!important}
.sidebar .nav-subitem{min-height:36px!important;margin-left:20px!important;width:calc(100% - 20px)!important;padding:7px 10px!important;font-size:11px!important;line-height:1.25!important}
@media(max-width:760px){
  .sidebar .brand{min-height:80px!important}
  .sidebar .nav-item,.sidebar .nav-settings-title{min-height:38px!important;padding:7px 11px!important;font-size:11.5px!important}
  .sidebar .nav-subitem{min-height:34px!important;padding-block:6px!important;font-size:10.5px!important}
}
/* Use the same primary action as the Activity Types screen */
#addParticipant{
  min-height:40px!important;
  height:40px!important;
  padding:0 16px!important;
  border:1px solid #16a34a!important;
  border-radius:9px!important;
  background:#16a34a!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
  box-shadow:0 7px 16px rgba(22,163,74,.17)!important
}
#addParticipant:hover{
  border-color:#15803d!important;
  background:#15803d!important;
  box-shadow:0 9px 19px rgba(22,163,74,.23)!important
}
#addParticipant svg{width:17px!important;height:17px!important}

/* Tracking worklist */
.tracking-work-page{padding:26px 32px 40px;background:#fbfdfb}.tracking-work-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.tracking-work-heading h2{margin:0;color:#173028;font-size:24px;font-weight:700}.tracking-work-heading p{margin:3px 0 0;color:#84928c;font-size:13px}.tracking-export{height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;border-color:#d6e3d9;background:#fff;color:#29443a}.tracking-export svg{width:17px;height:17px}
.tracking-work-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.tracking-work-summary article{min-height:112px;padding:18px;display:flex;align-items:flex-start;gap:14px;border:1px solid #e4ebe6;border-radius:13px;background:#fff;box-shadow:0 5px 16px rgba(35,71,54,.045)}.tracking-work-summary article>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}.tracking-work-summary article>span svg{width:21px;height:21px}.tracking-work-summary small{display:block;margin:1px 0 5px;font-size:12px;font-weight:600;color:#53645d}.tracking-work-summary strong{display:block;color:#162d25;font-size:26px;line-height:1.1}.tracking-work-summary strong em{font-size:12px;font-style:normal;font-weight:500;color:#687770}.tracking-work-summary p{margin:5px 0 0;color:#89958f;font-size:11px}
.tracking-work-summary .danger{background:linear-gradient(135deg,#fff 55%,#fff5f5)}.tracking-work-summary .danger>span{background:#fff0f0;color:#e85252}.tracking-work-summary .warning{background:linear-gradient(135deg,#fff 55%,#fff9ed)}.tracking-work-summary .warning>span{background:#fff4d9;color:#e59b17}.tracking-work-summary .info{background:linear-gradient(135deg,#fff 55%,#f3f7ff)}.tracking-work-summary .info>span{background:#eaf2ff;color:#477fe4}.tracking-work-summary .success{background:linear-gradient(135deg,#fff 55%,#f2fbf2)}.tracking-work-summary .success>span{background:#e8f7e9;color:#2fac4c}
.tracking-work-panel{overflow:hidden;border:1px solid #dde7df;border-radius:14px;background:#fff;box-shadow:0 6px 20px rgba(37,67,52,.04)}.tracking-work-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border-bottom:1px solid #e5ece7}.tracking-work-toolbar h3{margin:0;white-space:nowrap;font-size:16px;color:#20372e}.tracking-work-toolbar h3 span{margin-left:5px;color:#7b8983;font-size:12px;font-weight:500}.tracking-work-filters{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.tracking-work-filters label{width:190px;height:38px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid #dbe5dd;border-radius:9px;background:#fff}.tracking-work-filters label svg{width:16px;color:#829088}.tracking-work-filters input{min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:12px}.tracking-work-filters select{height:38px;max-width:175px;padding:0 28px 0 11px;border:1px solid #dbe5dd;border-radius:9px;background-color:#fff;color:#52625b;font:inherit;font-size:12px}
.tracking-work-table-wrap{overflow-x:auto}.tracking-work-table{width:100%;min-width:1120px;border-collapse:collapse}.tracking-work-table th{padding:12px 14px;background:#f7faf7;color:#718078;text-align:left;font-size:12px;font-weight:600;white-space:nowrap}.tracking-work-table td{padding:13px 14px;border-top:1px solid #edf1ee;color:#354b42;font-size:12px;white-space:nowrap}.tracking-work-table tbody tr:hover{background:#fbfdfb}.tracking-person-code{color:#315d49;font-size:11px}.tracking-person-link{padding:0;border:0;background:none;color:#243b31;font:inherit;cursor:pointer}.tracking-person-link:hover{color:#00a83b;text-decoration:underline}.tracking-status{display:inline-flex;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:600}.tracking-status.danger{background:#fdecec;color:#d94b4b}.tracking-status.warning{background:#fff2d9;color:#c7830d}.tracking-status.info{background:#eaf2ff;color:#3974d2}.tracking-status.success{background:#e9f7e8;color:#3b9748}.tracking-late{color:#e04c4c!important;font-weight:600}.tracking-row-actions{display:flex;align-items:center;gap:6px}.tracking-assess{height:34px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #9fd8ae;border-radius:8px;background:#fff;color:#269645;font:inherit;font-size:11px;font-weight:600;cursor:pointer}.tracking-assess svg{width:14px;height:14px}.tracking-row-actions .icon-action{width:34px;height:34px}
.tracking-work-foot{padding:11px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf1ee;color:#84918b;font-size:11px}.tracking-work-foot div{display:flex;gap:5px}.tracking-work-foot button{width:30px;height:30px;border:1px solid #dce5de;border-radius:7px;background:#fff;color:#607169}.tracking-work-foot button.active{border-color:#83cf95;background:#ebf8ed;color:#258a3e}
@media(max-width:1100px){.tracking-work-summary{grid-template-columns:repeat(2,1fr)}.tracking-work-toolbar{align-items:flex-start;flex-direction:column}.tracking-work-filters{width:100%;justify-content:flex-start;flex-wrap:wrap}}@media(max-width:640px){.tracking-work-page{padding:22px 18px 36px}.tracking-work-heading p{display:none}.tracking-work-summary{grid-template-columns:1fr 1fr;gap:8px}.tracking-work-summary article{min-height:96px;padding:13px;gap:10px}.tracking-work-summary article>span{width:34px;height:34px}.tracking-work-summary strong{font-size:22px}.tracking-work-filters label,.tracking-work-filters select{width:100%;max-width:none}.tracking-export{font-size:0;width:42px;padding:0;justify-content:center}}

/* Core page visibility */
main>.page{display:none!important}
main>.page.active{display:block!important}

/* Immediate menu feedback and circular profile photo. */
.sidebar{
 transition:width .1s ease-out,transform .1s ease-out!important
}
.setting-more{
 touch-action:manipulation;
 transition:background-color .08s ease,border-color .08s ease,color .08s ease!important
}
.setting-actions-dropdown,
.setting-actions-dropdown.show{
 transition:none!important;
 animation:none!important
}
.setting-actions-dropdown.show{
 display:grid!important
}
.setting-actions-dropdown.is-floating{
 position:fixed!important;
 z-index:10000!important
}
.header-profile>.profile-photo{
 overflow:hidden!important;
 border-radius:50%!important
}
.header-profile>.profile-photo img{
 border-radius:50%!important
}

/* Clear active/inactive status badges in the activity-type table. */
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-status{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 min-width:62px!important;
 padding:5px 10px!important;
 border:0!important;
 border-radius:999px!important;
 font-size:10.5px!important;
 font-weight:400!important;
 font-variation-settings:"wght" 400!important;
 line-height:1.2!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-status.active{
 background:#e8f7eb!important;
 color:#16833b!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-status.inactive{
 background:#fdecec!important;
 color:#c74646!important
}

/* Final compact sizing for activity types and their usage dialog. */
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-more{
 width:28px!important;
 height:28px!important;
 border-radius:7px!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .setting-more svg{
 width:14px!important;
 height:14px!important
}
.setting-actions-dropdown{
 min-width:154px!important;
 padding:4px!important
}
.setting-actions-dropdown button{
 min-height:30px!important;
 padding:5px 8px!important;
 gap:7px!important;
 font-size:10px!important
}
.setting-actions-dropdown button svg{
 width:13px!important;
 height:13px!important;
 flex-basis:13px!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row{
 height:36px!important;
 min-height:36px!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row td{
 height:36px!important;
 min-height:36px!important;
 max-height:36px!important;
 padding-top:0!important;
 padding-bottom:0!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable .activity-total-row b{
 color:#20372b!important;
 font-size:12px!important;
 font-weight:700!important;
 text-decoration:none!important
}
.usage-detail-table th{
 height:34px!important;
 padding-top:5px!important;
 padding-bottom:5px!important
}
.usage-detail-table td{
 height:40px!important;
 padding-top:5px!important;
 padding-bottom:5px!important
}
#settingsTableHead[data-mode="activityTypes"] th:nth-child(6),
#settingsTableHead[data-mode="activityTypes"] th:nth-child(7),
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td:nth-child(6),
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td:nth-child(7){
 text-align:center!important
}
#settingsTableHead[data-mode="activityTypes"]~#settingsTable td:nth-child(7) .updated-meta{
 align-items:center!important;
 text-align:center!important
}

/* Settings design system: activity types are the visual baseline. */
#settings .settings-table-card{
 overflow:hidden!important;
 border:1px solid #e0e9e2!important;
 border-radius:13px!important;
 box-shadow:0 6px 20px rgba(31,62,42,.045)!important
}
#settings .settings-table-head,
#settings .settings-table-head:has(#addSetting){
 display:grid!important;
 grid-template-columns:minmax(220px,1fr) minmax(240px,300px) 94px!important;
 grid-template-rows:auto!important;
 align-items:center!important;
 gap:10px!important;
 min-height:64px!important;
 padding:10px 14px!important
}
#settings .settings-table-head>div:first-child{
 display:block!important;
 grid-column:1!important;
 grid-row:1!important;
 align-self:center!important;
 padding:0!important
}
#settings #settingsTableTitle{
 margin:0!important;
 color:#1f2e26!important;
 font-size:18px!important;
 font-weight:700!important;
 line-height:1.3!important
}
#settings #settingsTableDescription{
 display:none!important
}
#settings .settings-table-tools{
 display:contents!important
}
#settings .settings-search,
#settings .settings-table-head:has(#addSetting) .settings-search{
 display:flex!important;
 grid-column:2!important;
 grid-row:1!important;
 align-items:center!important;
 justify-self:end!important;
 width:300px!important;
 max-width:300px!important;
 height:38px!important;
 padding:0 11px!important;
 gap:8px!important;
 border:1px solid #dbe5dd!important;
 border-radius:9px!important;
 background:#fff!important;
 box-shadow:none!important
}
#settings .settings-search>svg{
 width:16px!important;
 height:16px!important;
 color:#829088!important
}
#settings .settings-search input{
 width:100%!important;
 height:36px!important;
 padding:0!important;
 border:0!important;
 outline:0!important;
 background:transparent!important;
 color:#52625b!important;
 font-size:12px!important;
 font-weight:400!important;
 box-shadow:none!important
}
#settings .settings-search:focus-within{
 border-color:#91c99d!important;
 box-shadow:0 0 0 3px rgba(72,165,92,.1)!important
}
#settings #addSetting,
#settings #addSetting[data-mode]{
 grid-column:3!important;
 grid-row:1!important;
 justify-self:end!important;
 width:94px!important;
 min-width:94px!important;
 height:34px!important;
 min-height:34px!important;
 padding:0 14px!important;
 border-radius:9px!important;
 font-size:12px!important;
 font-weight:700!important;
 cursor:pointer!important
}
#settings .settings-table th{
 height:36px!important;
 padding:7px 9px!important;
 color:#748179!important;
 font-size:9.5px!important;
 font-weight:600!important;
 line-height:1.25!important
}
#settings .settings-table tbody tr,
#settings .settings-table td{
 height:46px!important
}
#settings .settings-table td{
 padding:7px 9px!important;
 color:#4f5e56!important;
 font-size:10.5px!important;
 font-weight:400!important;
 line-height:1.35!important
}
#settings .settings-table td strong,
#settings .settings-table .setting-code{
 color:inherit!important;
 font-size:inherit!important;
 font-weight:400!important
}
#settings .settings-table .setting-status{
 font-size:10.5px!important;
 font-weight:400!important;
 font-variation-settings:"wght" 400!important
}
#settings .settings-table .setting-more{
 width:28px!important;
 height:28px!important;
 border-radius:7px!important
}
#settings .settings-table .setting-more svg{
 width:14px!important;
 height:14px!important
}
#settingModal .setting-modal-box h2,
#settingModal .setting-modal-box:has(.target-group-fields)>h2{
 font-size:20px!important;
 line-height:1.3!important
}
#settingModal .setting-modal-box label>span,
#settingModal .setting-modal-box:has(.target-group-fields) label>span{
 font-size:11px!important;
 font-weight:600!important
}
#settingModal .setting-modal-box input,
#settingModal .setting-modal-box select,
#settingModal .setting-modal-box textarea{
 font-size:12px!important;
 font-weight:400!important
}
#settingModal .setting-form-actions button{
 min-height:36px!important;
 border-radius:10px!important;
 font-size:11px!important
}

@media(max-width:700px){
 #settings .settings-table-head,
 #settings .settings-table-head:has(#addSetting){
  grid-template-columns:minmax(0,1fr) 94px!important;
  grid-template-rows:auto auto!important
 }
 #settings .settings-search,
 #settings .settings-table-head:has(#addSetting) .settings-search{
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important
 }
 #settings #addSetting,
 #settings #addSetting[data-mode]{
  grid-column:2!important;
  grid-row:1!important
 }
}

/* Plain-text age condition in the standardized target-group table. */
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .age-condition{
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 color:inherit!important;
 font-size:inherit!important
}

/* Target recruitment progress: target, collected, and remaining. */
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(1){width:5%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(2){width:17%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(3){width:16%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(4){width:11%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(5){width:13%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(6){width:11%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(7){width:10%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(8){width:12%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(9){width:5%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(n+4),
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(n+4){
 text-align:center!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(8) .updated-meta{
 align-items:center!important;
 text-align:center!important
}
#settings .target-count{
 color:#43544b!important;
 font-weight:500!important;
 white-space:nowrap
}
#settings .target-count small,
#settings .target-remaining small{
 color:#87938c!important;
 font-size:9px!important;
 font-weight:400!important
}
#settings .target-count.achieved{
 color:#21843f!important;
 font-weight:650!important
}
#settings .target-remaining{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:58px;
 padding:4px 8px;
 border-radius:999px;
 white-space:nowrap;
 font-size:10px;
 font-weight:600
}
#settings .target-remaining.pending{
 background:#fff3dc;
 color:#a66b0b
}
#settings .target-remaining.complete{
 background:#e8f7eb;
 color:#16833b
}
#settings .target-total-row b{
 font-size:11px!important;
 font-weight:700!important
}
#settings .target-total-row .target-total-remaining{
 color:#a66b0b!important
}

/* Target table without the condition column. */
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(1){width:6%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(2){width:20%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(3){width:13%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(4){width:15%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(5){width:13%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(6){width:11%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(7){width:16%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(8){width:6%!important}
#settings #settingsTableHead[data-mode="targetGroups"] th:nth-child(n+3),
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(n+3){
 text-align:center!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable td:nth-child(7) .updated-meta{
 align-items:center!important;
 text-align:center!important
}

/* Stable, compact age-range controls in the target-group form. */
#settingModal .target-age-range{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;
 align-items:end!important;
 gap:10px!important;
 min-height:0!important;
 padding:10px 12px!important
}
#settingModal .target-age-input{
 display:grid!important;
 gap:5px!important;
 margin:0!important
}
#settingModal .target-age-input>span:first-child{
 color:#647168!important;
 font-size:10px!important;
 font-weight:500!important
}
#settingModal .target-age-control{
 position:relative!important;
 display:block!important
}
#settingModal .target-age-control input{
 width:100%!important;
 height:38px!important;
 min-height:38px!important;
 padding:0 34px 0 10px!important;
 border:1px solid #dbe5dc!important;
 border-radius:9px!important;
 background:#fff!important;
 outline:0!important
}
#settingModal .target-age-control input:focus{
 border-color:#75b96a!important;
 box-shadow:0 0 0 3px rgba(81,166,72,.12)!important
}
#settingModal .target-age-control em{
 position:absolute!important;
 right:11px!important;
 top:50%!important;
 transform:translateY(-50%)!important;
 color:#8a958d!important;
 font-size:10px!important;
 font-style:normal!important;
 pointer-events:none!important
}
#settingModal .target-age-separator{
 align-self:end!important;
 padding-bottom:10px!important;
 color:#7b877f!important;
 font-size:10px!important;
 text-align:center!important
}
#settingModal .target-age-control input:disabled{
 background:#f2f5f2!important;
 color:#99a39c!important
}
@media(max-width:520px){
 #settingModal .target-age-range{
  grid-template-columns:1fr!important
 }
 #settingModal .target-age-separator{
  display:none!important
 }
}

/* Use the activity-type status badge as the standard for target groups. */
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .setting-status{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 min-width:62px!important;
 padding:5px 10px!important;
 border:0!important;
 border-radius:999px!important;
 font-size:10.5px!important;
 font-weight:400!important;
 font-variation-settings:"wght" 400!important;
 line-height:1.2!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .setting-status.active{
 background:#e8f7eb!important;
 color:#16833b!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .setting-status.inactive{
 background:#fdecec!important;
 color:#c74646!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable tr:not(.target-total-row) td:nth-child(2) strong{
 font-weight:400!important;
 font-variation-settings:"wght" 400!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-count,
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-remaining{
 display:inline!important;
 min-width:0!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 font-size:10.5px!important;
 font-weight:500!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-count{
 color:#2563a8!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-count.achieved{
 color:#21843f!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-remaining.pending{
 color:#b47a12!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-remaining.complete{
 color:#21843f!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row td:nth-child(3) b{
 color:#2563a8!important
}
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row td:nth-child(4) b{
 color:#21843f!important
}

/* Final target-group form layout: one clean, predictable grid. */
#settingModal .setting-modal-box:has(.target-group-fields){
 width:min(600px,calc(100vw - 28px))!important;
 max-height:92vh!important;
 padding:20px 22px 0!important;
 overflow:hidden!important;
 border-radius:18px!important
}
#settingModal .setting-modal-box:has(.target-group-fields)>h2{
 margin:0 42px 14px 0!important;
 font-size:19px!important
}
#settingModal .setting-modal-box:has(.target-group-fields)>.setting-form-note,
#settingModal .setting-modal-box:has(.target-group-fields)>.form-kicker{
 display:none!important
}
#settingModal .setting-modal-box:has(.target-group-fields)>form{
 display:block!important;
 max-height:calc(92vh - 62px)!important;
 padding:0 5px 0 0!important;
 overflow-x:hidden!important;
 overflow-y:auto!important
}
#settingModal .setting-modal-box:has(.target-group-fields) #settingForm>.setting-form-grid{
 display:grid!important;
 grid-template-columns:1fr!important;
 gap:0!important;
 margin:0 0 10px!important
}
#settingModal .setting-modal-box:has(.target-group-fields) #settingForm>label{
 display:grid!important;
 gap:5px!important;
 margin:0 0 10px!important
}
#settingModal .target-name-status-row{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 132px!important;
 align-items:end!important;
 gap:12px!important;
 margin:0 0 10px!important
}
#settingModal .target-name-status-row>label{
 display:grid!important;
 gap:5px!important;
 margin:0!important
}
#settingModal .target-name-status-row .setting-status-switch{
 min-height:38px!important
}
#settingModal .target-group-fields{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:10px 12px!important;
 margin:0!important
}
#settingModal .target-group-fields>.condition-label{
 grid-column:1 / 2!important;
 margin:0!important;
 color:#4e5d54!important;
 font-size:11px!important;
 font-weight:600!important
}
#settingModal .target-group-fields>.target-age-range,
#settingModal .target-group-fields>.target-gender-field,
#settingModal .target-group-fields>.target-full-field{
 grid-column:1 / -1!important
}
#settingModal .target-age-range{
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important
}
#settingModal .target-age-input-head{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:10px!important;
 min-height:18px!important
}
#settingModal .target-age-input-head>span:first-child{
 color:#4e5d54!important;
 font-size:10.5px!important;
 font-weight:600!important
}
#settingModal .target-age-input-head .target-check{
 display:inline-flex!important;
 align-items:center!important;
 justify-self:auto!important;
 min-height:24px!important;
 margin:0!important;
 padding:0!important;
 color:#657269!important;
 font-size:9.5px!important;
 font-weight:400!important
}
#settingModal .target-age-input-head .target-check input{
 width:14px!important;
 height:14px!important;
 margin:0 4px 0 0!important
}
#settingModal .target-achieved-field>span:after{
 content:none!important;
 display:none!important
}
#settingModal .target-gender-field{
 min-height:0!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important
}
#settingModal .target-gender-field legend{
 margin:0 0 7px!important;
 font-size:10.5px!important;
 font-weight:600!important
}
#settingModal .target-gender-field label{
 margin:0 20px 0 0!important;
 font-size:10.5px!important
}
#settingModal .target-count-field,
#settingModal .target-achieved-field,
#settingModal .target-remaining-field{
 grid-column:auto!important;
 margin:0!important
}
#settingModal .target-field-hint{
 display:block!important;
 min-height:14px!important;
 margin:-2px 0 4px!important;
 color:#929d96!important;
 font-size:8.5px!important;
 font-weight:400!important;
 line-height:1.2!important
}
#settingModal .target-group-fields input[type="number"],
#settingModal .target-group-fields textarea{
 width:100%!important;
 border:1px solid #dce5dd!important;
 border-radius:9px!important;
 background:#fff!important
}
#settingModal .target-group-fields textarea{
 min-height:54px!important;
 max-height:70px!important;
 padding:9px 10px!important;
 resize:vertical!important
}
#settingModal .setting-modal-box:has(.target-group-fields) .setting-form-actions{
 position:sticky!important;
 z-index:3!important;
 bottom:0!important;
 margin:12px -5px 0!important;
 padding:11px 5px 13px!important;
 background:#fff!important;
 border-top:1px solid #e8eee9!important
}
#settingModal .setting-modal-box:has(.target-group-fields) .setting-form-actions button{
 height:36px!important;
 min-height:36px!important;
 border-radius:10px!important
}

/* Match the compact table-header height for the target summary row. */
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row,
#settings #settingsTableHead[data-mode="targetGroups"]~#settingsTable .target-total-row td{
 height:36px!important;
 min-height:36px!important;
 padding-top:0!important;
 padding-bottom:0!important
}
@media(max-width:560px){
 #settingModal .setting-modal-box:has(.target-group-fields){
  padding:18px 16px 0!important
 }
 #settingModal .target-group-fields{
  grid-template-columns:1fr!important
 }
 #settingModal .target-count-field,
 #settingModal .target-achieved-field,
 #settingModal .target-remaining-field{
  grid-column:1!important
 }
 #settingModal .target-name-status-row{
  grid-template-columns:1fr!important
 }
 #settingModal .target-age-input-head{
  align-items:flex-start!important;
  flex-direction:column!important;
  gap:4px!important
 }
}

/* Final target-table width standard, aligned with activity types. */
#settings .settings-table:has(#settingsTableHead[data-mode="targetGroups"]){
 width:100%!important;
 min-width:900px!important;
 table-layout:fixed!important
}
#settings .settings-table:has(#settingsTableHead[data-mode="targetGroups"]) tr{
 width:100%!important
}

/* Read-only target metrics and compact information tooltips. */
#settingModal .target-achieved-field input:disabled,
#settingModal .target-remaining-field input:disabled{
 border-color:#d9dfda!important;
 background:#eef1ee!important;
 color:#667168!important;
 opacity:1!important;
 cursor:not-allowed!important;
 -webkit-text-fill-color:#667168!important
}
#settingModal .target-field-label{
 display:inline-flex!important;
 align-items:center!important;
 gap:5px!important;
 width:max-content!important
}
#settingModal .target-info{
 position:relative!important;
 display:inline-grid!important;
 place-items:center!important;
 width:15px!important;
 height:15px!important;
 border:1px solid #9ba79f!important;
 border-radius:50%!important;
 color:#7e8b83!important;
 font-family:Arial,sans-serif!important;
 font-size:9px!important;
 font-style:normal!important;
 font-weight:700!important;
 line-height:1!important;
 cursor:help!important
}
#settingModal .target-info:after{
 content:attr(data-tooltip);
 position:absolute;
 z-index:20;
 left:50%;
 bottom:calc(100% + 8px);
 width:max-content;
 max-width:220px;
 padding:7px 9px;
 border-radius:7px;
 background:#26352c;
 color:#fff;
 font-family:inherit;
 font-size:9px;
 font-weight:400;
 line-height:1.4;
 white-space:normal;
 opacity:0;
 pointer-events:none;
 transform:translate(-50%,4px);
 transition:.15s ease
}
#settingModal .target-info:hover:after,
#settingModal .target-info:focus:after{
 opacity:1;
 transform:translate(-50%,0)
}

/* Reliable mobile sidebar visibility. */
@media(max-width:900px){
 #sidebar.sidebar{
  z-index:1000!important;
  transform:translateX(-102%)!important;
  visibility:hidden!important;
  pointer-events:none!important
 }
 #sidebar.sidebar.open{
  transform:translateX(0)!important;
  visibility:visible!important;
  pointer-events:auto!important
 }
 #menuBtn{
  position:relative!important;
  z-index:1001!important;
  cursor:pointer!important;
  pointer-events:auto!important;
 touch-action:manipulation!important
 }
}

/* Final operation-area sizing overrides (keep last in cascade). */
#areas.areas-page{
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important
}
#areas .areas-heading h2{font-size:20px!important}
#areas .area-table-wrap table{min-width:820px!important}
#areas .area-table-wrap th{font-size:11.5px!important}
#areas .area-table-wrap td,
#areas .area-name-link,
#areas .area-contact>b{font-size:12px!important}
#areas .area-table-wrap th:nth-child(1){width:6%!important}
#areas .area-table-wrap th:nth-child(2){width:34%!important}
#areas .area-table-wrap th:nth-child(3){width:16%!important}
#areas .area-table-wrap th:nth-child(4){width:13%!important}
#areas .area-table-wrap th:nth-child(5){width:23%!important}
#areas .area-table-wrap th:nth-child(6){width:8%!important}
#areaModal .area-modal-box{
 width:min(900px,calc(100vw - 32px))!important;
 padding:26px 30px 22px!important
}
#areaModal #areaModalTitle{
 margin-bottom:16px!important;
 font-size:20px!important
}
#areaModal .area-form-main{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:12px 14px!important
}
#areaModal .area-name-field{grid-column:span 2!important}
#areaModal #areaForm input:not([type="file"]),
#areaModal #areaForm select{height:40px!important}
#areaModal .area-description-field textarea{
 min-height:70px!important;
 height:70px!important
}
@media(max-width:700px){
 #areaModal .area-modal-box{padding:22px 20px 18px!important}
 #areaModal .area-form-main{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #areaModal .area-name-field{grid-column:1/-1!important}
}

/* Keep the activity workflow stable while scrolling. */
#activityModal.show{display:block!important}
#activityModal .activity-form-box{
 position:relative!important;
 display:block!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 overscroll-behavior:contain!important;
 scrollbar-gutter:stable!important
}
#activityModal .activity-wizard-head{position:relative!important;top:auto!important}
#activityModal .activity-wizard-steps{
 position:sticky!important;
 top:0!important;
 z-index:20!important;
 min-height:92px!important;
 padding-top:14px!important;
 padding-bottom:12px!important;
 background:rgba(242,250,241,.98)!important;
 backdrop-filter:blur(10px)!important;
 box-shadow:0 7px 20px rgba(31,54,38,.09)!important
}
#activityModal #activityForm{height:auto!important;min-height:calc(100% - 184px)!important;overflow:visible!important}
#activityModal .activity-step-panel{height:auto!important;max-height:none!important;overflow:visible!important}
#activityModal .activity-wizard-actions{
 position:sticky!important;
 right:0!important;
 bottom:0!important;
 left:0!important;
 z-index:21!important;
 background:rgba(255,255,255,.98)!important;
 backdrop-filter:blur(10px)!important
}
@media(max-width:760px){
 #activityModal .activity-form-box{scrollbar-gutter:auto!important}
 #activityModal .activity-wizard-steps{min-height:82px!important}
}