/*
 * Streemlion WHMCS Unified Theme v1.0
 * One source of truth:
 * - Global header/navigation + shared client-area styling
 * - Dashboard-specific premium rules remain scoped to .sl-approved-dashboard
 */
/* Streemlion approved dashboard — screenshot-faithful, WHMCS-safe */
body.sl-streemlion-client{
 --accent:#F86B00;--accent-dark:#D9590A;--ink:#16171B;--gray:#6B6E78;--gray-light:#9A9CA5;
 --bg:#FBFBFA;--card:#FFFFFF;--card-tint:#F6F6F4;--border:#ECECE9;--green:#1AA260;--blue:#2F6FED;
 background:var(--bg);color:var(--ink);font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;-webkit-font-smoothing:antialiased
}
body.sl-streemlion-client a{text-decoration:none}
body.sl-approved-dashboard .container{max-width:none}
.sl-approved-header{background:var(--card);color:var(--ink)}
.sl-utility-bar{display:flex;align-items:center;gap:18px;padding:16px 40px;background:var(--card);border-bottom:1px solid var(--border);flex-wrap:wrap}
.sl-brand img{height:40px;width:auto;display:block}
.sl-search-wrap{flex:1;max-width:400px;position:relative;min-width:160px}
.sl-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray-light);font-size:14px}
.sl-search-wrap input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--border);border-radius:10px;font-size:13.5px;background:var(--card-tint);outline:none;transition:.12s}
.sl-search-wrap input:focus{border-color:var(--accent);background:var(--card)}
.sl-utility-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sl-clock-widget{display:flex;flex-direction:column;align-items:flex-end;padding:6px 16px;border-right:1px solid var(--border)}
.sl-clock-time{font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:17px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.sl-clock-sub{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--gray-light);font-weight:600;margin-top:2px}
.sl-dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block}
.sl-clock-sub .sl-dot{color:var(--green);box-shadow:0 0 5px var(--green);animation:slblink 2s infinite}
@keyframes slblink{0%,100%{opacity:1}50%{opacity:.4}}
.sl-credit-micro{display:flex;align-items:center;gap:10px;background:var(--card-tint);border:1px solid var(--border);border-radius:12px;padding:8px 8px 8px 14px}
.sl-credit-micro-text{line-height:1.15}.sl-credit-micro-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-light)}
.sl-credit-micro-value{font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:14.5px;font-weight:700}
.sl-btn-addfund{display:flex;align-items:center;gap:5px;background:var(--accent);color:#fff!important;font-size:12px;font-weight:700;padding:8px 12px;border-radius:8px;white-space:nowrap}
.sl-btn-addfund:hover{background:var(--accent-dark)}
.sl-cart-btn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--gray)}
.sl-cart-badge{position:absolute;top:-6px;right:-6px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;padding:0 4px;border-radius:50px;display:flex;align-items:center;justify-content:center}
.sl-native-account{margin:0;padding:0}
.sl-native-account>li>a{display:flex!important;align-items:center;gap:8px;border:1px solid var(--border)!important;background:var(--card)!important;padding:9px 14px!important;border-radius:10px!important;font-size:13.5px!important;font-weight:600!important;color:var(--ink)!important;white-space:nowrap}
.sl-native-account .dropdown-menu{width:220px;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 45px rgba(20,20,25,.12);padding:8px}
.sl-native-account .dropdown-menu a{padding:9px 12px!important;border-radius:8px;font-size:13.5px;color:var(--ink)!important}
.sl-native-account .dropdown-menu a:hover{background:var(--card-tint)!important}
.sl-mobile-menu{width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--gray)}
.sl-primary-nav{padding:0 40px;background:var(--card);border-bottom:1px solid var(--border)}
.sl-primary-nav .navbar-nav{gap:6px}
.sl-primary-nav #nav>li>a{display:flex;align-items:center;gap:6px;padding:15px 16px!important;font-size:14px;font-weight:600;color:var(--gray)!important;border-bottom:2px solid transparent;background:transparent!important}
.sl-primary-nav #nav>li>a:hover,.sl-primary-nav #nav>li.active>a,.sl-primary-nav #nav>li.current>a{color:var(--ink)!important;border-bottom-color:var(--accent)}
.sl-primary-nav .dropdown-menu{min-width:200px;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 45px rgba(20,20,25,.1);padding:8px}
.sl-primary-nav .dropdown-menu a{padding:9px 12px!important;border-radius:8px;font-size:13.5px;color:var(--ink)!important;border:0!important}
.sl-primary-nav .dropdown-menu a:hover{background:var(--card-tint)!important}

body.sl-approved-dashboard .master-breadcrumb{padding:14px 40px;background:var(--bg);border:0}
body.sl-approved-dashboard .master-breadcrumb .breadcrumb{max-width:none;margin:0;padding:0;background:transparent;font-size:13px;color:var(--gray-light)}
body.sl-approved-dashboard .master-breadcrumb .breadcrumb a{color:var(--accent);font-weight:600}
body.sl-approved-dashboard #main-body{padding:24px 40px 60px;background:var(--bg)}
.sl-dashboard-page-wrap{width:100%}
.sl-dashboard-row{display:grid!important;grid-template-columns:340px minmax(0,1fr);gap:20px;margin:0!important;align-items:start}
.sl-dashboard-sidebar-col,.sl-dashboard-main-col{width:auto!important;max-width:none!important;flex:none!important;padding:0!important;min-width:0}

/* Native WHMCS sidebar, restyled to match screenshot */
body.sl-approved-dashboard .sidebar .card,body.sl-approved-dashboard .sidebar .panel{background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:16px;overflow:hidden;box-shadow:none}
body.sl-approved-dashboard .sidebar .card-header,body.sl-approved-dashboard .sidebar .panel-heading{padding:16px 18px;background:var(--card);border-bottom:0;font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:15px;font-weight:700;color:var(--ink)}
body.sl-approved-dashboard .sidebar .card-body,body.sl-approved-dashboard .sidebar .panel-body{padding:0 18px 18px;background:var(--card);color:var(--gray);font-size:13px}
body.sl-approved-dashboard .sidebar .list-group-item{padding:9px 18px;border-color:var(--border);background:var(--card);font-size:13.5px;font-weight:600;color:var(--ink)}
body.sl-approved-dashboard .sidebar .list-group-item:hover{background:var(--card-tint);color:var(--accent)}
body.sl-approved-dashboard .sidebar .btn-success,body.sl-approved-dashboard .sidebar .btn-primary{width:100%;background:var(--accent);border-color:var(--accent);border-radius:10px;font-weight:700}
body.sl-approved-dashboard .sidebar .btn-success:hover,body.sl-approved-dashboard .sidebar .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
body.sl-approved-dashboard .sidebar .btn-default{border-radius:10px}
body.sl-approved-dashboard .sidebar .card-footer{background:var(--card);border-top:1px solid var(--border);padding:14px 18px}

.sl-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.sl-stat-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 24px;position:relative;overflow:hidden;color:var(--ink)!important;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.sl-stat-card:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;opacity:.6;transition:.18s}
.sl-stat-services:after{background:var(--accent)}.sl-stat-invoices:after{background:var(--blue)}.sl-stat-tickets:after{background:var(--green)}
.sl-stat-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,20,25,.09)}.sl-stat-services:hover{border-color:var(--accent)}.sl-stat-invoices:hover{border-color:var(--blue)}.sl-stat-tickets:hover{border-color:var(--green)}
.sl-stat-card:hover:after{height:4px;opacity:1}.sl-stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sl-stat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:transform .18s}.sl-stat-card:hover .sl-stat-icon{transform:scale(1.08)}
.sl-stat-services .sl-stat-icon{background:rgba(248,107,0,.1);color:var(--accent)}.sl-stat-invoices .sl-stat-icon{background:rgba(47,111,237,.1);color:var(--blue)}.sl-stat-tickets .sl-stat-icon{background:rgba(26,162,96,.1);color:var(--green)}
.sl-stat-value{font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:32px;font-weight:700}.sl-stat-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-light);margin-top:4px}
.sl-stat-flag{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600}.sl-good{color:var(--green)}.sl-warn{color:var(--accent)}.sl-neutral{color:var(--gray-light)}

.sl-panel{background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:20px;overflow:hidden}
.sl-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.sl-panel-head h2{display:flex;align-items:center;gap:10px;margin:0;font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:16.5px;font-weight:700}.sl-panel-head h2 i{color:var(--accent)}
.sl-panel-body{padding:0}.sl-link,.sl-view-more{font-size:13px;font-weight:700;color:var(--accent)!important}
.sl-btn-order{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff!important;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:10px;box-shadow:0 10px 22px rgba(248,107,0,.28);transition:.15s}
.sl-btn-order:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(248,107,0,.36)}
.sl-product-row{display:flex;align-items:center;gap:16px;padding:16px 22px 16px 18px;border-bottom:1px solid var(--border);position:relative;color:var(--ink)!important;cursor:pointer;transition:background .16s,padding-left .16s}
.sl-product-row:last-of-type{border-bottom:none}.sl-product-row:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);transform:scaleY(0);transition:transform .18s}
.sl-product-row:hover{background:var(--card-tint);padding-left:26px}.sl-product-row:hover:before{transform:scaleY(1)}
.sl-product-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(248,107,0,.1);color:var(--accent);transition:transform .18s}.sl-product-icon-blue{background:rgba(47,111,237,.1);color:var(--blue)}.sl-product-row:hover .sl-product-icon{transform:scale(1.08)}
.sl-product-main{flex:1;min-width:0}.sl-product-name{font-size:14.5px;font-weight:600;transition:color .16s}.sl-product-row:hover .sl-product-name{color:var(--accent-dark)}
.sl-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:20px;background:rgba(26,162,96,.1);color:var(--green);flex-shrink:0}
.sl-btn-sm{font-size:12.5px;font-weight:700;color:var(--ink);background:var(--card);border:1.5px solid var(--border);border-radius:9px;padding:8px 15px;flex-shrink:0;transition:.16s}.sl-product-row:hover .sl-btn-sm{background:var(--accent);border-color:var(--accent);color:#fff}
.sl-view-more{display:block;text-align:right;padding:12px 22px}.sl-panel-copy{padding:16px 22px;color:var(--gray)}
.sl-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.sl-overdue-body{padding:18px 22px;font-size:13.5px;color:var(--gray);line-height:1.6}.sl-overdue-body b,.sl-overdue-body strong{color:var(--ink)}
.sl-ticket-row,.sl-news-row,.sl-generic-row{display:block;padding:14px 22px;border-bottom:1px solid var(--border);color:var(--ink)!important}.sl-ticket-row:last-child,.sl-news-row:last-child,.sl-generic-row:last-child{border-bottom:none}
.sl-ticket-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sl-ticket-subject{font-size:13.5px;font-weight:600}.sl-badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--card-tint);color:var(--gray)}.sl-news-row b{font-size:13.5px;font-weight:700}
.sl-addon-output{margin-bottom:16px}

@media(max-width:1100px){.sl-dashboard-row{grid-template-columns:280px minmax(0,1fr)}.sl-two-col{grid-template-columns:1fr}.sl-stat-row{grid-template-columns:1fr 1fr}.sl-stat-row .sl-stat-card:last-child{grid-column:1/-1}}
@media(max-width:850px){.sl-utility-bar,.sl-primary-nav,body.sl-approved-dashboard .master-breadcrumb,body.sl-approved-dashboard #main-body{padding-left:20px;padding-right:20px}.sl-search-wrap{display:none}.sl-clock-widget{display:none}.sl-credit-micro-label{display:none}.sl-dashboard-row{display:block!important}.sl-dashboard-sidebar-col{margin-bottom:20px}.sl-stat-row{grid-template-columns:1fr}.sl-stat-row .sl-stat-card:last-child{grid-column:auto}}
@media(max-width:620px){.sl-credit-micro{display:none}.sl-native-account{display:none}.sl-product-row{flex-wrap:wrap}.sl-product-main{min-width:calc(100% - 60px)}}


/* =========================================================
   STREEMLION GLOBAL CLIENT AREA v2
   Applies to all non-dashboard client pages.
   Dashboard remains governed by streemlion-dashboard.css.
   ========================================================= */


body.sl-streemlion-client:not(.sl-approved-dashboard) #main-body {
    background:var(--bg);
    padding:24px 0 60px;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) #main-body > .container {
    max-width:1440px;
}

/* Breadcrumb */
body.sl-streemlion-client:not(.sl-approved-dashboard) .master-breadcrumb {
    padding:14px 0;
    background:var(--bg);
    border:0;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .master-breadcrumb .breadcrumb {
    margin:0;
    padding:0;
    background:transparent;
    color:var(--gray-light);
    font-size:13px;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .master-breadcrumb .breadcrumb a {
    color:var(--accent);
    font-weight:600;
}

/* Page titles */
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content h1,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content h2,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content h3,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content h4 {
    color:var(--ink);
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight:700;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content h1 {
    font-size:30px;
    letter-spacing:-.02em;
    margin-bottom:20px;
}

/* Sidebar */
body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .card,
body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .panel {
    overflow:hidden;
    margin-bottom:16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    box-shadow:none;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .card-header,
body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .panel-heading {
    padding:16px 18px;
    background:var(--card);
    border-bottom:1px solid var(--border);
    color:var(--ink);
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:15px;
    font-weight:700;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .card-body,
body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .panel-body {
    padding:16px 18px;
    background:var(--card);
    color:var(--gray);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .list-group-item {
    padding:11px 18px;
    border-color:var(--border);
    background:var(--card);
    color:var(--ink);
    font-size:13.5px;
    font-weight:600;
    transition:background .15s,color .15s,padding-left .15s;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .list-group-item:hover,
body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .list-group-item.active {
    padding-left:22px;
    background:var(--card-tint);
    color:var(--accent);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .sidebar .list-group-item.active {
    border-left:3px solid var(--accent);
}

/* Main cards/panels */
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .card,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .panel {
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    box-shadow:none;
    overflow:hidden;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .card-header,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .panel-heading {
    padding:17px 20px;
    background:var(--card);
    border-bottom:1px solid var(--border);
    color:var(--ink);
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:15px;
    font-weight:700;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .card-body,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .panel-body {
    padding:19px 20px;
    background:var(--card);
}

/* Tables */
body.sl-streemlion-client:not(.sl-approved-dashboard) .table {
    color:var(--ink);
    background:var(--card);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .table thead th {
    border-top:0;
    border-bottom:1px solid var(--border);
    background:var(--card-tint);
    color:var(--gray);
    font-size:11px;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .table td,
body.sl-streemlion-client:not(.sl-approved-dashboard) .table th {
    padding:13px 15px;
    border-color:var(--border);
    vertical-align:middle;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .table-hover tbody tr {
    transition:background .14s ease;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .table-hover tbody tr:hover {
    background:#FFF9F4;
}

/* Buttons */
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-primary,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-success {
    border-color:var(--accent);
    border-radius:9px;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    box-shadow:none;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-primary:hover,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-success:hover,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-primary:focus,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-success:focus {
    border-color:var(--accent-dark);
    background:var(--accent-dark);
    box-shadow:none;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-default,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-secondary,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-outline-primary {
    border-color:var(--border);
    border-radius:9px;
    background:var(--card);
    color:var(--ink);
    font-weight:600;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-default:hover,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-secondary:hover,
body.sl-streemlion-client:not(.sl-approved-dashboard) .btn-outline-primary:hover {
    border-color:var(--accent);
    background:var(--card);
    color:var(--accent);
}

/* Form controls */
body.sl-streemlion-client:not(.sl-approved-dashboard) .form-control,
body.sl-streemlion-client:not(.sl-approved-dashboard) select.form-control,
body.sl-streemlion-client:not(.sl-approved-dashboard) .custom-select {
    min-height:42px;
    border:1px solid #DEDED9;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    box-shadow:none;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .form-control:focus,
body.sl-streemlion-client:not(.sl-approved-dashboard) select.form-control:focus,
body.sl-streemlion-client:not(.sl-approved-dashboard) .custom-select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(248,107,0,.10);
}

/* Knowledgebase */
body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-search {
    margin-bottom:22px;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-search .form-control {
    min-height:48px;
    font-size:15px;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-search .btn {
    min-height:48px;
    border-radius:0 10px 10px 0;
    border-color:var(--accent);
    background:var(--accent);
    color:#fff;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-category {
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-category:hover {
    transform:translateY(-2px);
    border-color:rgba(248,107,0,.35);
    box-shadow:0 12px 28px rgba(20,20,25,.06);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-category a,
body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-article-item a {
    color:var(--ink);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-category a:hover,
body.sl-streemlion-client:not(.sl-approved-dashboard) .kb-article-item a:hover {
    color:var(--accent);
}

/* List groups */
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .list-group-item {
    border-color:var(--border);
    background:var(--card);
    color:var(--ink);
    transition:background .14s,color .14s;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .list-group-item:hover {
    background:var(--card-tint);
    color:var(--accent);
}

/* Alerts */
body.sl-streemlion-client:not(.sl-approved-dashboard) .alert {
    border-radius:12px;
    border:1px solid var(--border);
}

/* Pagination */
body.sl-streemlion-client:not(.sl-approved-dashboard) .page-link {
    color:var(--ink);
    border-color:var(--border);
    background:var(--card);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .page-item.active .page-link {
    border-color:var(--accent);
    background:var(--accent);
    color:#fff;
}

/* Badges */
body.sl-streemlion-client:not(.sl-approved-dashboard) .badge-info,
body.sl-streemlion-client:not(.sl-approved-dashboard) .badge-primary {
    background:var(--accent);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .badge-success {
    background:var(--green);
}

/* Tabs */
body.sl-streemlion-client:not(.sl-approved-dashboard) .nav-tabs {
    border-bottom:1px solid var(--border);
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .nav-tabs .nav-link {
    border:0;
    border-bottom:2px solid transparent;
    color:var(--gray);
    font-weight:600;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .nav-tabs .nav-link.active {
    border-bottom-color:var(--accent);
    background:transparent;
    color:var(--ink);
}

/* Footer */
body.sl-streemlion-client:not(.sl-approved-dashboard) #footer.footer {
    background:var(--card);
    border-top:1px solid var(--border);
    color:var(--gray-light);
}

/* Reduce old Twenty-One blue dominance */
body.sl-streemlion-client:not(.sl-approved-dashboard) a {
    color:inherit;
}

body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content a:not(.btn):not(.page-link):hover {
    color:var(--accent);
}

/* Preserve readable action links */
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content .text-primary,
body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content a.text-primary {
    color:var(--accent)!important;
}

/* Responsive */
@media(max-width:991.98px){
    body.sl-streemlion-client:not(.sl-approved-dashboard) #main-body{padding-top:18px}
}

@media(max-width:767.98px){
    body.sl-streemlion-client:not(.sl-approved-dashboard) #main-body{padding-bottom:42px}
    body.sl-streemlion-client:not(.sl-approved-dashboard) .primary-content h1{font-size:26px}
    body.sl-streemlion-client:not(.sl-approved-dashboard) .table-responsive{border-radius:12px}
}


/* =========================================================
   Dashboard polish pass — compact context + controlled bottom
   ========================================================= */

/* Credit tooltip cue */
.sl-credit-alert{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    margin-left:4px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:9px;
    font-weight:800;
    line-height:1;
    vertical-align:1px;
}

/* Turn breadcrumb row into a useful dashboard context bar */
body.sl-approved-dashboard .master-breadcrumb.sl-dashboard-contextbar{
    padding:0 40px;
    min-height:48px;
    display:flex;
    align-items:center;
    background:var(--bg);
}

.sl-contextbar-inner{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.sl-contextbar-crumb{
    min-width:0;
}

body.sl-approved-dashboard .sl-dashboard-contextbar .breadcrumb{
    margin:0;
}

.sl-dashboard-welcome{
    flex:0 0 auto;
    display:flex;
    align-items:baseline;
    gap:5px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.sl-dashboard-welcome span{
    color:var(--accent);
    font-weight:700;
}

.sl-dashboard-welcome em{
    color:var(--gray);
    font-style:normal;
}

/* Pull dashboard upward */
body.sl-approved-dashboard #main-body{
    padding-top:10px;
}

/* Controlled 3-card lower layout */
.sl-bottom-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.sl-bottom-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
    margin-bottom:0;
}

.sl-bottom-card .sl-panel-body,
.sl-bottom-card .sl-overdue-body{
    flex:0 1 auto;
}

.sl-card-footer-actions{
    margin-top:auto;
    padding:12px 18px;
    border-top:1px solid var(--border);
    background:var(--card);
    text-align:right;
}

.sl-card-footer-actions a{
    color:var(--accent)!important;
    font-size:12.5px;
    font-weight:700;
}

.sl-bottom-card .sl-ticket-row,
.sl-bottom-card .sl-news-row,
.sl-bottom-card .sl-generic-row{
    padding:12px 18px;
}

.sl-bottom-card .sl-ticket-subject,
.sl-bottom-card .sl-news-row b{
    font-size:13px;
}

/* slightly denser, more controlled dashboard */
.sl-stat-row{
    margin-bottom:16px;
}

.sl-products-panel{
    margin-bottom:16px;
}

@media(max-width:1200px){
    .sl-bottom-grid{
        grid-template-columns:1fr 1fr;
    }
    .sl-bottom-grid .sl-bottom-card:last-child{
        grid-column:1/-1;
    }
}

@media(max-width:850px){
    body.sl-approved-dashboard .master-breadcrumb.sl-dashboard-contextbar{
        padding-left:20px;
        padding-right:20px;
    }
    .sl-contextbar-inner{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
        padding:10px 0;
    }
    .sl-dashboard-welcome{
        white-space:normal;
        flex-wrap:wrap;
    }
    .sl-bottom-grid{
        grid-template-columns:1fr;
    }
    .sl-bottom-grid .sl-bottom-card:last-child{
        grid-column:auto;
    }
}


/* =========================================================
   Dashboard Polish v2 — locked scope only
   ========================================================= */

/* No dashboard breadcrumb: compact start beneath navigation */
body.sl-approved-dashboard #main-body{
    padding-top:14px !important;
}

/* Kill any v1 context-bar footprint */
body.sl-approved-dashboard .sl-dashboard-contextbar,
.sl-contextbar-inner,
.sl-contextbar-crumb,
.sl-dashboard-welcome{
    display:none !important;
}

/* Tooltip cue: visible orange badge, deliberately smaller than cart-count badge */
.sl-credit-alert{
    display:inline-flex !important;
    width:12px !important;
    height:12px !important;
    min-width:12px;
    align-items:center;
    justify-content:center;
    margin-left:5px;
    border-radius:50%;
    background:var(--accent) !important;
    color:#fff !important;
    font-size:8px !important;
    font-weight:900;
    line-height:12px !important;
    cursor:help;
    vertical-align:1px;
    box-shadow:0 0 0 1px rgba(248,107,0,.10);
}

/* Strategic dashboard actions */
.sl-panel-head-actions{
    display:flex;
    align-items:center;
    gap:9px;
}
.sl-btn-ticket{
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 15px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--ink) !important;
    font-size:13px;
    font-weight:700;
    transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease;
}
.sl-btn-ticket:hover{
    transform:translateY(-2px);
    border-color:var(--accent);
    color:var(--accent) !important;
    background:#fffaf6;
}

/*
 * ONE hover system for Services, Tickets and News.
 * These are the exact same mechanics and timing, shared by the same class.
 */
.sl-premium-row{
    position:relative;
    cursor:pointer;
    transition:background .16s ease,padding-left .16s ease;
}
.sl-premium-row::before{
    content:'';
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:var(--accent);
    transform:scaleY(0);
    transform-origin:center;
    transition:transform .18s ease;
}
.sl-premium-row:hover{
    background:var(--card-tint);
    padding-left:26px;
}
.sl-premium-row:hover::before{
    transform:scaleY(1);
}

/* Ticket/news default starts at same 18px left edge as service rows */
.sl-bottom-card .sl-ticket-row.sl-premium-row,
.sl-bottom-card .sl-news-row.sl-premium-row{
    padding-left:18px;
}

/* Ensure old service-specific hover does not double-trigger differently */
.sl-product-row.sl-premium-row:hover{
    background:var(--card-tint);
    padding-left:26px;
}
.sl-product-row.sl-premium-row:hover::before{
    transform:scaleY(1);
}

/* Keep bottom cards disciplined */
.sl-bottom-grid{
    align-items:stretch;
}
.sl-bottom-card{
    min-height:100%;
}

/* Mobile action handling */
@media(max-width:760px){
    .sl-panel-head-actions{
        width:100%;
        flex-wrap:wrap;
    }
    .sl-btn-ticket,
    .sl-btn-order{
        flex:1 1 150px;
        justify-content:center;
    }
}

/* Typography lock — match Streemlion public website */
body.sl-streemlion-client,
body.sl-streemlion-client button,
body.sl-streemlion-client input,
body.sl-streemlion-client select,
body.sl-streemlion-client textarea {
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}


/* =========================================================
   HERO KPI CARDS v3.1 — verified against actual markup
   Actual selectors: .sl-stat-value / .sl-stat-label /
   .sl-stat-flag / .sl-stat-icon
   ========================================================= */

body.sl-approved-dashboard .sl-stat-card{
    min-height:190px;
    padding:30px 126px 28px 28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* Right-side wireframe visual */
body.sl-approved-dashboard .sl-stat-top{
    position:absolute;
    right:34px;
    top:50%;
    transform:translateY(-50%);
    margin:0;
}

body.sl-approved-dashboard .sl-stat-icon{
    width:68px;
    height:68px;
    padding:0;
    border-radius:0;
    background:transparent !important;
    transform:none !important;
    opacity:.78;
}

body.sl-approved-dashboard .sl-stat-icon svg{
    display:block;
    width:68px;
    height:68px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

body.sl-approved-dashboard .sl-stat-services .sl-stat-icon{
    color:var(--accent) !important;
}
body.sl-approved-dashboard .sl-stat-invoices .sl-stat-icon{
    color:var(--blue) !important;
}
body.sl-approved-dashboard .sl-stat-tickets .sl-stat-icon{
    color:var(--green) !important;
}

/* Numbers now earn the card size */
body.sl-approved-dashboard .sl-stat-value{
    font-size:50px !important;
    line-height:.95;
    font-weight:750;
    letter-spacing:-2px;
    margin:0 0 12px;
    color:var(--ink);
}

body.sl-approved-dashboard .sl-stat-label{
    margin:0 0 12px;
    font-size:13.5px !important;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.075em;
}

body.sl-approved-dashboard .sl-stat-flag{
    margin-top:0;
    font-size:13px !important;
    line-height:1.3;
    font-weight:600;
}

/* Hover: preserve existing lift, give outline icon a subtle response */
body.sl-approved-dashboard .sl-stat-card:hover .sl-stat-icon{
    transform:none !important;
    opacity:1;
}
body.sl-approved-dashboard .sl-stat-card:hover .sl-stat-icon svg{
    transform:scale(1.04);
    transform-origin:center;
    transition:transform .18s ease;
}

/* Responsive */
@media(max-width:1200px){
    body.sl-approved-dashboard .sl-stat-card{
        min-height:180px;
        padding-right:108px;
    }
    body.sl-approved-dashboard .sl-stat-top{
        right:26px;
    }
    body.sl-approved-dashboard .sl-stat-icon,
    body.sl-approved-dashboard .sl-stat-icon svg{
        width:58px;
        height:58px;
    }
}

@media(max-width:760px){
    body.sl-approved-dashboard .sl-stat-card{
        min-height:158px;
        padding:24px 92px 24px 24px;
    }
    body.sl-approved-dashboard .sl-stat-value{
        font-size:43px !important;
    }
    body.sl-approved-dashboard .sl-stat-label{
        font-size:12.5px !important;
    }
    body.sl-approved-dashboard .sl-stat-flag{
        font-size:12px !important;
    }
    body.sl-approved-dashboard .sl-stat-top{
        right:22px;
    }
    body.sl-approved-dashboard .sl-stat-icon,
    body.sl-approved-dashboard .sl-stat-icon svg{
        width:48px;
        height:48px;
    }
}