/* Shared design tokens & components — used across index/admin/share/login */

:root { --ink:#1c1d1b; --paper:#f7f6f3; --line:#d9d6cf; --accent:#c05621; }

* { font-family:"gill-sans-nova",sans-serif; box-sizing:border-box; }

.mono { font-family:"gill-sans-nova",sans-serif; }

/* ── Facets ── */
  .facet-btn { width:100%; text-align:left; padding:4px 8px; font-size:13px;
    display:flex; justify-content:space-between; align-items:center;
    transition:background .1s,color .1s; margin-bottom:1px; }

#facetGroups > div + div { border-top:1px solid var(--line); padding-top:18px; }

.facet-btn:hover { background:#f0ede8; }

.facet-btn.active { background:var(--ink); color:var(--paper); }

.facet-btn.active .cnt { color:var(--paper); opacity:.55; }

.facet-btn .tick::before { content:''; display:inline-block;
    width:5px; height:5px; background:var(--accent);
    margin-right:6px; transform:translateY(-1px); }

/* ── Pills (asset type nav) ── */
  .pill { border:1px solid var(--line); background:white; padding:4px 12px;
    font-family:"gill-sans-nova",sans-serif; font-size:11px;
    text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
    cursor:pointer; transition:all .12s; }

.pill:hover { border-color:var(--ink); }

.pill.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ── Asset grid (native CSS, no Tailwind breakpoints) ── */
  #assetGrid { display:grid;
    grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px; }

/* ── Asset card ── */
  .card { border:1px solid var(--line); background:white; cursor:pointer;
    transition:border-color .12s; overflow:hidden; }

.card:hover { border-color:var(--ink); }

.card-thumb img { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:cover; display:block; }

/* SVG previews — contain instead of cover so line drawings aren't cropped */
 .card-thumb img.thumb-contain { object-fit:contain; background:white; padding:12px; box-sizing:border-box; }
 
 .card-thumb img[src*="Signature"], .card-thumb img[src*="Logo"] {
     object-fit: contain !important;
 }

.card-body { padding:8px 10px 9px; }

.card-orig { font-family:"gill-sans-nova",sans-serif; font-size:9px; color:#ccc;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; margin-right:4px; }

.card-dl { font-family:"gill-sans-nova",sans-serif; font-size:10px;
    color:var(--accent); text-decoration:none; flex-shrink:0; }

/* ── List view ── */
  #assetGrid.list { display:flex; flex-direction:column; gap:0; }

#assetGrid.list .card { display:flex; flex-direction:row; border:none;
    border-top:1px solid var(--line); }

#assetGrid.list .card:last-child { border-bottom:1px solid var(--line); }

#assetGrid.list .card-thumb { width:72px; height:52px; flex-shrink:0;
    border-right:1px solid var(--line); }

#assetGrid.list .card-thumb img { width:72px; height:52px; object-fit:cover; }

#assetGrid.list .card-body { flex:1; min-width:0; display:flex;
    align-items:center; gap:16px; padding:8px 12px; }

#assetGrid.list .card-title { font-size:13px; white-space:nowrap; flex:1; margin:0; }

#assetGrid.list .card-foot  { margin:0; gap:12px; }

#assetGrid.list .card-orig  { max-width:180px; }

/* ── View toggle ── */
  .vtoggle { display:flex; border:1px solid var(--line); }

.vtoggle button:last-child { border-right:none; }

.vtoggle button.on { background:var(--ink); color:white; }

/* ── Modals ── */
  .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:30; align-items:center; justify-content:center; padding:16px;
    backdrop-filter:blur(2px); }

.modal-bg.open { display:flex; }

.modal-box { background:white; border:1px solid var(--line);
    width:100%; max-width:640px; max-height:90vh; overflow-y:auto; padding:24px; }

/* ── Load more ── */
  #loadMoreArea { text-align:center; padding:28px 0 8px; }

#loadMoreBtn { font-family:"gill-sans-nova",sans-serif; font-size:11px;
    text-transform:uppercase; letter-spacing:.06em;
    border:1px solid var(--line); background:white; padding:8px 24px;
    cursor:pointer; transition:all .12s; }

#loadMoreBtn:hover { background:var(--ink); color:white; border-color:var(--ink); }

/* ── Replace file button ── */
  .replace-btn { display:inline-block; cursor:pointer;
    font-family:"gill-sans-nova",sans-serif; font-size:11px;
    text-transform:uppercase; letter-spacing:.05em;
    border:1px solid var(--line); padding:5px 12px;
    transition:all .12s; }

.replace-btn:hover { border-color:var(--ink); background:#f5f5f3; }

::-webkit-scrollbar { width:5px; }

::-webkit-scrollbar-thumb { background:var(--line); }

.job-progress { display:none; margin-top:10px; }

.job-progress-bar { height:6px; background:#eee; border:1px solid var(--line); overflow:hidden; }

.job-progress-fill { height:100%; background:var(--ink); width:0%; transition:width .2s ease; }

.job-progress-label { font-family:"gill-sans-nova",sans-serif; font-size:11px; color:#888; margin-top:5px; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

.back-link { font-family:"gill-sans-nova",sans-serif; font-size:11px; text-transform:uppercase;
    letter-spacing:.07em; color:#aaa; text-decoration:none; margin-left:auto; }

.back-link:hover { color:var(--ink); }

h2 { font-size:15px; font-weight:600; margin-bottom:16px; }

.btn-primary { background:var(--ink); color:white; }

.btn-primary:hover { background:var(--accent); }

.btn-sm { font-family:"gill-sans-nova",sans-serif; font-size:10px; text-transform:uppercase;
    letter-spacing:.05em; border:1px solid var(--line); background:white; padding:4px 10px;
    cursor:pointer; transition:all .12s; }

.btn-sm:hover { border-color:var(--ink); }

.btn-danger { color:#c0392b; border-color:#f5c6c6; }

.btn-danger:hover { background:#fef2f2; border-color:#c0392b; }

table { width:100%; border-collapse:collapse; background:white; border:1px solid var(--line); font-size:13px; }

th { font-family:"gill-sans-nova",sans-serif; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
    color:#aaa; text-align:left; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--paper); }

td { padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }

tr:last-child td { border-bottom:none; }

tr:hover td { background:#faf9f7; }

.badge { display:inline-block; font-family:"gill-sans-nova",sans-serif; font-size:10px;
    text-transform:uppercase; letter-spacing:.05em; padding:2px 8px;
    border-radius:20px; font-weight:500; }

.badge-admin   { background:#e8f4fd; color:#1a5276; }

.badge-dealer  { background:#e9f7ef; color:#1e6b3a; }

.badge-dist    { background:#fef9e7; color:#7d6608; }

.badge-press   { background:#f4ecf7; color:#6c3483; }

.badge-influ   { background:#fdedec; color:#922b21; }

.badge-market  { background:#f2f3f4; color:#566573; }

.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }

.status-on  { background:#27ae60; }

.status-off { background:#bbb; }

.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:20;
    align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(2px); }

.modal { background:white; border:1px solid var(--line); width:100%; max-width:480px;
    padding:28px; max-height:90vh; overflow-y:auto; }

.modal h3 { font-size:14px; font-weight:600; margin-bottom:18px; }

.field { margin-bottom:14px; }

.field label { display:block; font-family:"gill-sans-nova",sans-serif; font-size:10px;
    text-transform:uppercase; letter-spacing:.08em; color:#888; margin-bottom:5px; }

.field input, .field select { width:100%; border:1px solid var(--line); padding:8px 10px;
    font-size:13px; font-family:"gill-sans-nova",sans-serif; outline:none; }

.field input:focus, .field select:focus { border-color:var(--ink); }

.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }

.msg { padding:10px 12px; font-size:13px; margin-bottom:14px; display:none; }

.msg-error { background:#fef2f2; border:1px solid #fca5a5; color:#c0392b; }

.msg-ok    { background:#f0faf4; border:1px solid #b7dfc4; color:#1e6b3a; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }

.stats { display:flex; gap:24px; margin-bottom:28px; }

.stat { background:white; border:1px solid var(--line); padding:14px 20px; }

.stat-n { font-size:24px; font-weight:600; margin-bottom:2px; }

.stat-l { font-family:"gill-sans-nova",sans-serif; font-size:10px; text-transform:uppercase;
    letter-spacing:.08em; color:#aaa; }

.pw-field { position:relative; }

.pw-field input { padding-right:70px; }

.pw-gen { position:absolute; right:8px; top:50%; transform:translateY(-50%);
    font-family:"gill-sans-nova",sans-serif; font-size:10px; text-transform:uppercase;
    color:var(--accent); background:none; border:none; cursor:pointer; }

.hd { flex:1; }

.dl-all { font-family:"gill-sans-nova",sans-serif; font-size:11px; text-transform:uppercase;
    letter-spacing:.06em; border:1px solid var(--line); background:white; padding:7px 14px;
    cursor:pointer; display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink);
    flex-shrink:0; transition:all .12s; }

.dl-all:hover { background:var(--ink); color:white; border-color:var(--ink); }

.meta { display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; flex-wrap:wrap; gap:8px; }

.count { font-family:"gill-sans-nova",sans-serif; font-size:11px;
    text-transform:uppercase; letter-spacing:.07em; color:#aaa; }

.expiry { font-family:"gill-sans-nova",sans-serif; font-size:10px; color:#ccc; }

#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px; }

#grid.list { display:flex; flex-direction:column; gap:0; }

.card-thumb img.svg-preview { object-fit:contain; background:white; padding:12px; box-sizing:border-box; }

.dl-btn { font-family:"gill-sans-nova",sans-serif; font-size:10px; color:var(--accent);
    text-decoration:none; flex-shrink:0; }

#grid.list .card { display:flex; flex-direction:row; border:none;
    border-top:1px solid var(--line); }

#grid.list .card:last-child { border-bottom:1px solid var(--line); }

#grid.list .card-thumb { width:72px; height:52px; flex-shrink:0; border-right:1px solid var(--line); }

#grid.list .card-thumb img { width:72px; height:52px; object-fit:cover; }

#grid.list .card-body { flex:1; min-width:0; display:flex;
    align-items:center; gap:16px; padding:8px 12px; }

#grid.list .card-title { font-size:13px; flex:1; white-space:nowrap; margin:0; }

#grid.list .card-foot { margin:0; gap:12px; }

.vtoggle { display:flex; border:1px solid var(--line); }

.state { text-align:center; padding:80px 20px; color:#bbb; }

.state-title { font-family:"gill-sans-nova",sans-serif; font-size:11px;
    text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }

footer { border-top:1px solid var(--line); padding:20px 28px;
    text-align:center; font-size:12px; color:#bbb; margin-top:40px; }

footer a { color:var(--accent); text-decoration:none; }

footer a:hover { text-decoration:underline; }

.brand { margin-bottom:28px; }

label { display:block; font-family:"gill-sans-nova",sans-serif; font-size:10px;
    text-transform:uppercase; letter-spacing:.09em; color:#888; margin-bottom:5px; margin-top:16px; }
    
#detailBody label {margin-top: 0; margin-bottom: 0;}

.card-thumb label.SelectBox {
  position:absolute;
  top:5px;
  left:5px;
  z-index:2;
  line-height:0;
  cursor:pointer;
  margin: 0;
  padding: 0;
  background: transparent;
}

input[type=email], input[type=password] {
    width:100%; border:1px solid var(--line); padding:9px 12px; font-size:14px;
    font-family:"gill-sans-nova",sans-serif; outline:none; transition:border-color .12s; }

input:focus { border-color:var(--ink); }

.btn:hover { background:var(--accent); }

.btn:disabled { background:#ccc; cursor:not-allowed; }

.error { margin-top:14px; padding:10px 12px; background:#fef2f2; border:1px solid #fca5a5;
    font-size:13px; color:#c0392b; display:none; }

.footer { margin-top:20px; font-size:12px; color:#bbb; text-align:center; }


/* ── Modernization pass ── */
.card, .modal-box, input[type=text], input[type=email], input[type=password],
input[type=search], select, .pill, .replace-btn, #loadMoreBtn, .vtoggle {
  border-radius: 3px;
}
.card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card:hover { box-shadow: 0 4px 14px rgba(28,29,27,.08); transform: translateY(-1px); }
.modal-box { border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.15); }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=search]:focus, select:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,29,27,.06); outline: none;
}
.pill, .facet-btn, .replace-btn, #loadMoreBtn, .vtoggle button {
  transition: all .15s cubic-bezier(.4,0,.2,1);
}