/*
 * vue2-excel-grid — Dark Mode Theme
 *
 * Usage:
 *   import 'vue2-excel-grid/src/excel-grid.css'
 *
 *   <div color="darkMode">
 *     <excel-grid v-model="data" :columns="cols" />
 *   </div>
 *
 * Or directly on the wrapper element:
 *   <div color="darkMode" style="height:500px">
 *     <excel-grid ... />
 *   </div>
 */

[color="darkMode"] .eg-wrapper {

  /* ── Typography ─────────────────────────────────────────── */
  --eg-font-family:             'Calibri', 'Segoe UI', Arial, sans-serif;
  --eg-font-size:               14px;
  --eg-font-size-header:        11px;
  --eg-radius:                  0px;
  --eg-cell-padding-x:          3px;

  /* ── Accent (Excel green → lighter for dark bg) ─────────── */
  --eg-color-accent:            #4aba7c;
  --eg-color-accent-dark:       #2d9e5c;
  --eg-color-accent-soft:       rgba(74, 186, 124, 0.2);

  /* ── Error / Validation ──────────────────────────────────── */
  --eg-color-error:             #f87171;
  --eg-color-error-soft:        #2d0f0f;
  --eg-color-error-dark:        #fca5a5;

  /* ── Shadows ─────────────────────────────────────────────── */
  --eg-shadow-dropdown:         1px 2px 10px rgba(0, 0, 0, 0.55);
  --eg-shadow-dialog:           0 2px 16px rgba(0, 0, 0, 0.65);
  --eg-shadow-tooltip:          0 1px 5px rgba(0, 0, 0, 0.55);
  --eg-color-freeze-shadow:     rgba(0, 0, 0, 0.45);

  /* ── Borders ─────────────────────────────────────────────── */
  --eg-color-border:            #3d3d3d;
  --eg-color-border-cell:       #2a2a2a;
  --eg-color-border-strong:     #555555;

  /* ── Headers ─────────────────────────────────────────────── */
  --eg-color-header-bg:         #252525;
  --eg-color-header-group-bg:   #252525;
  --eg-color-group-border:      #2d9e5c;
  --eg-color-group-bg-collapsed:#217346;

  /* ── Cell states ─────────────────────────────────────────── */
  --eg-color-cell-bg:                #1e1e1e;
  --eg-color-cell-selected:          #1a3d2a;
  --eg-color-cell-fill-preview:      #145022;
  --eg-color-cell-readonly:          #171717;
  --eg-color-cell-readonly-selected: #163020;
  --eg-color-footer-bg:              #1a1a1a;

  /* ── Row effects ─────────────────────────────────────────── */
  --eg-color-row-hover:         #242f27;
  --eg-color-row-stripe:        #1a1a1a;

  /* ── Dropdown / Select ───────────────────────────────────── */
  --eg-color-option-hover-bg:        #1e3a28;
  --eg-color-option-active-hover-bg: #1a4d30;
  --eg-color-overlay-bg:             rgba(18, 18, 18, 0.92);

  /* ── Checkbox ────────────────────────────────────────────── */
  --eg-color-checkbox-border:           #6e6e6e;
  --eg-color-checkbox-disabled-checked: #404040;

  /* ── Text ────────────────────────────────────────────────── */
  --eg-color-text:              #d4d4d4;
  --eg-color-text-secondary:    #a0a0a0;
  --eg-color-text-muted:        #6e6e6e;
}

/* Scrollbar styling for dark mode */
[color="darkMode"] .eg-scroll-body::-webkit-scrollbar,
[color="darkMode"] .eg-main-cells::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[color="darkMode"] .eg-scroll-body::-webkit-scrollbar-track,
[color="darkMode"] .eg-main-cells::-webkit-scrollbar-track {
  background: #1e1e1e;
}

[color="darkMode"] .eg-scroll-body::-webkit-scrollbar-thumb,
[color="darkMode"] .eg-main-cells::-webkit-scrollbar-thumb {
  background: #3d3d3d;
  border-radius: 0;
}

[color="darkMode"] .eg-scroll-body::-webkit-scrollbar-thumb:hover,
[color="darkMode"] .eg-main-cells::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

[color="darkMode"] .eg-scroll-body::-webkit-scrollbar-corner,
[color="darkMode"] .eg-main-cells::-webkit-scrollbar-corner {
  background: #1e1e1e;
}