/*
 * Micalmoker overrides for TrendyPre's own selectors.
 *
 * NOT part of the template — main.css stays untouched so a template update
 * keeps applying cleanly. TrendyPre is TrendyAdmin with AvenPre's palette
 * (#e03a3c red on #111111/#1b1b1b/#1e1e1e blacks) already set in main.css's
 * variables; this file only covers what the app's markup needs on top of it.
 * Loaded right after main.css — see resources/views/templates/TrendyPre/head.blade.php.
 */

/*
 * Logo: the app's round chip logo replaces the template's gradient mark with
 * a lightning icon, in every spot the mark appears (header, sidebar, auth
 * pages, footer) — see templates/TrendyPre/logo-mark.blade.php.
 */
.brand-logo-mark {
  background: none !important;
  box-shadow: none !important;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.brand-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * Logout is a POST form (Laravel's logout route), not the template's plain
 * <a href="auth-login.html">: the buttons inside these forms get the look the
 * template gives the links they replace.
 */
.d-contents {
  display: contents;
}

.user-menu-signout,
.sidebar-user-action {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.user-menu-signout {
  width: 100%;
}

.sidebar-user-action {
  background: none;
}

/* Google sign-in is a link (GET /auth/google), the template's social buttons are <button>s. */
.auth-social-btn {
  text-decoration: none;
}

/* Only one social provider: let it take the whole row. */
.auth-social .auth-social-btn:only-child {
  grid-column: 1 / -1;
}

/*
 * Dashboard "top tables" (the template's top products): a table has no photo,
 * so the thumbnail slot shows an icon tile of the same size instead.
 */
.page-dashboard-sales .sales-product-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
}

/*
 * Focus layout (templates/TrendyPre/focus.blade.php): auth-lock-screen.html's
 * centered frame around a full-width page — the poker table. The content box
 * is as wide as Bootstrap's widest container instead of the 440px auth card
 * and starts at the top (it's taller than the screen).
 */
.focus-layout .auth-content-inner {
  align-items: flex-start;
  padding-top: var(--spacing-md);
}

.focus-layout .auth-logo {
  margin-top: 0;
}

.focus-content {
  width: 100%;
  max-width: 1320px;
  min-width: 0;
}

/*
 * Bootstrap's own grey/border/tertiary variables are only redefined by
 * TrendyPre for body colours: pages written for Bootstrap's dark mode (the
 * table's chat, log and seat panels) get them from the template's palette.
 */
.focus-layout {
  --bs-secondary-color: var(--muted-color);
  --bs-tertiary-bg: var(--background-color);
  --bs-border-color: var(--border-color);
}

/*
 * Waiting indicators take the colour of what they sit in. main.css paints
 * every .spinner-border in the accent red, which clashed with the box around
 * it (a red spinner in a yellow "waiting" box) and vanished on red buttons:
 * inside a coloured container it follows that container's text colour.
 */
.widget-banner-alert-icon .spinner-border,
.fin-status-pill .spinner-border,
.sales-status .spinner-border,
.inv-status .spinner-border,
.status-pill .spinner-border,
.badge .spinner-border,
.alert .spinner-border,
.btn .spinner-border,
.text-warning .spinner-border,
.text-success .spinner-border,
.text-danger .spinner-border,
.text-info .spinner-border {
  color: inherit;
}

/* The banner's text in the banner's colour, like its icon and its border. */
.widget-banner-alert.success .widget-banner-alert-text { color: var(--success-color); }
.widget-banner-alert.warning .widget-banner-alert-text { color: var(--warning-color); }
.widget-banner-alert.info .widget-banner-alert-text { color: var(--info-color); }
.widget-banner-alert.danger .widget-banner-alert-text { color: var(--danger-color); }

/* invoice-list's stats strip is a fixed 4 columns down to 1200px, which
   overflows beside the sidebar: as many 14rem tiles as fit instead. */
.page-invoice-list .inv-stats {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/*
 * /help's hero, and the admin home's greeting panel (index.html's .dash-hero):
 * the same near-black card with soft red glows as the wallet's "Saldo
 * disponible para jugar" (.fin-balance-card) instead of the template's solid
 * red gradient, which washed out the title and the search box. The greeting
 * also needs the dark theme's selector: main.css repaints .dash-hero red under
 * [data-theme=dark], which outranks a plain .page-dashboard .dash-hero.
 */
.page-faq .faq-hero,
.page-dashboard .dash-hero,
[data-theme=dark] .page-dashboard .dash-hero {
  background: #0a0a0a;
  box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--accent-color), transparent 45%);
}

.page-faq .faq-hero::before,
.page-dashboard .dash-hero::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 55%), transparent 70%);
  filter: blur(2px);
}

.page-faq .faq-hero::after,
.page-dashboard .dash-hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--danger-color), transparent 72%), transparent 70%);
  filter: blur(2px);
}

/*
 * The economic dashboard (dashboard-finance.html) also needs a "doesn't
 * match" pill: the template ships only completed and pending.
 */
.page-dashboard-finance .fin-status-pill.failed {
  background: color-mix(in srgb, var(--danger-color), transparent 88%);
  color: var(--danger-color);
}

/*
 * The Quill editor of the newsletter and the support tickets
 * (public/js/rich-text-editor.js): main.css sizes it for a whole page, so the
 * forms get a shorter one; a failed field turns its border red like
 * Bootstrap's .is-invalid; inside the ticket reply box it joins the actions bar.
 */
.rich-text-editor .ql-editor {
  min-height: 160px;
  max-height: 420px;
  overflow-y: auto;
}

.rich-text-editor .ql-snow .ql-tooltip {
  z-index: 5;
}

.rich-text-editor.is-invalid .ql-toolbar.ql-snow,
.rich-text-editor.is-invalid .ql-container.ql-snow {
  border-color: var(--bs-form-invalid-border-color, var(--danger-color));
}

.rich-text-editor:not(.is-empty) + .rich-text-required {
  display: none;
}

.rich-text-editor.is-empty + .rich-text-required {
  display: block;
}

.ticket-reply-editor .rich-text-editor .ql-editor {
  min-height: 120px;
}

.ticket-reply-editor .rich-text-editor .ql-toolbar.ql-snow {
  border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

.ticket-reply-editor .rich-text-editor .ql-container.ql-snow {
  border-radius: 0;
  border-bottom: 0;
}

.ticket-message-body h1,
.ticket-message-body h2,
.ticket-message-body h3 {
  margin: 0.75rem 0 0.5rem;
}

.ticket-message-body h1 { font-size: 1.25rem; }
.ticket-message-body h2 { font-size: 1.125rem; }
.ticket-message-body h3 { font-size: 1rem; }

.ticket-message-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.ticket-message-body a {
  text-decoration: underline;
}

/*
 * The hover popover explaining a button (public/js/button-popovers.js):
 * TrendyPre's popover, compact, since it's a one-line hint.
 */
.button-help-popover {
  --bs-popover-max-width: 240px;
  --bs-popover-font-size: 0.8125rem;
  --bs-popover-body-padding-x: 0.75rem;
  --bs-popover-body-padding-y: 0.375rem;
  --bs-popover-bg: var(--surface-color);
  --bs-popover-border-color: var(--border-color);
  --bs-popover-body-color: var(--default-color);
  pointer-events: none;
}

/*
 * The header bell (templates/TrendyPre/notifications-dropdown): its items
 * are links to each notification, so they keep the template's text colors,
 * and the bell rings when one arrives live (resources/js/notification-center.js).
 */
.notification-dropdown a.notification-item,
.page-notifications a.nf-title {
  color: inherit;
  text-decoration: none;
}

.page-notifications a.nf-title:hover {
  color: var(--accent-color);
}

.notification-dropdown .notification-text,
.page-notifications .nf-text {
  white-space: pre-line;
}

.notification-bell-ring .ph-bell {
  display: inline-block;
  animation: notification-bell-ring 0.9s ease-in-out;
  transform-origin: top center;
}

@keyframes notification-bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-14deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-6deg); }
}

.page-notifications .nf-actions form {
  display: contents;
}

.page-notifications .nf-matrix .form-switch .form-check-input:disabled {
  opacity: 0.6;
}