@keyframes opacityIn{0%{opacity:.3}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-animation{0%{box-shadow:0 0 0 0 var(--danger)}to{box-shadow:0 0 0 20px transparent}}@keyframes ac-fade-in-down{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}html{scroll-behavior:smooth}body{background:var(--body-bg)}.modal-header{padding:1rem;border-bottom:0}.modal-content{padding:1rem;border:0;box-shadow:none;-webkit-box-shadow:none;border-radius:calc(2*var(--border-radius))}.input-group-text{font-size:.9rem}.form-control-range{-webkit-appearance:none;appearance:none;overflow:hidden;accent-color:var(--primary);background:var(--gray-200);border-radius:var(--border-radius);height:.5rem;margin:.75rem 0}.form-control-range::-moz-range-track,.form-control-range::-webkit-slider-runnable-track{background:var(--gray-200)}.form-control-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:.75rem;width:.75rem;background-color:var(--primary);border-radius:50%;border:2px solid var(--white);box-shadow:-2007px 0 0 2000px var(--primary-300)}.form-control-range::-moz-range-thumb{-webkit-appearance:none;appearance:none;height:.75rem;width:.75rem;background-color:var(--primary);border-radius:50%;border:2px solid var(--white);box-shadow:-2007px 0 0 2000px var(--primary-300)}.footer{margin:1rem 0;border:none;border-radius:calc(2*var(--border-radius));padding:1.25rem;background:var(--white);color:var(--gray-700)}.footer a:hover:not(.dropdown-item),.footer a:not(.dropdown-item){color:var(--gray-700)}.footer button,.footer button:hover{color:var(--gray-700)!important}.footer-logo{max-height:2.5rem;height:2.5rem}.footer-heading{color:var(--black)!important}.footer-social-wrapper{border-radius:50%;aspect-ratio:1/1;display:inline-flex;justify-content:center;align-items:center;width:2.5rem;height:auto}.footer-social-wrapper a{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.filters-dropdown{width:18rem;max-height:30rem;overflow-y:auto}.custom-breadcrumbs{list-style:none;padding:0;display:flex;flex-wrap:wrap}.custom-breadcrumbs>li{margin-right:.5rem}.custom-breadcrumbs>li>a{color:var(--gray)}.custom-breadcrumbs>li>svg{color:var(--gray-400);margin-left:.5rem}.font-size-little-small{font-size:.95rem}.font-size-small{font-size:.9rem}.font-weight-450{font-weight:450}.font-weight-500{font-weight:500}.list-style-none{list-style:none;padding:0}img{vertical-align:inherit!important}.icon-favicon{width:.95rem;height:auto}.icon-favicon-small{width:.75rem;height:auto}.btn:hover{border-color:transparent!important}.dropdown-item{color:var(--gray-800);font-weight:450;font-size:.9rem}.dropdown-item.active{border-radius:var(--border-radius)}.dropdown-item svg{color:var(--gray-600)}.dropdown-item.active svg,.dropdown-item:active svg{color:var(--white)}.navbar-main{padding:.75rem 1rem;min-height:0!important;z-index:1000;backdrop-filter:blur(5px);background:#ffffffa3}[data-theme-style=dark] .navbar-main{background:#1a1a1aa3}.navbar-main .navbar-nav>li>a{padding:1rem 0!important;font-size:.9rem;font-weight:500}@media (min-width:992px){.navbar-main .navbar-nav>li>a{padding:1rem!important}}.navbar-logo{max-height:2.5rem;height:2.5rem}.navbar-logo-mini{max-height:1.25rem;height:1.25rem}.navbar-avatar{width:20px;height:20px;border-radius:50%}.navbar-custom-toggler{padding:.5rem .8rem;font-size:1.25rem;line-height:1;background-color:transparent;border-radius:var(--border-radius);color:var(--gray-700);border-color:var(--gray-300)}.notification-avatar{background:var(--gray-100);width:50px;height:50px;color:var(--gray);display:flex;align-items:center;justify-content:center}.chart-container{position:relative;margin:auto;height:275px;width:100%}@media print{.chart-container canvas{min-height:100%;max-width:100%;max-height:100%;height:auto!important;width:auto!important}}.dropdown-item:focus,.dropdown-item:hover{border-radius:var(--border-radius)}.nav-custom .nav-link{transition:all .3s ease-in-out;color:var(--gray-600);border-bottom:3px solid var(--gray-300)}.nav-custom .nav-link.active,.nav-custom .nav-link:hover{color:var(--primary-900);border-color:var(--primary-900)}.nav-custom2 .nav-link{background:var(--gray-200);margin-bottom:1rem;font-size:.9rem;font-weight:500}.notification-preview{height:min-content;position:sticky;top:1rem}.header,.table-custom td{background:var(--white);padding:3rem 0}[data-theme-style=dark] .header,[data-theme-style=dark] .pricing-palden .pricing-item{background:var(--white)}.user-avatar{border-radius:50%;max-width:80px;max-height:80px}.container-disabled{pointer-events:none;opacity:.5}.container-disabled-simple{pointer-events:none}.dropdown .dropdown-menu{animation-name:opacityIn;animation-duration:.3s}.table-image-wrapper{border-radius:50%;width:2.5rem;height:2.5rem;max-width:2.5rem;max-height:2.5rem;display:flex;align-items:center;justify-content:center;background:var(--primary-100)}.table-custom-container{border:1px solid var(--gray-200);border-radius:calc(2*var(--border-radius))}.table-custom{margin-bottom:0}.table-custom thead th{border-top:0;border-bottom:0;background:#fff}[data-theme-style=dark] .table-custom thead th{background:var(--white);color:var(--gray-800)}.table-custom th{padding:1.25rem 1rem}.table-custom td{padding:1.75rem 1rem;vertical-align:middle;border:0}.table-custom tbody tr td{transition:all .3s ease-in-out}[data-theme-style=dark] .table-custom tbody tr td{border-color:var(--gray-100)}.pre-custom{background:var(--gray-300);padding:2rem;font-size:.75rem}.zoomer{transition:transform .3s ease-in-out}.zoomer:hover{transform:scale(1.02)}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:600}.cursor-pointer{cursor:pointer}.no-focus:focus{outline:0;box-shadow:none}.appearance-none{appearance:none;-moz-appearance:none;-webkit-appearance:none}.pricing{display:flex;flex-wrap:wrap;justify-content:space-around;width:100%;margin:0 auto 3rem}.pricing-item{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:center;flex:0 1 350px}.pricing-feature-list{text-align:left}.pricing-palden .pricing-item{background:var(--white);border-radius:calc(2*var(--border-radius));margin:2rem 0;border:1px solid var(--gray-200)}.pricing-palden .pricing-deco{border-radius:calc(2*var(--border-radius)) calc(2*var(--border-radius))0 0;background:var(--primary);padding:2rem 0 6rem;position:relative}.pricing-palden .pricing-deco-img{position:absolute;bottom:0;left:0;width:100%;height:130px}.pricing-palden .pricing-deco-img path{fill:var(--white)}[data-theme-style=dark] .pricing-palden .pricing-deco-img path{fill:var(--gray-100)}.pricing-palden .pricing-title{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:0;color:#fff}.pricing-palden .deco-layer{transition:transform .5s}.pricing-palden .pricing-item:hover .deco-layer--1{transform:translate3d(15px,0,0)}.pricing-palden .pricing-item:hover .deco-layer--2{transform:translate3d(-15px,0,0)}.pricing-palden .icon{font-size:2.5rem}.pricing-palden .pricing-price{font-size:3rem;font-weight:700;padding:0;color:#fff;margin:0 0 .25rem;line-height:.75}.pricing-palden .pricing-currency{font-size:.9rem;vertical-align:top}.pricing-palden .pricing-sub{font-size:.9rem;margin:2rem 0;color:#fff;padding:0 1.5rem}.pricing-palden .pricing__sentence{font-weight:700;margin:0 0 1em;padding:0 0 .5em}.pricing-palden .pricing-feature-list{margin:0;padding:0 2rem;list-style:none;font-size:.95rem}.pricing-palden .pricing-feature{padding:.75rem 0}.pricing-tag{position:absolute;font-size:80%;font-weight:600;background:var(--gray-600);color:var(--gray-50);padding:.1rem .8rem;border-radius:var(--border-radius);top:0;left:50%;transform:translate(-50%,-50%);z-index:1}.custom-radio-box{cursor:pointer}.custom-radio-box .custom-radio-box-main-text{font-size:1.15rem;font-weight:700}.custom-radio-box .custom-radio-box-main-icon{font-size:1.25rem}.custom-radio-box input[type=checkbox]+div,.custom-radio-box input[type=radio]+div{transition:all .3s ease-in-out;border:2px solid var(--gray-200);background:var(--white)}.custom-radio-box input[type=checkbox]:checked+div,.custom-radio-box input[type=radio]:checked+div{border:2px solid var(--primary)}.custom-radio-box input[type=checkbox]:hover+div,.custom-radio-box input[type=radio]:hover+div{border:2px solid var(--primary)}.cryptocurrency-icon{width:40px;height:40px}.round-circle-lg,.round-circle-md{width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border-radius:50%}.round-circle-lg{width:4.5rem;height:4.5rem}.badge{padding:.45em .9em}.badge-primary{color:var(--primary-700);background:var(--primary-100)}[data-theme-style=dark] .badge-primary{background:var(--primary-800);color:var(--primary-100)}.badge-secondary{color:#535a5f;background-color:#d6d9db}[data-theme-style=dark] .badge-secondary{background-color:#535a5f;color:#d6d9db}.badge-success{color:#267338;background-color:#c6eccf}[data-theme-style=dark] .badge-success{background-color:#267338;color:#c6eccf}.badge-danger{color:#981b27;background-color:#f4bec3}[data-theme-style=dark] .badge-danger{background-color:#981b27;color:#f4bec3}.badge-warning{background-color:#ffecb3;color:#8a610f}[data-theme-style=dark] .badge-warning{background-color:#3d3a29;color:#ffecb3}.badge-info{color:#1f6e7a;background-color:#bbeff7}[data-theme-style=dark] .badge-info{background-color:#1f6e7a;color:#bbeff7}.badge-light{color:#4c5967;background-color:#f0f2f4}[data-theme-style=dark] .badge-light{background-color:#2b333b;color:#f0f2f4}.badge-dark{color:#e3e6e8;background-color:#2e3338}[data-theme-style=dark] .badge-dark{background-color:#e3e6e8;color:#2e3338}.invoice-table th{border-top:0!important}.invoice-table td{vertical-align:baseline!important}@media print{.invoice{page-break-after:always}.container,body,html{height:auto!important;overflow:visible!important}.invoice-logo{filter:grayscale(100%)}}.altum-animate{-webkit-animation-duration:500ms;animation-duration:500ms}.altum-animate-fill-both{-webkit-animation-fill-mode:both;animation-fill-mode:both}.altum-animate-fill-none{-webkit-animation-fill-mode:none;animation-fill-mode:none}.altum-animate-fade-in{-webkit-animation-name:fadeIn;animation-name:fadeIn}.custom-switch{z-index:0}.btn-custom{padding:.5rem 1.5rem;color:var(--gray-600);border-radius:var(--border-radius);font-size:.9rem;background:var(--white)}.btn-custom:hover{color:var(--gray-700)}.btn-custom.active{color:var(--white);background:var(--primary)}.blog-post-image{max-height:20rem;object-fit:cover}.blog-post-image-small{height:13rem;max-height:13rem;object-fit:cover}.blog-post-content{line-height:1.75;word-break:break-word}.blog-post-content p{margin-bottom:1.5rem}.ql-code-block{background-color:var(--gray-200);color:var(--gray-600);padding:1rem;overflow-x:auto;font-family:"Courier New",Courier,monospace;white-space:pre;font-size:.9rem;line-height:1.5}.ql-content p{margin-bottom:0!important}.ql-content li[data-list=bullet]{list-style-type:disc}.altum-file-input,.ql-code-block,blockquote{border-radius:var(--border-radius)}blockquote{border-left:4px solid var(--gray-400);padding:1rem 1.5rem;margin:1.5rem 0;background-color:var(--gray-100);font-style:italic;color:var(--gray-600);font-size:1.1rem;line-height:1.6}.altum-file-input{padding:1rem;background:var(--gray-100);border:1px solid var(--gray-200);cursor:pointer;font-size:.9rem}.altum-file-input:hover{border-color:var(--gray-300)}.altum-file-input::file-selector-button{border:0;padding:.4rem .75rem;border-radius:var(--border-radius);background-color:var(--white);cursor:pointer;font-size:.9rem;margin-right:1rem}.altum-file-input-preview{max-width:100%;max-height:68px;min-height:68px;object-fit:cover}.sticky{position:sticky!important;top:1rem;height:min-content}.icon-zoom-animation svg,.zoom-animation,a svg{transition:transform .15s}a:hover svg{transform:scale(1.1)}a:active svg{transform:scale(.9)}[data-theme-style=dark] svg[data-custom-colors]{color:var(--brand-color-dark)!important}.icon-zoom-animation:hover svg{transform:scale(1.1)}.zoom-animation:hover{transform:scale(1.05)}.zoom-animation:active{transform:scale(.95)}.up-animation,.zoom-animation-subtle{transition:transform .3s}.zoom-animation-subtle:hover{transform:scale(1.025)}.zoom-animation-subtle:active{transform:scale(.98)}.up-animation:hover{transform:translateY(-10px)}@media print{.pcr-app{display:none}}.pcr-button{border:1px solid #fff!important;outline:1px solid var(--gray-300)!important;height:calc(var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size)/2.75))!important;width:100%!important}.pcr-button,.pcr-button::after,.pcr-button::before{border-radius:var(--border-radius)!important}.w-fit-content{width:fit-content!important}.loading-overlay{padding:1.25rem;display:flex;justify-content:center;align-items:center;position:absolute;width:100%;height:100%;background:var(--white);z-index:100;opacity:.8}[data-theme-style=dark] .loading-overlay{background:var(--gray-50)}.btn-group-custom,.loading-overlay,.shiki{border-radius:var(--border-radius)}.shiki{overflow:auto;padding:1.5rem;font-size:.9rem;line-height:1.5rem}.shiki code{background:initial!important}.btn-group-custom{border:1px solid var(--gray-100);padding:.5rem;flex-wrap:wrap;display:inline-flex;gap:.5rem}.btn-group-custom .btn{border-radius:var(--border-radius)!important;background:var(--gray-100)}.btn-group-custom .btn.active{background:var(--dark);color:var(--white);z-index:0!important}body *{scrollbar-color:var(--gray-200) var(--white)!important;scrollbar-width:thin!important}body ::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:10px;width:6px;height:6px}body ::-webkit-scrollbar,body ::-webkit-scrollbar-track{background:var(--white);border-radius:10px;width:6px;height:6px}.internal-notification-icon{animation:pulse-animation 2s infinite}.team-user-avatar{width:45px;height:45px}.team-delegate-access-wrapper{margin:.75rem;border-radius:.5rem}@media (min-width:992px){.team-delegate-access-wrapper{border-radius:5rem}}.announcement-wrapper{position:relative;z-index:10;margin:.75rem;border-radius:.5rem;opacity:0;transition:opacity .3s ease-in;animation:ac-fade-in-down .3s ease-in .6s forwards}@media (min-width:992px){.announcement-wrapper{border-radius:5rem}}.pwa-wrapper{position:fixed;bottom:0;width:calc(100% - 1.5rem);z-index:1000;background:hsla(0,0%,90%,50%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}[data-theme-style=dark] .pwa-wrapper{background:hsla(0,0%,22%,50%)}.rounded-2x{border-radius:calc(2*var(--border-radius))}.rounded-3x{border-radius:calc(3*var(--border-radius))}.pointer-events-all{pointer-events:all!important}i.fa-fw{width:1.25em;display:inline-block}i.fa-xs{font-size:.85em}i.fa-sm{font-size:.875em}i.fa-lg{font-size:1.25em}i.xl{font-size:1.5em}.notification-radio-box:hover,.rating-star{cursor:pointer}.rating-star svg{color:#ffc107;transition:color .15s}.rating-star:hover svg,.rating-star:hover~.rating-star svg{color:#f80!important}.rating-star-chosen svg,.rating-star-chosen~.rating-star svg{color:#dd6200}.index-widget-icon{width:2.5rem;height:2.5rem}.notification-radio-box .notification-radio-box-main-icon{font-size:1.25rem}.notification-radio-box input[type=radio]+div{transition:all .3s ease-in-out;border:1px solid var(--gray-200);background:var(--white)}.notification-radio-box input[type=radio]:checked+div{border:1px solid var(--primary)}.notification-radio-box input[type=radio]:hover+div{border:1px solid var(--primary)}

/* =========================================================
   Gomattic – Metronic Typography Baseline
   Version: v1.0.0
   Scope:
   - Base font family + smoothing
   - Exact type scale + weights (Metronic-like)
   - Unified page title + section titles (regardless of h1/h2 tags)
   - Neutral (non-blue) text + muted tones
   Paste at END of custom css
   ========================================================= */

:root{
  /* Font stack (Metronic-style) */
  --gom-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Core sizes */
  --gom-fs-base: 0.875rem;   /* 14px */
  --gom-fs-sm:   0.8125rem;  /* 13px */
  --gom-fs-xs:   0.75rem;    /* 12px */

  /* Headings */
  --gom-title:   1.375rem;   /* 22px (page title like Metronic) */
  --gom-section: 1.125rem;   /* 18px (section headings like My Balance) */

  /* Weights (Metronic uses 500 a lot) */
  --gom-fw-regular: 400;
  --gom-fw-medium:  500;
  --gom-fw-semibold:600;

  /* Colors (neutral, no tint) */
  --gom-text:  #111827;      /* near-black */
  --gom-text-2:#1f2937;      /* heading neutral */
  --gom-muted: #6b7280;      /* muted */
  --gom-muted-2:#9ca3af;     /* extra muted */
}

/* Base body */
html, body{
  font-family: var(--gom-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  font-size: var(--gom-fs-base) !important;  /* 14px */
  font-weight: var(--gom-fw-regular) !important;
  line-height: 1.5 !important;
  color: var(--gom-text) !important;
  background: #ffffff !important; /* Metronic is #fff */
}

/* Default text helpers */
.small, small{
  font-size: var(--gom-fs-sm) !important;
}

.text-muted{
  color: var(--gom-muted) !important;
}

/* Links (Metronic keeps them calm; blue mainly for actions) */
a{
  color: #2563eb; /* calm blue */
}
a:hover{
  color: #1d4ed8;
}

/* ---------------------------------------------------------
   Page title (Dashboard)
   Match Metronic: medium weight, not heavy
--------------------------------------------------------- */
.page-title,
.page-title h1,
.page-title h2,
h1.page-title,
h1.h3{
  font-size: var(--gom-title) !important;   /* 22px */
  font-weight: var(--gom-fw-medium) !important; /* 500 */
  line-height: 1.25 !important;
  color: var(--gom-text) !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------
   Section headings (Latest campaigns / Latest notifications)
   Force consistent style even if markup differs (h1/h2 + .h4)
--------------------------------------------------------- */
h1.h4,
h2.h4,
h3.h4,
h4.h4,
.section-title,
.card-header .card-title,
.card-header h4,
.card-header h5{
  font-size: var(--gom-section) !important;     /* 18px */
  font-weight: var(--gom-fw-medium) !important; /* 500 */
  line-height: 1.3 !important;
  color: var(--gom-text-2) !important;
  letter-spacing: 0 !important;
  margin-bottom: 1rem !important; /* Metronic rhythm */
}

/* Avoid accidental bold inside headings */
h1.h4 strong,
h2.h4 strong,
.section-title strong,
.card-header .card-title strong{
  font-weight: var(--gom-fw-medium) !important;
}

/* ---------------------------------------------------------
   Labels + table headings (Metronic-style: smaller, neutral)
--------------------------------------------------------- */
label,
.form-label{
  font-size: var(--gom-fs-sm) !important;       /* 13px */
  font-weight: var(--gom-fw-medium) !important;/* 500 */
  color: var(--gom-muted) !important;
}

.table thead th{
  font-size: var(--gom-fs-xs) !important;       /* 12px */
  font-weight: var(--gom-fw-medium) !important;/* 500 */
  color: var(--gom-muted) !important;
  text-transform: none !important; /* keep clean like Metronic */
  letter-spacing: 0 !important;
}

/* Body table cells */
.table td{
  font-size: var(--gom-fs-base) !important; /* 14px */
  font-weight: var(--gom-fw-regular) !important;
  color: var(--gom-text) !important;
}

/* =========================================================
   Gomattic – Metronic Surfaces & Spacing
   Version: v1.0.1
   Scope:
   - Neutral page background (no blue tint)
   - Card borders, radius, shadow
   - Consistent section spacing like Metronic Demo 7
   Paste at END (after Typography v1.0.0)
   ========================================================= */

:root{
  --gom-bg: #ffffff;                 /* Metronic uses white canvas */
  --gom-surface: #ffffff;
  --gom-border: rgba(17, 24, 39, .12); /* light neutral border */
  --gom-shadow: 0 10px 20px rgba(17, 24, 39, .06);
  --gom-radius: 16px;
}

/* Page canvas */
body{
  background: var(--gom-bg) !important;
}

/* Card base (Metronic-style) */
.card{
  background: var(--gom-surface) !important;
  border: 1px solid var(--gom-border) !important;
  border-radius: var(--gom-radius) !important;
  box-shadow: var(--gom-shadow) !important;
}

/* Card padding */
.card .card-body{
  padding: 1.25rem !important; /* 20px */
}

/* Card header subtle divider (if present) */
.card .card-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
  border-top-left-radius: var(--gom-radius) !important;
  border-top-right-radius: var(--gom-radius) !important;
}


.mb-6{
  margin-bottom: 1.5rem !important; /* 24px */
}

.mt-5{
  margin-top: 1.5rem !important; /* 24px */
}

/* =========================================================
   Gomattic – Header padding trim (Metronic-aligned)
   Version: v1.0.2
   Purpose:
   - Keep top breathing room
   - Remove bottom padding (Metronic behaviour)
   ========================================================= */

.header{
  padding-bottom: 0 !important;
}

/* =========================================================
   Gomattic – Section spacing (Metronic-aligned)
   Version: v1.0.3 PATCH
   Change:
   - Remove forced top padding on .pt-5
   - Let headings & cards control vertical rhythm
   ========================================================= */

.container.pt-5,
.pt-5 {
    padding-top: 0 !important;
}

/* =========================================================
   Gomattic – Section headers (Metronic-aligned)
   Version: v1.0.4
   Purpose:
   - Make page + section headings lighter (fw 500)
   - Normalize sizes for h1.h3 + h1.h4 + h2.h4
   - Tighten spacing above/below headings
   ========================================================= */

/* Page title: "Dashboard" (currently h1.h3) */
main h1.h3 {
  font-size: 1.375rem !important;   /* ~22px */
  line-height: 1.25 !important;
  font-weight: 500 !important;      /* Metronic style */
  color: #111827 !important;
  margin: 0 0 1rem !important;      /* tighter */
}

/* Section titles like "Latest campaigns" / "Latest notifications"
   (you’re using h1.h4.m-0.text-truncate + h2.h4) */
main h1.h4,
main h2.h4 {
  font-size: 1.25rem !important;    /* 20px */
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #111827 !important;
}

/* When the template sets m-0, reintroduce a Metronic-like bottom gap */
main h1.h4.m-0,
main h2.h4.m-0 {
  margin-bottom: 1rem !important;
}

/* Keep icon next to title aligned + subtle */
main h1.h3 i,
main h1.h4 i,
main h2.h4 i,
main h1.h3 svg,
main h1.h4 svg,
main h2.h4 svg {
  opacity: 0.7;
  margin-right: 0.5rem;
}

/* =========================================================
   Gomattic – Page header title normalize (Metronic-style)
   Version: v1.0.4
   Goal:
   - Make page titles consistent (Campaigns/Statistics/etc)
   - Force "Latest campaigns" to match Dashboard title sizing/weight
   ========================================================= */

/* Targets the main page header row used across pages */
.header .row.mb-4 h1,
.header .row.mb-4 .h1 {
  font-size: 1.4rem !important;      /* ~22.4px */
  line-height: 1.25 !important;
  font-weight: 500 !important;       /* Metronic feel */
  letter-spacing: -0.01em;
  margin: 0 !important;
}

/* If a page title is specifically using Bootstrap utility sizes (like h2) */
.header .row.mb-4 h1.h2 {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

/* =========================================================
   Gomattic – Cards (Metronic-style chrome)
   Version: v1.0.6
   Goal:
   - White surfaces
   - Very light border
   - Minimal shadow (Metronic-like)
   - Subtle hover lift (not heavy)
   Replace:
   - Any previous .card shadow / hover overrides
   Last updated: 2026-01-30
   ========================================================= */

:root{
  /* Metronic-ish card tokens */
  --gom-card-bg: #ffffff;
  --gom-card-br: rgba(15, 23, 42, 0.10);      /* subtle neutral border */
  --gom-card-br-hover: rgba(15, 23, 42, 0.14);
  --gom-card-radius: 16px;

  /* soft, neutral shadow (avoid “blue tint”) */
  --gom-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --gom-card-shadow-hover: 0 8px 24px rgba(16, 24, 40, 0.10);
}

/* Base card */
body .card{
  background: var(--gom-card-bg) !important;
  border: 1px solid var(--gom-card-br) !important;
  border-radius: var(--gom-card-radius) !important;
  box-shadow: var(--gom-card-shadow) !important;
}

/* Card hover (subtle) */
@media (hover:hover){
  body .card:hover{
    border-color: var(--gom-card-br-hover) !important;
    box-shadow: var(--gom-card-shadow-hover) !important;
    transform: translateY(-1px);
  }
}

/* Prevent over-rounded inner elements looking mismatched */
body .card .card-header:first-child{
  border-top-left-radius: calc(var(--gom-card-radius) - 1px) !important;
  border-top-right-radius: calc(var(--gom-card-radius) - 1px) !important;
}
body .card .card-footer:last-child{
  border-bottom-left-radius: calc(var(--gom-card-radius) - 1px) !important;
  border-bottom-right-radius: calc(var(--gom-card-radius) - 1px) !important;
}

/* Metronic-like padding rhythm */
body .card .card-body{
  padding: 1.25rem !important; /* 20px */
}

/* “Muted” card sections (if any use bg utility) */
body .card .bg-light,
body .card .bg-gray-100,
body .card .bg-gray-50{
  background: #ffffff !important;
}

/* =========================================================
   Gomattic – Buttons (Metronic-style)
   Version: v1.0.7
   Goal:
   - Softer radius, clean borders
   - Subtle hover + focus ring (Metronic-like)
   - Consistent icon buttons
   Replace:
   - Any previous .btn / .btn-* overrides you added
   Last updated: 2026-01-30
   ========================================================= */

:root{
  --gom-primary: #3779f0;

  --gom-btn-radius: 12px;
  --gom-btn-font: 0.875rem;          /* 14px */
  --gom-btn-weight: 500;

  --gom-btn-py: 0.55rem;             /* ~9px */
  --gom-btn-px: 0.95rem;             /* ~15px */

  --gom-btn-border: rgba(15, 23, 42, 0.12);
  --gom-btn-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --gom-btn-shadow-hover: 0 8px 20px rgba(16, 24, 40, 0.12);

  --gom-focus: 0 0 0 3px rgba(55, 121, 240, 0.18);
}

/* Base */
body .btn{
  font-size: var(--gom-btn-font) !important;
  font-weight: var(--gom-btn-weight) !important;
  border-radius: var(--gom-btn-radius) !important;
  padding: var(--gom-btn-py) var(--gom-btn-px) !important;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Focus (keyboard + accessibility) */
body .btn:focus,
body .btn:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* Primary */
body .btn-primary{
  background: var(--gom-primary) !important;
  border-color: var(--gom-primary) !important;
  color: #fff !important;
}
@media (hover:hover){
  body .btn-primary:hover{
    filter: brightness(0.98);
    transform: translateY(-1px);
    box-shadow: var(--gom-btn-shadow-hover) !important;
  }
}

/* Outline primary (your icon buttons often look like this) */
body .btn-outline-primary{
  background: #f6f6f7 !important;
  border-color: rgb(226 226 229) !important;
  color: #333848 !important;
  border-color: #333848 !important;
}

@media (hover:hover){
  body .btn-outline-primary:hover{
    background: rgba(55, 121, 240, 0.06) !important;
    border-color: rgba(55, 121, 240, 0.45) !important;
    transform: translateY(-1px);
  }
}

/* Secondary / light buttons (Metronic-like “soft”) */
body .btn-light,
body .btn-secondary{
  background: #fff !important;
  border: 1px solid var(--gom-btn-border) !important;
  color: rgba(15, 23, 42, 0.85) !important;
}
@media (hover:hover){
  body .btn-light:hover,
  body .btn-secondary:hover{
    background: rgba(15, 23, 42, 0.03) !important;
    transform: translateY(-1px);
  }
}

/* Small buttons */
body .btn-sm{
  font-size: 0.8125rem !important;   /* 13px */
  padding: 0.45rem 0.75rem !important;
  border-radius: 10px !important;
}

/* Icon-only buttons (square) */
body .btn.btn-icon,
body .btn-icon{
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
}

/* Make icons inside buttons consistent */
body .btn i,
body .btn svg,
body .btn .svg-inline--fa{
  vertical-align: middle;
}


/* =========================================================
   Gomattic UI Skin – v1.0.8 (No-HTML Patch)
   Primary CTA alignment with Metronic
   - Hide icons inside primary buttons (text-only CTAs)
   - No markup changes required
   Replaces:
   - Any previous .btn-primary > i/svg hide rules
   Last updated: 2026-01-30
   ========================================================= */

/* Hide typical icon elements inside primary buttons */
.btn.btn-primary i,
.btn.btn-primary .svg-inline--fa,
.btn.btn-primary svg {
  display: none !important;
}

/* =========================================================
   Gomattic UI Skin – Tables (Metronic-accurate)
   Version: v1.1.0
   Goal:
   - Match Metronic table typography exactly
   - Neutral (non-blue) greys
   - Unified td + small text rendering
   - Calm headers, soft borders, subtle hover
   No HTML changes required

   REPLACES:
   - Tables v1.0.9
   - <small> normalization v1.1.2
   - Table text unification v1.1.3

   Last updated: 2026-01-30
   ========================================================= */

:root{
  /* Borders & hover */
  --gom-table-border: rgba(15, 23, 42, 0.08);
  --gom-table-hover: rgba(15, 23, 42, 0.025);

  /* Header text (Metronic ≈ slate-500) */
  --gom-table-head: #6b7280;   /* rgb(107,114,128) */

  /* Body text (Metronic ≈ slate-700, NOT blue) */
  --gom-table-text:  #6b7280;   /* rgb(107,114,128) */
}

/* ---------------------------------------------------------
   Table base
--------------------------------------------------------- */
.table{
  border-color: var(--gom-table-border) !important;
  background: #fff !important;
}

/* ---------------------------------------------------------
   Header cells
--------------------------------------------------------- */
.table thead th{
  font-size: 0.75rem !important;        /* 12px */
  font-weight: 500 !important;          /* Metronic */
  color: var(--gom-table-head) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  padding: 0.65rem 0.75rem !important;
  border-bottom: 1px solid var(--gom-table-border) !important;
}

/* ---------------------------------------------------------
   Body cells (single source of truth)
--------------------------------------------------------- */
.table tbody td,
.table-custom tbody td{
  font-size: 0.875rem !important;       /* 14px */
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: var(--gom-table-text) !important;

  padding: 0.75rem !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--gom-table-border) !important;
}

/* ---------------------------------------------------------
   Normalize <small> inside table cells
   (NO washed-out grey, NO size mismatch)
--------------------------------------------------------- */
.table td small,
.table td .small,
.table-custom td small,
.table-custom td .small{
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   Hover (very subtle, Metronic-style)
--------------------------------------------------------- */
.table tbody tr:hover{
  background: var(--gom-table-hover) !important;
}

/* ---------------------------------------------------------
   Remove aggressive Bootstrap striping
--------------------------------------------------------- */
.table-striped tbody tr:nth-of-type(odd){
  background: transparent !important;
}

/* ---------------------------------------------------------
   Action buttons / icons inside tables
--------------------------------------------------------- */
.table td .btn,
.table td a.btn{
  padding: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   Badges / status pills inside tables
--------------------------------------------------------- */
.table td .badge{
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 999px !important;
}

/* =========================================================
   Gomattic UI Skin – Form controls (Metronic-style)
   Version: v1.1.1
   Goal:
   - Neutral borders (no blue tint)
   - Softer radius + consistent heights
   - Clean hover + focus ring (Metronic-like)
   - Make inline controls inside tables feel “designed”
   No HTML changes required

   Paste at END
   Last updated: 2026-01-30
   ========================================================= */

:root{
  --gom-control-bg: #ffffff;
  --gom-control-br: rgba(15, 23, 42, 0.12);
  --gom-control-br-hover: rgba(15, 23, 42, 0.18);
  --gom-control-text: rgba(15, 23, 42, 0.88);
  --gom-control-muted: rgba(15, 23, 42, 0.55);

  /* Metronic-ish focus (subtle, not loud) */
  --gom-control-focus: 0 0 0 3px rgba(55, 121, 240, 0.14);

  --gom-control-radius: 12px;
  --gom-control-h: 42px;
  --gom-control-font: 0.875rem;  /* 14px */
  --gom-control-weight: 400;
}

/* Inputs / selects / textareas */
body .form-control,
body .custom-select,
body select.form-control,
body textarea.form-control,
body input.form-control{
  background: var(--gom-control-bg) !important;
  color: var(--gom-control-text) !important;

  border: 1px solid var(--gom-control-br) !important;
  border-radius: var(--gom-control-radius) !important;

  font-size: var(--gom-control-font) !important;
  font-weight: var(--gom-control-weight) !important;

  height: var(--gom-control-h) !important;
  padding: 0.55rem 0.85rem !important;

  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body textarea.form-control{
  height: auto !important;
  min-height: 120px;
}

/* Placeholder */
body .form-control::placeholder{
  color: rgba(15, 23, 42, 0.40) !important;
}

/* Hover */
@media (hover:hover){
  body .form-control:hover,
  body .custom-select:hover,
  body select.form-control:hover{
    border-color: var(--gom-control-br-hover) !important;
  }
}

/* Focus */
body .form-control:focus,
body .custom-select:focus,
body select.form-control:focus{
  border-color: rgba(55, 121, 240, 0.35) !important;
  box-shadow: var(--gom-control-focus) !important;
  outline: none !important;
}

/* Disabled */
body .form-control:disabled,
body .custom-select:disabled,
body select.form-control:disabled{
  background: rgba(15, 23, 42, 0.02) !important;
  color: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Labels + help text */
body label{
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 500 !important;
  color: rgba(15, 23, 42, 0.72) !important;
}

body .form-text,
body small.form-text{
  color: var(--gom-control-muted) !important;
  font-size: 0.8125rem !important;
}

/* =========================================================
   Inline controls inside tables (Metronic tidy)
   - Reduce visual noise
   ========================================================= */
.table td .form-control,
.table td .custom-select,
.table td select.form-control{
  height: 38px !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.7rem !important;
  font-size: 0.875rem !important;
}

/* Make checkbox/radio feel cleaner */
body .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow: var(--gom-control-focus) !important;
  border-color: rgba(55, 121, 240, 0.35) !important;
}

/* =========================================================
   Toggle switches (Bootstrap custom switch)
   - More Metronic-like track + thumb
   ========================================================= */
body .custom-switch .custom-control-label::before{
  background: rgba(15, 23, 42, 0.10) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

body .custom-switch .custom-control-label::after{
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}

body .custom-switch .custom-control-input:checked ~ .custom-control-label::before{
  background: rgba(55, 121, 240, 0.85) !important;
  border-color: rgba(55, 121, 240, 0.55) !important;
}

/* Focus on switch */
body .custom-switch .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow: var(--gom-control-focus) !important;
}

/* =========================================================
   Gomattic UI Skin – Notification Builder Controls (Metronic-style)
   Version: v1.1.0
   Scope:
   - "Settings / Statistics" tabs (top sub-nav)
   - "Main / Triggers / Display / Customize" tab buttons
   - Segmented option buttons (Direction / Display position etc.)
   - Input-group addons (remove inner curve between input + suffix/button)

   Replace:
   - Any earlier overrides you added for nav-tabs/nav-pills/button groups/input-groups
   Last updated: 2026-01-30
   ========================================================= */

:root{
  --gom-primary: #3779f0;

  /* Metronic-like neutrals */
  --gom-line: rgba(15, 23, 42, 0.10);
  --gom-muted: rgba(15, 23, 42, 0.55);
  --gom-text: rgba(15, 23, 42, 0.88);

  --gom-soft: rgba(15, 23, 42, 0.045);     /* inactive bg */
  --gom-soft-hover: rgba(15, 23, 42, 0.07);

  --gom-radius: 12px;
  --gom-radius-sm: 10px;

  --gom-focus: 0 0 0 3px rgba(55, 121, 240, 0.18);
}

/* ---------------------------------------------------------
   1) "Settings / Statistics" tabs (underline style like Metronic)
--------------------------------------------------------- */
.nav-tabs{
  border-bottom: 1px solid var(--gom-line) !important;
}

.nav-tabs .nav-link{
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--gom-muted) !important;
  font-weight: 500 !important;
  padding: 0.65rem 0.9rem !important;
  margin-bottom: -1px !important;
  background: transparent !important;
}

@media (hover:hover){
  .nav-tabs .nav-link:hover{
    color: var(--gom-text) !important;
    background: transparent !important;
  }
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color: var(--gom-text) !important;
  border-bottom: 2px solid var(--gom-primary) !important;
  background: transparent !important;
}

/* Focus */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
  border-radius: 8px !important;
}

/* ---------------------------------------------------------
   2) "Main / Triggers / Display / Customize" buttons
   Make them look like Metronic pill-tabs
--------------------------------------------------------- */
.nav-pills .nav-link,
.btn-group .btn,
.btn-group-toggle .btn{
  border-radius: var(--gom-radius-sm) !important;
  font-weight: 500 !important;
}

/* Inactive state */
.nav-pills .nav-link{
  color: var(--gom-text) !important;
  background: var(--gom-soft) !important;
  border: 1px solid transparent !important;
  padding: 0.55rem 0.9rem !important;
}

@media (hover:hover){
  .nav-pills .nav-link:hover{
    background: var(--gom-soft-hover) !important;
  }
}

/* Active state (increase contrast vs inactive) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background: var(--gom-primary) !important;
  color: #fff !important;
  border-color: var(--gom-primary) !important;
}

/* Icons inside those tab buttons */
.nav-pills .nav-link i,
.nav-pills .nav-link svg,
.nav-pills .nav-link .svg-inline--fa{
  color: currentColor !important;
  fill: currentColor !important;
}

/* ---------------------------------------------------------
   3) Segmented option buttons (Direction / Display position etc.)
   Fix: active should be clearly different from inactive
--------------------------------------------------------- */
.btn-group .btn,
.btn-group-toggle .btn,
.btn.btn-light,
.btn.btn-secondary{
  background: var(--gom-soft) !important;
  border: 1px solid var(--gom-line) !important;
  color: var(--gom-text) !important;
  box-shadow: none !important;
}

@media (hover:hover){
  .btn-group .btn:hover,
  .btn-group-toggle .btn:hover{
    background: var(--gom-soft-hover) !important;
  }
}

/* Active (Bootstrap patterns vary: .active, .btn.active, .btn-primary, aria-pressed) */
.btn-group .btn.active,
.btn-group-toggle .btn.active,
.btn-group .btn[aria-pressed="true"],
.btn-group-toggle .btn[aria-pressed="true"]{
  background: var(--gom-primary) !important;
  border-color: var(--gom-primary) !important;
  color: #fff !important;
}

/* Keep icons readable when active */
.btn-group .btn.active i,
.btn-group .btn.active svg,
.btn-group-toggle .btn.active i,
.btn-group-toggle .btn.active svg{
  color: #fff !important;
  fill: #fff !important;
}

/* Focus */
.btn-group .btn:focus,
.btn-group .btn:focus-visible,
.btn-group-toggle .btn:focus,
.btn-group-toggle .btn:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* ---------------------------------------------------------
   4) Input groups (remove the inner curve between input + suffix/button)
   Fix: "seconds" addon + the right-side AI buttons look joined cleanly
--------------------------------------------------------- */
.input-group .form-control{
  border-radius: var(--gom-radius) !important;
}

/* If there is something on the right, remove INNER right radius on the input */
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child){
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Remove INNER left radius on the appended addon/button */
.input-group-append .input-group-text,
.input-group-append .btn,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--gom-radius) !important;
  border-bottom-right-radius: var(--gom-radius) !important;
}

/* Make addon look Metronic-clean */
.input-group-text{
  background: #fff !important;
  border: 1px solid var(--gom-line) !important;
  color: var(--gom-muted) !important;
  font-weight: 500 !important;
}

/* Ensure the seam between input + addon is a single line (no “double border”) */
.input-group-append .input-group-text,
.input-group-append .btn{
  border-left: 0 !important;
}

/* Match input border */
.form-control{
  border: 1px solid var(--gom-line) !important;
  box-shadow: none !important;
}

.form-control:focus{
  outline: none !important;
  border-color: rgba(55, 121, 240, 0.35) !important;
  box-shadow: var(--gom-focus) !important;
}

/* =========================================================
   Gomattic UI Skin – Notification editor CTA bars (Targeting etc.)
   Version: v1.1.3
   Goal:
   - Fix "Targeting" (btn-gray-200) alignment + spacing
   - Left align icon + label (Metronic-like)
   - Keep other primary CTAs unchanged
   Replace:
   - Any earlier "Targeting alignment" attempts
   Last updated: 2026-01-30
   ========================================================= */

/* The wide grey action button used for Targeting */
body .btn.btn-block.btn-gray-200{
  width: 100% !important;
  text-align: left !important;

  /* Make contents align left even if bootstrap styles try to center */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  /* Metronic-ish spacing */
  gap: 0.6rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* If inner elements exist, prevent them forcing centering */
body .btn.btn-block.btn-gray-200 > *{
  flex: 0 0 auto;
}

/* Icon sizing + tone (slightly softer than your current) */
body .btn.btn-block.btn-gray-200 i,
body .btn.btn-block.btn-gray-200 svg,
body .btn.btn-block.btn-gray-200 .svg-inline--fa{
  opacity: 0.75;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

/* Optional: keep the label visually consistent */
body .btn.btn-block.btn-gray-200{
  font-weight: 500 !important; /* Metronic default */
}

/* =========================================================
   Gomattic UI Skin – Input groups (Metronic-style)
   Version: v1.1.4
   Goal:
   - Remove right-side "pill" corners on appended inputs
   - Make duration / unit fields look unified
   - Match Metronic flat input-group seams
   No HTML changes required
   ========================================================= */

/* Left input */
body .input-group .form-control{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Right addon (e.g. "seconds") */
body .input-group-text,
body .input-group-append .input-group-text,
body .input-group-prepend .input-group-text{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background: #fff !important;
  color: rgba(15, 23, 42, 0.65);
  font-weight: 500;
}

/* Ensure borders align cleanly */
body .input-group-text{
  border-left: 0 !important;
}

/* =========================================================
   Gomattic UI Skin – Notification top tabs (Settings/Stats/Data)
   Version: v1.1.6
   Targets:
   - ul.nav.nav-custom (the header row with URL links)
   Goal:
   - Metronic-like underline tabs
   - Better spacing, hover, active
   No HTML changes required
   Replace:
   - Any previous .nav-custom overrides
   Last updated: 2026-01-30
   ========================================================= */

:root{
  --gom-tab-font: 0.875rem;                 /* 14px */
  --gom-tab-weight: 500;

  --gom-tab-text: rgba(15, 23, 42, 0.72);
  --gom-tab-text-strong: rgba(15, 23, 42, 0.92);
  --gom-tab-muted: rgba(15, 23, 42, 0.45);

  --gom-tab-border: rgba(15, 23, 42, 0.10);
  --gom-tab-hover-bg: rgba(15, 23, 42, 0.04);

  --gom-tab-active: #3779f0;
  --gom-focus: 0 0 0 3px rgba(55, 121, 240, 0.18);
}

/* Container */
body ul.nav.nav-custom{
  border-bottom: 1px solid var(--gom-tab-border) !important;
  gap: 0.25rem;
}

/* Links */
body ul.nav.nav-custom .nav-link{
  border: 0 !important;
  background: transparent !important;

  font-size: var(--gom-tab-font) !important;
  font-weight: var(--gom-tab-weight) !important;
  color: var(--gom-tab-text) !important;

  padding: 0.55rem 0.75rem !important;
  border-radius: 10px !important;

  position: relative;
}

/* Hover */
@media (hover:hover){
  body ul.nav.nav-custom .nav-link:hover{
    background: var(--gom-tab-hover-bg) !important;
    color: var(--gom-tab-text-strong) !important;
  }
}

/* Active state (Bootstrap usually adds .active OR aria-current="page") */
body ul.nav.nav-custom .nav-link.active,
body ul.nav.nav-custom .nav-link[aria-current="page"]{
  color: var(--gom-tab-text-strong) !important;
  background: transparent !important;
}

/* Active underline */
body ul.nav.nav-custom .nav-link.active::after,
body ul.nav.nav-custom .nav-link[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -1px;
  height: 2px;
  background: var(--gom-tab-active);
  border-radius: 999px;
}

/* Icons in the top row */
body ul.nav.nav-custom .nav-link i,
body ul.nav.nav-custom .nav-link .svg-inline--fa{
  color: var(--gom-tab-muted) !important;
  margin-right: 0.45rem;
  width: 1rem;
  height: 1rem;
}

/* FontAwesome SVGs (keep filled behaviour) */
body ul.nav.nav-custom .nav-link .svg-inline--fa{
  fill: currentColor !important;
}

/* Generic SVGs (don’t force fill) */
body ul.nav.nav-custom .nav-link svg{
  color: var(--gom-tab-muted) !important;
  margin-right: 0.45rem;
  width: 1rem;
  height: 1rem;
}

/* Lucide SVGs (stroke icons) */
body ul.nav.nav-custom .nav-link svg.lucide{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75;
}

/* Active icon */
body ul.nav.nav-custom .nav-link.active i,
body ul.nav.nav-custom .nav-link.active svg,
body ul.nav.nav-custom .nav-link.active .svg-inline--fa,
body ul.nav.nav-custom .nav-link[aria-current="page"] i,
body ul.nav.nav-custom .nav-link[aria-current="page"] svg,
body ul.nav.nav-custom .nav-link[aria-current="page"] .svg-inline--fa{
  color: var(--gom-tab-active) !important;
}

/* Focus */
body ul.nav.nav-custom .nav-link:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* Fix Lucide in nav tabs (Lucide is stroke-based) */
body ul.nav.nav-custom .nav-link svg.lucide {
  fill: none !important;
  stroke: currentColor !important;
}

/* =========================================================
   Gomattic UI Skin – Notification top tabs
   Version: v1.1.8
   Goal:
   - Match Metronic exactly
   - Active tab: blue text + thin underline
   - Inactive: neutral text, no background
   ========================================================= */

:root{
  --gom-tab-font: 0.875rem;                 /* 14px */
  --gom-tab-weight: 500;

  --gom-tab-text: rgba(15, 23, 42, 0.72);
  --gom-tab-text-active: #3779f0;
  --gom-tab-muted: rgba(15, 23, 42, 0.45);

  --gom-tab-border: rgba(15, 23, 42, 0.10);

  --gom-tab-active-h: 2px;
  --gom-focus: 0 0 0 3px rgba(55, 121, 240, 0.18);
}

/* Container baseline */
body ul.nav.nav-custom{
  border-bottom: 1px solid var(--gom-tab-border) !important;
  gap: 1.25rem;
}

/* Base tab */
body ul.nav.nav-custom .nav-link{
  border: 0 !important;
  background: transparent !important;

  font-size: var(--gom-tab-font) !important;
  font-weight: var(--gom-tab-weight) !important;
  color: var(--gom-tab-text) !important;

  padding: 0.35rem 0 !important; /* critical for Met spacing */
  border-radius: 0 !important;

  position: relative;
}

/* Hover (text only, no pill) */
@media (hover:hover){
  body ul.nav.nav-custom .nav-link:hover{
    background: transparent !important;
    color: rgba(15, 23, 42, 0.9) !important;
  }
}

/* ✅ ACTIVE TAB — THIS IS THE MISSING PART */
body ul.nav.nav-custom .nav-link.active,
body ul.nav.nav-custom .nav-link[aria-current="page"]{
  color: var(--gom-tab-text-active) !important;
  background: transparent !important;
}

/* Active underline */
body ul.nav.nav-custom .nav-link.active::after,
body ul.nav.nav-custom .nav-link[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--gom-tab-active-h));
  height: var(--gom-tab-active-h);
  background: var(--gom-tab-text-active);
  border-radius: 999px;
}

/* Icons */
body ul.nav.nav-custom .nav-link i,
body ul.nav.nav-custom .nav-link svg,
body ul.nav.nav-custom .nav-link .svg-inline--fa{
  color: var(--gom-tab-muted) !important;
  fill: currentColor !important;
  margin-right: 0.45rem;
  width: 1rem;
  height: 1rem;
}

/* Active icon turns blue */
body ul.nav.nav-custom .nav-link.active i,
body ul.nav.nav-custom .nav-link.active svg,
body ul.nav.nav-custom .nav-link.active .svg-inline--fa,
body ul.nav.nav-custom .nav-link[aria-current="page"] i,
body ul.nav.nav-custom .nav-link[aria-current="page"] svg,
body ul.nav.nav-custom .nav-link[aria-current="page"] .svg-inline--fa{
  color: var(--gom-tab-text-active) !important;
}

/* Focus (keyboard) */
body ul.nav.nav-custom .nav-link:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* =========================================================
   Gomattic UI Skin – Notification section pills (Main/Triggers/Display/Customize/Data)
   Version: v1.1.9
   Goal:
   - Metronic-style soft pill tabs
   - Clear active state (filled + blue text)
   - Subtle inactive pills
   - No HTML changes
   ========================================================= */

:root{
  --gom-pill-font: 0.875rem;                 /* 14px */
  --gom-pill-weight: 500;

  --gom-pill-bg: rgba(15, 23, 42, 0.04);
  --gom-pill-bg-hover: rgba(15, 23, 42, 0.06);

  --gom-pill-active-bg: rgba(55, 121, 240, 0.12);
  --gom-pill-active-text: #3779f0;

  --gom-pill-text: rgba(15, 23, 42, 0.78);
  --gom-pill-muted: rgba(15, 23, 42, 0.55);

  --gom-pill-radius: 12px;
  --gom-pill-py: 0.6rem;
  --gom-pill-px: 1.05rem;

  --gom-focus: 0 0 0 3px rgba(55, 121, 240, 0.18);
}

/* Container spacing */
body .nav-pills{
  gap: 0.75rem;
}

/* Base pill */
body .nav-pills .nav-link{
  font-size: var(--gom-pill-font) !important;
  font-weight: var(--gom-pill-weight) !important;

  background: var(--gom-pill-bg) !important;
  color: var(--gom-pill-text) !important;

  border: 1px solid transparent !important;
  border-radius: var(--gom-pill-radius) !important;

  padding: var(--gom-pill-py) var(--gom-pill-px) !important;

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Hover */
@media (hover:hover){
  body .nav-pills .nav-link:hover{
    background: var(--gom-pill-bg-hover) !important;
    color: rgba(15, 23, 42, 0.9) !important;
  }
}

/* Active */
body .nav-pills .nav-link.active,
body .nav-pills .show > .nav-link{
  background: var(--gom-pill-active-bg) !important;
  color: var(--gom-pill-active-text) !important;
  border-color: rgba(55, 121, 240, 0.25) !important;
}

/* Icons in pills */
body .nav-pills .nav-link i,
body .nav-pills .nav-link svg,
body .nav-pills .nav-link .svg-inline--fa{
  color: var(--gom-pill-muted) !important;
  fill: currentColor !important;
  width: 1rem;
  height: 1rem;
}

/* Active icon */
body .nav-pills .nav-link.active i,
body .nav-pills .nav-link.active svg,
body .nav-pills .nav-link.active .svg-inline--fa{
  color: var(--gom-pill-active-text) !important;
}

/* Focus */
body .nav-pills .nav-link:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* =========================================================
   Gomattic UI Skin – Notification top tabs (Settings/Statistics/Data)
   Version: v1.2.0
   Goal:
   - Metronic-like simple top tabs
   - Active: blue text + thin underline
   - Inactive: neutral text, subtle hover
   - No HTML changes
   ========================================================= */

:root{
  --gom-top-tab-font: 0.95rem;                 /* ~15px */
  --gom-top-tab-weight: 500;

  --gom-top-tab-text: rgba(15, 23, 42, 0.70);
  --gom-top-tab-hover: rgba(15, 23, 42, 0.90);

  --gom-top-tab-active: #3779f0;
  --gom-top-tab-underline: #3779f0;

  --gom-top-tab-border: rgba(15, 23, 42, 0.12);
  --gom-focus: 0 0 0 3px rgba(55, 121, 240, 0.18);
}

/* The row wrapper (your markup uses .nav.nav-custom in header area) */
body .nav.nav-custom{
  border-bottom: 1px solid var(--gom-top-tab-border) !important;
  gap: 1.25rem;
}

/* Links */
body .nav.nav-custom .nav-link{
  font-size: var(--gom-top-tab-font) !important;
  font-weight: var(--gom-top-tab-weight) !important;
  color: var(--gom-top-tab-text) !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  padding: 0.75rem 0 !important;
  margin-bottom: -1px !important;

  position: relative;
  transition: color .15s ease;
}

/* Hover */
@media (hover:hover){
  body .nav.nav-custom .nav-link:hover{
    color: var(--gom-top-tab-hover) !important;
  }
}

/* Active */
body .nav.nav-custom .nav-link.active,
body .nav.nav-custom .nav-link[aria-current="page"]{
  color: var(--gom-top-tab-active) !important;
}

/* Underline */
body .nav.nav-custom .nav-link.active::after,
body .nav.nav-custom .nav-link[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gom-top-tab-underline);
  border-radius: 2px;
}

/* Icons in top tabs */
body .nav.nav-custom .nav-link i,
body .nav.nav-custom .nav-link svg,
body .nav.nav-custom .nav-link .svg-inline--fa{
  color: currentColor !important;
  opacity: 0.9;
}

/* Focus */
body .nav.nav-custom .nav-link:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* =========================================================
   Gomattic UI Skin – Header nav + dropdown (Metronic-style)
   Version: v1.2.0
   Scope:
   - Top navbar links (hover/active/focus)
   - Dropdown menus (user menu, notifications, etc.)
   - Dropdown items (spacing, font size, hover, active)
   Replace:
   - Any previous "Header dropdown rebuild" blocks
   Notes:
   - No HTML changes required
   Last updated: 2026-01-30
   ========================================================= */

:root{
  --gom-nav-font: 0.875rem;               /* 14px */
  --gom-nav-weight: 500;

  --gom-nav-text: rgba(15,23,42,.72);
  --gom-nav-text-strong: rgba(15,23,42,.92);
  --gom-nav-muted: rgba(15,23,42,.55);

  --gom-nav-hover-bg: rgba(15,23,42,.04);
  --gom-nav-active: #3779f0;

  --gom-dd-bg: #fff;
  --gom-dd-br: rgba(15,23,42,.10);
  --gom-dd-shadow: 0 12px 24px rgba(15,23,42,.12);
  --gom-dd-radius: 14px;

  --gom-dd-item-radius: 10px;
  --gom-dd-item-py: 0.55rem;
  --gom-dd-item-px: 0.7rem;
  --gom-dd-font: 0.875rem;               /* 14px */
  --gom-dd-weight: 500;

  --gom-focus: 0 0 0 3px rgba(55,121,240,.18);
}

/* ---------------------------------------------------------
   NAVBAR LINKS (top row)
--------------------------------------------------------- */
body .navbar.navbar-main .nav-link{
  font-size: var(--gom-nav-font) !important;
  font-weight: var(--gom-nav-weight) !important;
  color: var(--gom-nav-text) !important;
  border-radius: 10px;
  padding: 0.55rem 0.7rem !important;
  transition: background-color .15s ease, color .15s ease;
}

/* Hover */
@media (hover:hover){
  body .navbar.navbar-main .nav-link:hover{
    background: var(--gom-nav-hover-bg) !important;
    color: var(--gom-nav-text-strong) !important;
  }
}

/* Active (Bootstrap: .active or aria-current) */
body .navbar.navbar-main .nav-link.active,
body .navbar.navbar-main .nav-link[aria-current="page"]{
  color: var(--gom-nav-active) !important;
  background: transparent !important; /* Met: no filled bg in top nav */
}

/* Focus */
body .navbar.navbar-main .nav-link:focus-visible,
body .navbar.navbar-main .dropdown-toggle:focus-visible{
  outline: none !important;
  box-shadow: var(--gom-focus) !important;
}

/* Icons in nav (subtle like Met) */
body .navbar.navbar-main .nav-link i,
body .navbar.navbar-main .nav-link svg,
body .navbar.navbar-main .nav-link .svg-inline--fa{
  color: currentColor !important;
  opacity: 0.9;
}

/* ---------------------------------------------------------
   DROPDOWN MENU (container)
--------------------------------------------------------- */
body .navbar.navbar-main .dropdown-menu{
  background: var(--gom-dd-bg) !important;
  border: 1px solid var(--gom-dd-br) !important;
  border-radius: var(--gom-dd-radius) !important;
  box-shadow: var(--gom-dd-shadow) !important;
  padding: 0.45rem !important;
  min-width: 260px;
}

/* Keep account dropdown from getting too wide */
body .navbar.navbar-main .dropdown-menu.dropdown-menu-right{
  max-width: 380px;
}

/* Divider */
body .navbar.navbar-main .dropdown-divider{
  border-top: 1px solid rgba(15,23,42,.08) !important;
  margin: 0.45rem 0 !important;
}

/* ---------------------------------------------------------
   DROPDOWN ITEMS (rows)
--------------------------------------------------------- */
body .navbar.navbar-main .dropdown-item{
  font-size: var(--gom-dd-font) !important;
  font-weight: var(--gom-dd-weight) !important;
  color: var(--gom-nav-text-strong) !important;

  padding: var(--gom-dd-item-py) var(--gom-dd-item-px) !important;
  border-radius: var(--gom-dd-item-radius) !important;

  display: flex;
  align-items: center;
  gap: 0.6rem;

  background: transparent !important;
  white-space: nowrap;
}

/* Icons in dropdown */
body .navbar.navbar-main .dropdown-item i,
body .navbar.navbar-main .dropdown-item svg,
body .navbar.navbar-main .dropdown-item .svg-inline--fa{
  color: var(--gom-nav-muted) !important;
  fill: currentColor !important;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

/* Hover */
@media (hover:hover){
  body .navbar.navbar-main .dropdown-item:hover,
  body .navbar.navbar-main .dropdown-item:focus{
    background: var(--gom-nav-hover-bg) !important;
    color: var(--gom-nav-text-strong) !important;
    outline: none !important;
  }
}

/* Active */
body .navbar.navbar-main .dropdown-item.active,
body .navbar.navbar-main .dropdown-item:active{
  background: rgba(55,121,240,.10) !important;
  color: var(--gom-nav-active) !important;
}
body .navbar.navbar-main .dropdown-item.active i,
body .navbar.navbar-main .dropdown-item.active svg,
body .navbar.navbar-main .dropdown-item:active i,
body .navbar.navbar-main .dropdown-item:active svg{
  color: var(--gom-nav-active) !important;
}

/* ---------------------------------------------------------
   Notifications dropdown (stop it feeling "giant")
--------------------------------------------------------- */
body #internal_notifications .dropdown-menu{
  width: 360px !important;
  max-width: calc(100vw - 2rem) !important;
  padding: 0.5rem !important;
}

/* =========================================================
   Gomattic UI Skin – Dropdown icon refinement (Metronic)
   Version: v1.2.1
   Purpose:
   - Soften dropdown icons
   - Reduce visual dominance
   - Match Metronic icon hierarchy
   ========================================================= */

body .navbar.navbar-main .dropdown-item i,
body .navbar.navbar-main .dropdown-item svg,
body .navbar.navbar-main .dropdown-item .svg-inline--fa{
  font-size: 0.95rem;              /* slightly smaller */
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.65;                   /* softer by default */
  transition: opacity .15s ease, color .15s ease;
}

/* Hover: icons regain presence */
body .navbar.navbar-main .dropdown-item:hover i,
body .navbar.navbar-main .dropdown-item:hover svg{
  opacity: 0.85;
}

/* Active: icon matches Met primary emphasis */
body .navbar.navbar-main .dropdown-item.active i,
body .navbar.navbar-main .dropdown-item.active svg{
  opacity: 1;
  color: var(--gom-nav-active) !important;
}

/* =========================================================
   Gomattic – Page header title (Metronic-style)
   Version: v1.1.5
   Goal:
   - Make Stats page title match Dashboard title sizing
   - Remove leading icon in page titles (Dashboard/Stats)
   - No HTML changes
   Paste at END of custom.css
   ========================================================= */

/* 1) Normalize page header title sizing
   Your pages use: header .h2.text-truncate (Stats) vs .h3 (Dashboard)
   Force BOTH to match the Dashboard look. */
header .h1.h2.text-truncate,
header h1.h2.text-truncate,
header .h1.h3.text-truncate,
header h1.h3.text-truncate{
  font-size: 1.375rem !important;   /* ~22px, Metronic-like */
  line-height: 1.35 !important;
  font-weight: 500 !important;      /* Metronic uses 500 */
  letter-spacing: -0.01em;
  margin-bottom: 0 !important;
}

/* 2) Remove the leading icon next to page titles (Dashboard/Stats)
   Only targets icons inside the H1 title in the header region. */
header h1.text-truncate > i,
header h1.text-truncate > svg,
header h1.text-truncate > .svg-inline--fa,
header h1.text-truncate > .fa,
header h1.text-truncate > .fas,
header h1.text-truncate > .far{
  display: none !important;
}

/* If the title had left padding to make room for the icon, remove it */
header h1.text-truncate{
  padding-left: 0 !important;
}

/* If the icon is wrapped (common pattern: <span class="mr-2"><i/></span>) */
header h1.text-truncate > span:first-child:has(i),
header h1.text-truncate > span:first-child:has(svg){
  display: none !important;
}

/* =========================================================
   Gomattic – Page title icon removal (Dashboard + Stats)
   Version: v1.1.6
   Fix:
   - Remove leading FA icon inside page H1 titles
   - Keep icons everywhere else intact
   ========================================================= */

/* Dashboard page title specifically */
body main header h1.h3 > svg,
body main header h1.h3 > .svg-inline--fa,
body main header h1.h3 > i {
  display: none !important;
}

/* Safety: also catch h2-style titles used on Stats */
body main header h1.h2 > svg,
body main header h1.h2 > .svg-inline--fa,
body main header h1.h2 > i {
  display: none !important;
}

/* Remove spacing that was reserved for the icon */
body main header h1.h3,
body main header h1.h2 {
  padding-left: 0 !important;
}

/* =========================================================
   Gomattic – Header brand/logo sizing (Metronic match)
   Version: v1.1.7
   Goal:
   - Reduce brand/logo visual weight
   - Match Metronic header logo scale + alignment
   - No HTML changes
   Paste at END
   ========================================================= */

/* 1) Brand container: tighten spacing + vertical centering */
body .navbar .navbar-brand,
body .navbar-main .navbar-brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* 2) Logo (img or svg): Metronic-like size */
body .navbar .navbar-brand img,
body .navbar-main .navbar-brand img{
  height: 26px !important;   /* Metronic-ish */
  width: auto !important;
  max-height: 26px !important;
  display: block !important;
}

body .navbar .navbar-brand svg,
body .navbar-main .navbar-brand svg{
  height: 26px !important;
  width: auto !important;
  max-height: 26px !important;
  display: block !important;
}

/* 3) If your “g” is an icon element (FontAwesome / inline svg wrapper) */
body .navbar .navbar-brand .svg-inline--fa,
body .navbar-main .navbar-brand .svg-inline--fa,
body .navbar .navbar-brand i,
body .navbar-main .navbar-brand i{
  font-size: 1.625rem !important; /* ~26px */
  width: 1.625rem !important;
  height: 1.625rem !important;
  opacity: 0.95 !important;       /* slightly softer like Met */
}

/* 4) Optional: soften the logo colour so it doesn’t dominate */
body .navbar .navbar-brand svg,
body .navbar-main .navbar-brand svg{
  opacity: 0.95 !important;
}

/* 5) Ensure the header height doesn’t force the logo to look “floating” */
body .navbar .container,
body .navbar-main .container{
  align-items: center !important;
}

/* =========================================================
   Gomattic – Header (Metronic: bottom divider only)
   Version: v1.1.8 (override utility classes)
   ========================================================= */

nav.navbar.navbar-main{
  background: #fff !important;

  /* kill "card" look coming from utility classes */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* add Metronic-style bottom divider only */
nav.navbar.navbar-main{
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
}

/* if border utilities are stubborn, neutralise them explicitly */
nav.navbar.navbar-main.border,
nav.navbar.navbar-main.border-gray-200{
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
}

/* kill any rounded utility classes on the header */
nav.navbar.navbar-main.rounded,
nav.navbar.navbar-main.rounded-2x,
nav.navbar.navbar-main[class*="rounded"]{
  border-radius: 0 !important;
}

/* =========================================================
   Gomattic – Header horizontal padding reset
   Match Metronic (no left/right inset)
   ========================================================= */

/* Remove container padding inside header */
nav.navbar.navbar-main > .container,
nav.navbar.navbar-main > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Optional: keep vertical breathing room consistent */
nav.navbar.navbar-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   Gomattic – Modal title icon cleanup
   Remove leading icons in modal headers
   ========================================================= */

.modal-title svg,
.modal-title i {
  display: none !important;
}

/* =========================================================
   Gomattic UI Skin – Notification Handlers (Metronic-style)
   Version: v1.1.10
   Scope:
   - /notification-handlers page header + empty state
   Goal:
   - Remove header icon (bell) so H1 matches Metronic
   - Improve info icon (subtle, tidy, consistent)
   - Empty state text sizing + hierarchy like Metronic
   No HTML changes required
   ========================================================= */

/* ---------- Page scope (best-effort) ----------
   If you have a body class for this route, replace the attribute selector with it.
*/
body a[href*="/notification-handlers"],
body a[href*="/notification-handlers"] * {}

/* ---------- Header: remove icon next to H1 ---------- */
body h1.h4 > svg.svg-inline--fa.fa-bell,
body h1.h4 > i.fa-bell,
body h1.h4 > span > svg.svg-inline--fa.fa-bell,
body h1.h4 > span > i.fa-bell{
  display: none !important;
}

/* Tighten H1 row spacing so it reads like Metronic */
body h1.h4{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem !important;
}

/* ---------- Info icon next to title (make it feel intentional) ----------
   Covers common patterns: <i class="fa ..."> or <svg ...>
*/
body h1.h4 + i,
body h1.h4 + svg,
body h1.h4 .fa-info-circle,
body h1.h4 .fa-info,
body h1.h4 .svg-inline--fa.fa-circle-info,
body h1.h4 .svg-inline--fa.fa-info-circle{
  width: 18px;
  height: 18px;
  font-size: 0.875rem;
  line-height: 18px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.55) !important;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  transform: translateY(1px);
  cursor: help;
}

@media (hover:hover){
  body h1.h4 + i:hover,
  body h1.h4 + svg:hover,
  body h1.h4 .fa-info-circle:hover,
  body h1.h4 .fa-info:hover,
  body h1.h4 .svg-inline--fa.fa-circle-info:hover,
  body h1.h4 .svg-inline--fa.fa-info-circle:hover{
    color: rgba(15, 23, 42, 0.72) !important;
    background: rgba(55, 121, 240, 0.08);
    border-color: rgba(55, 121, 240, 0.20);
  }
}


/* =========================================================
   Notification handlers – final icon optical alignment
   Version: v1.1.12
   ========================================================= */

/* Keep baseline layout */
.col-12.col-lg.d-flex.align-items-center{
  align-items: baseline !important;
}

/* Info icon: optical centering against H1 */
.col-12.col-lg.d-flex .fa-circle-info,
.col-12.col-lg.d-flex .svg-inline--fa.fa-circle-info{
  font-size: 0.875rem;          /* 14px */
  width: 14px;
  height: 14px;
  opacity: 0.55;
  transform: translateY(-1px); /* key change: lift icon slightly */
}

/* Spacing between title and icon */
.col-12.col-lg.d-flex .ml-2{
  margin-left: 0.4rem !important;
}

/* =========================================================
   Gomattic – Empty state typography (Metronic-style)
   Version: v1.1.13
   Goal:
   - Empty-state title uses H5 styling (semi-bold, darker)
   - Supporting line uses paragraph styling (smaller, muted)
   - Scoped to empty-state cards only
   ========================================================= */

/* Empty state wrapper (the card-body holding the illustration + text) */
.card-body .text-center > h2.h5.text-muted,
.card-body h2.h5.text-muted.text-center{
  font-size: 1.125rem !important;     /* ~18px (Met-like) */
  font-weight: 600 !important;
  color: rgba(15, 23, 42, 0.82) !important;
  line-height: 1.35 !important;
  margin: 0.75rem 0 0.35rem !important;
}

/* Supporting copy */
.card-body .text-center > p.text-muted.small,
.card-body p.text-muted.text-center.small{
  font-size: 0.875rem !important;     /* 14px */
  font-weight: 400 !important;
  color: rgba(15, 23, 42, 0.55) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* If there’s any extra spacing below the illustration */
.card-body svg + h2.h5,
.card-body img + h2.h5{
  margin-top: 1rem !important;
}

/* Lucide baseline */
svg.lucide{
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  color: rgba(15, 23, 42, 0.6);
}

/* Prevent FA fixed-width utilities from affecting Lucide */
svg.lucide.fa-fw { width: 1rem !important; }
svg.lucide.fa-sm { width: 1rem !important; height: 1rem !important; }


/* =========================================================
   Gomattic – Dropdown icon tone fix (Lucide + FA)
   Paste at VERY END of custom.css
   ========================================================= */

:root{
  --gom-dd-icon: rgba(15, 23, 42, 0.55);
  --gom-dd-icon-hover: rgba(15, 23, 42, 0.70);
}

/* Force dropdown icons to be muted (do NOT inherit text colour) */
body .navbar.navbar-main .dropdown-menu .dropdown-item svg.lucide,
body .navbar.navbar-main .dropdown-menu .dropdown-item .svg-inline--fa,
body .navbar.navbar-main .dropdown-menu .dropdown-item i{
  color: var(--gom-dd-icon) !important;
  opacity: 1 !important;
}

/* Lucide specifics */
body .navbar.navbar-main .dropdown-menu .dropdown-item svg.lucide{
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  width: 0.95rem !important;
  height: 0.95rem !important;
}

/* FontAwesome SVG specifics */
body .navbar.navbar-main .dropdown-menu .dropdown-item .svg-inline--fa{
  fill: currentColor !important;
  width: 0.95rem !important;
  height: 0.95rem !important;
}
body .navbar.navbar-main .dropdown-menu .dropdown-item .svg-inline--fa path{
  fill: currentColor !important;
}

/* Hover: slightly stronger */
body .navbar.navbar-main .dropdown-menu .dropdown-item:hover svg.lucide,
body .navbar.navbar-main .dropdown-menu .dropdown-item:hover .svg-inline--fa,
body .navbar.navbar-main .dropdown-menu .dropdown-item:hover i{
  color: var(--gom-dd-icon-hover) !important;
}

/* Active: keep your blue behaviour */
body .navbar.navbar-main .dropdown-menu .dropdown-item.active svg.lucide,
body .navbar.navbar-main .dropdown-menu .dropdown-item.active .svg-inline--fa,
body .navbar.navbar-main .dropdown-menu .dropdown-item:active svg.lucide,
body .navbar.navbar-main .dropdown-menu .dropdown-item:active .svg-inline--fa{
  color: var(--gom-nav-active, #3779f0) !important;
}

/* =========================================================
   Account page "tabs" (they are buttons) – hover + active polish
   Scoped to: .row.d-none.d-lg-flex.mb-4.mx-n2
   ========================================================= */

body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;

  height: 40px !important;
  padding: 0 1rem !important;

  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: rgba(15, 23, 42, 0.04) !important;

  color: rgba(15, 23, 42, 0.78) !important;
  font-weight: 500 !important;

  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

/* icons inside */
body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom svg,
body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom .svg-inline--fa{
  width: 1rem !important;
  height: 1rem !important;
  color: rgba(15, 23, 42, 0.55) !important;
}

/* hover */
@media (hover:hover){
  body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom:hover{
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: rgba(15, 23, 42, 0.90) !important;
    transform: translateY(-1px);
  }

  body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom:hover svg,
  body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom:hover .svg-inline--fa{
    color: rgba(15, 23, 42, 0.70) !important;
  }
}

/* active */
body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom.active{
  background: rgba(55, 121, 240, 0.10) !important;
  border-color: rgba(55, 121, 240, 0.25) !important;
  color: #3779f0 !important;
}

/* active icon */
body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom.active svg,
body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom.active .svg-inline--fa{
  color: #3779f0 !important;
}

/* focus */
body .row.d-none.d-lg-flex.mb-4.mx-n2 a.btn.btn-block.btn-custom:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(55, 121, 240, 0.18) !important;
}

/* =========================================================
   Gomattic – Alerts (Metronic basic style)
   Matches: coloured border + tinted bg + icon badge + coloured text
   Paste at END of custom.css (after deleting older alert blocks)
   ========================================================= */

:root{
  --mt-primary: #009ef7;
  --mt-primary-bg: #f1faff;

  --mt-success: #50cd89;
  --mt-success-bg: #e8fff3;

  --mt-info: #7239ea;
  --mt-info-bg: #f8f5ff;

  --mt-warning: #ffc700;
  --mt-warning-bg: #fff8dd;

  --mt-danger: #f1416c;
  --mt-danger-bg: #fff5f8;

  --mt-alert-radius: 12px;
}

/* Base alert shell */
body .alert{
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;

  padding: 1rem 3rem 1rem 1rem !important;
  border-radius: var(--mt-alert-radius) !important;

  font-size: .875rem !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}

/* Metronic uses coloured titles and supporting text */
body .alert strong{
  font-weight: 600 !important;
}
body .alert,
body .alert p,
body .alert span,
body .alert div{
  margin: 0 !important;
}

/* ---------- Icon badge (no HTML edits)
   Works when the first icon inside the alert is:
   - lucide svg
   - fontawesome svg
*/
body .alert > svg.lucide,
body .alert > .svg-inline--fa,
body .alert .alert-icon > svg.lucide,
body .alert .alert-icon > .svg-inline--fa{
  display: inline-flex !important;
  width: 34px !important;
  height: 34px !important;
  padding: 8px !important;

  border-radius: 999px !important;
  flex: 0 0 auto !important;

  /* ensure bg + padding actually render */
  box-sizing: border-box !important;
}

/* Ensure Lucide stays stroke-based */
body .alert > svg.lucide,
body .alert .alert-icon > svg.lucide{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
}

/* Ensure FA svg fills behave */
body .alert > .svg-inline--fa path,
body .alert .alert-icon > .svg-inline--fa path{
  fill: currentColor !important;
}

/* ---------- Variants (border + bg + text + icon badge) */
body .alert-primary{
  background: var(--mt-primary-bg) !important;
  border: 1px solid var(--mt-primary) !important;
  color: var(--mt-primary) !important;
}
body .alert-primary > svg.lucide,
body .alert-primary > .svg-inline--fa,
body .alert-primary .alert-icon > svg.lucide,
body .alert-primary .alert-icon > .svg-inline--fa{
  background: rgba(0, 158, 247, 0.14) !important;
}

body .alert-success{
  background: var(--mt-success-bg) !important;
  border: 1px solid var(--mt-success) !important;
  color: var(--mt-success) !important;
}
body .alert-success > svg.lucide,
body .alert-success > .svg-inline--fa,
body .alert-success .alert-icon > svg.lucide,
body .alert-success .alert-icon > .svg-inline--fa{
  background: rgba(80, 205, 137, 0.18) !important;
}

body .alert-info{
  background: var(--mt-info-bg) !important;
  border: 1px solid var(--mt-info) !important;
  color: var(--mt-info) !important;
}
body .alert-info > svg.lucide,
body .alert-info > .svg-inline--fa,
body .alert-info .alert-icon > svg.lucide,
body .alert-info .alert-icon > .svg-inline--fa{
  background: rgba(114, 57, 234, 0.16) !important;
}

body .alert-warning{
  background: var(--mt-warning-bg) !important;
  border: 1px solid var(--mt-warning) !important;
  color: #b88300 !important; /* Metronic warning text reads slightly darker */
}
body .alert-warning > svg.lucide,
body .alert-warning > .svg-inline--fa,
body .alert-warning .alert-icon > svg.lucide,
body .alert-warning .alert-icon > .svg-inline--fa{
  background: rgba(255, 199, 0, 0.22) !important;
}

body .alert-danger{
  background: var(--mt-danger-bg) !important;
  border: 1px solid var(--mt-danger) !important;
  color: var(--mt-danger) !important;
}
body .alert-danger > svg.lucide,
body .alert-danger > .svg-inline--fa,
body .alert-danger .alert-icon > svg.lucide,
body .alert-danger .alert-icon > .svg-inline--fa{
  background: rgba(241, 65, 108, 0.16) !important;
}

/* ---------- Close button (Metronic-ish) */
body .alert .close{
  position: absolute !important;
  top: 0.65rem !important;
  right: 0.75rem !important;

  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;

  color: currentColor !important;
  opacity: 0.7 !important;

  font-size: 1.05rem !important;
  line-height: 1 !important;
  text-shadow: none !important;

  transition: opacity .15s ease, background-color .15s ease;
}

body .alert .close:hover{
  opacity: 1 !important;
  background: rgba(15, 23, 42, 0.06) !important;
}

/* =========================================================
   Alerts – alignment patch (Metronic feel)
   Paste AFTER the alerts block
   ========================================================= */

/* Centre icon + text vertically */
body .alert{
  align-items: center !important;      /* was flex-start */
}

/* If the alert content is wrapped in span/div, keep it compact */
body .alert > div,
body .alert > span{
  margin: 0 !important;
}

/* Icon badge baseline */
body .alert > svg.lucide,
body .alert > .svg-inline--fa{
  align-self: center !important;
  margin-top: 0 !important;
}

/* Keep close button vertically centred */
body .alert .close{
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* =========================================================
   Pills – icon polish (size, alignment, inherit colour)
   Paste AFTER your v1.1.9 pills block
   ========================================================= */

/* Make pill content align perfectly */
body .nav-pills .nav-link{
  gap: 0.55rem !important;
}

/* Lucide + FA inside pills should follow text colour */
body .nav-pills .nav-link svg,
body .nav-pills .nav-link i,
body .nav-pills .nav-link .svg-inline--fa{
  width: 1rem !important;
  height: 1rem !important;
  font-size: 1rem !important;
  margin: 0 !important;

  color: currentColor !important;
  opacity: 0.85 !important;
  flex: 0 0 auto;
}

/* Lucide is stroke-based */
body .nav-pills .nav-link svg.lucide{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
}

/* Active pill: icon should be fully “on” */
body .nav-pills .nav-link.active svg,
body .nav-pills .nav-link.active i,
body .nav-pills .nav-link.active .svg-inline--fa{
  opacity: 1 !important;
}

/* Page title + info icon alignment (Metronic-style) */
h1 + .fa-circle-info,
h1 + .fa-info-circle,
h1 + svg,
h4 + .fa-circle-info,
h4 + .fa-info-circle,
h4 + svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px;
  height: 18px;

  margin-left: 0.4rem;
  transform: translateY(-1px); /* key optical fix */

  font-size: 0.875rem;
  line-height: 1;
}

/* Lucide-specific safety */
svg.lucide.fa-circle-info,
svg.lucide[data-lucide="help-circle"] {
  stroke-width: 1.75;
}

/* =========================================================
   Gomattic – Plans + FAQ (RESET + Metronic-ish spacing)
   Paste at END of custom.css
   This REPLACES the previous Plans/FAQ block(s)
   ========================================================= */

:root{
  --mt-primary: #1b84ff;

  --mt-success: #50cd89;
  --mt-success-100: #e8fff3;

  --mt-danger: #f1416c;
  --mt-danger-100: #fff5f8;

  --mt-text: rgba(15, 23, 42, 0.86);
  --mt-muted: rgba(15, 23, 42, 0.58);
  --mt-border: rgba(15, 23, 42, 0.10);

  --mt-radius-lg: 16px;
  --mt-radius-md: 12px;
}

/* ---------------------------------
   PLAN CARDS: remove extras + tighten
---------------------------------- */

/* Card shell */
body .pricing .pricing-item,
body .pricing .pricing-item .card{
  border-radius: var(--mt-radius-lg) !important;
  border-color: var(--mt-border) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05) !important;
}

/* Remove ANY internal dividers/lines */
body .pricing .pricing-item hr,
body .pricing .pricing-item .divider,
body .pricing .pricing-item .pricing-divider,
body .pricing .pricing-item .border-top,
body .pricing .pricing-item .border-bottom,
body .pricing .pricing-feature{
  border: 0 !important;
}

/* Feature list: tighter spacing (no separators) */
body .pricing .pricing-feature-list{
  margin-top: .5rem !important;
  padding-top: 0 !important;
}
body .pricing .pricing-feature{
  padding: .5rem 0 !important;
}

/* Ensure feature rows align nicely */
body .pricing .pricing-feature.d-flex,
body .pricing .pricing-feature-list .pricing-feature{
  align-items: center !important;
  gap: .75rem !important;
}
body .pricing .pricing-feature,
body .pricing .pricing-feature-list{
  color: var(--mt-text) !important;
}

/* ---------------------------------
   CHECK + X ICONS: Metronic colours + alignment
---------------------------------- */

/* Baseline: ALL lucide icons in features */
body .pricing .pricing-feature-list svg.lucide{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;

  /* hard reset to stop “pill wrapper” leakage */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Put the right-side icon in a consistent slot */
body .pricing .pricing-feature-list .pricing-feature > svg.lucide{
  margin-left: auto !important;
}

/* Check pill */
body .pricing .pricing-feature-list svg.lucide[data-lucide="check"],
body .pricing .pricing-feature-list svg.lucide.lucide-check{
  color: var(--mt-success) !important;
  background: var(--mt-success-100) !important;
  border-radius: 999px !important;
  padding: 6px !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  stroke-width: 2 !important;
}

/* X pill */
body .pricing .pricing-feature-list svg.lucide[data-lucide="x"],
body .pricing .pricing-feature-list svg.lucide.lucide-x{
  color: var(--mt-danger) !important;
  background: var(--mt-danger-100) !important;
  border-radius: 999px !important;
  padding: 6px !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  stroke-width: 2 !important;
}

/* ---------------------------------
   INFO ICON NEXT TO TEXT (fix alignment + stop wrapper)
---------------------------------- */

/* The tooltip wrapper next to “0 teams” */
body .pricing .pricing-feature-list [data-toggle="tooltip"],
body .pricing .pricing-feature-list [data-bs-toggle="tooltip"],
body .pricing .pricing-feature-list span.ml-1{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin-left: .35rem !important;
  vertical-align: middle !important;

  /* stop it behaving like a “badge” */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* The actual help/info icon */
body .pricing .pricing-feature-list [data-toggle="tooltip"] svg.lucide,
body .pricing .pricing-feature-list [data-bs-toggle="tooltip"] svg.lucide,
body .pricing .pricing-feature-list span.ml-1 svg.lucide,
body .pricing .pricing-feature-list svg.lucide.lucide-help-circle,
body .pricing .pricing-feature-list svg.lucide.lucide-info{
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: var(--mt-muted) !important;

  /* force no pill */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;

  /* visual alignment tweak */
  transform: translateY(1px) !important;
}

/* ---------------------------------
   FAQ ACCORDION: reduce padding + remove blue highlight look
---------------------------------- */

body .accordion .card{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: .75rem !important;
}

/* question row */
body .accordion .card button.btn.btn-block{
  padding: .7rem .9rem !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-md) !important;
  background: #fff !important;
  color: var(--mt-text) !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
}

/* remove “selected blue” */
body .accordion .card button.btn.btn-block[aria-expanded="true"]{
  background: #fff !important;
  border-color: var(--mt-border) !important;
}

/* answer panel */
body .accordion .card .card-body{
  padding: .65rem .9rem .85rem !important;
  border: 1px solid var(--mt-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--mt-radius-md) var(--mt-radius-md) !important;
  background: #fff !important;
}

/* chevron/icon on right */
body .accordion .card button.btn.btn-block svg.lucide,
body .accordion .card button.btn.btn-block .svg-inline--fa{
  width: 18px !important;
  height: 18px !important;
  color: var(--mt-primary) !important;
}

/* FIX: Metronic-ish soft accordion */
body .accordion .card button.btn.btn-block{
  border: 0 !important;
  background: rgba(15, 23, 42, 0.03) !important;
}

body .accordion .card .card-body{
  border: 0 !important;
  background: rgba(15, 23, 42, 0.02) !important;
}

/* Any h1 + info icon inside a flex title row */
body .d-flex.align-items-center > h1 + .ml-2,
body .d-flex.align-items-center > h3 + .ml-2 {
  display: inline-flex !important;
  align-self: baseline !important;
  line-height: 1 !important;
}

body .d-flex.align-items-center > h1,
body .d-flex.align-items-center > h3 {
  line-height: 1.15 !important;
  margin-bottom: 0 !important;
}

body .d-flex.align-items-center i,
body .d-flex.align-items-center svg {
  vertical-align: -0.12em !important;
}

/* =========================================================
   Gomattic – Purchase page: Metronic tick / cross pills
   Applies to “What you’ll get” list + similar feature lists
   ========================================================= */

/* If you already have these vars, keep them. If not, they’ll fallback. */
:root{
  --mt-success: #50cd89;
  --mt-success-light: #e8fff3;

  --mt-danger: #f1416c;
  --mt-danger-light: #fff5f8;

  --mt-muted: rgba(15, 23, 42, 0.55);
}

/* Target feature rows on plan + purchase screens */
body .pricing-feature-list li,
body .card ul li{
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Make icon wrappers behave (prevents weird misalignment / “wrapped” look) */
body .pricing-feature-list li > svg,
body .pricing-feature-list li > i,
body .card ul li > svg,
body .card ul li > i{
  flex: 0 0 auto;
}

/* Common icon base (Lucide + FA svg) */
body .pricing-feature-list svg.lucide,
body .card ul svg.lucide,
body .pricing-feature-list .svg-inline--fa,
body .card ul .svg-inline--fa{
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* === TICK (success) === */
body .pricing-feature-list svg.lucide-check,
body .pricing-feature-list svg.lucide-check-circle,
body .pricing-feature-list svg.lucide-check-circle-2,
body .card ul svg.lucide-check,
body .card ul svg.lucide-check-circle,
body .card ul svg.lucide-check-circle-2{
  color: var(--mt-success) !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* If your ticks are plain FontAwesome (rare now, but just in case) */
body .pricing-feature-list .fa-check,
body .pricing-feature-list .fa-check-circle,
body .card ul .fa-check,
body .card ul .fa-check-circle{
  color: var(--mt-success) !important;
}

/* === CROSS (danger) === */
body .pricing-feature-list svg.lucide-x,
body .pricing-feature-list svg.lucide-x-circle,
body .card ul svg.lucide-x,
body .card ul svg.lucide-x-circle{
  color: var(--mt-danger) !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* If any crosses are FontAwesome */
body .pricing-feature-list .fa-xmark,
body .pricing-feature-list .fa-times,
body .card ul .fa-xmark,
body .card ul .fa-times{
  color: var(--mt-danger) !important;
}

/* Optional: Metronic “soft badge” behind icons (looks cleaner than raw svg) */
body .pricing-feature-list li svg.lucide,
body .card ul li svg.lucide{
  border-radius: 999px !important;
  padding: 3px !important;
  box-sizing: content-box !important;
}

/* Green soft badge for ticks */
body .pricing-feature-list li svg.lucide-check,
body .pricing-feature-list li svg.lucide-check-circle,
body .pricing-feature-list li svg.lucide-check-circle-2,
body .card ul li svg.lucide-check,
body .card ul li svg.lucide-check-circle,
body .card ul li svg.lucide-check-circle-2{
  background: var(--mt-success-light) !important;
}

/* Red soft badge for crosses */
body .pricing-feature-list li svg.lucide-x,
body .pricing-feature-list li svg.lucide-x-circle,
body .card ul li svg.lucide-x,
body .card ul li svg.lucide-x-circle{
  background: var(--mt-danger-light) !important;
}

/* If some items are “muted” text, keep the label muted but icons still clear */
body .pricing-feature-list li.text-muted,
body .card ul li.text-muted{
  color: rgba(15, 23, 42, 0.55) !important;
}

/* =========================================================
   Metronic-ish tokens (adjust if your theme already has these)
========================================================= */
:root{
  --mt-card-border: #E5E7EB;
  --mt-card-bg: #ffffff;
  --mt-muted: #6B7280;
  --mt-text: #111827;

  /* Metronic alert vibe */
  --mt-success: #50CD89;
  --mt-success-bg: #E8FFF3;

  --mt-danger: #F1416C;
  --mt-danger-bg: #FFF5F8;
}

/* =========================================================
   PAY PAGE: tighten spacing + headings
   (targets only pay pages if you add class page-pay on body,
   otherwise leave selectors as-is)
========================================================= */

/* Card look + reduce padding */
body .page-pay .card,
body .pay-page .card,
body [class*="pay"] .card {
  border: 1px solid var(--mt-card-border) !important;
  border-radius: 14px !important;
  background: var(--mt-card-bg) !important;
  box-shadow: none !important;
}

body .page-pay .card .card-body,
body .pay-page .card .card-body,
body [class*="pay"] .card .card-body {
  padding: 1rem !important; /* was ~1.25rem+ */
}

/* Section headings: smaller + less margin */
body .page-pay h1,
body .pay-page h1,
body [class*="pay"] h1 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

body .page-pay h2.h5,
body .pay-page h2.h5,
body [class*="pay"] h2.h5 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: .75rem !important;
}

body .page-pay .mt-5,
body .pay-page .mt-5,
body [class*="pay"] .mt-5 {
  margin-top: 1.25rem !important; /* reduce big gaps */
}

/* Make the 3-column layout feel tighter */
body .page-pay .row.mx-n2,
body .pay-page .row.mx-n2,
body [class*="pay"] .row.mx-n2 {
  margin-left: -.5rem !important;
  margin-right: -.5rem !important;
}
body .page-pay .custom-radio-box.col-12.p-2,
body .pay-page .custom-radio-box.col-12.p-2,
body [class*="pay"] .custom-radio-box.col-12.p-2 {
  padding: .5rem !important;
}

/* =========================================================
   "WHAT YOU'LL GET" ticks & crosses: Metronic alert style
   Works on both plan_features partial + pricing list
========================================================= */

/* Normalise icon wrapper sizing so it never "wraps" weirdly */
body .pricing-feature-list svg.lucide,
body .card-body svg.lucide,
body .card-body [data-lucide] {
  flex: 0 0 auto !important;
}

/* Base pill style for both check and x icons */
body .pricing-feature-list svg.lucide,
body .card-body svg.lucide {
  width: 28px !important;
  height: 28px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* remove any line/divider effects on the svg itself */
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* CHECK */
body .pricing-feature-list svg.lucide-check,
body .card-body svg.lucide-check {
  color: var(--mt-success) !important;
  background: var(--mt-success-bg) !important;
}

/* X */
body .pricing-feature-list svg.lucide-x,
body .card-body svg.lucide-x {
  color: var(--mt-danger) !important;
  background: var(--mt-danger-bg) !important;
}

/* If your X currently inherits muted text color, force it */
body .pricing-feature-list svg.lucide-x.text-muted,
body .card-body svg.lucide-x.text-muted {
  color: var(--mt-danger) !important;
}

/* =========================================================
   Remove grey/blue dividers + dotted lines in feature rows
========================================================= */

/* Remove per-row borders/dividers inside pricing feature lists */
body .pricing-feature-list li,
body .card-body .pricing-feature-list li {
  border: 0 !important;
}

/* If you used dotted separators via background / box-shadow */
body .pricing-feature-list,
body .card-body .pricing-feature-list {
  background-image: none !important;
  box-shadow: none !important;
}

/* Tighten the feature row spacing */
body .pricing-feature-list li,
body .card-body .pricing-feature-list li {
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}

/* Align feature row content nicely */
body .pricing-feature.d-flex.justify-content-between.align-items-center {
  align-items: center !important;
}

/* Payment frequency card: tighten + improve hierarchy */
.page-pay .custom-radio-box .card-title,
.page-pay .card-title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #111827 !important;
}

/* Price number */
.page-pay .custom-radio-box-main-text,
.page-pay #monthly_price_amount,
.page-pay #quarterly_price_amount,
.page-pay #biannual_price_amount,
.page-pay #annual_price_amount,
.page-pay #lifetime_price_amount {
  font-size: 1.125rem !important;     /* 18px-ish */
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #111827 !important;
}

/* Currency next to it */
.page-pay .custom-radio-box-main-text + span,
.page-pay #monthly_price_amount + span,
.page-pay #quarterly_price_amount + span,
.page-pay #biannual_price_amount + span,
.page-pay #annual_price_amount + span,
.page-pay #lifetime_price_amount + span {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  line-height: 1.1 !important;
}

/* PAY PAGE: feature list icon alignment fix */
body .pricing-feature-list li.d-flex.align-items-baseline,
body .card ul li.d-flex.align-items-baseline {
  align-items: center !important; /* override baseline */
}

/* Make the icon behave like a block and center in the row */
body .pricing-feature-list li.d-flex > svg,
body .card ul li.d-flex > svg {
  display: block !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Optional: if spacing between rows feels too big */
body .pricing-feature-list li.mb-2,
body .card ul li.mb-2 {
  margin-bottom: .375rem !important; /* reduce from .5rem */
}

@media (max-width: 1199.98px) {
  .page-pay .payc2 {
    display: none !important;
  }

  .page-pay .payc1,
  .page-pay .payc3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 767.98px) {

  /* Hide middle + summary */
  .page-pay .payc2,
  .page-pay .payc3 {
    display: none !important;
  }

  /* Full width primary column */
  .page-pay .payc1 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* KPI layout: replace bootstrap flex row with grid */
.dashboard-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-left: 0 !important;   /* kill bootstrap row negative margins */
  margin-right: 0 !important;
}

/* neutralise col padding + widths so grid controls layout */
.dashboard-kpis > .dashboard-kpi {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;

  padding-left: 0 !important;  /* remove bootstrap gutter padding */
  padding-right: 0 !important;
  margin-bottom: 0 !important; /* you already have gap now */
}

/* Tablet: 2 columns */
@media (max-width: 992px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column (still show all 3 cards) */
@media (max-width: 576px) {
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }
}

/* =========================
   STATS – KPI CARDS (your HTML)
   ========================= */

/* Outer KPI card */
body .stats-kpis > [class*="col-"] > .card.h-100{
  border-radius: 14px !important;
  border: 1px solid var(--mt-card-border, #E5E7EB) !important;
  box-shadow: none !important;
}

/* Tighter body padding */
body .stats-kpis > [class*="col-"] > .card.h-100 > .card-body{
  padding: .85rem 1rem !important;
  align-items: center !important;
  gap: .85rem !important;
}

/* Kill the “nested card” look used for the icon wrapper */
body .stats-kpis .card-body > div:first-child > .card.bg-gray-200{
  border: 0 !important;
  background: #F3F4F6 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Icon box sizing */
body .stats-kpis .card-body > div:first-child > .card.bg-gray-200 .p-3{
  padding: .75rem !important;
  width: 44px !important;
  height: 44px !important;
}

/* Icon size */
body .stats-kpis .card-body > div:first-child i{
  font-size: 1rem !important; /* overrides fa-lg */
  line-height: 1 !important;
}

/* Number + label hierarchy */
body .stats-kpis .card-title.h4{
  font-size: 1.1rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

body .stats-kpis small{
  font-size: .82rem !important;
  margin-top: .15rem !important;
}


/* =========================================================
   Notification Create — CLEAN FINAL CSS (replace everything)
   ========================================================= */

/* Header offset tokens (adjust if needed) */
:root{
  --notif-sticky-desktop: 96px; /* desktop header height */
  --notif-sticky-mobile:  76px; /* tablet/mobile header height */
}

/* -------------------------
   Desktop layout (2 columns)
   ------------------------- */
.notification-create-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

.notification-create-main{ min-width: 0; }
.notification-create-rail{ min-width: 0; }

/* ✅ Sticky goes on the RAIL (not rail-inner) */
@media (min-width: 992px){
  .notification-create-rail{
    position: sticky;
    top: var(--notif-sticky-desktop);
    align-self: start;
    height: fit-content;
    z-index: 10;
  }

  /* Ensure inner never tries to be sticky */
  .notification-create-rail-inner{
    position: static !important;
    top: auto !important;
  }
}

/* -------------------------
   Preview + CTA (right rail)
   ------------------------- */
.notification-create-preview{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  margin-bottom: 14px;
  overflow: visible;
}

#notification_preview{
  display: block;
  width: 100%;
}

/* Stop injected wrappers from breaking layout */
.notification-create-preview #notification_preview,
.notification-create-preview #notification_preview > *{
  position: static !important;
  transform: none !important;
}

.notification-create-cta{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.notification-create-cta .btn{
  border-radius: 12px;
  font-weight: 600;
}

/* Keep a clean keyboard focus, remove weird glow */
.notification-create-cta .btn:focus{
  outline: none !important;
  box-shadow: none !important;
}
.notification-create-cta .btn:focus-visible{
  outline: 3px solid rgba(55,121,240,.25) !important;
  outline-offset: 2px;
}

/* -------------------------
   Notification list cards
   ------------------------- */
.notification-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}

.notification-radio-box{
  display: block;
  cursor: pointer;
  margin: 0 !important;
  position: relative;
}

/* Hide radio but keep accessible */
.notification-radio-box input.custom-control-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.notification-radio-box .card{
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
  position: relative;
}

.notification-radio-box:hover .card{
  border-color: rgba(0,0,0,.16) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

/* Selected */
.notification-radio-box input.custom-control-input:checked + .card{
  border-color: #3779f0 !important;
  background: rgba(55,121,240,.04);
  box-shadow: 0 16px 40px rgba(55,121,240,.22);
}

.notification-radio-box input.custom-control-input:checked + .card::after{
  content: "Selected";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(55,121,240,.12);
  color: #3779f0;
  font-weight: 600;
}

/* Keyboard focus */
.notification-radio-box input.custom-control-input:focus-visible + .card{
  outline: 3px solid rgba(55,121,240,.28);
  outline-offset: 3px;
}

/* Card body spacing */
.notification-radio-box .card-body{
  padding: 18px 18px !important;
}

/* -------------------------
   Tablet + mobile behaviour
   - stack layout
   - rail sits above list
   - rail is sticky
   ------------------------- */
@media (max-width: 991.98px){
  .notification-create-layout{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* put rail above list */
  .notification-create-rail{
    order: -1;
    position: sticky;
    top: var(--notif-sticky-mobile);
    z-index: 10;

    /* make it look like one floating bar */
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    padding: 12px;
  }

  /* prevent double card inside the sticky rail */
  .notification-create-preview,
  .notification-create-cta{
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .notification-create-preview{
    margin-bottom: 12px !important;
  }

  /* inner should never be sticky */
  .notification-create-rail-inner{
    position: static !important;
    top: auto !important;
  }
}

/* Smaller phones often have smaller header */
@media (max-width: 575.98px){
  :root{ --notif-sticky-mobile: 64px; }
}

/* -------------------------
   Sticky killers (scoped)
   ------------------------- */
/* Allow sticky without breaking rest of layout */
.notification-create-layout,
.notification-create-rail,
.notification-create-rail-inner{
  overflow: visible !important;
  contain: none !important;
}

/* Theme animation wrapper can break sticky */
main.altum-animate{
  transform: none !important;
}

/* =====================================================
   Notification Create — Mobile / Tablet Sticky (FINAL)
   ===================================================== */

@media (max-width: 991.98px){

  /* Stack layout */
  .notification-create-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Put sticky preview above the list */
  .notification-create-rail{
    order: -1 !important;
  }

  /* Sticky container */
  .notification-create-rail-inner{
    position: sticky !important;
    top: 72px !important; /* header height */
    z-index: 100 !important;

    /* Center it */
    max-width: 520px;
    margin: 0 auto 16px auto;
  }

  /* Prevent overlap with list */
  .notification-create-main{
    padding-top: 8px;
  }
}

/* =========================================================
   Notification Create — MOBILE/TABLET: center the whole page
   Paste at VERY END of custom.css
   ========================================================= */

@media (max-width: 991.98px){

  /* 1) Make the whole create area a centered column */
  .notification-create-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;

    /* THIS is the key: center everything */
    width: 100% !important;
    padding: 0 12px !important;            /* side gutter */
    box-sizing: border-box !important;
  }

  /* Shared max width for BOTH rail + list */
  :root{
    --notif-mobile-max: 720px;             /* tweak (e.g. 640px if you want tighter) */
  }

  .notification-create-rail,
  .notification-create-main{
    width: 100% !important;
    max-width: var(--notif-mobile-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2) Sticky rail (centered) */
  .notification-create-rail{
    order: -1 !important;
    position: sticky !important;
    top: var(--notif-sticky-mobile, 76px) !important;
    z-index: 999 !important;

    background: #fff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
    padding: 12px !important;
  }

  /* Make sure NOTHING else tries to be sticky/fixed */
  .notification-create-rail-inner{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  /* 3) Avoid “double card” look inside sticky */
  .notification-create-preview,
  .notification-create-cta{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .notification-create-preview{ margin-bottom: 12px !important; }

  /* 4) Center the button + keep it neat */
  .notification-create-cta .btn{
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* 5) Ensure list/cards follow same centered column */
  .notification-list{
    width: 100% !important;
    max-width: var(--notif-mobile-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================================
   Notification Create — Preview centering FIX
   ================================ */

/* Center the preview container itself */
.notification-create-preview{
  display: flex;
  justify-content: center;
}

/* Keep preview content at natural width */
#notification_preview{
  width: auto;
  max-width: 100%;
}

/* Prevent injected widgets from stretching full width */
#notification_preview > *{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center helper text under Create button (desktop only) */
@media (min-width: 992px){
  .notification-create-cta{
    text-align: center;
  }

  .notification-create-hint{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   Notification Create — FINAL PATCH (paste at END of custom.css)
   Fixes: 190px gap, centering, icon badge styling
   ========================================================= */

/* -------------------------
   1) Remove the weird mobile gap (the 190px)
   ------------------------- */
@media (max-width: 991.98px){
  .notification-create-main{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* -------------------------
   2) Center preview + CTA text like the button
   ------------------------- */

/* Center anything inside the preview container */
.notification-create-preview{
  text-align: center !important;
}

/* Make the preview area center its rendered widget */
.notification-create-preview #notification_preview{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* The injected widget wrapper sometimes sets its own width */
.notification-create-preview #notification_preview > *{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center CTA + hint under the Create button */
.notification-create-cta{
  text-align: center !important;
}
.notification-create-cta .notification-create-hint{
  text-align: center !important;
  display: block;
}

/* Optional: keep button nicely centered even if layout changes */
.notification-create-cta .btn{
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Notification icons – FORCE Metronic-style badge look
   (Paste at VERY END of custom.css)
   ========================================================= */

.notification-radio-box .notification-avatar{
  /* kill inline red/pink backgrounds */
  background-color: rgba(55, 121, 240, 0.10) !important;
  border: 1px solid rgba(55, 121, 240, 0.18) !important;

  /* force icon colour */
  color: #3779f0 !important;

  /* make badge feel consistent */
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 24px rgba(55,121,240,.10) !important;
}

/* Font Awesome icons inside badge */
.notification-radio-box .notification-avatar i{
  color: #3779f0 !important;
}

/* Lucide icons inside badge (stop global lucide rules messing with them) */
.notification-radio-box .notification-avatar svg.lucide{
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  stroke: #3779f0 !important;
  fill: none !important;

  /* fix “odd/thin” strokes */
  stroke-width: 2.25px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =========================================================
   Campaign > Notifications list — unified icon badge styling
   Applies to: /campaign/*
   ========================================================= */

/* Badge wrapper */
.table-custom .notification-avatar{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;

  background: rgba(55,121,240,.10) !important;
  border: 1px solid rgba(55,121,240,.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 6px 18px rgba(55,121,240,.12) !important;

  /* kill any inline colours coming from the HTML */
  color: #3779f0 !important;
}

/* If Font Awesome <i> */
.table-custom .notification-avatar i{
  color: #3779f0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* If Lucide <svg class="lucide ..."> */
.table-custom .notification-avatar svg.lucide{
  width: 20px !important;
  height: 20px !important;

  /* IMPORTANT: override theme rules that add padding / roundness to the svg itself */
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  stroke: #3779f0 !important;
  fill: none !important;

  /* make it look less “hairline thin” */
  stroke-width: 2.25px !important;
  vector-effect: non-scaling-stroke;
}

/* If any SVG (non-lucide) ends up inside */
.table-custom .notification-avatar svg:not(.lucide){
  width: 20px !important;
  height: 20px !important;
  color: #3779f0 !important;
  fill: currentColor !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* If the wrapper has an inline style attribute, still enforce our blue badge */
.table-custom .notification-avatar[style]{
  background: rgba(55,121,240,.10) !important;
  color: #3779f0 !important;
}
/* =========================================
   FIX: Lucide icons inside buttons (e.g. Translate)
   ========================================= */
.btn svg.lucide,
.btn .lucide{
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}

/* Extra safety for dark buttons */
.btn-dark svg.lucide,
.btn-dark .lucide{
  color: #fff !important;
  stroke: #fff !important;
}

/* =========================================================
   Notification panel – empty state typography alignment
   Matches main page empty states
   ========================================================= */

/* Scope strictly to the notification dropdown */
#internal_notifications_content h5,
#internal_notifications_content h5.text-muted{
  color: #1f2937 !important;          /* slate-800 */
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}

/* Supporting text below the title */
#internal_notifications_content p,
#internal_notifications_content .text-muted{
  color: #6b7280 !important;          /* slate-500 */
  font-size: 13px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* Centering consistency */
#internal_notifications_content .text-center{
  text-align: center !important;
}

/* Remove Bootstrap’s overly-light muted override */
#internal_notifications_content .text-muted{
  opacity: 1 !important;
}