/* Final operation-area theme, loaded after the shared styles. */
#areas.areas-page{
 margin:0!important;
 padding:28px 34px 55px!important;
 min-height:calc(100vh - 94px)!important;
 background:#f7f8f7!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!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:1px solid #d8e5da!important;
 border-radius:10px!important;
 background:#fff!important;
 color:#607269!important;
 cursor:pointer!important
}
#areas .area-row-actions button svg{width:16px!important;height:16px!important}
#areas .area-contact{
 display:grid!important;
 gap:5px!important
}
#areas .area-contact>b,
#areas .area-contact>small{
 display:flex!important;
 align-items:center!important;
 gap:6px!important;
 margin:0!important;
 color:#26332c!important;
 font-size:11px!important;
 font-weight:400!important;
 line-height:1.25!important
}
#areas .area-contact svg{
 width:13px!important;
 height:13px!important;
 flex:0 0 13px!important;
 color:#1f2923!important;
 stroke:#1f2923!important
}

/* Sample-group inspired page structure. */
#areas .areas-heading{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:20px!important;
 min-height:58px!important
}
#areas .areas-heading h2{
 margin:0!important;
 font-size:21px!important;
 font-weight:700!important
}
#areas .area-heading-actions{
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:10px
}
#areas .area-heading-actions button{
 height:46px!important;
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 gap:8px!important;
 border-radius:12px!important;
 cursor:pointer!important
}
#areas .area-heading-actions svg{width:16px!important;height:16px!important}
#areas .area-search-toggle{width:48px!important;padding:0!important}
#areas .area-search-toggle.active{
 color:#15913a!important;
 border-color:#9dd6aa!important;
 background:#edf9ef!important
}
#areas .area-export-button{padding:0 17px!important}
#areas .area-add-button{min-width:142px!important;padding:0 22px!important}
#areas .area-stats{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:12px!important;
 margin:18px 0 20px!important
}
#areas .area-stats article{
 position:relative;
 min-width:0;
 min-height:112px;
 display:flex;
 align-items:center;
 gap:14px;
 padding:18px 18px;
 background:#fff;
 border:1px solid #dce8de;
 border-radius:15px;
 box-shadow:0 8px 24px rgba(31,61,40,.025)
}
#areas .area-stat-icon{
 width:52px!important;
 height:52px!important;
 flex:0 0 52px!important;
 display:grid!important;
 place-items:center!important;
 border-radius:13px!important;
 color:#249844!important;
 background:#eaf7ec!important
}
#areas .area-stat-icon svg{width:22px!important;height:22px!important}
#areas .area-stat-icon.prototype{color:#238a43!important;background:#e7f6eb!important}
#areas .area-stat-icon.extension{color:#7652a5!important;background:#f0eafa!important}
#areas .area-stat-icon.activity{color:#b76d18!important;background:#fff2df!important}
#areas .area-stats article>div{min-width:0}
#areas .area-stats small{
 display:block;
 color:#5f6d64;
 font-size:11px;
 font-weight:500
}
#areas .area-stats strong{
 display:block;
 margin:5px 0 3px;
 color:#173426;
 font-size:23px;
 font-weight:650;
 line-height:1
}
#areas .area-stats strong em{
 color:#7d8a82;
 font-size:10px;
 font-style:normal;
 font-weight:400
}
#areas .area-stats p{
 overflow:hidden;
 margin:0!important;
 color:#8b968f!important;
 font-size:9px!important;
 text-overflow:ellipsis;
 white-space:nowrap
}
#areas .area-stat-rate{
 position:absolute;
 top:13px;
 right:13px;
 padding:4px 7px;
 border-radius:999px;
 color:#269143;
 background:#e9f7e9;
 font-size:9px;
 font-weight:600
}
#areas .area-data-panel{border-radius:17px!important}
#areas .area-toolbar{
 display:none!important;
 grid-template-columns:minmax(260px,1fr) 220px 165px!important;
 gap:10px!important
}
#areas .area-data-panel.filters-open .area-toolbar{display:grid!important}
#areas .area-table-wrap{padding:0!important}
#areas .area-table-wrap table{min-width:900px!important}
#areas .area-table-wrap th{
 height:52px!important;
 background:#f7faf7!important;
 border-right:1px solid #edf1ed!important;
 font-size:11px!important
}
#areas .area-table-wrap td{height:64px!important;padding-top:11px!important;padding-bottom:11px!important}
@media(max-width:900px){
 #areas.areas-page{padding:22px 24px 45px!important}
 #areas .area-stats{grid-template-columns:repeat(2,minmax(0,1fr))!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}
 #areas .areas-heading{align-items:flex-start!important}
 #areas .area-heading-actions{gap:7px}
 #areas .area-export-button{width:44px!important;padding:0!important;font-size:0!important}
 #areas .area-export-button svg{margin:0!important}
 #areas .area-add-button{min-width:112px!important;padding:0 15px!important}
 #areas .area-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:14px 0 16px!important}
 #areas .area-stats article{min-height:94px;padding:14px 16px}
}

/* Operation-area table refinements. */
#areas .area-stats{display:none!important}
#areas .area-name-meta small svg{
 color:#929b95!important;
 stroke:#929b95!important
}
#areas .area-sample-summary b,
#areas .area-sample-summary span{
 color:#33423a!important;
 font-size:12px!important;
 font-weight:400!important
}
#areas .area-sample-summary small{
 color:#7f8b84!important;
 font-weight:400!important
}
#areas .area-table-wrap th:nth-child(3),
#areas .area-table-wrap td:nth-child(3),
#areas .area-table-wrap th:nth-child(4),
#areas .area-table-wrap td:nth-child(4){
 text-align:center!important
}
#areas .area-activity-count{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 margin-inline:auto!important
}
#areas .area-contact b,
#areas .area-contact small,
#areas .area-contact svg{
 color:#7f8983!important;
 stroke:#7f8983!important
}
#areas .area-participant-total{
 position:relative;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:44px;
 color:#33423a;
 cursor:help;
 outline:none
}
#areas .area-participant-tooltip{
 position:absolute;
 z-index:30;
 left:50%;
 bottom:calc(100% + 10px);
 display:grid;
 width:190px;
 padding:12px 14px;
 border:1px solid #dbe7dd;
 border-radius:12px;
 box-shadow:0 10px 28px rgba(24,52,38,.14);
 color:#526058;
 background:#fff;
 font-size:11px;
 line-height:1.6;
 opacity:0;
 pointer-events:none;
 text-align:left;
 transform:translate(-50%,5px);
 transition:opacity .14s ease,transform .14s ease
}
#areas .area-participant-tooltip:after{
 position:absolute;
 top:100%;
 left:50%;
 width:9px;
 height:9px;
 border-right:1px solid #dbe7dd;
 border-bottom:1px solid #dbe7dd;
 background:#fff;
 content:"";
 transform:translate(-50%,-5px) rotate(45deg)
}
#areas .area-participant-tooltip b{color:#25372d;font-size:12px}
#areas .area-participant-tooltip span{
 display:flex;
 justify-content:space-between;
 gap:16px
}
#areas .area-participant-tooltip strong{color:#278b43;font-weight:600}
#areas .area-participant-total:hover .area-participant-tooltip,
#areas .area-participant-total:focus .area-participant-tooltip{
 opacity:1;
 transform:translate(-50%,0)
}