/* Rent-a-Shelf Modern UI Pack (Admin + Staff + Vendor Portal) */
:root{
  --ras-bg:#f6f7fb;
  --ras-card:#ffffff;
  --ras-border:#e7e9f2;
  --ras-text:#0f172a;
  --ras-muted:#64748b;
  --ras-primary: var(--wp--preset--color--primary, #2563eb);
  --ras-danger:#ef4444;
  --ras-success:#22c55e;
  --ras-warn:#f59e0b;
  --ras-radius:14px;
  --ras-shadow: 0 10px 30px rgba(2,6,23,.08);
}

.ras-wrap, .ras-wrap *{ box-sizing:border-box; }
.ras-wrap{ color:var(--ras-text); }

.ras-hero{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  border-radius:var(--ras-radius);
  padding:18px 18px;
  margin:14px 0 18px;
  box-shadow: var(--ras-shadow);
}
.ras-hero h1, .ras-hero h2{ margin:0 0 6px; font-size:20px; line-height:1.2; }
.ras-hero p{ margin:0; opacity:.85; font-size:13px; }

.ras-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }
.ras-col-4{ grid-column: span 4; }
.ras-col-6{ grid-column: span 6; }
.ras-col-12{ grid-column: span 12; }
@media (max-width: 960px){ .ras-col-4,.ras-col-6{ grid-column: span 12; } }

.ras-card{
  background:var(--ras-card);
  border:1px solid var(--ras-border);
  border-radius:var(--ras-radius);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  padding:14px;
}

.ras-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin:10px 0 14px;
}

.ras-search, .ras-input, .ras-select{
  width:min(420px,100%);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--ras-border);
  background:#fff;
  outline:none;
}
.ras-select{ width:auto; min-width:180px; }

.ras-btn, .ras-wrap .button, .ras-wrap button, .ras-wrap input[type="submit"]{
  appearance:none;
  border:1px solid var(--ras-border);
  background:#fff;
  color:var(--ras-text);
  padding:9px 12px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1.1;
}
.ras-btn:hover, .ras-wrap .button:hover, .ras-wrap button:hover, .ras-wrap input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}
.ras-btn.primary, .ras-wrap .button-primary{
  background:var(--ras-primary)!important;
  border-color:var(--ras-primary)!important;
  color:#fff!important;
}
.ras-btn.danger{
  background:var(--ras-danger);
  border-color:var(--ras-danger);
  color:#fff;
}

.ras-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--ras-border);
  background:#fff;
}
.ras-pill.success{ color:#166534; background:#ecfdf5; border-color:#bbf7d0; }
.ras-pill.warn{ color:#92400e; background:#fffbeb; border-color:#fde68a; }
.ras-pill.danger{ color:#991b1b; background:#fef2f2; border-color:#fecaca; }
.ras-pill.gray{ color:#334155; background:#f1f5f9; border-color:#e2e8f0; }

.ras-table, .ras-wrap table.wp-list-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--ras-border);
  border-radius:var(--ras-radius);
  background:#fff;
}
.ras-table th, .ras-table td,
.ras-wrap table.wp-list-table th, .ras-wrap table.wp-list-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--ras-border);
  font-size:13px;
  vertical-align:top;
}
.ras-table th, .ras-wrap table.wp-list-table th{
  color:#334155;
  background:#f8fafc;
  position:sticky;
  top:0;
  z-index:1;
}
.ras-table tr:hover td,
.ras-wrap table.wp-list-table tr:hover td{ background:#fbfdff; }

.ras-note{ font-size:12px; color:var(--ras-muted); }
.ras-alert{
  border:1px solid var(--ras-border);
  background:#fff;
  border-radius:var(--ras-radius);
  padding:10px 12px;
}
.ras-alert.warn{ border-color:#fde68a; background:#fffbeb; }
.ras-alert.danger{ border-color:#fecaca; background:#fef2f2; }
.ras-alert.success{ border-color:#bbf7d0; background:#ecfdf5; }

/* Front-end shelf cards */
.ras-shelves-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.ras-shelf-card{
  grid-column: span 6;
  background:var(--ras-card);
  border:1px solid var(--ras-border);
  border-radius:var(--ras-radius);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  padding:14px;
}
@media (max-width: 860px){ .ras-shelf-card{ grid-column: span 12; } }

.ras-shelf-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ras-shelf-title{ font-weight:800; font-size:18px; margin:0 0 4px; }
.ras-shelf-meta{ color:var(--ras-muted); font-size:12px; margin:0; }
.ras-shelf-amount{ margin-top:10px; font-weight:700; }
.ras-shelf-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }


/* Strong, theme-colored CTA for shelf rent buttons */
.ras-shelf-card .ras-btn.primary,
.ras-shelf-card button.ras-btn.primary,
.ras-shelf-card input[type="submit"],
.ras-shelf-card button[type="submit"],
.ras-shelf-card .button-primary{
  width:100%;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  background:var(--ras-primary)!important;
  border-color:var(--ras-primary)!important;
  color:#fff!important;
  box-shadow: 0 14px 26px rgba(2,6,23,.12);
}

.ras-shelf-card .ras-btn.primary:hover,
.ras-shelf-card input[type="submit"]:hover,
.ras-shelf-card button[type="submit"]:hover,
.ras-shelf-card .button-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(2,6,23,.16);
}

.ras-shelf-card .ras-btn,
.ras-shelf-card .button{
  width:100%;
  justify-content:center;
}

/* Better focus state */
.ras-shelf-card .ras-btn:focus,
.ras-shelf-card button:focus,
.ras-shelf-card input[type="submit"]:focus{
  outline:3px solid rgba(37,99,235,.25);
  outline-offset:2px;
}