* {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* One column template, reused per row - edit this to try a different layout
   (e.g. 10rem 1fr 8rem for a three-column split) instead of touching each row. */
.outfits-table-row {
   display: grid;
   grid-template-columns: 256px 1fr;
}

/* Drag-to-rescale sets only the --img-scale value per element (inline custom
   properties are the standard way to pass dynamic data into real CSS) - the
   actual transform rule lives here, not scattered across every img tag. */
.outfit-photo {
   position: relative;
   width: 100%;
   height: 100%;
   /* translate first (outer) so the offset is a constant screen distance
      regardless of the current --img-scale, matching how a drag feels. */
   transform: translate(var(--img-offset-x, 0%), var(--img-offset-y, 0%)) scale(var(--img-scale, 1)) !important;
   transform-origin: center;
}

.outfit-photo-pannable {
   cursor: grab;
   touch-action: none;
}

.outfit-photo-pannable:active {
   cursor: grabbing;
}

.outfit-photo-cover {
   object-fit: cover;
}

.outfit-photo-contain {
   object-fit: contain;
}

.outfit-photo-rounded {
   border-radius: 0.5rem;
}

/* Fades the foreground photo's own edges to transparent so they blend into
   .outfit-photo-backdrop underneath, instead of a hard cutoff between the two.
   Two linear-gradient masks (one per axis), intersected, so all four edges
   fade independently along the rectangle instead of an oval falling inward
   from the corners. */
.outfit-photo-soft-edge {
   --edge-fade: 3%;
   mask-image:
      linear-gradient(to right, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent),
      linear-gradient(to bottom, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent);
   mask-composite: intersect;
   -webkit-mask-image:
      linear-gradient(to right, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent),
      linear-gradient(to bottom, transparent, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent);
   -webkit-mask-composite: source-in;
}

/* Scaled-up, blurred copy of the same photo sitting behind .outfit-photo, so
   shrinking the foreground (--img-scale < 1) or a contain-fit gap reveals a
   soft echo of the image instead of the container's flat background color. */
.outfit-photo-backdrop {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* transform: scale(1.5); */
   filter: blur(16px);
   /* opacity: 0.6; */
}

/* --- Named component classes -----------------------------------------------
   One class per repeated pattern instead of restating 8-10 Tailwind utilities
   every time it's used. Active/inactive state is driven by the data-sl-active
   attribute already threaded through these elements, rather than a JS ternary
   picking between two different utility strings. */

.h2 {
   font-size: 24px;
   line-height: 32px;
   font-weight: 700;
   color: #1f2937;
}

html.dark .h2 {
   color: #f3f4f6;
}

.modal-backdrop {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 50;
   padding: 16px;
}

.card {
   background-color: transparent;
   border-radius: 0;
   box-shadow: none;
   overflow: hidden;
}

.empty {
   text-align: center;
   padding-top: 80px;
   height: 100%;
   padding-bottom: 80px;
   background-color: #fff;
   border-radius: 16px;
   /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); */
   /* border: 2px dashed #d1d5db; */
}

html.dark .empty {
   background-color: #1f2937;
   border-color: #4b5563;
}

.label {
   font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   font-weight: 500;
   color: #6b7280;
}

html.dark .label {
   color: #9ca3af;
}

.chip {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
   border-radius: 8px;
   background-color: #f3f4f6;
   font-size: 14px;
   color: #374151;
}

html.dark .chip {
   background-color: #374151;
   color: #e5e7eb;
}

.segmented {
   display: inline-flex;
   border: 0px solid #d1d5db;
   overflow: hidden;
}

html.dark .segmented {
   border-color: #4b5563;
}

.segmented>*+* {
   border-left: 1px solid #d1d5db;
}

html.dark .segmented>*+* {
   border-left-color: #4b5563;
}

.segmented-opt {
   padding: 6px 16px;
   font-size: 14px;
   font-weight: 500;
   background-color: #fff;
   color: #4b5563;
   cursor: pointer;
   border: none;
   border-bottom: 3px solid transparent;
   border-radius: 0px;
}

.segmented-opt:hover {
   background-color: #f9fafb;
}

html.dark .segmented-opt {
   background-color: #1f2937;
   color: #d1d5db;
}

html.dark .segmented-opt:hover {
   background-color: #374151;
}

.segmented-opt[data-sl-active="true"] {
   /* background-color: #1f2937; */
   /* color: #fff; */
   border-bottom: 3px solid black;
}

html.dark .segmented-opt[data-sl-active="true"] {
   background-color: #4b5563;
}

/* Owned/Wanted/In-wardrobe style toggles - unifies what used to be two visually
   different treatments (an outline pill in Pieces, a filled green/purple pill in
   the outfit modal) into one consistent look. */
.status-pill {
   padding: 5px 10px;
   font-size: 12px;
   border-radius: 328px;
   border: 1px solid #d1d5db;
   color: #6b7280;
   background: transparent;
   height: 31px!important;
   cursor: pointer;
   display: flex;
   gap: 5px;
   align-items: center;
   white-space: nowrap;
}

.status-pill:hover {
   border-color: #9ca3af;
}

html.dark .status-pill {
   border-color: #4b5563;
   color: #9ca3af;
}

html.dark .status-pill:hover {
   border-color: #6b7280;
}

.status-pill[data-sl-active="true"] {
   border-color: #16a34938;
   color: #111827;
   font-weight: 600;
}

html.dark .status-pill[data-sl-active="true"] {
   border-color: #e5e7eb;
   color: #f3f4f6;
}

button{
       border-radius: 4px;
}
.btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   font-weight: 600;
   color: #fff;
   background-color: #2563eb;
   cursor: pointer;
   border: none;
   /* border-radius: 4px; */
}

.btn-primary:hover {
   background-color: #1d4ed8;
}

.btn-primary[data-sl-variant="danger"] {
   background-color: #dc2626;
}

.btn-primary[data-sl-variant="danger"]:hover {
   background-color: #b91c1c;
}

/* Pieces in the search dropdown - inline-block chips that wrap, rather than a
   one-per-line list. Edit this one rule to restyle every piece result at once. */
.search-piece-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
   border-radius: 9999px;
   background-color: #f3f4f6;
   font-size: 14px;
   color: #374151;
   cursor: pointer;
   border: none;
   max-width: 100%;
}

.search-piece-chip:hover {
   background-color: #e5e7eb;
}

html.dark .search-piece-chip {
   background-color: #374151;
   color: #e5e7eb;
}

html.dark .search-piece-chip:hover {
   background-color: #4b5563;
}

/* Outfit results in the search dropdown - edit columns/gap here to resize the grid. */
.search-outfit-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
}



.color-row > div {
    width: 100%;
    display: flex;
    flex-grow: 1;
    /* width: 42px; */
    /* height: 100%; */
    /* justify-content: space-between; */
}

.color-row-container {
    display: flex;
    flex-direction: column;
}

.color-row {
    border-width: 0px;
    border-bottom-width: 1px;
    margin: 0px!important;
    padding: 1em 0;
    display: flex;
    width: 100%;
    border: 0;
    align-items: center;
}

.color-swatch {
    width: 42px;
    height: 42px;
    border-radius: 11px!important;
    border: 4px solid #ffffff;
}

.color-row + .color-row {
   border-top: 1px solid #e5e7eb;
} 

header button, header label {
    border-radius: 8px;
}

.main-bar {
    margin: 0em 0 3em 0!important;
}