/* SwankageTCG Universal Design System — unified public/dashboard/admin polish */
:root{
  --sw-radius-sm:8px;--sw-radius:12px;--sw-radius-lg:16px;
  --sw-space-1:6px;--sw-space-2:10px;--sw-space-3:14px;--sw-space-4:18px;--sw-space-5:24px;--sw-space-6:32px;
  --sw-control-h:42px;--sw-font-min:10px;
}
html{font-synthesis:none;text-rendering:optimizeLegibility}
body{font-size:max(10px,1em)}
button,input,select,textarea{font:inherit}
/* Product rule: user-facing copy never renders below 10px. */
small{font-size:max(10px,.875em)}
:where(button,.btn,input,select,textarea){border-radius:var(--sw-radius-sm)}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:40px}
:where(.card,.panel,.box,.modal-content){border-radius:var(--sw-radius)}
:where(.btn,button,a){transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
:where(button,.btn):focus-visible,:where(a,input,select,textarea):focus-visible{outline:2px solid var(--sw-accent,var(--swcp-accent,#ff681f));outline-offset:2px}
/* Consistent marketplace tables and form rhythm without replacing page-specific layouts. */
.table>thead>tr>th{font-weight:800;letter-spacing:.015em}
.table>tbody>tr>td,.table>thead>tr>th{vertical-align:middle}
.form-group label{font-weight:700}
.alert{border-radius:var(--sw-radius-sm)}
/* Dashboard/admin share the same visual grammar. */
body.swankage-control-panel{--sw-accent:inherit;--sw-accent2:inherit;--sw-glow:inherit;--sw-bg:inherit;--sw-bg2:inherit;--sw-panel:inherit;--sw-panel2:inherit;--sw-border:inherit;--sw-text:inherit;--sw-muted:inherit}
body.swankage-control-panel .content-wrapper{font-size:13px}
body.swankage-control-panel :where(.box,.card,.modal-content){border-radius:12px;overflow:hidden}
body.swankage-control-panel :where(.btn,button:not(.swcp-mobile-sidebar-toggle)){min-height:36px;font-weight:750}
body.swankage-control-panel .table>thead>tr>th{font-size:11px;text-transform:uppercase;letter-spacing:.055em}
@media(max-width:768px){body.swankage-control-panel input,body.swankage-control-panel select,body.swankage-control-panel textarea{font-size:16px!important}}

/* ========================================================================
   v618 — Theme-safe native dropdown picker polish
   IMPORTANT: this block does not redefine Swankage theme variables and does
   not style navigation, buttons, headers, sidebars, or generic menu shells.
   It only customizes single-value native <select> pickers where supported.
   ======================================================================== */

/* Keep the existing page/theme styling for the CLOSED select.  We only opt
   into Chrome/Edge's customizable picker so the OPEN option list can match
   the already-selected Swankage theme. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size="1"],
  select:not([multiple]):not([size])::picker(select),
  select:not([multiple])[size="1"]::picker(select) {
    appearance: base-select;
    -webkit-appearance: base-select;
  }

  select:not([multiple]):not([size])::picker(select),
  select:not([multiple])[size="1"]::picker(select) {
    color: var(--sw-text, #f5f7f8);
    background: var(--sw-panel, #111d22);
    border: 1px solid var(--sw-border, #2a3a42);
    border-radius: 9px;
    padding: 5px;
    margin-block-start: 4px;
    box-shadow: 0 18px 42px rgba(0,0,0,.46);
  }

  /* Keep the closed-select chevron anchored to the far-right edge instead of
     letting Chrome place it after the selected text on a new/baseline line. */
  select:not([multiple]):not([size]),
  select:not([multiple])[size="1"] {
    /* Bootstrap/form-control rules can force selects back to display:block,
       which drops Chrome's base-select picker icon onto a second line. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  select:not([multiple]):not([size])::picker-icon,
  select:not([multiple])[size="1"]::picker-icon {
    color: var(--sw-accent, currentColor);
    opacity: .9;
    margin-inline-start: auto;
    align-self: center;
    flex: 0 0 auto;
    translate: 0 0;
    transition: rotate .16s ease;
  }

  select:not([multiple]):not([size]):open::picker-icon,
  select:not([multiple])[size="1"]:open::picker-icon {
    rotate: 180deg;
  }

  select:not([multiple]):not([size]) option,
  select:not([multiple])[size="1"] option {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    margin: 0;
    color: var(--sw-text, #f5f7f8);
    background: var(--sw-bg2, #0b1419);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: max(10px, 1em);
    line-height: 1.2;
    cursor: pointer;
  }

  /* Requested exact spacing between each selectable option. */
  select:not([multiple]):not([size]) option + option,
  select:not([multiple])[size="1"] option + option {
    margin-block-start: 3px;
  }

  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus,
  select:not([multiple])[size="1"] option:hover,
  select:not([multiple])[size="1"] option:focus {
    color: var(--sw-text, #fff);
    background: color-mix(in srgb, var(--sw-accent) 18%, var(--sw-panel2, #17242a));
    border-color: color-mix(in srgb, var(--sw-accent) 48%, transparent);
  }

  select:not([multiple]):not([size]) option:checked,
  select:not([multiple])[size="1"] option:checked {
    color: var(--sw-text, #fff);
    font-weight: 800;
    background: color-mix(in srgb, var(--sw-accent) 25%, var(--sw-panel2, #17242a));
    border-color: var(--sw-accent);
  }

  select:not([multiple]):not([size]) option::checkmark,
  select:not([multiple])[size="1"] option::checkmark {
    color: var(--sw-accent, currentColor);
    margin-inline-end: 7px;
  }
}