/* 2.21: slim TRIQ workspace. Presentation only; record and sending logic unchanged. */
:root{
  --wl221-surface:#ffffff;
  --wl221-canvas:#f7f9fc;
  --wl221-line:#e4eaf2;
  --wl221-shadow:0 2px 8px rgba(24,51,82,.035),0 8px 24px rgba(24,51,82,.025);
  --wl221-shadow-raised:0 4px 12px rgba(24,51,82,.06),0 12px 26px rgba(24,51,82,.035);
}
body .wlcrm-app{border-color:var(--wl221-line)!important;background:var(--wl221-surface)!important;box-shadow:0 8px 34px rgba(24,51,82,.055)!important}
body .wlcrm-app .wlcrm-panel{background:var(--wl221-canvas)!important}
@media(min-width:1101px){body #wlcrm-app.wlcrm-app{margin-top:10px!important}}

/* The original blue TRIQ PNG is deliberately unmodified. */
body .wlcrm-app .wlcrm-header{gap:12px!important;padding:10px 12px!important;min-height:78px!important;background:#fff!important;box-shadow:0 2px 12px rgba(24,51,82,.025)!important}
body .wlcrm-app .wlcrm-brand-area{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;min-width:0!important;padding:0!important}
body .wlcrm-app .wlcrm-brand-area>div{min-width:0!important;margin:0!important;padding:0!important;flex:0 0 auto!important}
body .wlcrm-app .wlcrm-brand-area>div:before{display:none!important}
body .wlcrm-app .wlcrm-triq-logo{display:block!important;width:96px!important;height:auto!important;max-width:none!important;object-fit:contain}
body .wlcrm-app .wlcrm-pi-link{display:inline-flex!important;align-self:center!important;flex:0 0 auto!important;width:116px!important;min-width:116px!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0 10px!important;border-color:#ecd8c2!important;background:#fff7ee!important;color:#925729!important;border-radius:9px!important;box-shadow:0 3px 8px rgba(133,86,38,.045)!important}
body .wlcrm-app .wlcrm-pi-link span,body .wlcrm-app .wlcrm-pi-link b{color:#925729!important;font-size:10.5px!important;font-weight:550!important}
body .wlcrm-app .wlcrm-header .wlcrm-user{display:grid!important;grid-template-columns:94px 64px!important;grid-template-rows:auto!important;gap:6px!important;width:164px!important;min-width:0!important;max-width:164px!important}
body .wlcrm-app .wlcrm-connection,body .wlcrm-app .wlcrm-logout{height:34px!important;min-height:34px!important;padding:5px 6px!important;font-size:10px!important;font-weight:550!important;border-radius:8px!important;box-shadow:0 2px 6px rgba(24,51,82,.025)!important}
body .wlcrm-app .wlcrm-connection-text{font-size:9px!important;font-weight:550!important;min-width:0!important}
body .wlcrm-app .wlcrm-logout:after{font-size:10px!important;margin-left:4px!important}
body .wlcrm-app .wlcrm-attendance{border-color:var(--wl221-line)!important;border-radius:10px!important;box-shadow:0 2px 8px rgba(24,51,82,.025)!important;background:#fbfcfe!important}
body .wlcrm-app .wlcrm-att-buttons button{font-weight:550!important;text-transform:none!important;border-radius:7px!important;box-shadow:0 2px 5px rgba(24,51,82,.025)!important}
body .wlcrm-app .wlcrm-att-buttons #wlcrm-check-in{background:#edf8f3!important;color:#087e62!important;border:1px solid #c5e5d8!important}
body .wlcrm-app .wlcrm-att-buttons #wlcrm-break{background:#fff8ed!important;color:#95622e!important;border:1px solid #efdfc7!important}
body .wlcrm-app .wlcrm-att-buttons #wlcrm-check-out{background:#eff4fc!important;color:#3d6296!important;border:1px solid #d6e1f1!important}
body .wlcrm-app .wlcrm-att-buttons button:disabled{background:#f2f4f7!important;color:#8390a1!important;border-color:#e1e6ed!important;box-shadow:none!important;opacity:.65!important}

/* One desktop banner: logo / PI / employee / attendance / online / logout. */
@media(min-width:1200px){
  body .wlcrm-app .wlcrm-header{grid-template-columns:230px minmax(705px,1fr) 164px!important;align-items:center!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-brand-area,body .wlcrm-app .wlcrm-header>.wlcrm-attendance,body .wlcrm-app .wlcrm-header>.wlcrm-user{grid-column:auto!important;grid-row:1!important}
}
@media(min-width:768px){
  body .wlcrm-app .wlcrm-attendance{display:grid!important;grid-template-columns:minmax(70px,1fr) 100px 72px repeat(3,minmax(66px,.8fr)) repeat(4,44px)!important;gap:5px!important;align-items:center!important;min-height:56px!important;height:56px!important;padding:6px 8px!important;min-width:0!important}
  body .wlcrm-app .wlcrm-attendance-top,body .wlcrm-app .wlcrm-att-buttons,body .wlcrm-app .wlcrm-att-stats{display:contents!important;margin:0!important;padding:0!important}
  body .wlcrm-app .wlcrm-attendance-top>b,body .wlcrm-app .wlcrm-attendance-top>span,body .wlcrm-app .wlcrm-attendance-top>strong{grid-column:auto!important;grid-row:auto!important;min-width:0!important;margin:0!important;line-height:1.3!important}
  body .wlcrm-app #wlcrm-att-name{display:block!important;font-size:11px!important;font-weight:600!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body .wlcrm-app #wlcrm-att-status{font-size:9px!important;padding:5px 4px!important;text-align:center!important;white-space:nowrap!important;border-radius:7px!important}
  body .wlcrm-app #wlcrm-att-timer{font-size:16px!important;text-align:center!important}
  body .wlcrm-app .wlcrm-att-buttons button{width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;margin:0!important;padding:4px 3px!important;font-size:10px!important;white-space:nowrap!important}
  body .wlcrm-app .wlcrm-att-stats span{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;padding:3px 0 3px 5px!important;margin:0!important;border-top:0!important;border-left:1px solid #e6ebf3!important;font-size:8px!important;font-weight:500!important;line-height:1.1!important;white-space:nowrap!important}
  body .wlcrm-app .wlcrm-att-stats b{color:#3c5774!important;font-size:10.5px!important;font-weight:550!important;font-variant-numeric:tabular-nums}
}
@media(min-width:768px) and (max-width:1199px){
  body .wlcrm-app .wlcrm-header{grid-template-columns:minmax(0,1fr) 164px!important;gap:9px!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-brand-area{grid-column:1!important;grid-row:1!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-user{grid-column:2!important;grid-row:1!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-attendance{grid-column:1/-1!important;grid-row:2!important}
}
@media(max-width:767px){
  body .wlcrm-app .wlcrm-header{grid-template-columns:minmax(0,1fr) 88px!important;gap:9px!important;padding:9px 10px!important}
  body .wlcrm-app .wlcrm-brand-area{gap:8px!important}
  body .wlcrm-app .wlcrm-triq-logo{width:80px!important}
  body .wlcrm-app .wlcrm-pi-link{width:104px!important;min-width:104px!important;padding:0 6px!important;height:34px!important;min-height:34px!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-brand-area{grid-column:1!important;grid-row:1!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-user{grid-column:2!important;grid-row:1!important;width:88px!important;max-width:88px!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;gap:5px!important}
  body .wlcrm-app .wlcrm-header>.wlcrm-attendance{grid-column:1/-1!important;grid-row:2!important}
  body .wlcrm-app .wlcrm-att-buttons button{min-height:36px!important}
}

/* Holidays never wrap or auto-scroll. The list itself is keyboard/touch scrollable. */
body .wlcrm-app .wlcrm-holiday-card{display:grid!important;grid-template-columns:max-content minmax(0,1fr) max-content!important;align-items:center!important;flex-wrap:nowrap!important;gap:10px!important;min-height:36px!important;max-height:none!important;margin:8px 14px!important;padding:3px 10px!important;border:1px solid #efe7d9!important;background:#fffcf6!important;border-radius:8px!important;box-shadow:0 2px 6px rgba(123,93,44,.025)!important;overflow:visible!important}
body .wlcrm-app .wlcrm-holiday-card>div:first-child{flex:none!important;min-width:0!important;padding:0!important;white-space:nowrap!important;gap:6px!important}
body .wlcrm-app .wlcrm-holiday-card>div:first-child strong{font-size:11px!important;font-weight:550!important;color:#806743!important}
body .wlcrm-app .wlcrm-holiday-icon{width:14px!important;height:14px!important;background:transparent!important;border-color:#b49b74!important;border-radius:3px!important}
body .wlcrm-app #wlcrm-upcoming-holidays{display:flex!important;grid-column:2!important;grid-row:1!important;flex-flow:row nowrap!important;align-items:center!important;gap:0!important;min-width:0!important;max-width:100%!important;min-height:28px!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;scrollbar-width:thin!important;scrollbar-color:#d9cdb6 transparent!important;scroll-behavior:auto!important;overscroll-behavior-inline:contain}
body .wlcrm-app #wlcrm-upcoming-holidays>*{white-space:nowrap!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;gap:8px!important;min-width:0!important;max-width:none!important;padding:3px 12px!important;border:0!important;border-right:1px solid #e9e0d0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;white-space:nowrap!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item:last-child{border-right:0!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item>div{display:inline-flex!important;align-items:center!important;gap:7px!important;min-width:0!important;white-space:nowrap!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item b,body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item span{display:inline!important;margin:0!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;font-size:10.5px!important;line-height:1.3!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item b{font-weight:550!important;color:#4e6178!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item span{font-weight:400!important;color:#768599!important}
body .wlcrm-app #wlcrm-upcoming-holidays .wlcrm-holiday-item em{padding:3px 5px!important;font-size:9px!important;font-weight:500!important;white-space:nowrap!important;background:#f8efdc!important;color:#937342!important}
body .wlcrm-app #wlcrm-view-all-holidays{grid-column:3!important;grid-row:1!important;height:28px!important;min-height:28px!important;margin:0!important;padding:2px 4px!important;font-size:10.5px!important;white-space:nowrap!important}

/* Slim navigation and softer working surfaces throughout the CRM. */
body .wlcrm-app .wlcrm-tabs{gap:3px!important;padding:5px 12px 3px!important}
body .wlcrm-app .wlcrm-tabs button,body .wlcrm-app .wlcrm-tabs button[data-tab="communications"]{min-height:54px!important;gap:5px!important;padding:7px 6px!important;font-size:10.5px!important;font-weight:500!important;border-bottom-width:2px!important}
body .wlcrm-app .wlcrm-tabs button:before{width:16px!important;height:16px!important;flex-basis:16px!important}
body .wlcrm-app .wlcrm-merged-tabs{gap:5px!important;padding:5px!important;border-color:#e5ebf3!important;border-radius:9px!important;background:#f9fbfd!important;box-shadow:0 2px 5px rgba(24,51,82,.02)!important}
body .wlcrm-app .wlcrm-merged-tabs button,body .wlcrm-app .wlcrm-campaign-nav button{min-height:32px!important;padding:6px 10px!important;font-weight:500!important}
body .wlcrm-app .wlcrm-followup-head,body .wlcrm-app .wlcrm-comm-card,body .wlcrm-app .wlcrm-lead-attachments,body .wlcrm-app .wlcrm-review-block,body .wlcrm-app .wlcrm-template-editor,body .wlcrm-app .wlcrm-template-library,body .wlcrm-app .wlcrm-stage-card,body .wlcrm-app .wlcrm-filter-panel{border-color:var(--wl221-line)!important;box-shadow:var(--wl221-shadow)!important}
body .wlcrm-app .wlcrm-followup-head{gap:10px!important;padding:12px!important;margin-bottom:10px!important}
body .wlcrm-app .wlcrm-followup-head h3{font-size:19px!important;font-weight:550!important}
body .wlcrm-app .wlcrm-followup-head>div:first-child p{margin:3px 0 0!important;font-size:11px!important}
body .wlcrm-app .wlcrm-followup-stats span{flex-direction:row!important;gap:8px!important;min-height:44px!important;padding:8px!important;box-shadow:0 2px 6px rgba(24,51,82,.025)!important}
body .wlcrm-app .wlcrm-followup-stats b{font-size:21px!important;font-weight:600!important}
body .wlcrm-app .wlcrm-followup-tools{padding-top:8px!important}
body .wlcrm-app .wlcrm-table-wrap{box-shadow:0 2px 9px rgba(24,51,82,.025)!important;border-color:var(--wl221-line)!important}
body .wlcrm-app .wlcrm-campaign-step{min-height:36px!important;padding:6px 10px!important;gap:8px!important;box-shadow:0 2px 5px rgba(24,51,82,.02)!important}
body .wlcrm-app .wlcrm-campaign-step h3{font-size:12px!important;font-weight:550!important;line-height:1.3!important}
body .wlcrm-app .wlcrm-campaign-step p{margin:0!important;line-height:1.3!important}
body .wlcrm-app .wlcrm-campaign-step>span{width:26px!important;height:26px!important;flex-basis:26px!important;border-radius:7px!important}
body .wlcrm-app .wlcrm-section-title,body .wlcrm-app .wlcrm-report-title{padding:6px 9px!important;font-weight:550!important;box-shadow:none!important}
body .wlcrm-app button,body .wlcrm-app a.wlcrm-button{font-weight:550!important;box-shadow:0 2px 5px rgba(24,51,82,.025)!important}
body .wlcrm-app button.primary{box-shadow:0 3px 8px rgba(21,95,216,.12)!important}
body .wlcrm-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),body .wlcrm-app select,body .wlcrm-app textarea{box-shadow:0 1px 3px rgba(24,51,82,.025)!important}
body .wlcrm-app input:focus,body .wlcrm-app select:focus,body .wlcrm-app textarea:focus{box-shadow:0 0 0 3px rgba(21,95,216,.075),0 2px 5px rgba(24,51,82,.025)!important}
body .wlcrm-modal .wlcrm-modal-card{box-shadow:0 18px 55px rgba(24,51,82,.16)!important}
body .wlcrm-app button:disabled,body .wlcrm-app button[aria-busy="true"]{transform:none!important;box-shadow:none!important}

/* A quiet response to interaction, never a continuously moving workspace. */
@media(prefers-reduced-motion:no-preference){
  body .wlcrm-app button,body .wlcrm-app a.wlcrm-pi-link,body .wlcrm-app a.wlcrm-logout,body .wlcrm-modal button{transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 160ms ease!important}
  body .wlcrm-app :is(input,select,textarea){transition:border-color 160ms ease,box-shadow 160ms ease!important}
  body .wlcrm-app tbody td{transition:background-color 140ms ease!important}
  body .wlcrm-app .wlcrm-panel.active,body .wlcrm-app .wlcrm-merged-pane.active,body .wlcrm-app .wlcrm-campaign-view.active{animation:wlcrm-soft-reveal 180ms ease-out!important}
  body .wlcrm-modal:not([hidden]) .wlcrm-modal-card{animation:wlcrm-soft-reveal 160ms ease-out!important}
  body .wlcrm-app button:not(:disabled):not([aria-busy="true"]):hover,body .wlcrm-app .wlcrm-pi-link:hover{transform:translateY(-1px)!important;box-shadow:var(--wl221-shadow-raised)!important}
  body .wlcrm-app button:not(:disabled):active,body .wlcrm-app .wlcrm-pi-link:active{transform:translateY(0)!important;box-shadow:0 1px 3px rgba(24,51,82,.05)!important}
  body .wlcrm-app .wlcrm-tabs button:not(:disabled):not([aria-busy="true"]):hover,body .wlcrm-app .wlcrm-merged-tabs button:not(:disabled):not([aria-busy="true"]):hover{transform:none!important}
}
@keyframes wlcrm-soft-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:600px){
  body .wlcrm-app .wlcrm-holiday-card{gap:6px!important;margin:7px 9px!important;padding:3px 7px!important}
  body .wlcrm-app .wlcrm-holiday-card>div:first-child strong{font-size:10px!important}
  body .wlcrm-app .wlcrm-holiday-icon{display:none!important}
  body .wlcrm-app .wlcrm-followup-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body .wlcrm-app .wlcrm-followup-stats span{font-size:10.5px!important}
}
@media(prefers-reduced-motion:reduce){
  body :is(#wlcrm-app,.wlcrm-modal),body :is(#wlcrm-app,.wlcrm-modal) *,body :is(#wlcrm-app,.wlcrm-modal) *::before,body :is(#wlcrm-app,.wlcrm-modal) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  body :is(#wlcrm-app,.wlcrm-modal) :is(button,.wlcrm-pi-link,.wlcrm-logout,.social-item):is(:hover,:focus,:active){transform:none!important}
}