/* =========================================================
   Lucas Advanced Download UI v.2
   Full public UI stylesheet
   ========================================================= */


/* =========================================================
   1. ROOT / THEME VARIABLES
   ========================================================= */
.ladu-wrap{
  --ladu-card:#ffffff;
  --ladu-ink:#334155;
  --ladu-muted:#64748b;
  --ladu-line:rgba(15,23,42,.12);
  --ladu-soft:rgba(15,23,42,.04);
  --ladu-accent:#2563eb;
  --ladu-accent2:#16a34a;
  --ladu-shadow:0 14px 40px rgba(15,23,42,.10);
  --ladu-radius:14px;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ladu-ink);
}

.ladu-wrap *{
  box-sizing:border-box;
}


/* =========================================================
   2. MAIN CARD / OUTER LAYOUT
   ========================================================= */
.ladu-card{
  position:relative;
  background:var(--ladu-card);
  border:1px solid var(--ladu-line);
  border-radius:16px;
  box-shadow:var(--ladu-shadow);
  padding:16px;
}

.ladu-title{
  text-align:center;
  margin:0 0 12px;
  font-size:22px;
  line-height:1.2;
  color:var(--ladu-ink);
}


/* =========================================================
   2B. PUBLIC ADMIN QUICK LINKS
   Floating left side panel inside container
   ========================================================= */
.ladu-admin-links{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:5;
}

.ladu-admin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--ladu-line);
  border-radius:10px;
  background:#fff;
  color:var(--ladu-ink);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
  white-space:nowrap;
}

.ladu-admin-btn:hover{
  background:var(--ladu-soft);
}


/* =========================================================
   3. COMPANY SECTION
   ========================================================= */
.ladu-company-head{
  font-size:14px;
  font-weight:600;
  color:#5b6b80;
  margin-bottom:10px;
  text-align:center;
}

.ladu-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.ladu-tab.is-active{
  background:#fff;
  border-color:rgba(37,99,235,.45);
  box-shadow:0 10px 26px rgba(37,99,235,.12);
}

.ladu-tab{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:65px;
  border:1px solid var(--ladu-line);
  background:var(--ladu-soft);
  padding:8px 16px;
  border-radius:6px;
  cursor:pointer;
  color:var(--ladu-ink);
  box-sizing:border-box;
}

.ladu-tablogo{
  width:60px;
  height:60px;
  flex:0 0 60px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ladu-soft);
  overflow:hidden;
}

.ladu-tablogo img{
  max-width:48px;
  max-height:48px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.ladu-or{
  font-size:13px;
  color:#7b8aa0;
  font-weight:600;
  user-select:none;
}


/* =========================================================
   4. CONTROLS WRAPPER
   Filters row centered
   ========================================================= */
.ladu-controls{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}

.ladu-row{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}

.ladu-row-filters{
  max-width:900px;
}


/* =========================================================
   5. FORM FIELDS
   ========================================================= */
.ladu-field{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:160px;
}

.ladu-label{
  font-size:12px;
  color:var(--ladu-muted);
  text-align:center;
  margin-bottom:4px;
}

.ladu-select,
.ladu-input{
  height:40px;
  border-radius:12px;
  border:1px solid var(--ladu-line);
  background:#fff;
  color:var(--ladu-ink);
  padding:0 12px;
  width:220px;
  max-width:100%;
  outline:none;
}

.ladu-select:focus,
.ladu-input:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}


/* =========================================================
   6. STATUS / META
   ========================================================= */
.ladu-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.ladu-status{
  font-size:12px;
  color:var(--ladu-muted);
}


/* =========================================================
   7. CONTENT BODY / GROUPS
   Default grouped by category
   ========================================================= */
.ladu-body{
  padding:10px 0 0;
}

.ladu-group{
  margin-top:14px;
}

.ladu-group h2{
  margin:18px 0 10px;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ladu-ink);
}

.ladu-pill{
  font-size:12px;
  color:var(--ladu-muted);
  border:1px solid var(--ladu-line);
  border-radius:999px;
  padding:4px 10px;
  background:var(--ladu-soft);
}


/* =========================================================
   8. ITEM GRID
   ========================================================= */
.ladu-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.ladu-item{
  border:1px solid var(--ladu-line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}


/* =========================================================
   9. THUMBNAIL AREA
   Thumbnail contained inside box, 150px high
   ========================================================= */
.ladu-thumb{
  width:100%;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--ladu-soft);
  border-bottom:1px solid var(--ladu-line);
  padding:10px;
}

.ladu-thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.ladu-icon{
  width:90px;
  height:90px;
  opacity:.9;
}


/* =========================================================
   10. ITEM CONTENT
   ========================================================= */
.ladu-info{
  padding:10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ladu-fn{
  font-size:13px;
  line-height:1.25;
  color:var(--ladu-ink);
  word-break:break-word;
}

.ladu-title2{
  font-size:12px;
  color:var(--ladu-muted);
}

.ladu-desc{
  font-size:12px;
  color:var(--ladu-muted);
  line-height:1.35;
}

.ladu-sub{
  font-size:11px;
  color:var(--ladu-muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ladu-tag{
  border:1px solid var(--ladu-line);
  border-radius:999px;
  padding:3px 10px;
  background:var(--ladu-soft);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ladu-flag{
  width:14px;
  height:14px;
  object-fit:contain;
  display:block;
}


/* =========================================================
   11. DOWNLOAD BUTTONS
   ========================================================= */
.ladu-actions{
  display:flex;
  gap:8px;
  margin-top:2px;
}

.ladu-btn{
  flex:1;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(37,99,235,.10);
  color:var(--ladu-ink);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.ladu-btn:hover{
  background:rgba(37,99,235,.16);
}

.ladu-btn.is-green{
  background:rgba(22,163,74,.10);
}

.ladu-btn.is-green:hover{
  background:rgba(22,163,74,.16);
}


/* =========================================================
   12. EMPTY / ERROR STATES
   ========================================================= */
.ladu-empty,
.ladu-error{
  border:1px dashed rgba(15,23,42,.18);
  border-radius:16px;
  padding:18px;
  color:var(--ladu-muted);
  text-align:center;
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .ladu-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .ladu-row-filters{
    max-width:700px;
  }
}

@media (max-width:768px){
  .ladu-admin-links{
    position:static;
    margin-bottom:12px;
    align-items:flex-start;
  }
}

@media (max-width:640px){
  .ladu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ladu-thumb{
    height:130px;
  }

  .ladu-row{
    flex-direction:column;
    align-items:center;
  }

  .ladu-field{
    width:100%;
    max-width:320px;
  }

  .ladu-select,
  .ladu-input{
    width:100%;
  }
}