/* AG Grid integration for ActiveAdmin
 * Styles organized into sections:
 * 1. CSS Custom Properties (color definitions)
 * 2. Layout & Container
 * 3. AG Grid Theme Overrides
 * 4. Cell Styling
 * 5. Chip Components
 * 6. Action Links
 * 7. Editable Cells
 */

/* ==========================================================================
   1. CSS Custom Properties
   Match ActiveAdmin's SCSS variables for consistency
   ========================================================================== */

:root {
  /* ActiveAdmin color palette */
  --aa-primary-color: #5E6469;
  --aa-secondary-color: #f0f0f0;
  --aa-text-color: #323537;
  --aa-link-color: #38678b;
  --aa-border-color: #e2e2e2;
  --aa-header-border-top: #d9d9d9;
  --aa-header-border-bottom: #c5c5c5;
  --aa-stripe-color: #fcfcfc;

  /* Chip color palette */
  --chip-green-bg: #dcfce7;
  --chip-green-text: #166534;
  --chip-grey-bg: #f3f4f6;
  --chip-grey-text: #4b5563;
  --chip-red-bg: #fee2e2;
  --chip-red-text: #991b1b;
  --chip-yellow-bg: #fef9c3;
  --chip-yellow-text: #854d0e;
  --chip-blue-bg: #dbeafe;
  --chip-blue-text: #1e40af;
  --chip-orange-bg: #ffedd5;
  --chip-orange-text: #c2410c;
  --chip-purple-bg: #f3e8ff;
  --chip-purple-text: #7c3aed;
  --chip-pink-bg: #fce7f3;
  --chip-pink-text: #be185d;
  --chip-teal-bg: #ccfbf1;
  --chip-teal-text: #0f766e;
  --chip-indigo-bg: #e0e7ff;
  --chip-indigo-text: #4338ca;

  /* Feedback colors */
  --cell-success-bg: #dcfce7;
  --cell-hover-bg: #f0f9ff;
  --cell-edit-border: #5c90d2;
}

/* ==========================================================================
   2. Layout & Container
   Hide ActiveAdmin elements when AG Grid is displayed
   ========================================================================== */

/* Hide pagination/sidebar and expand main content when AG Grid is present
   The .has-ag-grid class is added to body by JavaScript when grid initializes */
.has-ag-grid #index_footer,
.has-ag-grid #sidebar {
  display: none;
}

.has-ag-grid #main_content {
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}

.ag-grid-container {
  margin: 1rem 0;
}

/* ==========================================================================
   3. AG Grid Theme Overrides
   Customize alpine theme to match ActiveAdmin appearance
   ========================================================================== */

.ag-theme-alpine {
  --ag-grid-size: 5px;
  --ag-list-item-height: 28px;
  --ag-row-height: 32px;
  --ag-font-size: 10px;
  --ag-cell-horizontal-padding: 12px;
  --ag-header-height: 36px;
  --ag-borders: solid 1px;
  --ag-border-color: var(--aa-border-color);
  --ag-header-background-color: var(--aa-secondary-color);
  --ag-odd-row-background-color: var(--aa-stripe-color);
}

/* Header styling to match ActiveAdmin table_tools_button */
.ag-theme-alpine .ag-header {
  background-color: #fff;
  background-image: linear-gradient(180deg, #FFFFFF, #F0F0F0);
  border-top: 1px solid var(--aa-header-border-top);
  border-bottom: 1px solid var(--aa-header-border-bottom);
}

.ag-theme-alpine .ag-header-cell {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 10px;
  color: var(--aa-primary-color);
  text-shadow: 0 1px 0 #fff;
}

/* Reset ActiveAdmin button styles leaking into AG Grid icons */
.ag-theme-alpine .ag-icon,
.ag-theme-alpine .ag-button,
.ag-theme-alpine button.ag-button {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-weight: normal !important;
  font-size: inherit !important;
  line-height: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.ag-theme-alpine .ag-floating-filter-button-button {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Fix filter input icons overlapping */
.ag-theme-alpine .ag-input-wrapper::before,
.ag-theme-alpine .ag-input-wrapper::after {
  display: none !important;
}

.ag-theme-alpine .ag-date-filter .ag-input-wrapper {
  overflow: visible !important;
}

/* ==========================================================================
   4. Cell Styling
   ========================================================================== */

/* Consistent cell alignment */
.ag-theme-alpine .ag-cell {
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Text overflow with ellipsis */
.ag-theme-alpine .ag-cell a,
.ag-theme-alpine .ag-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Center boolean and image columns */
.ag-theme-alpine .ag-cell[col-id="active"],
.ag-theme-alpine .ag-cell[col-id="in_stock"],
.ag-theme-alpine .ag-cell[col-id="image"] {
  justify-content: center;
}

.ag-theme-alpine .ag-cell img {
  vertical-align: middle;
}

/* Right-aligned cells for numbers and currency */
.ag-theme-alpine .ag-cell.ag-right-aligned-cell {
  justify-content: flex-end;
}

/* ==========================================================================
   5. Chip Components
   Styled badges for status/boolean values
   ========================================================================== */

.ag-grid-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: normal;
}

/* Base color classes */
.ag-grid-chip--green,
.ag-grid-chip--instock {
  background-color: var(--chip-green-bg);
  color: var(--chip-green-text);
}

.ag-grid-chip--grey,
.ag-grid-chip--unknown {
  background-color: var(--chip-grey-bg);
  color: var(--chip-grey-text);
}

.ag-grid-chip--red,
.ag-grid-chip--outofstock {
  background-color: var(--chip-red-bg);
  color: var(--chip-red-text);
}

.ag-grid-chip--yellow {
  background-color: var(--chip-yellow-bg);
  color: var(--chip-yellow-text);
}

.ag-grid-chip--blue {
  background-color: var(--chip-blue-bg);
  color: var(--chip-blue-text);
}

.ag-grid-chip--orange {
  background-color: var(--chip-orange-bg);
  color: var(--chip-orange-text);
}

.ag-grid-chip--purple {
  background-color: var(--chip-purple-bg);
  color: var(--chip-purple-text);
}

.ag-grid-chip--pink {
  background-color: var(--chip-pink-bg);
  color: var(--chip-pink-text);
}

.ag-grid-chip--teal {
  background-color: var(--chip-teal-bg);
  color: var(--chip-teal-text);
}

.ag-grid-chip--indigo {
  background-color: var(--chip-indigo-bg);
  color: var(--chip-indigo-text);
}

/* Retailer-specific chip colors */
.ag-grid-chip--amazon {
  background-color: var(--chip-yellow-bg);
  color: #b45309;
}

.ag-grid-chip--bestbuy {
  background-color: var(--chip-blue-bg);
  color: var(--chip-blue-text);
}

.ag-grid-chip--dji {
  background-color: var(--chip-grey-bg);
  color: #374151;
}

.ag-grid-chip--forgeandfire {
  background-color: var(--chip-red-bg);
  color: var(--chip-red-text);
}

.ag-grid-chip--gamenerdz {
  background-color: var(--chip-green-bg);
  color: var(--chip-green-text);
}

.ag-grid-chip--manapool {
  background-color: var(--chip-teal-bg);
  color: var(--chip-teal-text);
}

.ag-grid-chip--stompinggrounds {
  background-color: var(--chip-pink-bg);
  color: var(--chip-pink-text);
}

.ag-grid-chip--target {
  background-color: var(--chip-red-bg);
  color: #dc2626;
}

.ag-grid-chip--tcgplayer {
  background-color: var(--chip-indigo-bg);
  color: var(--chip-indigo-text);
}

.ag-grid-chip--walmart {
  background-color: var(--chip-blue-bg);
  color: #1d4ed8;
}

/* ==========================================================================
   6. Action Links
   ========================================================================== */

.ag-grid-actions {
  display: flex;
  gap: 8px;
}

.ag-grid-action-link {
  color: var(--chip-grey-text);
  text-decoration: none;
  font-size: 11px;
}

.ag-grid-action-link:hover {
  color: var(--aa-text-color);
  text-decoration: underline;
}

/* ==========================================================================
   7. Editable Cells
   ========================================================================== */

.ag-theme-alpine .ag-cell-editable {
  cursor: text;
}

.ag-theme-alpine .ag-cell-editable:hover {
  background-color: var(--cell-hover-bg);
}

.ag-theme-alpine .ag-cell-inline-editing {
  background-color: #fff;
  border: 1px solid var(--cell-edit-border) !important;
  border-radius: 2px;
  padding: 0 !important;
}

.ag-theme-alpine .ag-cell-inline-editing input {
  padding: 4px 8px;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

/* Success flash for inline updates */
.ag-theme-alpine .ag-cell-update-success {
  background-color: var(--cell-success-bg);
  transition: background-color 0.3s ease;
}

/* ==========================================================================
   8. Loading State
   ========================================================================== */

.ag-grid-loading-cell {
  color: #9ca3af;
  font-size: 11px;
  font-style: italic;
}
@layer components {
    .highlight .hll { background-color: #49483e }
    .highlight  { background: #272822; color: #f8f8f2 }
    .highlight .c { color: #75715e } /* Comment */
    .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
    .highlight .k { color: #66d9ef } /* Keyword */
    .highlight .l { color: #ae81ff } /* Literal */
    .highlight .n { color: #f8f8f2 } /* Name */
    .highlight .o { color: #f92672 } /* Operator */
    .highlight .p { color: #f8f8f2 } /* Punctuation */
    .highlight .ch { color: #75715e } /* Comment.Hashbang */
    .highlight .cm { color: #75715e } /* Comment.Multiline */
    .highlight .cp { color: #75715e } /* Comment.Preproc */
    .highlight .cpf { color: #75715e } /* Comment.PreprocFile */
    .highlight .c1 { color: #75715e } /* Comment.Single */
    .highlight .cs { color: #75715e } /* Comment.Special */
    .highlight .gd { color: #f92672 } /* Generic.Deleted */
    .highlight .ge { font-style: italic } /* Generic.Emph */
    .highlight .gi { color: #a6e22e } /* Generic.Inserted */
    .highlight .gs { font-weight: bold } /* Generic.Strong */
    .highlight .gu { color: #75715e } /* Generic.Subheading */
    .highlight .kc { color: #66d9ef } /* Keyword.Constant */
    .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
    .highlight .kn { color: #f92672 } /* Keyword.Namespace */
    .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
    .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
    .highlight .kt { color: #66d9ef } /* Keyword.Type */
    .highlight .ld { color: #e6db74 } /* Literal.Date */
    .highlight .m { color: #ae81ff } /* Literal.Number */
    .highlight .s { color: #e6db74 } /* Literal.String */
    .highlight .na { color: #a6e22e } /* Name.Attribute */
    .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
    .highlight .nc { color: #a6e22e } /* Name.Class */
    .highlight .no { color: #66d9ef } /* Name.Constant */
    .highlight .nd { color: #a6e22e } /* Name.Decorator */
    .highlight .ni { color: #f8f8f2 } /* Name.Entity */
    .highlight .ne { color: #a6e22e } /* Name.Exception */
    .highlight .nf { color: #a6e22e } /* Name.Function */
    .highlight .nl { color: #f8f8f2 } /* Name.Label */
    .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
    .highlight .nx { color: #a6e22e } /* Name.Other */
    .highlight .py { color: #f8f8f2 } /* Name.Property */
    .highlight .nt { color: #f92672 } /* Name.Tag */
    .highlight .nv { color: #f8f8f2 } /* Name.Variable */
    .highlight .ow { color: #f92672 } /* Operator.Word */
    .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
    .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
    .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
    .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
    .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
    .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
    .highlight .sa { color: #e6db74 } /* Literal.String.Affix */
    .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
    .highlight .sc { color: #e6db74 } /* Literal.String.Char */
    .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
    .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
    .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
    .highlight .se { color: #ae81ff } /* Literal.String.Escape */
    .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
    .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
    .highlight .sx { color: #e6db74 } /* Literal.String.Other */
    .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
    .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
    .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
    .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
    .highlight .fm { color: #a6e22e } /* Name.Function.Magic */
    .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
    .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
    .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
    .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
    .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
}
/*
 * This is a manifest file that'll be compiled into application.css,
 * which will include all the files listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Mobile Menu Blur Effect */
@layer components {
  .menu-open-blur > *:not(header) {
    filter: blur(3px);
    transition: filter 0.3s ease-in-out;
  }

  .menu-open-blur header {
    filter: none !important;
  }
}