/* ==========================================================
   COVERTHART GLOBAL COLOR PALETTE
   ========================================================== */

:root {
  /* Brand Colors */
  --coverthart-azure: #0A88F0;
  --coverthart-shopify: #3F89EA;
  --coverthart-black: #000509;
  --coverthart-white: #F9FAFD;
  --coverthart-red: #69040e;
  --coverthart-red-rgba: 354, 76, 86;
  --bs-danger: var(--coverthart-red);

  --coverthart-orange: #FFA000;
  --coverthart-purple: #8B6BD6;
  --coverthart-secondary: #7f8284;
  --coverthart-warning: #FFA000;

  --territory-southeast: #198754;
  --territory-southwest: #69040e;
  --territory-northeast: #0A88F0;
  --territory-west: #FFA000;
  --territory-midwest: #8B6BD6;
  --territory-unassigned: #6c757d;


  /* 1GB */
  --plan-1gb-primary: #0A88F0;

  /* 2GB */
  --plan-2gb-primary: #8B6BD6;

  /* 10GB */
  --plan-10gb-primary: #FF8700;

}


/* ==========================
   BRAND COLORS
   ========================== */

.bg-coverthart-azure {
  background-color: var(--coverthart-azure) !important;
  color: #fff;
}

.text-coverthart-azure {
  color: var(--coverthart-azure) !important;
}

.border-coverthart-azure {
  border-color: var(--coverthart-azure) !important;
}

.bg-coverthart-shopify {
  background-color: var(--coverthart-shopify) !important;
  color: #fff;
}

.text-coverthart-shopify {
  color: var(--coverthart-shopify) !important;
}

.border-coverthart-shopify {
  border-color: var(--coverthart-shopify) !important;
}

.bg-coverthart-black {
  background-color: var(--coverthart-black) !important;
  color: #fff;
}

.text-coverthart-black {
  color: var(--coverthart-black) !important;
}

.border-coverthart-black {
  border-color: var(--coverthart-black) !important;
}

.bg-coverthart-white {
  background-color: var(--coverthart-white) !important;
  color: #000;
}

.text-coverthart-white {
  color: var(--coverthart-white) !important;
}

.border-coverthart-white {
  border-color: var(--coverthart-white) !important;
}

.bg-coverthart-red {
  background-color: var(--coverthart-red) !important;
  color: #fff;
}

.text-coverthart-red {
  color: var(--coverthart-red) !important;
}

.border-coverthart-red {
  border-color: var(--coverthart-red) !important;
}

.bg-coverthart-orange {
  background-color: var(--coverthart-orange) !important;
  color: #fff;
}

.text-coverthart-orange {
  color: var(--coverthart-orange) !important;
}

.border-coverthart-orange {
  border-color: var(--coverthart-orange) !important;
}


.bg-coverthart-warning {
  background-color: var(--coverthart-warning) !important;
  color: #fff;
}

.text-coverthart-warning {
  color: var(--coverthart-warning) !important;
}

.border-coverthart-warning {
  border-color: var(--coverthart-warning) !important;
}


.bg-coverthart-secondary {
  background-color: var(--coverthart-secondary) !important;
  color: #fff;
}

.text-coverthart-secondary {
  color: var(--coverthart-secondary) !important;
}

.border-coverthart-secondary {
  border-color: var(--coverthart-secondary) !important;
}


/* Remove Google's default padding that creates the big "empty top" feel */
/* .gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 8px;
  background-color: var(--coverthart-white) !important;
}*/

/* Remove inner scroll wrapper padding */
/* .gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
} */

/* Keep the close button from pushing layout down */
/* .gm-style .gm-ui-hover-effect {
  top: 6px !important;
  right: 6px !important;
} */


/* Avoid HTML collapses whitespace visually. */
#kpiBillingCycleRange {
  white-space: pre;
  text-align: center;
}



/* ==========================================================
   FORM ELEMENTS
   ========================================================== */

.form-control::placeholder {
  color: color-mix(in srgb, var(--ct-body-color) 45%, transparent);
  opacity: 1;
}



/* ==========================================================
   HOW TO SAMPLES
   ========================================================== */

.chtitle {
  color: var(--coverthart-azure);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-coverthart {
  background-color: var(--coverthart-black);
  color: var(--coverthart-white);
  border: none;
}

.btn-coverthart:hover {
  background-color: var(--coverthart-white);
  color: var(--coverthart-black);
  border: none;
}


/* ==========================================================
   TEXT
   ========================================================== */
.text-coverthart-azure {
  color: var(--coverthart-azure) !important;
}

.text-coverthart-black {
  color: var(--coverthart-black) !important;
}

.text-coverthart-white {
  color: var(--coverthart-white) !important;
}



/* ==========================================================
   BACKGROUNDS
   ========================================================== */
.bg-coverthart-azure {
  background-color: var(--coverthart-azure) !important;
}

.bg-coverthart-black {
  background-color: var(--coverthart-black) !important;
}

.bg-coverthart-white {
  background-color: var(--coverthart-white) !important;
}


/* =========================================================
   ROW 1: Metrics - make all cards consistent height
   ========================================================= */

/* This row uses Bootstrap row-cols; ensure each .col stretches */
.row.row-cols-1.row-cols-xxl-6.row-cols-lg-3.row-cols-md-2>.col {
  display: flex;
}

/* Make every card fill the column height */
.row.row-cols-1.row-cols-xxl-6.row-cols-lg-3.row-cols-md-2>.col>.card {
  flex: 1 1 auto;
}

/* =========================================================
   Carrier logo sizing 
   ========================================================= */

.carrier-logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrier-logo-img {
  height: 40px;
  width: auto;
  margin: 0.60rem 0;
}

/* =========================================================
  Tooltips
   ========================================================= */


/* Tooltip inner */
.white-tooltip .tooltip-inner {
  background-color: var(--coverthart-white) !important;
  color: var(--coverthart-secondary) !important;
  border: 1px solid var(--coverthart-black) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}



/* =========================================================
  Modals
   ========================================================= */

.modal-xxl {
  max-width: 90vw;
  /* nearly full screen */
}


/* Remove the “cast shadow” around the modal panel */
.modal .modal-content {
  box-shadow: none !important;
}

/* Optional: also remove the faint border */
.modal .modal-content {
  border: 0 !important;
}



/* If what you’re seeing is more like a “ring” caused by the backdrop layering Sometimes the theme adds effects to the dialog itself: */
#editPlanModal #confirmDeleteModal .modal-dialog {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.modal-backdrop {
  box-shadow: none !important;
  filter: none !important;
}


/* More fixing the rings */

/* Remove all modal shadows cleanly */
.modal-x-clean .modal-content {
  box-shadow: none !important;
}

.modal-x-clean .modal-dialog {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Prevent transform/focus ring artifacts */
.modal-x-clean.modal.fade .modal-dialog {
  transform: none !important;
}


/* other */

#confirmDeleteModal .bg-danger {
  background-color: var(--coverthart-red) !important;
}


.form-check-input:checked {
  background-color: var(--coverthart-azure) !important;
  border-color: var(--coverthart-azure) !important;
}


/* =========================================================
  Table
   ========================================================= */

/* .vz-fixed {
  table-layout: fixed;
  width: 100%;
}

.vz-fixed th,
.vz-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vz-fixed td.desc {
  white-space: normal;
}

.vz-fixed-name {
  width: 150px;
}

.vz-fixed-type {
  width: 60px;
}

.vz-fixed-desc {
  width: 550px;
} */


/* =========================================================
  Timzone Clocks
   ========================================================= */

/* Topbar timezone clocks */
.topbar-tz-strip {
  gap: .5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  color: var(--coverthart-white);
}

.topbar-tz-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  /* background: rgba(0, 0, 0, .04); */
}

.topbar-tz-pill .tz-label {
  font-size: .75rem;
  font-weight: 600;
  opacity: .85;
}

.topbar-tz-pill .tz-time {
  /* font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
  font-size: .8rem;
}

.topbar-tz-pill .tz-ico {
  font-size: .95rem;
  line-height: 1;
}



/* =========================================================
  Auth Pages
   ========================================================= */

.auth-fluid-right {
  position: relative;
}

/* Top-left floating label */
.app-corner-label {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 10;

  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;

  color: #fff;
  /* background: var(--coverthart-secondary); */
  padding: 4px 8px;
  border-radius: 4px;

  pointer-events: none;
  /* prevents accidental clicks */
}