/* =====================================================================
   SS MOSQUITO CONTROL – CUSTOMER PORTAL REDESIGN v3
   One clean file. No duplicate rules. Load AFTER style.css.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --p-green: #1B463C;
  --p-green-dark: #143029;
  --p-orange: #F68B1E;
  --p-orange-hover: #e07810;
  --p-bg: #f0f2f5;
  --p-card-bg: #ffffff;
  --p-text: #2d3436;
  --p-text-muted: #636e72;
  --p-text-light: #b2bec3;
  --p-border: #e1e5e9;
  --p-radius: 12px;
  --p-radius-sm: 8px;
  --p-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --p-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08);
  --p-transition: 0.2s ease;
}

/* ── GLOBAL ──────────────────────────────────────────────── */
body { font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--p-text); height: auto; min-height: 100vh; }
.content, .content * { font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; }
.content .material-icons, .content i.material-icons, .content i.fa, .content i[class*="fa-"] { font-family: 'Material Icons', 'Font Awesome 6 Free', 'Font Awesome 6 Solid', FontAwesome !important; }

/* ── NAVBAR ──────────────────────────────────────────────── */
nav.navbar-inverse.navbar-lg.navbar-fixed-top { background: #fff !important; border-bottom: 1px solid var(--p-border) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; z-index: 200 !important; }
nav.navbar-inverse.navbar-lg.navbar-fixed-top a { color: #2d3436 !important; }
nav.navbar-inverse.navbar-lg.navbar-fixed-top { color: #2d3436 !important; }
nav.navbar-inverse.navbar-lg.navbar-fixed-top .navbar-brand,
nav.navbar-inverse.navbar-lg.navbar-fixed-top .navbar-text { color: #2d3436 !important; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.menu { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; margin-top: 0 !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 100 !important; background: var(--p-green) !important; padding-top: 70px !important; }
.content { background: var(--p-bg) !important; padding-top: 80px !important; padding-bottom: 60px !important; padding-left: calc(220px + 32px) !important; padding-right: 32px !important; min-height: 100vh !important; height: auto !important; width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; margin-top: 0 !important; }
.menu ul { padding: 0 !important; margin: 0 !important; }
.menu ul li { list-style: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.menu ul li a.left-dashboard { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 24px !important; color: rgba(255,255,255,0.75) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-decoration: none !important; text-transform: uppercase !important; border-left: 3px solid transparent !important; transition: all var(--p-transition) !important; }
.menu ul li a.left-dashboard:hover, .menu ul li a.left-dashboard.active { background: rgba(255,255,255,0.08) !important; color: #fff !important; border-left-color: var(--p-orange) !important; }
.menu ul li a.left-dashboard i { font-size: 16px !important; width: 20px !important; text-align: center !important; color: var(--p-orange) !important; }
.menu ul li a.left-dashboard p { margin: 0 !important; padding: 0 !important; }
.menu ul li.log-out { position: absolute !important; bottom: 16px !important; left: 12px !important; right: 12px !important; width: calc(100% - 24px) !important; box-sizing: border-box !important; border-bottom: none !important; }
.menu ul li.log-out a.left-dashboard { background: var(--p-orange) !important; color: #fff !important; border-radius: 50px !important; justify-content: center !important; border-left: none !important; padding: 10px 8px !important; margin: 0 !important; font-size: 11px !important; letter-spacing: 0.3px !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; white-space: nowrap !important; }
.menu ul li.log-out a.left-dashboard:hover { background: var(--p-orange-hover) !important; }
.menu ul li.log-out a.left-dashboard i { color: #fff !important; }

/* ── CARDS ───────────────────────────────────────────────── */
.content .card { background: var(--p-card-bg) !important; border: none !important; border-radius: var(--p-radius) !important; box-shadow: var(--p-shadow) !important; overflow: visible !important; margin-bottom: 24px !important; transition: box-shadow var(--p-transition) !important; }
.content .card:hover { box-shadow: var(--p-shadow-hover) !important; }
.content .card-body { padding: 20px 24px !important; }

/* ── CARD HEADERS ────────────────────────────────────────── */
.content .card-header { background: var(--p-green) !important; color: #fff !important; border: none !important; border-radius: var(--p-radius) var(--p-radius) 0 0 !important; padding: 14px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 12px !important; }
.content .card-header h4, .content .card-header h5, .content .card-header .card-title { color: #fff !important; font-weight: 700 !important; margin: 0 !important; font-size: 15px !important; white-space: nowrap !important; flex: 1 !important; }
.content .card-header .btn, .content .card-header a.btn, .content .card-header a[data-toggle="modal"], .content .card-header button { background: var(--p-orange) !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 8px 18px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; white-space: nowrap !important; cursor: pointer !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; line-height: 1.2 !important; transition: background var(--p-transition) !important; }
.content .card-header .btn:hover, .content .card-header a.btn:hover, .content .card-header a[data-toggle="modal"]:hover, .content .card-header button:hover { background: var(--p-orange-hover) !important; color: #fff !important; }
.content .card-header #pay_now[style*="display:none"] { display: none !important; }
.content .card-header .row { width: 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; flex: 1 !important; }
.content .card-header [class*="col-"] { margin-bottom: 0 !important; }
.content .card-header .col-md-8 { flex: 1 1 auto !important; max-width: none !important; padding: 0 !important; width: auto !important; }
.content .card-header .col-md-4 { flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; }
.content .card-header ul.nav { height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; }
.content .card-header ul.nav li { line-height: 1 !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; }
.content .card-header ul.nav li a, ul.nav.navbar-right.navbar-login li a,
.content .card-header .col-md-5 ul li a, .content .card-header .col-md-4 ul li a { color: #fff !important; margin: 0 !important; }

/* ── SPACING ─────────────────────────────────────────────── */
.content .row { margin-bottom: 0 !important; }
.content .row > [class*="col-"] { margin-bottom: 24px !important; }
.content .card-header .row > [class*="col-"] { margin-bottom: 0 !important; }
.content .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
body { overflow-x: hidden !important; }

/* ── APP LIST ────────────────────────────────────────────── */
.content .app-list { padding: 0 !important; margin: 0 !important; }
.content .app-list .list-group-item { padding: 0 10px !important; border: none !important; background: transparent !important; }
.content .app-list-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 24px !important; border-bottom: 1px solid var(--p-border) !important; min-height: 44px !important; }
.content .app-list-item:last-child { border-bottom: none !important; }
.content .app-list-item:hover { background: rgba(27,70,60,0.03) !important; }
.content .app-week-past:hover, .content .app-pending-row:hover { background: transparent !important; }
.content .app-icon { flex: 0 0 22px !important; display: flex !important; align-items: center !important; }
.content .app-icon .material-icons { font-size: 18px !important; }
.content .app-icon-done .material-icons { color: var(--p-orange) !important; }
.content .app-icon-scheduled .material-icons { color: var(--p-orange) !important; }
.content .app-icon-past .material-icons { color: #b2bec3 !important; }
.content .app-icon-pending .material-icons { color: #b2bec3 !important; }
.content .app-pending .app-icon .material-icons, .content .app-pending-row .app-icon .material-icons, .content .app-empty .app-icon .material-icons { color: #b2bec3 !important; }
.content .app-label { flex: 1 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--p-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.content .app-done .app-label { font-weight: 700 !important; }
.content .app-week-past .app-label { text-decoration: line-through !important; color: var(--p-text-light) !important; font-weight: 400 !important; }
.content .app-pending-row .app-label, .content .app-empty .app-label, .content .app-pending .app-label { color: var(--p-text-muted) !important; font-weight: 400 !important; }
.content .app-date { font-size: 12px !important; color: var(--p-text-muted) !important; white-space: nowrap !important; margin-right: 8px !important; }
.content .app-badge { flex: 0 0 auto !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; padding: 3px 8px !important; border-radius: 50px !important; }
.content .app-badge-done { background: #e8f5e9 !important; color: #2e7d32 !important; }
.content .app-badge-scheduled { background: rgba(246,139,30,0.12) !important; color: var(--p-orange) !important; }
.content .app-badge-past { background: #f0f0f0 !important; color: #aaa !important; }
.content .app-badge-pending { display: none !important; }
.extend-protection-wrap { padding: 14px 24px 18px !important; border-top: 1px solid var(--p-border) !important; text-align: center !important; }
.btn-extend-protection { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 20px !important; background: transparent !important; color: var(--p-orange) !important; border: 1.5px solid var(--p-orange) !important; border-radius: 50px !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none !important; text-transform: uppercase !important; transition: background var(--p-transition), color var(--p-transition) !important; }
.btn-extend-protection:hover { background: var(--p-orange) !important; color: #fff !important; }
.btn-extend-protection .material-icons { font-size: 15px !important; color: inherit !important; }
.content .card.card-tasks { display: flex !important; flex-direction: column !important; }
.content .card.card-tasks .card-header { flex-shrink: 0 !important; }
.content .card.card-tasks .app-list { flex: 1 !important; }
.content .card.card-tasks > ul.app-list { padding-top: 4px !important; }
.content .card > .card-header + .app-list { margin-top: 6px !important; }
.content .card > .card-header + ul.list-group { margin-top: 6px !important; }

/* ── BUG REPORT GRID ─────────────────────────────────────── */
.bug-report-grid { padding: 8px 0 !important; }
.bug-report-row { display: flex !important; align-items: baseline !important; padding: 10px 24px !important; border-bottom: 1px solid var(--p-border) !important; gap: 12px !important; }
.bug-report-row:last-child { border-bottom: none !important; }
.bug-report-label { flex: 0 0 160px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; color: var(--p-text-muted) !important; }
.bug-report-value { flex: 1 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--p-text) !important; }

/* ── UPSELL CARD GRID ────────────────────────────────────── */
.content .container-fluid.w-85 { max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; flex: 0 0 100% !important; box-sizing: border-box !important; }
.content .card-deck { display: grid !important; gap: 20px !important; margin: 0 0 20px !important; grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1400px) { .content .card-deck { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .content .card-deck { grid-template-columns: 1fr !important; } }
.content .card-deck .card { margin: 0 !important; display: flex !important; flex-direction: column !important; }
.content .card-deck .card:hover { transform: none !important; }
.content .card-deck .card .card-body { flex: 1 !important; display: flex !important; flex-direction: column !important; text-align: center !important; padding: 20px 16px !important; }
.content .card-deck .card .card-body img { max-height: 140px !important; object-fit: contain !important; margin: 0 auto 16px !important; display: block !important; }
.content .card-deck .card .card-body h1, .content .card-deck .card .card-body h2 { font-size: 36px !important; font-weight: 900 !important; color: var(--p-green) !important; margin: 12px 0 4px !important; }
.content .card-deck .card .card-body h1 small, .content .card-deck .card .card-body h2 small, .content .card-deck .card .card-body h1 span, .content .card-deck .card .card-body h2 span { font-size: 14px !important; font-weight: 400 !important; color: var(--p-text-muted) !important; }
.content .card-deck .card .card-body ul { list-style: none !important; padding: 0 !important; }
.content .card-deck .card .card-body ul li { font-size: 13px !important; color: var(--p-text-muted) !important; padding: 2px 0 !important; }
.content .card-deck .card .card-body h4 { font-size: 13px !important; color: var(--p-text-light) !important; text-decoration: line-through !important; font-weight: 400 !important; margin: 6px 0 0 !important; }
.upsell-add-btn, button.upsell-add-btn { background: transparent !important; color: var(--p-green) !important; border: 2px solid var(--p-green) !important; border-radius: 50px !important; padding: 12px 20px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; width: 100% !important; cursor: pointer !important; margin-top: auto !important; box-shadow: none !important; transform: none !important; transition: background var(--p-transition), color var(--p-transition) !important; }
.upsell-add-btn:hover { background: var(--p-green) !important; color: #fff !important; }
.content .card-deck .card .card-body button { background: transparent !important; color: var(--p-green) !important; border: 2px solid var(--p-green) !important; border-radius: 50px !important; padding: 12px 20px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; box-shadow: none !important; width: 100% !important; }
.content .card-deck .card .card-body button:hover { background: var(--p-green) !important; color: #fff !important; }

/* ── UPSELL TOGGLE GRID ──────────────────────────────────── */
.upsell-toggle-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.upsell-toggle { display: flex !important; cursor: pointer !important; border: 2px solid var(--p-border) !important; border-radius: var(--p-radius-sm) !important; overflow: hidden !important; transition: border-color 0.15s, background 0.15s !important; margin: 0 !important; }
.upsell-toggle input[type="checkbox"] { display: none !important; }
.upsell-toggle-inner { display: flex !important; flex-direction: column !important; padding: 12px 14px !important; width: 100% !important; gap: 4px !important; }
.upsell-toggle-name { font-size: 14px !important; font-weight: 700 !important; color: var(--p-text) !important; text-transform: none !important; letter-spacing: normal !important; }
.upsell-toggle-price { font-size: 13px !important; font-weight: 600 !important; color: var(--p-text-muted) !important; }
.upsell-toggle.is-active, .upsell-toggle:has(input:checked) { border-color: var(--p-green) !important; background: rgba(27,70,60,0.05) !important; }
.upsell-toggle.is-active .upsell-toggle-name, .upsell-toggle:has(input:checked) .upsell-toggle-name { color: var(--p-green) !important; }
.upsell-toggle.is-active .upsell-toggle-price, .upsell-toggle:has(input:checked) .upsell-toggle-price { color: var(--p-orange) !important; font-weight: 700 !important; }
.upsell-toggle:hover { border-color: var(--p-green) !important; }
a.btn.btn-faded.add { background: transparent !important; color: var(--p-green) !important; border: 2px solid var(--p-green) !important; border-radius: 50px !important; padding: 10px 20px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; text-decoration: none !important; display: block !important; text-align: center !important; transition: background var(--p-transition), color var(--p-transition) !important; }
a.btn.btn-faded.add:hover { background: var(--p-green) !important; color: #fff !important; }

/* ── FORMS & INPUTS ──────────────────────────────────────── */
.content .form-control { border: 1.5px solid var(--p-border) !important; border-radius: var(--p-radius-sm) !important; padding: 10px 14px !important; font-size: 14px !important; color: var(--p-text) !important; background: #fff !important; transition: border-color var(--p-transition) !important; }
.content .form-control:focus { border-color: var(--p-green) !important; box-shadow: 0 0 0 3px rgba(27,70,60,0.1) !important; outline: none !important; }
.content label { font-size: 13px !important; font-weight: 700 !important; color: var(--p-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; margin-bottom: 6px !important; }
.content input[type="radio"], .content input[type="checkbox"] { accent-color: var(--p-orange) !important; }
.content .checkbox-label { display: inline !important; font-size: 14px !important; text-transform: none !important; font-weight: 400 !important; color: var(--p-text) !important; letter-spacing: normal !important; }
.content .btn-primary { background: var(--p-green) !important; border-color: var(--p-green) !important; border-radius: 50px !important; font-weight: 700 !important; }
.content .btn-primary:hover { background: var(--p-green-dark) !important; }
.content .btn-secondary { border-radius: 50px !important; }

/* ── MODALS ──────────────────────────────────────────────── */
.modal.fade.show, .modal.fade.in { opacity: 1 !important; }
.modal.fade { opacity: 0; transition: opacity 0.15s linear !important; }
.modal-content { border: none !important; border-radius: var(--p-radius) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important; overflow: hidden !important; font-family: 'Lato', 'Helvetica Neue', sans-serif !important; padding: 0 !important; width: auto !important; position: relative !important; top: auto !important; left: auto !important; }
.modal-header { background: var(--p-green) !important; color: #fff !important; border: none !important; padding: 20px 28px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.modal-title { color: #fff !important; font-weight: 700 !important; font-size: 18px !important; letter-spacing: 0.2px !important; flex: 1 !important; text-align: left !important; margin: 0 !important; }
.modal-header .close { color: #fff !important; opacity: 0.7 !important; font-size: 24px !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; text-shadow: none !important; }
.modal-header .close:hover { opacity: 1 !important; }
.modal-body { padding: 28px !important; background: #fff !important; }
.modal-body .card-body { padding: 0 !important; }
.modal-footer { border-top: 1px solid var(--p-border) !important; padding: 16px 28px !important; background: #fff !important; display: flex !important; justify-content: center !important; gap: 10px !important; }
.modal-body label { font-size: 13px !important; font-weight: 700 !important; color: var(--p-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 8px !important; display: block !important; }
.modal-body .form-control { font-size: 15px !important; padding: 10px 14px !important; border: 1.5px solid var(--p-border) !important; border-radius: var(--p-radius-sm) !important; color: var(--p-text) !important; background: #fff !important; width: 100% !important; height: auto !important; line-height: 1.5 !important; }
.modal-body select.form-control, .modal-body select.form-control:not([size]):not([multiple]) { font-size: 15px !important; height: 46px !important; color: var(--p-text) !important; background: #fff !important; padding: 10px 14px !important; line-height: 1.5 !important; }
.modal-body select.form-control option { color: var(--p-text) !important; background: #fff !important; font-size: 15px !important; }
.modal-body .form-control:focus { border-color: var(--p-green) !important; box-shadow: 0 0 0 3px rgba(27,70,60,0.1) !important; outline: none !important; }
.modal-body .form-group { margin-bottom: 20px !important; }
.modal-body .radio-option { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; }
.modal-body .radio-option input[type="radio"] { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--p-orange) !important; cursor: pointer !important; }
.modal-body .radio-option label { font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--p-text) !important; cursor: pointer !important; margin: 0 !important; display: block !important; line-height: 1.4 !important; }
.modal-body .new_class label, .modal-body .checkbox-label { font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--p-text) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; margin-bottom: 0 !important; }
.modal-body .new_class input[type="checkbox"], .modal-body .checkbox-label input[type="checkbox"] { accent-color: var(--p-orange) !important; width: 16px !important; height: 16px !important; cursor: pointer !important; }
.modal-footer .btn-secondary { background: transparent !important; color: var(--p-text-muted) !important; border: 1.5px solid var(--p-border) !important; border-radius: 50px !important; padding: 10px 22px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; }
.modal-footer .btn-secondary:hover { background: var(--p-border) !important; color: var(--p-text) !important; }
.modal-footer .btn-primary, .modal-footer .ticketbtn { background: var(--p-orange) !important; border: none !important; border-radius: 50px !important; padding: 10px 24px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; color: #fff !important; }
.modal-footer .btn-primary:hover, .modal-footer .ticketbtn:hover { background: var(--p-orange-hover) !important; }

/* ── ADDRESS BAR / PROPERTY SWITCHER ─────────────────────── */
.content > .padding-top-25 > .mdk-drawer-layout__content > .container-fluid > .card.p-2,
.content > .padding-top-25 > .mdk-drawer-layout__content > .container-fluid > .card { padding: 0 !important; margin-top: 8px !important; margin-bottom: 24px !important; }
.title-info { font-size: 14px !important; color: var(--p-text-muted) !important; }
.title-info strong, .title-info b { color: var(--p-text) !important; font-weight: 900 !important; font-size: 16px !important; }
.ss-prop-switcher { padding: 0 !important; position: relative !important; background: #fff !important; }
.ss-switcher-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 24px !important; cursor: pointer !important; border-radius: var(--p-radius) !important; transition: background 0.15s !important; gap: 16px !important; }
.ss-switcher-toggle:hover { background: rgba(27,70,60,0.02) !important; }
.ss-switcher-left { display: flex !important; flex-direction: column !important; gap: 2px !important; flex: 1 !important; }
.ss-switcher-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--p-text-muted) !important; font-family: 'Lato', sans-serif !important; }
.ss-switcher-address { font-size: 15px !important; font-weight: 700 !important; color: var(--p-green) !important; font-family: 'Lato', sans-serif !important; }
.ss-switcher-right { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
.ss-switcher-hint { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; color: var(--p-green) !important; font-family: 'Lato', sans-serif !important; display: flex !important; align-items: center !important; gap: 5px !important; }
.ss-switcher-hint i { color: var(--p-green) !important; font-size: 13px !important; }
.ss-switcher-chevron { color: var(--p-green) !important; font-size: 14px !important; transition: transform 0.25s !important; display: flex !important; }
.ss-switcher-chevron.open { transform: rotate(180deg) !important; }
.ss-chevron-arrow { display: inline-block !important; width: 10px !important; height: 10px !important; border-right: 2px solid var(--p-green) !important; border-bottom: 2px solid var(--p-green) !important; transform: rotate(45deg) !important; transition: transform 0.3s ease !important; margin-bottom: 3px !important; flex-shrink: 0 !important; }
.ss-switcher-chevron.open, .ss-chevron-arrow.open { transform: rotate(225deg) !important; margin-bottom: -3px !important; }
.ss-switcher-panel { background: #fff !important; border-radius: 0 0 var(--p-radius) var(--p-radius) !important; box-shadow: none !important; padding: 8px !important; margin: 0 !important; border: none !important; border-top: 1px solid var(--p-border) !important; display: none !important; }
.ss-switcher-panel.show { display: block !important; }
.ss-prop-switcher.ss-open .ss-switcher-toggle { border-radius: var(--p-radius) var(--p-radius) 0 0 !important; }
.ss-switcher-option { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 16px !important; border-radius: var(--p-radius-sm) !important; cursor: pointer !important; transition: background 0.15s !important; }
.ss-switcher-option:hover { background: rgba(27,70,60,0.05) !important; }
.ss-option-icon { color: var(--p-orange) !important; font-size: 14px !important; flex-shrink: 0 !important; }
.ss-option-text { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.ss-option-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; color: var(--p-text-muted) !important; font-family: 'Lato', sans-serif !important; }
.ss-option-address { font-size: 14px !important; font-weight: 700 !important; color: var(--p-green) !important; font-family: 'Lato', sans-serif !important; }

/* ── SERVICE-INFO CARD HEADER FIX ───────────────────────── */
/* Modals nested inside .card-header .row inflate row height — hide from flow */
.content .card-header .row .modal { display: none !important; }
.content .card-header [class*="col-"] { align-self: center !important; }

/* ── BILLING PAGE ────────────────────────────────────────── */
.billing-table-header { background: #f7f6f3 !important; padding: 4px 20px !important; border-bottom: 1px solid var(--p-border) !important; }
.billing-table-header .row { display: flex !important; align-items: center !important; margin: 0 !important; }
.billing-table-header .row > div { display: flex !important; align-items: center !important; min-height: 0 !important; }
.billing-col-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: var(--p-text-muted) !important; font-family: 'Lato', sans-serif !important; }

/* Payment rows — vertically centered */
.content .list-group-item.list-group-item-action { padding: 0 20px !important; }
.content .list-group-item .row,
.content .list-group-item .row.align-items-center {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  min-height: 44px !important;
  margin: 0 !important;
}
.content .list-group-item .row > div,
.content .list-group-item .col-3 {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.content .list-group-item .col-3.billing-font,
.content .list-group-item .col-3.billing-font.billing-font-small { font-size: 14px !important; gap: 8px !important; }
.content .list-group-item .col-3 span.mr-1 { font-size: 14px !important; font-weight: 500 !important; color: var(--p-text) !important; }
.content .list-group-item .material-icons.text-muted { color: var(--p-orange) !important; font-size: 16px !important; }

/* Billing action buttons */
.billing-action-row { display: flex !important; justify-content: center !important; align-items: center !important; gap: 20px !important; padding: 20px 0 24px !important; flex-wrap: wrap !important; }
.btn-billing { background: transparent !important; color: var(--p-green) !important; border: 2px solid var(--p-green) !important; border-radius: 50px !important; padding: 12px 32px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-family: 'Lato', sans-serif !important; cursor: pointer !important; transition: background 0.2s, color 0.2s !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
.btn-billing:hover { background: var(--p-green) !important; color: #fff !important; }
.btn-billing-primary { background: var(--p-orange) !important; color: #fff !important; border-color: var(--p-orange) !important; }
.btn-billing-primary:hover { background: var(--p-orange-hover) !important; border-color: var(--p-orange-hover) !important; color: #fff !important; }

/* Account Billing Info — read-only display grid */
.ss-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; padding: 8px 0; }
.ss-info-item--full { grid-column: 1 / -1; }
.ss-info-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #636e72; margin-bottom: 4px; }
.ss-info-value { display: block; font-size: 15px; font-weight: 500; color: #2d3436; font-family: 'Lato', sans-serif; }

/* Billing change modal — pre-populated form */
.ss-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 4px 0 8px; }
.ss-modal-field--full { grid-column: 1 / -1; }
.ss-modal-input { width: 100%; padding: 9px 12px; border: 1px solid #dfe6e9; border-radius: 8px; font-size: 14px; font-family: 'Lato', sans-serif; color: #2d3436; background: #fff; box-sizing: border-box; transition: border-color 0.15s; }
.ss-modal-input:focus { outline: none; border-color: #1b463c; }
.ss-modal-input--readonly { background: #f7f6f3 !important; color: #999 !important; cursor: not-allowed; }
.ss-modal-textarea { resize: vertical; min-height: 80px; }
.ss-readonly-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #b2bec3; margin-left: 8px; }

/* ── SWEETALERT2 ─────────────────────────────────────────── */
.swal2-popup { border-radius: var(--p-radius) !important; font-family: 'Lato', 'Helvetica Neue', sans-serif !important; padding: 32px 24px 24px !important; }
.swal2-title { font-size: 22px !important; font-weight: 900 !important; color: var(--p-green) !important; font-family: 'Lato', 'Helvetica Neue', sans-serif !important; }
.swal2-html-container, .swal2-content { font-size: 15px !important; color: var(--p-text-muted) !important; font-family: 'Lato', 'Helvetica Neue', sans-serif !important; }
.swal2-icon.swal2-success { border-color: var(--p-green) !important; color: var(--p-green) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(27,70,60,0.2) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--p-green) !important; }
.swal2-styled.swal2-confirm, .swal-confirm-Green { background: var(--p-orange) !important; border: none !important; border-radius: 50px !important; padding: 10px 28px !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; font-family: 'Lato', 'Helvetica Neue', sans-serif !important; }
.swal2-styled.swal2-confirm:focus, .swal-confirm-Green:focus { box-shadow: 0 0 0 3px rgba(246,139,30,0.3) !important; }
.swal2-styled.swal2-confirm:hover { background: var(--p-orange-hover) !important; }
button.swal2-confirm.swal-confirm-red.swal2-styled { background: #e53e3e !important; border-radius: 50px !important; }
.swal2-actions { gap: 10px !important; margin-top: 24px !important; }

/* ── AUTH PAGES ──────────────────────────────────────────── */
.main-box { display: flex !important; min-height: 100vh !important; background: var(--p-bg) !important; }
.side-bar { flex: 0 0 30% !important; min-height: 100vh !important; background: var(--p-green) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px !important; }
.right-form { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px !important; height: 100vh !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 992px) {
  .menu { top: 0 !important; height: 100vh !important; left: -220px !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; transition: left 0.3s ease !important; z-index: 9999 !important; padding-top: 70px !important; }
  .menu.active { left: 0 !important; box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important; }
  .content { padding-top: 70px !important; padding-bottom: 40px !important; padding-left: 16px !important; padding-right: 16px !important; margin-top: 0 !important; }
  .bug-report-label { flex: 0 0 120px !important; }
}
@media (max-width: 768px) {
  .content { padding-top: var(--nav-height, 60px) !important; padding-left: 12px !important; padding-right: 12px !important; margin-top: 0 !important; }
  .content .app-list-item { padding: 10px 16px !important; }
  .content .app-label { font-size: 12px !important; }
  .content .app-badge { font-size: 9px !important; padding: 2px 6px !important; }
  .content .card-deck { grid-template-columns: 1fr !important; }
  .bug-report-row { flex-direction: row !important; padding: 10px 24px !important; align-items: center !important; justify-content: space-between !important; }
  .bug-report-label { flex: 0 0 auto !important; min-width: unset !important; max-width: unset !important; }
  .bug-report-value { flex: 0 0 auto !important; text-align: right !important; font-weight: 700 !important; }
  .right-form { padding: 20px !important; height: auto !important; }
  /* Auth pages: show logo bar */
  .main-box .side-bar {
    display: flex !important;
    flex: none !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: unset !important;
    height: auto !important;
    background-color: #1B463C !important;
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Card header mobile: handled in dedicated block below */
  .ss-modal-grid { grid-template-columns: 1fr !important; }
  .ss-info-grid { grid-template-columns: 1fr !important; }
}

/* ── BILLING CARD HEADER HEIGHT FIX ─────────────────────── */
/* Scoped only to billing page col-md-7/5 headers */
.content .card-header .col-md-7,
.content .card-header .col-md-5 {
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* ── EQUAL HEIGHT APP CARDS ──────────────────────────────── */
.content .row-app-cards { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; }
.content .row-app-cards > [class*="col-"] { display: flex !important; flex-direction: column !important; }
.content .row-app-cards > [class*="col-"] > .card { flex: 1 !important; margin-bottom: 0 !important; }

@media (max-width: 768px) {
  .content .card-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .content .card-header h4,
  .content .card-header h5,
  .content .card-header .card-title {
    text-align: center !important;
    white-space: normal !important;
    width: 100% !important;
    flex: none !important;
  }
  .content .card-header .btn,
  .content .card-header a.btn,
  .content .card-header a[data-toggle="modal"],
  .content .card-header button {
    width: auto !important;
    min-width: 160px !important;
    justify-content: center !important;
  }
  /* col-based headers (e.g. billing) */
  .content .card-header .row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .content .card-header .col-md-8,
  .content .card-header .col-md-7,
  .content .card-header .col-md-4,
  .content .card-header .col-md-5 {
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .content .card-header .dropdown {
    width: auto !important;
  }
}

/* ── Applications card: stack chart below stats on mobile ────────────── */
@media (max-width: 768px) {
  /* The inline style="display:flex" wrapper inside the applications card body */
  #applications > div[style*="display:flex"],
  #applications > div > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 20px 24px !important;
  }
  #solutions > div[style*="display:flex"],
  #solutions > div > div[style*="display:flex"] {
    padding: 20px 24px !important;
  }
  /* Stats grid takes full width */
  #applications .bug-report-grid {
    flex: none !important;
    width: 100% !important;
  }
  /* Donut chart: center below stats */
  #applications > div[style*="display:flex"] > div[style*="flex:0"],
  #applications > div > div[style*="display:flex"] > div[style*="flex:0"] {
    flex: none !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto !important;
  }
  /* ── Solutions card: hide image on mobile ─────────────────────────── */
  #solutions > div[style*="display:flex"] > div[style*="flex:0"],
  #solutions > div > div[style*="display:flex"] > div[style*="flex:0"] {
    display: none !important;
  }
}