/* Faithful reproduction of dlan-app cms.ejs styles, scoped under .dlan
   so multiple artboards on a design canvas don't fight global rules.
   Pulled directly from views/cms.ejs and trimmed to what Works needs. */

@font-face{
  font-family:'Monument Grotesk';
  font-weight:700;font-style:normal;
  src:url('fonts/DLan-MonumentGrotesk-Bold.otf') format('opentype');
}

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

.dlan{
  --white:#ffffff;--off:#faf6ee;--light:#f3eee2;--line:#e3ddd0;
  --muted:#a89d8b;--mid:#7a6e60;--dark:#3a2f28;--black:#1a1411;
  --accent:#a86a52;--pink:#b8523a;--red:#a83a28;--green:#6b8c5c;
  --font:'Monument Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;

  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;

  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}

.dlan a { color: var(--dark); text-decoration: none; }

/* SIDEBAR */
.dlan .sidebar{
  position:absolute; left:0; top:0; width:18%; height:100%;
  padding:110px 20px 28px 28px;
  background:var(--white); border-right:1px solid var(--line);
}
.dlan .logo-wrap{ position:absolute; top:28px; left:28px; right:20px; }
.dlan .gallery-name{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--black); font-weight:700;
}
.dlan .nav-line{ width:100%; height:1px; background:var(--line); margin:0 0 20px; }
.dlan .nav-section-label{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:0 0 8px; margin-bottom:4px;
}
.dlan .primary-link{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.06em; color:var(--mid);
  cursor:pointer; padding:9px 0 9px 10px; margin-left:-10px;
  border-left:2px solid transparent;
  transition:color .2s, border-color .2s; user-select:none;
}
.dlan .primary-link:hover{ color:var(--black); }
.dlan .primary-link.active{ color:var(--black); border-left-color:var(--black); }
.dlan .add-button-row{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.dlan .adder{
  font-size:10px; letter-spacing:.06em; color:var(--muted);
  cursor:pointer; padding:5px 0; transition:color .15s;
}
.dlan .adder:hover{ color:var(--black); }
.dlan .sidebar-footer{ position:absolute; bottom:28px; left:28px; right:20px; font-size:10px; color:var(--muted); }

/* MAIN */
.dlan .brace{
  position:absolute; left:18%; top:0; width:82%; height:100%;
  padding:60px 4% 40px;
  overflow:auto;
}
.dlan .top-rule{ width:100%; height:1px; background:var(--line); margin-bottom:24px; }

/* SECTION HEADER */
.dlan .section-header{ display:flex; align-items:center; gap:20px; margin-bottom:16px; }
.dlan .section-title{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.dlan .search-inline{ display:flex; align-items:center; gap:6px; flex:1; max-width:240px; }
.dlan .search-inline input{
  border:none; border-bottom:1px solid var(--line); background:none;
  font-family:var(--font); font-size:11px; font-weight:700;
  color:var(--dark); padding:3px 0; outline:none; width:100%;
}
.dlan .search-inline input:focus{ border-bottom-color:var(--dark); }

/* TABLE */
.dlan .sorter-row{
  display:grid; gap:0; padding:6px 0;
  border-bottom:1px solid var(--line);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.dlan .cms-row{
  display:grid; gap:0; padding:11px 0;
  border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .15s; align-items:center;
}
.dlan .cms-row:hover{ background:var(--off); }
.dlan .works-cols{ grid-template-columns: 52px 2fr 90px 110px 90px 80px 90px 140px 36px; }
.dlan .row-name{ font-size:11px; padding-left:6px; color:var(--black); font-weight:700; }
.dlan .row-meta{ font-size:11px; color:var(--mid); font-weight:700; }
.dlan .row-sub{ font-size:10px; color:var(--muted); padding-left:6px; }

.dlan .add-icon{
  width:22px; height:22px; border:1px solid var(--line); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--muted); cursor:pointer;
  transition:all .15s; line-height:1;
}
.dlan .add-icon:hover{ background:var(--black); color:white; border-color:var(--black); }

.dlan .del-btn{
  width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--line); cursor:pointer; line-height:1;
  border:1px solid transparent; transition:all .15s;
}
.dlan .del-btn:hover{ color:var(--red); border-color:var(--red); background:#fff0f0; }

.dlan .empty-state{
  padding:48px 0; text-align:center;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--line);
}

/* STATUS PILLS */
.dlan .status-pill{
  display:inline-block; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; border:1px solid; white-space:nowrap;
}
.dlan .status-pill.for-sale{ color:var(--accent); border-color:var(--accent); }
.dlan .status-pill.sold{ color:var(--pink); border-color:var(--pink); }
.dlan .status-pill.nfs{ color:var(--muted); border-color:var(--line); }
.dlan .status-pill.reserved{ color:orange; border-color:orange; }

/* W-THUMB */
.dlan .w-thumb{
  width:52px; height:44px;
  background:var(--off); border:1px solid var(--line); border-radius:2px;
  overflow:hidden;
}

/* WORKS LAYOUT (filter rail) */
.dlan .works-layout{ display:flex; gap:0; position:relative; }
.dlan .works-rail{
  width:0; overflow:hidden;
  transition:width .25s cubic-bezier(.23,1,.32,1), opacity .25s;
  opacity:0; flex-shrink:0;
  border-right:1px solid transparent; padding-right:0;
}
.dlan .works-rail.open{
  width:190px; opacity:1;
  border-right-color:var(--line);
  padding-right:24px; margin-right:24px;
}
.dlan .works-main{ flex:1; min-width:0; position:relative; }

.dlan .rail-section{ margin-bottom:18px; }
.dlan .rail-section-label{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px; font-weight:700;
}
.dlan .rail-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 0; cursor:pointer;
  font-size:11px; color:var(--mid); transition:color .12s; gap:4px;
}
.dlan .rail-item:hover, .dlan .rail-item.on{ color:var(--black); font-weight:700; }
.dlan .rail-item-left{ display:flex; align-items:center; gap:6px; overflow:hidden; }
.dlan .rail-item-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlan .rail-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dlan .rail-count{ font-size:10px; color:var(--muted); flex-shrink:0; }

/* TAG FILTER CHIPS */
.dlan .tag-filter-bar{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 0; margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.dlan .tag-filter-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; background:var(--off); border:1px solid var(--line);
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; border-radius:2px;
}
.dlan .tag-filter-chip.active{ background:var(--black); border-color:var(--black); color:var(--white); }

/* INLINE TAG ON ROW (cell-level) */
.dlan .row-tag{
  display:inline-flex; align-items:center; gap:0;
  font-size:9px; letter-spacing:.05em;
  padding:2px 6px 2px 0; border:1px solid var(--line); border-radius:2px;
  background:var(--white); color:var(--dark); white-space:nowrap; overflow:hidden;
}
.dlan .row-tag .pill-swatch{
  width:3px; align-self:stretch; flex-shrink:0;
  margin-right:5px; border-radius:1px 0 0 1px;
}

/* BUTTONS */
.dlan .btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 20px; border-radius:3px; cursor:pointer;
  font-family:var(--font); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid; transition:all .15s; user-select:none;
}
.dlan .btn-primary{ background:var(--black); color:white; border-color:var(--black); }
.dlan .btn-primary:hover{ background:#333; border-color:#333; }
.dlan .btn-ghost{ background:none; color:var(--muted); border-color:var(--line); }
.dlan .btn-ghost:hover{ color:var(--dark); border-color:var(--mid); }
.dlan .btn-sm{ padding:5px 12px; font-size:9px; }

/* SCROLLBAR */
.dlan ::-webkit-scrollbar{ width:4px; }
.dlan ::-webkit-scrollbar-track{ background:var(--white); }
.dlan ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }