/* ============================================================
   SEMS — Solar Structures
   ============================================================ */

/* ---------- ปุ่มไอคอน ---------- */
.ibtn{
  width:38px; height:38px; flex:none; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-raised); border:1px solid var(--line-strong);
  color:var(--ink-dim); border-radius:10px; cursor:pointer;
  text-decoration:none;
}
.ibtn svg{ width:19px; height:19px; display:block; }
.ibtn:hover{ border-color:var(--amber); color:var(--amber); }
.ibtn:active{ transform:scale(.94); }
.ibtn:disabled{ opacity:.4; cursor:not-allowed; }

.ibtn.primary{ background:var(--amber); border-color:var(--amber); color:#141719; }
.ibtn.primary:hover{ filter:brightness(1.08); color:#141719; }
html[data-theme="light"] .ibtn.primary{ color:#fff; }

.ibtn.danger{ color:var(--danger); border-color:rgba(226,85,75,.45); }
.ibtn.danger:hover{ background:rgba(226,85,75,.12); border-color:var(--danger); color:var(--danger); }

/* ---------- ช่องค้นหา ---------- */
.sl-search{
  position:relative; display:flex; align-items:center; margin-bottom:18px;
}
.sl-search .ico{
  position:absolute; left:14px; width:18px; height:18px;
  color:var(--ink-faint); pointer-events:none;
}
.sl-search input{
  width:100%; background:var(--bg-panel);
  border:1px solid var(--line-strong); color:var(--ink);
  border-radius:11px; padding:12px 46px 12px 42px;
  font-family:var(--sans); font-size:14px;
}
.sl-search input:focus{ outline:none; border-color:var(--amber); }
.sl-search input:focus ~ .ico{ color:var(--amber); }

.sl-search .clr{
  position:absolute; right:8px;
  width:30px; height:30px; padding:0; border:none; border-radius:8px;
  background:var(--bg-raised); color:var(--ink-dim); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.sl-search .clr svg{ width:15px; height:15px; }
.sl-search .clr:hover{ color:var(--danger); }

/* ---------- การ์ดแบบ ---------- */
.sl-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px;
}
.sl-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
}
.sl-card:hover{ border-color:var(--amber); }

.sl-thumb{
  height:150px; background:var(--bg-raised); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sl-thumb .ph{ font-size:30px; opacity:.3; }
.sl-tag{
  position:absolute; top:6px; left:6px; z-index:2;
  background:rgba(0,0,0,.66); color:#fff; border-radius:5px;
  font-size:9.5px; font-family:var(--mono); padding:2px 7px; letter-spacing:.4px;
}

.sl-body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:7px; flex:1; }
.sl-name{ font-size:12.5px; font-weight:600; line-height:1.45; word-break:break-word; }
.sl-name em{ font-style:normal; background:var(--amber-glow); color:var(--amber); border-radius:3px; }
.sl-cat{ font-size:10.5px; color:var(--ink-faint); font-family:var(--mono); }

.sl-acts{ display:flex; gap:6px; margin-top:auto; }
.sl-acts a{
  flex:1; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink-dim);
  border-radius:7px; text-decoration:none;
}
.sl-acts a svg{ width:16px; height:16px; }
.sl-acts a:hover{ border-color:var(--amber); color:var(--amber); }

/* ---------- ข้อความสถานะ ---------- */
.sl-msg{
  grid-column:1/-1; padding:44px 20px; text-align:center;
  color:var(--ink-faint); font-size:13px; line-height:1.7;
}
.sl-msg.bad{ color:var(--danger); }

/* ---------- แบ่งหน้า ---------- */
.sl-pager{
  display:flex; gap:7px; align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:22px;
}
.sl-pager button{
  background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink-dim);
  border-radius:8px; min-width:36px; padding:7px 10px;
  font-family:var(--mono); font-size:12px; font-weight:600; cursor:pointer;
}
.sl-pager button:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); }
.sl-pager button.on{ background:var(--amber); border-color:var(--amber); color:#141719; }
.sl-pager button:disabled{ opacity:.35; cursor:not-allowed; }
.sl-pager .dots{ color:var(--ink-faint); padding:0 2px; }
html[data-theme="light"] .sl-pager button.on{ color:#fff; }

/* ---------- ตัวดูไฟล์ ---------- */
.pv-body{ padding:0 !important; background:var(--bg-raised); display:block !important; }
.pv-body iframe{ width:100%; height:min(74vh, 760px); border:none; display:block; }

/* ---------- ตัวโหลด ---------- */
.sl-busy{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(8,11,14,.78); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
  color:#fff; font-size:13.5px; text-align:center; padding:24px;
}
.sl-busy.on{ display:flex; }
.sl-spin{
  width:42px; height:42px; border-radius:50%;
  border:3px solid rgba(255,255,255,.2); border-top-color:var(--amber);
  animation:slspin .8s linear infinite;
}
@keyframes slspin{ to{ transform:rotate(360deg); } }
.sl-busy .sub{ font-size:11.5px; opacity:.7; max-width:320px; }

/* ---------- จอเล็ก ---------- */
@media (max-width:520px){
  .sl-grid{ grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:11px; }
  .sl-thumb{ height:118px; }
}