/* ==========================================================================
   Users management grid — desktop presentation
   --------------------------------------------------------------------------
   Scoped to #jsAdminUsersMgmntGrid and the page header around it, so nothing
   here can leak into the other five jsGrid instances.

   Loaded after style.css / original-style.css, which render header cells at
   0.8em with border-style: hidden — the reason the grid appeared to have no
   column headings at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.kp-page-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   margin: 8px 0 18px;
   padding-bottom: 14px;
   border-bottom: 1px solid #e3e6ea;
}

.kp-page-title {
   margin: 0;
   font-size: 26px;
   font-weight: 700;
   line-height: 1.2;
   color: #1f2933;
}

.kp-page-subtitle {
   margin: 4px 0 0;
   font-size: 14px;
   color: #6b7280;
}

.kp-page-hint {
   margin: 0;
   font-size: 12.5px;
   color: #9aa3ad;
}

/* --------------------------------------------------------------------------
   Grid shell
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid {
   width: 100% !important;
   border: 1px solid #e3e6ea;
   border-radius: 8px;
   overflow: hidden;
   background: #fff;
   font-size: 14px;
}

#jsAdminUsersMgmntGrid .jsgrid-grid-header,
#jsAdminUsersMgmntGrid .jsgrid-grid-body {
   border: 0;
}

/* --------------------------------------------------------------------------
   Header row — the main fix. Undoes the 0.8em / hidden-border treatment.
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid .jsgrid-header-row > .jsgrid-header-cell {
   border-style: solid !important;
   border-width: 0 0 1px 0 !important;
   border-color: #d8dde3 !important;
   background: #f6f8fa;
   padding: 11px 12px;
   font-size: 12px !important;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: #55606b;
   text-align: left;
}

/* The ID column reads better centred; it is a label, not a quantity. */
#jsAdminUsersMgmntGrid .jsgrid-header-row > .jsgrid-header-cell:first-child {
   text-align: center;
}

#jsAdminUsersMgmntGrid .jsgrid-header-sortable:hover {
   background: #eef1f5;
   cursor: pointer;
}

#jsAdminUsersMgmntGrid .jsgrid-header-sort:after {
   opacity: .75;
}

/* --------------------------------------------------------------------------
   Filter row
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid .jsgrid-filter-row > td {
   background: #fbfcfd;
   border-bottom: 1px solid #e3e6ea !important;
   padding: 7px 8px;
}

#jsAdminUsersMgmntGrid .jsgrid-filter-row input,
#jsAdminUsersMgmntGrid .jsgrid-filter-row select {
   width: 100%;
   box-sizing: border-box;
   padding: 6px 8px;
   border: 1px solid #d5dae0;
   border-radius: 5px;
   font-size: 13px;
   background: #fff;
}

#jsAdminUsersMgmntGrid .jsgrid-filter-row input:focus {
   outline: none;
   border-color: #2b7cd3;
   box-shadow: 0 0 0 3px rgba(43, 124, 211, .12);
}

/* --------------------------------------------------------------------------
   Body rows — left-align text so the eye has an edge to scan down. Centred
   columns were the single biggest readability problem in the old layout.
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid .jsgrid-row > td,
#jsAdminUsersMgmntGrid .jsgrid-alt-row > td {
   border: 0 !important;
   border-bottom: 1px solid #eef1f4 !important;
   padding: 10px 12px;
   text-align: left;
   vertical-align: middle;
   color: #263238;
}

#jsAdminUsersMgmntGrid .jsgrid-alt-row > td {
   background: #fafbfc;
}

/* ID: centred, muted, tabular so digits line up. */
#jsAdminUsersMgmntGrid td.td1-cls {
   text-align: center;
   color: #7b8794;
   font-variant-numeric: tabular-nums;
}

/* Site name is the row's identity. */
#jsAdminUsersMgmntGrid td.td2-cls {
   font-weight: 600;
   color: #1f2933;
}

/* Shop URL and email are identifiers — monospace makes near-identical
   myshopify subdomains distinguishable at a glance. */
#jsAdminUsersMgmntGrid td.td3-cls,
#jsAdminUsersMgmntGrid td.td4-cls {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12.5px;
   color: #4a5560;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 240px;
}

/* Rows are interactive but nothing said so. */
#jsAdminUsersMgmntGrid .jsgrid-row,
#jsAdminUsersMgmntGrid .jsgrid-alt-row {
   cursor: pointer;
   transition: background-color .12s ease;
}

#jsAdminUsersMgmntGrid .jsgrid-row:hover > td,
#jsAdminUsersMgmntGrid .jsgrid-alt-row:hover > td {
   background: #f0f6fd;
}

/* Selected row — was a thin green outline, easy to miss. */
#jsAdminUsersMgmntGrid td.selected {
   background: #e7f1fd !important;
   box-shadow: inset 0 0 0 9999px rgba(43, 124, 211, .04);
}

#jsAdminUsersMgmntGrid td.td1-cls.selected {
   box-shadow: inset 3px 0 0 0 #2b7cd3;
   color: #1f2933;
   font-weight: 700;
}

/* --------------------------------------------------------------------------
   Status badge
   -------------------------------------------------------------------------- */
.kp-badge {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 999px;
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: .02em;
   white-space: nowrap;
   border: 1px solid transparent;
}

.kp-badge--ok {
   background: #e6f4ea;
   border-color: #b7e0c2;
   color: #1a7f37;
}

.kp-badge--warn {
   background: #fdf0e3;
   border-color: #f3d3a8;
   color: #9a5b06;
}

/* --------------------------------------------------------------------------
   Paging
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid .jsgrid-pager-container {
   padding: 12px;
   border-top: 1px solid #e3e6ea;
   background: #fbfcfd;
   text-align: center;
   font-size: 13px;
}

#jsAdminUsersMgmntGrid .jsgrid-pager-page,
#jsAdminUsersMgmntGrid .jsgrid-pager-nav-button {
   display: inline-block;
   min-width: 30px;
   padding: 5px 9px;
   margin: 0 2px;
   border-radius: 5px;
   text-decoration: none;
   color: #37474f;
}

#jsAdminUsersMgmntGrid .jsgrid-pager-page:hover,
#jsAdminUsersMgmntGrid .jsgrid-pager-nav-button:hover {
   background: #eef1f5;
}

#jsAdminUsersMgmntGrid .jsgrid-pager-current-page {
   background: #2b7cd3;
   color: #fff;
   font-weight: 700;
}

/* --------------------------------------------------------------------------
   Phone — the card layout in admin-mobile.css takes over below 600px.
   These are the bits specific to the header and the new status cell.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {

   .kp-page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin-bottom: 12px;
   }

   .kp-page-title {
      font-size: 21px;
   }

   .kp-page-hint {
      display: none; /* no hover or double-click on a touch screen */
   }

   #jsAdminUsersMgmntGrid {
      border: 0;
      background: transparent;
   }

   /* Filter row stays useful on a phone, but the card layout hides the
      header table it lives in — keep it visible and stacked. */
   #jsAdminUsersMgmntGrid .jsgrid-grid-header {
      display: block !important;
   }

   #jsAdminUsersMgmntGrid .jsgrid-header-row {
      display: none !important;
   }

   #jsAdminUsersMgmntGrid .jsgrid-filter-row {
      display: flex !important;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 0;
   }

   #jsAdminUsersMgmntGrid .jsgrid-filter-row > td {
      flex: 1 1 46%;
      display: block;
      border: 0 !important;
      padding: 0 !important;
      background: transparent;
   }

   /* Monospace at 12.5px is hard to read on a phone. */
   #jsAdminUsersMgmntGrid td.td3-cls,
   #jsAdminUsersMgmntGrid td.td4-cls {
      font-family: inherit;
      font-size: 15px;
      max-width: 100%;
   }
}

/* --------------------------------------------------------------------------
   Active-filter banner (product admin page)
   -------------------------------------------------------------------------- */
.kp-active-filter {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin: 12px auto 0;
   padding: 9px 14px;
   max-width: 900px;
   border: 1px solid #f3d3a8;
   border-radius: 6px;
   background: #fdf6ec;
   color: #8a5205;
   font-size: 13.5px;
}

.kp-active-filter-clear {
   border: 1px solid #d9b273;
   background: #fff;
   color: #8a5205;
   border-radius: 5px;
   padding: 4px 12px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   min-height: 32px;
}

.kp-active-filter-clear:hover {
   background: #f7ead6;
}

@media (max-width: 600px) {
   .kp-active-filter {
      margin: 10px 8px 0;
      font-size: 14px;
   }
   .kp-active-filter-clear {
      min-height: 44px;
      flex: 1 1 100%;
   }
}

/* --------------------------------------------------------------------------
   Grid message — states why the product grid is empty
   -------------------------------------------------------------------------- */
.kp-grid-message {
   margin: 12px auto 0;
   padding: 11px 14px;
   max-width: 900px;
   border: 1px solid #f0b7b7;
   border-radius: 6px;
   background: #fdeded;
   color: #8a1c1c;
   font-size: 14px;
   text-align: left;
}

@media (max-width: 600px) {
   .kp-grid-message { margin: 10px 8px 0; }
}

/* --------------------------------------------------------------------------
   Product admin toolbar — search, filter, sort, record count
   The controls were four bare inline-blocks with browser-default selects.
   -------------------------------------------------------------------------- */
.kp-toolbar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px 14px;
   margin: 4px auto 14px;
   padding: 10px 14px;
   max-width: 1100px;
   border: 1px solid #e3e6ea;
   border-radius: 8px;
   background: #fbfcfd;
   text-align: left;
}

.kp-toolbar-btn {
   padding: 7px 16px;
   border: 1px solid #2b7cd3;
   border-radius: 6px;
   background: #2b7cd3;
   color: #fff;
   font-size: 13.5px;
   font-weight: 600;
   cursor: pointer;
   min-height: 36px;
}

.kp-toolbar-btn:hover  { background: #2569b4; border-color: #2569b4; }
.kp-toolbar-btn:active { transform: translateY(1px); }

.kp-toolbar-field {
   display: flex;
   align-items: center;
   gap: 7px;
}

.kp-toolbar-field label {
   margin: 0;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: #6b7280;
   white-space: nowrap;
}

.kp-toolbar-field select {
   padding: 6px 30px 6px 10px;
   border: 1px solid #d5dae0;
   border-radius: 6px;
   background-color: #fff;
   /* Chevron drawn inline so no image request is needed. */
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2355606b' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 10px;
   -webkit-appearance: none;
   appearance: none;
   font-size: 13.5px;
   color: #263238;
   min-height: 36px;
   cursor: pointer;
}

.kp-toolbar-field select:focus {
   outline: none;
   border-color: #2b7cd3;
   box-shadow: 0 0 0 3px rgba(43, 124, 211, .12);
}

/* Count sits at the far end, reading as the result of the controls before it. */
.kp-record-count {
   margin-left: auto;
   padding: 5px 12px;
   border-radius: 999px;
   background: #eef1f5;
   color: #46525e;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
}

.kp-record-count:empty { display: none; }

.kp-record-count--empty {
   background: #fdf0e3;
   color: #9a5b06;
}

@media (max-width: 700px) {
   .kp-toolbar {
      margin: 4px 8px 12px;
      padding: 10px;
      gap: 8px;
   }
   .kp-toolbar-btn,
   .kp-toolbar-field { flex: 1 1 100%; }
   .kp-toolbar-field select { flex: 1; min-height: 44px; }
   .kp-toolbar-btn { min-height: 44px; }
   .kp-record-count {
      margin-left: 0;
      flex: 1 1 100%;
      text-align: center;
   }
}

/* --------------------------------------------------------------------------
   Search box
   -------------------------------------------------------------------------- */
.kp-users-tools {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 6px;
}

.kp-search-wrap {
   position: relative;
   display: inline-block;
}

.kp-search {
   width: 280px;
   max-width: 100%;
   padding: 8px 30px 8px 12px;
   border: 1px solid #d5dae0;
   border-radius: 6px;
   font-size: 14px;
   background: #fff;
   box-sizing: border-box;
}

.kp-search:focus {
   outline: none;
   border-color: #2b7cd3;
   box-shadow: 0 0 0 3px rgba(43, 124, 211, .12);
}

.kp-search-clear {
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   border: 0;
   background: transparent;
   color: #9aa3ad;
   font-size: 19px;
   line-height: 1;
   cursor: pointer;
   padding: 0 4px;
}

.kp-search-clear:hover { color: #46525e; }

/* --------------------------------------------------------------------------
   Header and filter row must be visible — this is where sorting is triggered.
   style.css sets .jsgrid-header-cell to 0.8em with border-style: hidden, and
   the grid rendered with a blank strip where the headings should be.
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid .jsgrid-grid-header {
   display: block !important;
   visibility: visible !important;
   background: #f6f8fa;
}

#jsAdminUsersMgmntGrid .jsgrid-header-row,
#jsAdminUsersMgmntGrid .jsgrid-filter-row {
   display: table-row !important;
   visibility: visible !important;
}

#jsAdminUsersMgmntGrid .jsgrid-header-row > .jsgrid-header-cell {
   display: table-cell !important;
   visibility: visible !important;
   height: auto !important;
   color: #55606b !important;
   font-size: 12px !important;
}

/* Sortable columns should look sortable. */
#jsAdminUsersMgmntGrid .jsgrid-header-sortable {
   cursor: pointer;
   user-select: none;
}

#jsAdminUsersMgmntGrid .jsgrid-header-sortable:after {
   content: " \2195";
   opacity: .35;
   font-size: 11px;
}

#jsAdminUsersMgmntGrid .jsgrid-header-sort-asc:after  { content: " \2191"; opacity: .9; }
#jsAdminUsersMgmntGrid .jsgrid-header-sort-desc:after { content: " \2193"; opacity: .9; }

@media (max-width: 700px) {
   .kp-users-tools { align-items: stretch; width: 100%; }
   .kp-search { width: 100%; }
}

/* --------------------------------------------------------------------------
   Column alignment
   --------------------------------------------------------------------------
   jsGrid renders the heading, the filter row and the body as three separate
   tables. They only line up if all three use the same layout and the same
   column widths — otherwise each sizes itself to its own content and the
   headings sit over the wrong columns, which is what was happening: the body
   was inset by roughly 100px from its heading.

   Percentages rather than pixels so the five columns always total 100% of the
   container at any width.
   -------------------------------------------------------------------------- */
#jsAdminUsersMgmntGrid .jsgrid-grid-header,
#jsAdminUsersMgmntGrid .jsgrid-grid-body {
   width: 100% !important;
   overflow-x: hidden;
}

#jsAdminUsersMgmntGrid .jsgrid-table {
   width: 100% !important;
   min-width: 0 !important;
   table-layout: fixed !important;
   margin: 0;
}

/* One width per column, applied to heading cells, filter cells and body cells
   alike. nth-child is used rather than the td1-cls classes because the heading
   and filter rows do not carry those classes. */
#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > th:nth-child(1),
#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(1) { width: 7% !important; }

#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > th:nth-child(2),
#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(2) { width: 22% !important; }

#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > th:nth-child(3),
#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(3) { width: 25% !important; }

#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > th:nth-child(4),
#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(4) { width: 28% !important; }

#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > th:nth-child(5),
#jsAdminUsersMgmntGrid .jsgrid-table > tbody > tr > td:nth-child(5) { width: 18% !important; }

/* With table-layout: fixed, long shop URLs and emails must be told to clip. */
#jsAdminUsersMgmntGrid .jsgrid-row > td,
#jsAdminUsersMgmntGrid .jsgrid-alt-row > td {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* The selected-row outline previously sat inside the row and made it look
   inset. Applied to the cells so it spans the full row width. */
#jsAdminUsersMgmntGrid .jsgrid-selected-row-border-class > td {
   border-top: 1px solid #2b7cd3 !important;
   border-bottom: 1px solid #2b7cd3 !important;
}

/* Filter row inputs should fill their column, and the ID spinner is noise. */
#jsAdminUsersMgmntGrid .jsgrid-filter-row input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;
}
#jsAdminUsersMgmntGrid .jsgrid-filter-row input[type="number"]::-webkit-outer-spin-button,
#jsAdminUsersMgmntGrid .jsgrid-filter-row input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}