/* =========================================================================
   Thrift & Resale Tracker — "Swing Tag" theme
   Visual language borrowed from actual thrift-store price tags: punched
   grommet holes, a hanging rail for navigation, tabular mono numbers like
   a receipt, and a stamped-label treatment for section headers.
   ========================================================================= */

#thrift-tracker-app {
    --tt-canvas: #EFE8D8;      /* aged canvas / manila background */
    --tt-cream: #FBF7EC;       /* card surface, lighter than canvas */
    --tt-ink: #26333A;         /* near-black ink for body text */
    --tt-ink-soft: #5B6B66;    /* secondary text */
    --tt-forest: #3F5D4B;      /* primary interactive color */
    --tt-forest-dark: #2E4638; /* pressed/hover */
    --tt-mustard: #D9A63E;     /* accent — string, focus ring, highlights */
    --tt-mustard-dark: #B9862A;
    --tt-rust: #A23B2E;        /* stamped warnings / delete */
    --tt-rust-soft: #F3DAD3;
    --tt-sage-soft: #E1EAE0;   /* success/ok backgrounds */
    --tt-line: #D9CDAF;        /* warm hairline borders */
    --tt-shadow: 0 3px 10px rgba(38, 51, 58, 0.14);

    max-width: 720px;
    margin: 0 auto;
    background: var(--tt-canvas);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--tt-ink);
    padding-bottom: 60px;
    -webkit-font-smoothing: antialiased;
}

#thrift-tracker-app *:focus-visible {
    outline: 2px solid var(--tt-mustard);
    outline-offset: 2px;
}

.tt-locked {
    max-width: 420px;
    margin: 40px auto;
    text-align: center;
    padding: 24px 20px;
    background: var(--tt-cream);
    border: 1px solid var(--tt-line);
    border-radius: 4px;
    box-shadow: var(--tt-shadow);
}
.tt-locked p { color: var(--tt-ink); font-family: 'Fraunces', Georgia, serif; font-size: 16px; }
.tt-locked #loginform p { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; text-align: left; }
.tt-locked input[type="text"],
.tt-locked input[type="password"] {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--tt-line);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    background: #fff;
}
.tt-locked #wp-submit {
    margin-top: 10px;
    min-height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    background: var(--tt-forest);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Tab rail — the signature element. Tabs hang off a horizontal rail like
   swing tags on a garment rack rail; the active tab "flips forward" with a
   lift + slight rotation, as if it's the one currently turned toward you.
   ------------------------------------------------------------------------- */
.tt-tabs {
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: calc(22px + env(safe-area-inset-top)) 14px 12px;
    position: sticky;
    top: 0;
    background: var(--tt-canvas);
    z-index: 10;
    position: relative;
}
.tt-tabs::before {
    /* the rail itself */
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--tt-ink) 0, var(--tt-ink) 6px, transparent 6px, transparent 11px);
    opacity: 0.35;
}
.tt-tab-btn {
    flex: 0 0 auto;
    position: relative;
    padding: 10px 14px 9px;
    border: 1.5px solid var(--tt-ink);
    border-radius: 3px 10px 3px 3px; /* clipped-corner tag silhouette */
    background: var(--tt-cream);
    color: var(--tt-ink);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    min-height: 44px;
    margin-top: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tt-tab-btn::before {
    /* string from the rail down to the grommet */
    content: "";
    position: absolute;
    top: -14px;
    left: 10px;
    width: 1.5px;
    height: 14px;
    background: var(--tt-mustard-dark);
}
.tt-tab-btn::after {
    /* the punched grommet hole */
    content: "";
    position: absolute;
    top: -4px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tt-canvas);
    border: 1.5px solid var(--tt-ink);
}
.tt-tab-btn.active {
    background: var(--tt-forest);
    color: #fff;
    border-color: var(--tt-forest-dark);
    transform: translateY(-3px) rotate(-1.5deg);
    box-shadow: var(--tt-shadow);
}
.tt-tab-btn.active::after { background: var(--tt-forest); }

.tt-tab { display: none; padding: 18px 14px; }
.tt-tab.active { display: block; }

@media (prefers-reduced-motion: reduce) {
    .tt-tab-btn { transition: none; }
    .tt-tab-btn.active { transform: none; }
}

.tt-msg {
    margin: 8px 14px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}
.tt-msg.success { background: var(--tt-sage-soft); color: var(--tt-forest-dark); border-color: var(--tt-forest); }
.tt-msg.error { background: var(--tt-rust-soft); color: var(--tt-rust); border-color: var(--tt-rust); }

.tt-form-msg {
    margin-top: -4px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.tt-form-msg.success { background: var(--tt-sage-soft); color: var(--tt-forest-dark); }
.tt-form-msg.error { background: var(--tt-rust-soft); color: var(--tt-rust); }

/* -------------------------------------------------------------------------
   Dashboard summary cards — styled like a row of pinned price tags, each
   with its own punched hole and a faint alternating tilt.
   ------------------------------------------------------------------------- */
.tt-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
    padding-top: 6px;
}
.tt-card {
    position: relative;
    background: var(--tt-cream);
    border: 1.5px solid var(--tt-ink);
    border-radius: 3px 10px 3px 3px;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease;
}
.tt-card::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tt-canvas);
    border: 1.5px solid var(--tt-ink);
}
.tt-card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.tt-card:nth-child(3n+2) { transform: rotate(0.5deg); }
.tt-card:nth-child(3n+3) { transform: rotate(-0.4deg); }
.tt-card:hover { transform: rotate(0deg); }
.tt-card-highlight { background: #EAF0E4; border-color: var(--tt-forest); grid-column: span 2; }
.tt-card-warn { background: var(--tt-rust-soft); border-color: var(--tt-rust); }
.tt-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tt-ink-soft);
    margin: 4px 0 6px;
    font-weight: 600;
}
.tt-card-value {
    font-family: 'IBM Plex Mono', 'SFMono-Regular', monospace;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tt-ink);
}

@media (prefers-reduced-motion: reduce) {
    .tt-card { transition: none; }
    .tt-card:nth-child(n) { transform: none; }
}

/* Section titles — stamped label treatment */
.tt-section-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    margin: 22px 0 10px;
    color: var(--tt-ink);
    display: inline-block;
    position: relative;
    padding-bottom: 4px;
}
.tt-section-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    background: var(--tt-mustard);
    margin-top: 4px;
    border-radius: 2px;
}
.tt-note { font-size: 12px; color: var(--tt-ink-soft); line-height: 1.5; }
.tt-margin-top { margin-top: 24px; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.tt-form { display: flex; flex-direction: column; gap: 14px; }
.tt-form label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-ink);
    gap: 5px;
}
.tt-optional { font-weight: 400; color: var(--tt-ink-soft); }
.tt-form input, .tt-form select, .tt-form textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    font-family: 'IBM Plex Sans', sans-serif;
    padding: 12px;
    border: 1.5px solid var(--tt-line);
    border-radius: 4px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    background: var(--tt-cream);
    color: var(--tt-ink);
}
.tt-form input:focus, .tt-form select:focus, .tt-form textarea:focus {
    border-color: var(--tt-forest);
}
.tt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tt-btn-primary, .tt-btn-secondary {
    min-height: 48px;
    border-radius: 4px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    letter-spacing: 0.01em;
}
.tt-btn-primary {
    background: var(--tt-forest);
    color: #fff;
    border: 1.5px solid var(--tt-forest-dark);
}
.tt-btn-primary:active { background: var(--tt-forest-dark); }
.tt-btn-secondary {
    background: var(--tt-cream);
    color: var(--tt-forest-dark);
    border: 1.5px solid var(--tt-forest);
}

.tt-preview {
    background: var(--tt-cream);
    border: 1px dashed var(--tt-mustard-dark);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.7;
    font-family: 'IBM Plex Mono', monospace;
}

/* -------------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------------- */
.tt-subtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tt-subtab-btn {
    flex: 1;
    padding: 8px;
    border: 1.5px solid var(--tt-line);
    background: var(--tt-cream);
    color: var(--tt-ink);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    min-height: 40px;
}
.tt-subtab-btn.active { background: var(--tt-ink); color: var(--tt-canvas); border-color: var(--tt-ink); }
.tt-sublist { display: none; }
.tt-sublist.active { display: block; }

.tt-list-item {
    background: var(--tt-cream);
    border: 1px solid var(--tt-line);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
    font-size: 13px;
    position: relative;
}
.tt-list-item::before {
    /* faint perforation strip, like a receipt tear-line */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--tt-line) 0, var(--tt-line) 4px, transparent 4px, transparent 8px);
}
.tt-list-item-with-photo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.tt-thumb-col { flex: 0 0 64px; }
.tt-list-item-body { flex: 1 1 auto; min-width: 0; }
.tt-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    border: 1.5px solid var(--tt-ink);
}
.tt-thumb-placeholder {
    width: 64px;
    height: 64px;
    border: 2px dashed var(--tt-mustard-dark);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--tt-ink-soft);
    text-align: center;
    cursor: pointer;
    background: var(--tt-canvas);
}
.tt-thumb-static { cursor: default; border-style: solid; border-color: var(--tt-line); }
.tt-receipt-link { color: var(--tt-forest-dark); font-weight: 600; text-decoration: underline; font-size: 12px; }
.tt-receipt-placeholder {
    color: var(--tt-ink-soft);
    font-size: 12px;
    border: 1px dashed var(--tt-mustard-dark);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    display: inline-block;
}
.tt-item-code {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    background: var(--tt-canvas);
    border: 1px solid var(--tt-line);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
}
.tt-list-item-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    color: var(--tt-ink);
}
.tt-list-item-row {
    display: flex;
    justify-content: space-between;
    color: var(--tt-ink-soft);
    padding: 2px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
}
.tt-list-item-row > span:first-child { font-family: 'IBM Plex Sans', sans-serif; color: var(--tt-ink-soft); }
.tt-list-item-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--tt-line);
    color: var(--tt-ink);
    margin-left: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
}
.tt-badge-warn { background: #F2E2BE; color: #7A5A0E; }
.tt-badge-ok { background: var(--tt-sage-soft); color: var(--tt-forest-dark); }
.tt-badge-days { background: var(--tt-line); color: var(--tt-ink); }
.tt-badge-days-warn { background: #F2E2BE; color: #7A5A0E; }
.tt-badge-days-danger { background: var(--tt-rust-soft); color: var(--tt-rust); }
.tt-delete-btn {
    border: none;
    background: none;
    color: var(--tt-rust);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

/* Pagination */
.tt-pagination {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 24px;
}
.tt-pagination.active { display: flex; }
.tt-page-btn {
    min-height: 40px;
    padding: 8px 14px;
    border: 1.5px solid var(--tt-ink);
    border-radius: 4px;
    background: var(--tt-cream);
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-ink);
    cursor: pointer;
}
.tt-page-btn:disabled { color: var(--tt-ink-soft); border-color: var(--tt-line); cursor: default; }
.tt-page-label { font-size: 13px; color: var(--tt-ink-soft); font-family: 'IBM Plex Mono', monospace; }

/* Export buttons (Settings) */
.tt-export-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.tt-export-row .tt-btn-secondary {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lightbox */
.tt-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(38, 51, 58, 0.92);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tt-lightbox[hidden] { display: none; }
.tt-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.tt-lightbox-close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
}
.tt-thumb { cursor: pointer; }

/* -------------------------------------------------------------------------
   Share sheet — full-screen preview shown before handing off to the native
   share sheet. Blurred cover photo behind, a floating tag-styled card with
   a diagonal "SOLD" stamp and a mustard platform ribbon up front.
   ------------------------------------------------------------------------- */
.tt-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: var(--tt-ink);
}
.tt-share-sheet[hidden] { display: none; }
.tt-share-close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    z-index: 5;
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
}
.tt-share-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 20px;
    overflow-y: auto;
    position: relative;
}
.tt-share-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--tt-cream);
    border-radius: 6px 18px 6px 6px;
    border: 1.5px solid var(--tt-ink);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.tt-share-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #1c2529;
    overflow: hidden;
}
.tt-share-photo-wrap-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-share-photo-wrap-empty::after {
    content: "No photo on this item";
    color: var(--tt-ink-soft);
    font-size: 13px;
    font-family: 'IBM Plex Sans', sans-serif;
}
.tt-share-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tt-share-sold-stamp {
    position: absolute;
    top: 26px;
    left: -38px;
    width: 160px;
    padding: 5px 0;
    background: var(--tt-rust);
    color: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-align: center;
    transform: rotate(-40deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border-top: 1px dashed rgba(255, 255, 255, 0.6);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
}
.tt-share-platform-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--tt-mustard);
    color: var(--tt-ink);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1.5px solid var(--tt-ink);
}
.tt-share-platform-tag:empty { display: none; }
.tt-share-details {
    padding: 16px 18px 4px;
}
.tt-share-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--tt-ink);
    margin-bottom: 4px;
}
.tt-share-price {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--tt-forest-dark);
}
.tt-share-caption-label {
    display: block;
    padding: 14px 18px 18px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tt-share-caption-label textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--tt-ink);
    background: var(--tt-canvas);
    border: 1.5px solid var(--tt-line);
    border-radius: 4px;
    padding: 10px 12px;
    resize: vertical;
}
.tt-share-caption-label textarea:focus { border-color: var(--tt-forest); }
.tt-share-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    background: var(--tt-ink);
}
.tt-share-actions .tt-btn-primary,
.tt-share-actions .tt-btn-secondary {
    flex: 1;
    margin-top: 0;
}
.tt-share-actions .tt-btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Edit button */
.tt-edit-btn {
    border: none;
    background: none;
    color: var(--tt-forest-dark);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px 4px 0;
}

/* Share button (sold items) */
.tt-share-btn {
    border: none;
    background: none;
    color: var(--tt-mustard-dark);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px 4px 0;
}

/* Platform table on dashboard */
.tt-plat-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed var(--tt-line);
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
}
.tt-plat-row:last-child { border-bottom: none; }
.tt-plat-row strong { font-family: 'IBM Plex Sans', sans-serif; }

/* Wider screens: multi-column cards, side-by-side lists */
@media (min-width: 600px) {
    .tt-cards { grid-template-columns: 1fr 1fr 1fr; }
    .tt-card-highlight { grid-column: span 1; }
    .tt-form-row { grid-template-columns: 1fr 1fr; }
    .tt-export-row { flex-direction: row; flex-wrap: wrap; }
    .tt-export-row .tt-btn-secondary { flex: 1 1 auto; }
}