/* App-specific additions on top of the core v2 kit's styles */

.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.status-expired { background: #fde2e1; color: #b3261e; }
.status-critical { background: #ffe8cc; color: #b45309; }
.status-warning { background: #fff6cc; color: #92720c; }
.status-ok { background: #dcf5e3; color: #1a7f37; }
.status-unknown { background: #eceef1; color: #5f6672; }
/* Hostgator's own two-value status (sheet-driven, not date-computed) */
.status-renewed { background: #dcf5e3; color: #1a7f37; }

/* The kit's notification dropdown has no scroll of its own -- with more
   than a handful of items it just grows tall and pushes the page down.
   Cap the list's height and let it scroll internally instead, keeping the
   header/footer fixed in view. */
.recent-notification {
  max-width: 380px;
  width: 380px;
}

.recent-notification ul {
  max-height: 320px;
  overflow-y: auto;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* The kit's .logo_wrapper a has a white background (style.css), so the
   previous white wordmark text here was invisible. The full Pixel
   Solutionz logo already carries its own text, so no overlay text is
   needed at all.
   Note: .logo_wrapper a (vendor, one class + one tag) beats .brand-mark
   (one class) on specificity, so its `display: block` was winning and
   silently breaking our flex centering below. Using the compound selector
   `.logo_wrapper .brand-mark` (two classes) wins instead, without !important. */
.logo_wrapper .brand-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 23px;
}

.brand-mark img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* The kit ships a logofull/logosmall swap for the collapsed sidebar, but
   the CSS that drives it is commented out in the vendored style.css.
   Implement it here instead: full wordmark normally, icon-only mark once
   the sidebar collapses to its 80px rail (body.mini-sidebar, toggled by
   custom.js's hamburger handler) -- and back to the full wordmark while
   the collapsed rail is hovered, since #sidebar:hover widens it to 280px
   again without removing body.mini-sidebar. */
.brand-mark .logo-small {
  display: none;
}

.mini-sidebar .brand-mark .logo-full {
  display: none;
}

.mini-sidebar .brand-mark .logo-small {
  display: block;
  max-width: 32px;
}

.mini-sidebar .logo_wrapper .brand-mark {
  justify-content: center;
  padding-left: 0;
}

.mini-sidebar #sidebar:hover .brand-mark .logo-full {
  display: block;
}

.mini-sidebar #sidebar:hover .brand-mark .logo-small {
  display: none;
}

.mini-sidebar #sidebar:hover .logo_wrapper .brand-mark {
  justify-content: flex-start;
  padding-left: 23px;
}

/* -- Status legend, shown above tables that use status pills -- */
.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--font_muted, #667085);
}

.status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot-expired { background: #b3261e; }
.status-dot-critical { background: #b45309; }
.status-dot-warning { background: #92720c; }
.status-dot-ok { background: #1a7f37; }
.status-dot-unknown { background: #9aa1ac; }

/* -- Numeric/date columns should align on a monospace-ish grid -- */
.num-cell, .days-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -- Flag for values that were already truncated in the source sheet,
      e.g. "sbfashionsjewellery.co..." typed that way in Reseller-Club --
      surface it rather than silently rendering broken-looking data. */
.truncated-flag {
  color: #b45309;
  margin-left: 4px;
  cursor: help;
}

/* -- Sticky table headers, applied only to DataTables-managed tables via the
      scrollY option (see page scripts) -- DataTables' own scroll body div
      gets this class, not the generic .table-responsive wrapper, so search /
      pagination controls stay outside the scrolling area. -- */
.dataTables_scrollHead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* -- AWS Costs: each account card is now a full 9-column month-by-month
      table, too wide for a 2-up masonry layout, so cards stack full-width
      instead. -- */
.aws-account-card {
  margin-bottom: 20px;
}

.aws-account-header {
  flex-wrap: wrap;
  gap: 8px;
}

.aws-account-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.trend-up { color: #b3261e; }
.trend-down { color: #1a7f37; }

.aws-note-row td {
  background: #fbf7ee;
  color: #6b5a2a;
  font-size: 12.5px;
  font-style: italic;
  padding-top: 4px;
  padding-bottom: 6px;
}

.aws-total-row td {
  border-top: 2px solid var(--border_color, #e5e7eb);
}

.aws-grandtotal-table td, .aws-grandtotal-table th {
  border: none;
  padding: 6px 12px;
}

.aws-grandtotal-final {
  border: 2px solid #640607;
}

.aws-grandtotal-final .aws-grandtotal-table td {
  font-size: 16px;
}

.aws-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0;
}

.aws-toolbar-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--font_muted, #667085);
}

.aws-search-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}

.aws-search-wrap i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: #9aa1ac;
  font-size: 18px;
}

.aws-search-wrap input {
  padding: 12px 16px 12px 44px;
  font-size: 15px;
  height: auto;
  border-radius: 8px;
}

.aws-cost-note {
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff6cc;
  color: #92720c;
  margin-bottom: 16px;
}

.server-note {
  padding: 12px 16px;
  border-radius: 8px;
  background: #e7f1ff;
  color: #1e4e8c;
  margin-bottom: 16px;
}

/* -- Refresh (sync) icon reuses the kit's own .notification_btn look, same
      as the history/freshness icon and the notification bell, so the three
      navbar controls read as one consistent set rather than one of them
      standing out. -- */
#syncRefreshBtn.is-loading {
  animation: none;
  pointer-events: none;
  color: var(--primary_color, #640607);
}

#syncRefreshBtn.is-loading i {
  display: inline-block;
  animation: refresh-spin 0.8s linear infinite;
}

@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -- Per-page "last changed / last refreshed" indicator, shown in the
      page-header (flex, space-between) next to the title/breadcrumb. -- */
.source-freshness {
  text-align: right;
  font-size: 12.5px;
  color: var(--font_muted, #667085);
}

.source-freshness-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.source-freshness-row + .source-freshness-row {
  margin-top: 2px;
  font-size: 11.5px;
}

.source-freshness strong {
  color: var(--font_main, #1c1f24);
}

.freshness-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #dcf5e3;
  color: #1a7f37;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  .page-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .source-freshness {
    text-align: left;
  }
  .source-freshness-row {
    justify-content: flex-start;
  }
}

/* -- Navbar "Data Freshness" dropdown -- reuses the kit's own
      .notification_btn / .recent-notification component, scoped under
      .freshness-panel so it can sit right next to the notification bell
      without colliding with its hover/open behavior. -- */
.freshness-list {
  max-height: 320px;
  overflow-y: auto;
}

.freshness-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border_color, #eef0f2);
}

.freshness-item:last-child {
  border-bottom: none;
}

.freshness-item a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
}

.freshness-item a:hover {
  color: #640607;
}

.freshness-item .freshness-times {
  text-align: right;
  font-size: 11.5px;
  color: var(--font_muted, #667085);
  line-height: 1.5;
}