html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

input, select, textarea {
    font-size: 16px;
}

* {
    touch-action: manipulation;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body .layout {
  display: grid;
  grid-template-columns: 18rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "nav main";
  height: 100vh;
  margin: 0;
}

header {
  grid-area: header;
  border-bottom: 1px solid #dee2e6;
  position: sticky;
  top: env(safe-area-inset-top, 0);
  background-color: #fff;
  z-index: 1000;
}

header .brand-header {
  font-size: 1.5rem;
  padding: calc(1rem + env(safe-area-inset-top, 0)) 1.5rem 1rem 1.5rem;
  font-weight: bold;
}

nav {
  grid-area: nav;
  
}

.sidebar a {
	color: inherit;
	text-decoration: none;
	display: block;
	padding: 0.75rem 2rem;
	cursor: pointer;
	font-weight:500;
}

.sidebar-header{

	padding: 0.75rem 2rem 2rem;
	font-size: 1.25rem;
	font-weight:500;
}

.sidebar a.active {
  background-color: #EFF6FF;
  color: #2563EB;
}

main {
  grid-area: main;
  padding: 2rem;
  overflow-y: auto;
  background-color: #F9FAFB;
}

main .content 
{
	padding: 2rem;
	background-color: white;
	border-radius: 0.5rem;
	border: 1px solid #dee2e6;
	max-width: 1320px;
	margin-bottom: calc(3rem + env(safe-area-inset-bottom));
}

.border-box { 
	border: 1px solid #dee2e6; 
	border-radius: 0.5rem;
	padding: 2rem;
	height: 100%;
}

.btn-primary { 
	color: #fff; 
	background-color: #2563EB; 
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;	
}

.btn-primary.hover { 
	color: #fff; 
	background-color: #258cfb; 
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;	
}

.btn-secondary { 
	color: #384251; 
	background-color: #F3F4F6; 
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	border-color: #F3F4F6;
}

.btn-complete 
{
	color: #fff;
	background-color: #2ecc71;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

.form-label {
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 4px;
	display: block;
}

.form-control {
	padding: .75rem 1rem;
}

.table>:not(caption)>*>* {
  padding: 0.25rem 0 !important;
}

/* Sidebar collapse */
.sidebar.collapsed {
    width: 0;
    overflow: hidden;
    padding: 0;
}

body .layout.sidebar-collapsed {
    grid-template-columns: 0 1fr;
}

.sidebar {
    transition: width 0.3s ease-in-out;
}

body .layout {
    transition: grid-template-columns 0.3s ease-in-out;
}

@media (max-width: 991px) {
  body .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -18rem;
    width: 18rem;
    height: 100%;
    z-index: 1040;
    transition: left 0.3s ease-in-out;
	background-color: white;
  }

  .sidebar.show {
    left: 0;
  }

  .welcome-message 
  {
	display:none;
  }

  .sidebar .close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: #333;
  }

  .sidebar .close-btn-container {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
  }

  .sidebar {
      position: fixed;
      top: 0;
      left: -18rem;
      width: 18rem;
      height: 100%;
      z-index: 1040;
      transition: left 0.3s ease-in-out;
      background-color: white;
      overflow-y: auto;
  }

  .sidebar.show {
      left: 0;
  }

  /* Make sure main content always takes full width on mobile */
  body .layout {
      grid-template-columns: 1fr !important;
      grid-template-areas:
          "header"
          "main" !important;
  }

}
/* ─── Review item table ──────────────────────────────────────────────────── */
/* Spaced card rows: each row reads as its own block. border-collapse must be
   separate for border-spacing to apply, so borders are set per-cell — the first
   and last cell carry the outer edges and the rounding. */
.review-item-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 6px;
}

/* Bootstrap paints every .table cell with an inset shadow the full size of the
   cell, which sits on top of our background and hides the rounded corners.
   Neutralising it here is what makes the card rows visible at all. */
.review-item-table > :not(caption) > * > * {
    box-shadow: none !important;
    background-color: transparent;
    padding: 0.75rem 0.9rem !important;
}

.review-item-table thead th {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
}

.review-item-table tbody td {
    vertical-align: middle;
    text-align: center !important;
    background-color: #fff !important;
    border-top: 1px solid #E5E7EB !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-left: none;
    border-right: none;
}
.review-item-table tbody td:first-child {
    border-left: 1px solid #E5E7EB !important;
    border-radius: 8px 0 0 8px;
}
.review-item-table tbody td:last-child {
    border-right: 1px solid #E5E7EB !important;
    border-radius: 0 8px 8px 0;
}
.review-item-table tbody tr:hover td { background-color: #FAFBFC !important; }

.review-item-table .col-imgs   { width: 18%; }
.review-item-table .col-card   { width: 36%; }
.review-item-table .col-type   { width: 12%; }
.review-item-table .col-fee    { width: 8%; }
.review-item-table .col-status { width: 17%; }
.review-item-table .col-edit   { width: 9%; }

/* Fixed-layout tables don't shrink their contents, so the thumbnails have to be
   told to give up width themselves — 72px is the ceiling, not a fixed size.
   overflow:hidden is the backstop that keeps anything from crossing the border. */
.review-item-table tbody td.cell-imgs {
    overflow: hidden;
}
.review-item-table .cell-imgs .d-flex {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}
.review-item-table .table-img {
    width: 72px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(50% - 0.125rem);
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.review-item-table .table-img:hover { border-color: #2563EB; }

/* Card identity — name on top, set underneath. */
.cell-card-name {
    font-size: 0.875rem;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cell-card-sub {
    font-size: 0.75rem;
    color: #6B7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* ─── Type pill ──────────────────────────────────────────────────────────── */
.type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.type-pill img { height: 0.95rem; width: auto; }
.type-pill i { font-size: 0.8rem; }
.type-pill-graded { background-color: #EEEDFE; color: #3C3489; }
.type-pill-raw    { background-color: #F3F4F6; color: #4B5563; }

/* min-width keeps GOOD and NEEDS REVIEW the same size so the column doesn't
   jitter down a long list — but it's a floor, not a demand for space, so
   max-width lets it give way rather than pushing into the Edit column. */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 7.25rem;
    max-width: 100%;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    font-family: inherit;
    border: 1px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Passive — it shouldn't compete for attention across a long list. */
.status-badge-good {
    background-color: #ECFDF3;
    color: #067647;
    border-color: #ABEFC6;
}
/* A button, not a span — clicking it opens the cert verification modal. */
button.status-badge-review {
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: #fff;
    background-color: #DE2B1E;
    border-color: #DE2B1E;
}
button.status-badge-review:hover {
    background-color: #B42318;
    border-color: #B42318;
}
button.status-badge-review:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.18);
}

button.card-details-btn {
    padding: 10px !important;
    color: #384251;
    font-weight: 700;
    text-decoration: none !important;
}
canvas.ocr-crop-preview { max-width: 100%; }
#trackingCrop { max-width: 48%; }

/* Left-aligned: centring ragged title lengths makes the column harder to scan
   than a straight left edge. Needs !important to beat the centring above. */
.review-item-table tbody td.cell-card { text-align: left !important; }
.review-item-table thead th.col-card  { text-align: left !important; }

/* ─── Tablet / small laptop: shrink before stacking ──────────────────────── */
/* The Card column is the one that can absorb loss, so it gives up width last.
   Below this the thumbnails and the status badge are what force the stack. */
@media (max-width: 991.98px) {
    .review-item-table > :not(caption) > * > * {
        padding: 0.6rem 0.6rem !important;
    }
    .review-item-table .col-imgs   { width: 18%; }
    .review-item-table .col-card   { width: 25%; }
    .review-item-table .col-type   { width: 17%; }
    .review-item-table .col-fee    { width: 7%; }
    .review-item-table .col-status { width: 24%; }
    .review-item-table .col-edit   { width: 10%; }

    .review-item-table .table-img { width: 56px; }
    .status-badge {
        min-width: 0;
        padding: 0.4rem 0.55rem;
        font-size: 0.7rem;
    }
    .review-item-table tbody td.cell-needsReview { overflow: hidden; }
}

/* ─── Phone: one field per row ───────────────────────────────────────────── */
/* At this width the Card column can no longer hold 150px alongside five other
   columns, so the table breaks into stacked blocks. Labels come from ::before
   rather than data-label attributes so the Razor markup stays unchanged. */
@media (max-width: 645px) {
    main { padding: 1rem 0.75rem; }
    main .content { padding: 1rem; }
    .border-box { padding: 1rem; }
}

@media (max-width: 645px) {
    .review-item-table,
    .review-item-table tbody,
    .review-item-table tr,
    .review-item-table td {
        display: block;
        width: 100%;
    }

    .review-item-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .review-item-table { border-spacing: 0; }

    .review-item-table tbody tr {
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        background-color: #fff;
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    .review-item-table tbody td,
    .review-item-table tbody td:first-child,
    .review-item-table tbody td:last-child {
        border: none !important;
        border-radius: 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right !important;
        padding: 0.65rem 0.9rem !important;
        min-height: 2.75rem;
    }

    /* Hairline between fields, but not under the last one. */
    .review-item-table tbody td + td {
        border-top: 1px solid #F3F4F6 !important;
    }

    .review-item-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #9CA3AF;
        text-align: left;
    }

    .review-item-table tbody td.cell-imgs::before   { content: "Images"; }
    .review-item-table tbody td.cell-card::before   { content: "Card"; }
    .review-item-table tbody td.cell-type::before   { content: "Type"; }
    .review-item-table tbody td.cell-fee::before    { content: "Fee"; }
    .review-item-table tbody td.cell-needsReview::before { content: "Verified"; }
    .review-item-table tbody td.cell-edit::before   { content: "Edit"; }

    /* Images get the full row width — they're the anchor for identifying the
       card, so they're worth more space than a label/value pair. */
    .review-item-table tbody td.cell-imgs {
        display: block;
        padding: 0.75rem 0.9rem !important;
        background-color: #FAFBFC !important;
    }
    .review-item-table tbody td.cell-imgs::before {
        display: block;
        margin-bottom: 0.5rem;
    }
    .review-item-table .cell-imgs .d-flex {
        gap: 0.5rem !important;
    }
    .review-item-table .table-img {
        width: auto;
        flex: 0 1 auto;
        max-width: calc(50% - 0.25rem);
        max-height: 140px;
        object-fit: contain;
        object-position: center;
    }

    /* The title is the one field allowed to wrap — truncating it to an ellipsis
       on a phone hides the only thing that distinguishes two rows. */
    .review-item-table tbody td.cell-card {
        display: block;
        text-align: left !important;
    }
    .review-item-table tbody td.cell-card::before {
        display: block;
        margin-bottom: 0.25rem;
    }
    .cell-card-name,
    .cell-card-sub {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    .cell-card-name { font-size: 0.9375rem; line-height: 1.35; }

    .status-badge {
        min-width: 0;
        font-size: 0.75rem;
        padding: 0.45rem 0.7rem;
    }
    .review-item-table tbody td.cell-edit .edit-item-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 1rem;
    }

    .analyzing-placeholder { min-width: 6rem; }
}

.item-table{
  border: none !important;
}