/* PlugifyWP License Suite — My Account Dashboard (Pakiet B)
Lightweight, premium, no external deps. */
.pwfls-ldash{margin:18px 0 26px 0;}
.pwfls-ldash-head{margin-bottom:14px;}
.pwfls-ldash-title{margin:0 0 6px 0;font-size:22px;line-height:1.2;font-weight:800;}
.pwfls-ldash-subtitle{opacity:.78;max-width:980px;}
.pwfls-ldash-cards{
display:grid;
grid-template-columns:repeat(4,minmax(160px,1fr));
gap:12px;
margin:14px 0 14px 0;
}
@media (max-width: 900px){
.pwfls-ldash-cards{grid-template-columns:repeat(2,minmax(160px,1fr));}
}
@media (max-width: 520px){
.pwfls-ldash-cards{grid-template-columns:1fr;}
}
.pwfls-card{
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
padding:14px 14px 12px 14px;
box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.pwfls-card-kpi{font-size:28px;line-height:1;font-weight:900;margin-bottom:6px;}
.pwfls-card-label{opacity:.75;font-weight:600;}
/* KPI cards — subtle premium backgrounds */
.pwfls-card--total{background:rgba(59,130,246,.08);} /* light blue */
.pwfls-card--active{background:rgba(34,197,94,.08);} /* light green */
.pwfls-card--expiring{background:rgba(245,158,11,.10);}/* light orange */
.pwfls-card--expired{background:rgba(239,68,68,.09);} /* light red */
/* Keep borders consistent with the semantic state */
.pwfls-card--expiring.pwfls-card--warn{border-color:rgba(245,158,11,.35);}
.pwfls-card--expired.pwfls-card--danger{border-color:rgba(239,68,68,.35);}
.pwfls-card--warn{border-color:rgba(255,193,7,.35);}
.pwfls-card--danger{border-color:rgba(220,53,69,.35);}
/* Subtle attention cue (only when needed) */
.pwfls-card--pulse{position:relative;}
.pwfls-card--pulse::after{
content:"";
position:absolute;
inset:-1px;
border-radius:14px;
pointer-events:none;
--pwfls-pulse: rgba(220,53,69,.18);
box-shadow:0 0 0 0 var(--pwfls-pulse);
animation:pwflsPulse 1.8s ease-in-out infinite;
}
/* Match pulse color to the card type */
.pwfls-card--warn.pwfls-card--pulse::after{--pwfls-pulse: rgba(255,193,7,.18);}
.pwfls-card--danger.pwfls-card--pulse::after{--pwfls-pulse: rgba(220,53,69,.18);}
@keyframes pwflsPulse{
0%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
45%{box-shadow:0 0 0 6px var(--pwfls-pulse);}
100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}
.pwfls-ldash-wide{
display:grid;
grid-template-columns:1.3fr .9fr;
gap:12px;
margin:12px 0 18px 0;
}
@media (max-width: 900px){
.pwfls-ldash-wide{grid-template-columns:1fr;}
}
.pwfls-wide-card{
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
padding:14px;
box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.pwfls-wide-title{font-weight:800;margin-bottom:10px;}
.pwfls-wide-metrics{display:flex;gap:26px;flex-wrap:wrap;}
.pwfls-wide-metric{display:flex;flex-direction:column;gap:2px;}
.pwfls-wide-metric-value{font-weight:900;font-size:22px;line-height:1.05;}
.pwfls-wide-metric-label{opacity:.72;font-weight:700;font-size:13px;}
.pwfls-wide-actions{display:flex;gap:10px;flex-wrap:wrap;}
.pwfls-btn{border-radius:12px !important; padding:9px 14px !important; font-weight:700 !important;}
.pwfls-btn--primary{background:#111 !important;color:#fff !important;border-color:#111 !important;}
.pwfls-btn--ghost{background:#fff !important;}
/*
Smart License Insights (Option 1)
Purpose: scalable, non-alarming, premium advisory layer.
*/
.pwfls-ldash-insights-box{
margin:12px 0 0 0;
}
.pwfls-insights-head{margin-bottom:10px;}
.pwfls-insights-title{font-weight:900;font-size:14px;letter-spacing:.2px;}
.pwfls-insights-note{opacity:.72;margin-top:4px;font-size:13px;}
.pwfls-insights-divider{border-top:1px solid rgba(0,0,0,.08);margin-top:10px;}
.pwfls-insights-empty{opacity:.8;padding:8px 0;font-size:13px;}
.pwfls-insights-list{display:flex;flex-direction:column;}
.pwfls-insight{
padding:12px 2px;
}
.pwfls-insight + .pwfls-insight{
border-top:1px solid rgba(0,0,0,.08);
}
.pwfls-insight-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pwfls-insight-name{font-weight:900;}
.pwfls-insight-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.pwfls-insight-chip{
display:inline-flex;
align-items:center;
padding:3px 9px;
border-radius:999px;
font-size:12px;
font-weight:800;
border:1px solid rgba(0,0,0,.12);
background:#fff;
opacity:.9;
}
.pwfls-insight-chip--expired{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#991b1b;}
.pwfls-insight-chip--expiring{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);}
.pwfls-insight-chip--grace{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:#92400e;}
.pwfls-insight-chip--no_slots{border-color:rgba(16,185,129,.35);}
/* Copy feedback chip under the license key */
.pwfls-insight-chip--copied{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10);}
.pwfls-insight-chip--copyfail{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);}
.pwfls-insight-key code{
padding:2px 8px;
border-radius:8px;
border:1px solid rgba(0,0,0,.08);
background:#fff;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size:12px;
color:#16a34a !important;
opacity:1 !important;
}
/* Make the key + feedback chip stack vertically (chip under the key) */
.pwfls-insight-key{
display:inline-flex;
flex-direction:column;
align-items:flex-start;
}
.pwfls-insight-key-row{display:inline-flex;gap:6px;align-items:center;}
.pwfls-copy-license-key{cursor:pointer;user-select:all;}
.pwfls-copy-license-key:active{transform:translateY(1px);}
.pwfls-insight-key-copied{
display:none;
margin-top:4px;
font-size:12px;
font-weight:800;
line-height:1.2;
/* Keep the feedback chip compact (do not stretch full width) and center the label */
justify-content:center;
text-align:center;
width:auto;
max-width:100%;
}
.pwfls-insight-key-copied.is-show{display:inline-flex;}
.pwfls-insight-key-label{color:#16a34a !important;opacity:1 !important;font-weight:800;font-size:12px;margin-right:6px;}
.pwfls-insight-msg{opacity:.82;max-width:900px;margin-top:6px;font-size:13px;}
.pwfls-insight-cta{margin-top:8px;}
.pwfls-insight-link{font-weight:800;text-decoration:none;}
.pwfls-insight-link:hover{text-decoration:underline;}
.pwfls-insights-more{margin-top:10px;}
/*
Add a matching icon for the License Dashboard menu item.
Many themes render My Account icons using a::before or a:before.
We target BOTH and force the background-image so it survives theme overrides.
*/
.woocommerce-MyAccount-navigation-link--license-dashboard a:before,
.woocommerce-MyAccount-navigation-link--license-dashboard a::before{
content:"" !important;
width:18px !important;
height:18px !important;
display:inline-block !important;
margin-right:10px !important;
vertical-align:middle !important;
background-repeat:no-repeat !important;
background-size:18px 18px !important;
background-position:center center !important;
background-image:url("data:image/svg+xml;utf8,") !important;
opacity:.95;
}
/* If the theme injects its own SVG/icon element inside the link, hide it ONLY for this item */
.woocommerce-MyAccount-navigation-link--license-dashboard a > i,
.woocommerce-MyAccount-navigation-link--license-dashboard a > svg{display:none !important;}
/*
Fallback: some themes disable pseudo-elements for menu items.
Paint the icon directly on the element.
*/
.woocommerce-MyAccount-navigation-link--license-dashboard a{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-size:18px 18px !important;
background-position:18px center !important;
padding-left:52px !important;
}
/* Strong specificity override for themes that set important rules on My Account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--license-dashboard a{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-size:18px 18px !important;
background-position:18px center !important;
padding-left:52px !important;
}
/* Active state: match theme behavior (icon turns white on the selected item) */
.woocommerce-MyAccount-navigation-link--license-dashboard.is-active a:before,
.woocommerce-MyAccount-navigation-link--license-dashboard.is-active a::before{
background-image:url("data:image/svg+xml;utf8,") !important;
opacity:1 !important;
}
.woocommerce-MyAccount-navigation-link--license-dashboard.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--license-dashboard.is-active a{
background-image:url("data:image/svg+xml;utf8,") !important;
}